Comportamiento

La personalización del comportamiento del widget de Naiz Fit SizeForm se realiza mediante la sobrecarga de métodos específicos de la clase JavaScript expuesta por la librería NaizJS cargada por el código proporcionado por Naiz Fit.

La sobrecarga de estos métodos se puede especificar en el fichero indicado por la configuración del dominio "custom/script" (de ahora en adelante lo llamaremos "script" o "script.js")

Para sobrecargar un método actuaremos sobre el prototipo de la clase "SizeForm" de la librería "naizjs" que se carga automáticamente en el contexto "window"

// script.js
// Ejemplo de sobrecarga del método 'debugEnabled'
window.naizjs.SizeForm.prototype.debugEnabled = function() { 
  return true; 
}

Existe la posibilidad de sobreescribir estos métodos pero conservar su funcionalidad, de forma que podamos añadir funcionalidad en vez de sobreescribirla. Para ello sobreescribimos el método de forma normal y añadimos una llamada en su interior al método por defecto mediante la clase naizjs.Defaults del contexto window.

// script.js
//Ejemplo: Añadimos al método 'postRender' una alerta.
window.naizjs.SizeForm.prototype.postRender = function () {
  // Llamada al método por defecto. Utilizamos el método 'call' para indicar la instancia actual como contexto del método.
  window.naizjs.Defaults.prototype.postRender.call(this);
  // Código añadido
  console.log("POST POST RENDER")
}

A continuación se especifican los métodos que se pueden sobrecargar y la utilidad de cada uno.

checkOrderPage()

Comprueba si la página actual es una página de confirmación de pedido y si se debe enviar la información extraida por el método 'extractOrderData' al sevidor de Naiz Fit.

Salida

  • [Bolean] true si la página es una página de confirmación de pedido, false en caso contrario.
// script.js
// Ejemplo: Devolvemos true si la página tiene un elemento con el identificador 'order_checked'
window.naizjs.SizeForm.prototype.checkOrderPage = function() { 
  var el = document.querySelector('#order_checked')
  if (!el) return false;
  return true; 
}

Salida por defecto

Comprueba si la URL de la ´pagina responde a la expresión regular definida en la configuración del dominio a través del atributo 'order_regex'.

debugEnabled()

Permite especificar si se debe activar o no el modo depuración, activándolo podremos ver información de depuración en la consola de depuración del navegador.

Salida

  • [Boolean] true para activar el modo depuracion, false para desactivarlo

Salida por defecto

  • [Boolean] false modo depuración desactivado
// script.js
// Ejemplo de activación del modo de depuración
window.naizjs.SizeForm.prototype.debugEnabled = function() { 
  return true; 
}

extractConsumerData()

Extrae los datos guardados del usuario si ya ha utilizado en alguna ocasión la recomendación de talla.

Salida

  • [Promise(Object)] Promesa de un objeto con la información del usuario
        [String | null] hash Hash del usuario de Naiz Fit recibido en la recomendación de talla.
        ['MALE' | 'FEMALE'] gender Género introducido por el usuario.
        ['LOOSE' | 'NORMAL' | 'FIT'] loosening Preferencia de holgura introducida por el usuario.
        [Number] heigh Altura introducida por el usuario en centimetros.
        [Number] weight Peso introducida por el usuario en kilogramos.
        [Number] birthYear Año de nacimiento introducido por el usuario.
// script.js
// Ejemplo: Extraemos los datos de usuario del almacenamiento del navegador.
window.naizjs.SizeForm.prototype.extractConsumerData = function() {
  var hash = localStorage.getItem('consumer-hash')
  var gender = localStorage.getItem('consumer-gender')
  var loosening = localStorage.getItem('consumer-loosening')
  var height = localStorage.getItem('consumer-height')
  var weight = localStorage.getItem('consumer-weight')
  var birthYear = localStorage.getItem('consumer-birthYear')
  return {
    hash: hash,
    gender: gender,
    loosening: loosening,
    height: height,
    weight: weight,
    birthYear: birthYear
  };
}

Salida por defecto

Extrae los datos almacenados en el almacenamiento local del navegador para el dominio 'backend.production.naiz.fit'.

Important

De forma ideal este método y el método 'setConsumerData' deben utilizar el mismo espacio de almacenamiento para almacenar y extraer la información de usuario.

extractFormData()

Extra los datos introducidos por el usuario en el formulario para ser enviados al servidor de Naiz Fit

Salida

  • [Object] Objeto con la información del usuario
        ['MALE' | 'FEMALE'] gender Género introducido por el usuario.
        ['LOOSE' | 'NORMAL' | 'FIT'] loosening Preferencia de holgura introducida por el usuario.
        [Number] heigh Altura introducida por el usuario en centimetros.
        [Number] weight Peso introducida por el usuario en kilogramos.
        [Number] birthYear Año de nacimiento introducido por el usuario.
// script.js
// Ejemplo: Extrae la información del formulario con la clase 'naiz-form'
window.naizjs.SizeForm.prototype.extractFormData = function() {
  var gender = document.querySelector('form.naiz-form input#gender').value();
  var height = document.querySelector('form.naiz-form input#height').value();
  var weight = document.querySelector('form.naiz-form input#weight').value();
  var loosening = document.querySelector('form.naiz-form input#loosening').value();
  var birthYear = document.querySelector('form.naiz-form input#birthYear').value();
  return {
    gender: gender,
    height: height,
    weight: weight,
    loosening: loosening,
    birthYear: birthYear
  };
}

Salida por defecto

Extrae los datos del formulario por defecto con clase 'naiz-form' y los campos con el atributo 'name' indicado para cada valor.

extractImageSrc()

Permite sobreescribir el atributo 'src' de la imagen de producto que aparece en el formulario por defecto.

Salida

  • [String] URL de la imagen que se debe sobreescribir.
// script.js
// Ejemplo: Extrae la URL del primer elmento 'img' dentro del primer elemento con clase 'carousel' de la página
window.naizjs.SizeForm.prototype.extractImageSrc = function() {
  return document.querySelector('.carousel img').src;
}

extractLanguage()

Extrae el código de lenguage que se debe emplear en el widget.

Salida

  • [Object] Objeto con el atributo 'lang'
        ['es' | 'de' | 'it' | 'en'] lang Código de lenguage a emplear
// script.js
// Ejemplo: Devuelve el lenguage extraido del lenguage del navegador
window.naizjs.SizeForm.prototype.extractLanguage = function() {
  var userLang = navigator.language || navigator.userLanguage;
  var lang = userLang.split("-")[0].toLowerCase();
}

Salida por defecto

Extrae el lenguage del navegador o 'es' en su defecto.

extractOrderData()

Extrae la información de pedido de la página de confirmación de pedidos para ser enviada al servidor de Naiz Fit para el registro del pedido.

Salida

  • [Object] Objeto con los datos del pedido
        [String] order_value Valor del pedido.
        [String] order_number Referencia del pedido.
        [Object] order_data Objeto con información adicional acerca del pedido.
// script.js
// Ejemplo: Cogemos la información de pedido de algunos elementos de la página.
window.naizjs.SizeForm.prototype.extractOrderData = function() {
  var value = document.querySelector('#order_value').innerText;
  var number = document.querySelector('#order_number').innerText;
  var products = document.querySelectorAll('.product');
  var products_data = [];
  for (var i = 0; i < products.length; i++) {
    products_data.push(products[i].querySelector('.identifier').innerText);
  }
  return {
    order_value: value,
    order_number: number,
    order_data: {
      products: products_data
    }
  };
}

Note

Esta información solo se extra en el caso en el que la página se identifique como página de confirmación de pedido mediante el método 'checkOrderPage'.

extractProductReference()

Extrae la información de identificación del producto de la página para que pueda ser identificado en el servidor de Naiz Fit.

Salida

  • [Object] Objeto con el atributo 'reference'
        [Object] reference Objeto con la información necesaria para la identificación del producto.
            [String] code Código identificativo del producto.
            [String] brand Nombre de la marca del producto.
            [HTMLElement] el Código identificativo del producto.
// script.js
// Ejemplo:
window.naizjs.SizeForm.prototype.extractProductReference = function() {
  // Empleamos el método estático suministrado por la librearía Commodities de naizjs para extraer la referencia
  // de un tag con los attributos 'data-naiz-reference' (para el 'code') y 'data-naiz-brand' (para el nombre de la marca)
  const reference = window.naizjs.Commodities.productReferenceFromTags()
  if (!reference) return null
  return { 
    reference: { 
      code: reference.code,
      brand: reference.brand
      el: reference.el
    } 
  };
}

Salida por defecto

En el modo 'DEMO' se utilizarán los idenificadores del producto de demostración.

En el modo 'SELECTOR' se extraerá el código y marca del primer elemento de la página con los attributos 'data-naiz-reference' (para el 'code') y 'data-naiz-brand'(para el nombre de marca)

extractUrls()

Extrae un listado de URLs que permiten identificar el producto en los sistemas de Naiz Fit

Salida

  • [Object] Objeto con el atributo 'urls'
        [String[]] urls Lista de URLs
// script.js
// Ejemplo: Devuelve la URL del navegador y la URL canonica
window.naizjs.SizeForm.prototype.extractUrls = async function() {
  var url = window.location.protocol + "//" + window.location.hostname + window.location.pathname;
  var canonical = document.querySelector("link[rel='canonical']");
  var urls = []
  if (url) urls.push(url);
  if (canonical) urls.push(canonical.href)
  return {urls: urls};
}

Salida por defecto

Extrae la URL actual del navegador, la URL canonica si existe y cualquier URL alternativa definida en la página mediante un tag 'link' con el atributo 'rel'='alternate'.

getCustomTemplateData()

Permite añadir variables de datos que sobreescriban o añadan a los datos de entrada de la plantilla.

Salida

  • [Object] Objeto de datos que podrá emplearse como expresiones dentro de la plantilla. En caso de coincidir con alguno de los datos de entrada de la plantilla, estos serán sobreescritos por estos valores.
// script.js
// Ejemplo: 
// Sobreescribe los colores 'GradientStart' y GradientEnd' y añade el color nuevo 'FormBckgnd'.
// Añade una variable nueva con una dirección de correo para el pie del formulario
window.naizjs.SizeForm.prototype.getCustomTemplateData = function() { 
  return {
    colors: {
      GradientStart: '#d88',
      GradientEnd: '#a66',
      FormBckgnd: 'rgb(240,240,240)'
    },
    footerEmail: 'correo@dominio.com'
  }
}

postRender()

Permite ejecutar acciones después de la renderización del formulario en el componente objetivo.

// script.js
// Ejemplo: Añadir a la funcionalidad por defecto una alerta
window.naizjs.SizeForm.prototype.postRender = function() { 
  window.naizjs.Defaults.prototype.postRender.call(this);
  alert("Recuerda que puedes consultar tu talla con nuestro recomendador");
}

Salida por defecto

Añade toda la funcionalidad específica del formulario por defecto, como la transición de paneles o la opción de cambiar las meétricas

preRender()

Permite ejecutar acciones antes de que el formulario sea renderizado en el componente objetivo.

// script.js
// Ejemplo: Eliminación de la guia de tallas actual
window.naizjs.SizeForm.prototype.preRender = function() { 
  var guia = document.querySelector('.guiaTallas');
  guia.parentElement.removeChild(guia);
}

purchaseHandler()

Si se define este método se mostrará un botón de añadir al carrito el producto recomendado en la talla recomendada que ejecutará este método al hacer click en el.

// script.js
// Ejemplo:
// Ejecuta el método 'selectSize' para seleccionar la talla recomendada
// Hace 'click' en el botón de compra de la página de producto
// Cierra el formulario llamando al método 'closeSizeForm'
window.naizjs.SizeForm.prototype.purchaseHandler = function () {
  this.selectSize();
  document.querySelector(".product-info-wrap .purchase-details .add_to_cart").click();
  this.closeSizeForm();
}

selectSize(size)

Si está definido permite seleccionar automáticamente la talla recomendada en la página de producto al recibir una recomendación.

Entrada

  • [string] size Nombre de la talla recomendada
// script.js
// Ejemplo: Encuentra el elemento dentro de la página que corresponde a la talla recomendada y hace click en él.
window.naizjs.SizeForm.prototype.selectSize = function (size) {
  var size_input = document.querySelector(".product-info input[value='" + size + "']");
  if (size_input) size_input.click()
}

setConsumerData(hash, gender, loosening, height, weight, birthYear)

Almacena la información del usuario una vez a recibido una recomendación de talla.

Entrada

  • [String | null] hash Hash del usuario de Naiz Fit recibido en la recomendación de talla.
  • ['MALE' | 'FEMALE'] gender Género introducido por el usuario.
  • ['LOOSE' | 'NORMAL' | 'FIT'] loosening Preferencia de holgura introducida por el usuario.
  • [Number] heigh Altura introducida por el usuario en centimetros.
  • [Number] weight Peso introducida por el usuario en kilogramos.
  • [Number] birthYear Año de nacimiento introducido por el usuario.
// script.js
// Ejemplo: Almacenamos la información de usuario en el almacanamiento local del navegador.
window.naizjs.SizeForm.prototype.setConsumerData = function (hash, gender, loosening, height, weight, birthYear) {
  return new Promise(function (resolve, reject) {
    localStorage.setItem('consumer_hash', hash);
    localStorage.setItem('consumer_gender', gender);
    localStorage.setItem('consumer_loosening', loosening);
    localStorage.setItem('consumer_height', height);
    localStorage.setItem('consumer_weight', weight);
    localStorage.setItem('consumer_birthYear', birthYear);
    resolve(hash, gender, loosening, height, weight, birthYear);
  });
}

Salida

  • [Promise] Devuelve una promesa con los datos almacenados.

Salida por defecto

Almacena la información del usuario en el almacanamiento local del navegador para el dominio 'backend.production.naiz.fit'.