Behaviour

The personalization of the behaviour of the Naiz Fit SizeForm widget is done by overriding specific methods of JavaScript class exposed by the NaizJS library loaded by tehe code provided by Naiz Fit.

The overriding of these methods can be specific in the file determined by the domain configuration "custom/script" (from now on, we will refer to it as "script" or "script.js")

In order to override a method we will act on the class prototype "SizeForm" contained in the "naizjs" library that will be automatically loaded in the context "window".

// script.js
// Example: Method overload 'debugEnabled'
window.naizjs.SizeForm.prototype.debugEnabled = function() { 
  return true; 
}

You can override these methods and still keep their functionality, so that you can add functionality instead of override it. To do so, you will have to override the method as usual and add a call indise it to the default method using the class naizjs.Defaults from the window context.

// script.js
//Example: Adding an alter to the 'postRender' method.
window.naizjs.SizeForm.prototype.postRender = function () {
  // Call to the default method. We use the 'call' method to indicate the existing instance as a context for the method. 
  window.naizjs.Defaults.prototype.postRender.call(this);
  // Código añadido
  console.log("POST POST RENDER")
}

Now you will find the methods that can be overriden and the utility of each one.

checkOrderPage()

It checks if the existing page is a purchase confirmation page and if the information extracted has to be sent using the method 'extractOrderData' to the Naiz Fit server.

Output

  • [Bolean] true if the page is a purchase confirmation page, false if it is not.
// script.js
// Example: Returns true if the page has an element with the'order_checked' identifier.
window.naizjs.SizeForm.prototype.checkOrderPage = function() { 
  var el = document.querySelector('#order_checked')
  if (!el) return false;
  return true; 
}

Default output

Checks if the page URL responds to the regular expression defined in the domain configuration through the 'order_regex' attribute.

debugEnabled()

It allows to specify if the debug mode has to be enabled or not. By enabling it, we can see the debug information in the browser debug console.

Output

  • [Boolean] true to enable the debug mode, false to disable it.

Default Output

  • [Boolean] false modo depuración desactivado
// script.js
// Example: Enabling the debug mode.
window.naizjs.SizeForm.prototype.debugEnabled = function() { 
  return true; 
}

extractConsumerData()

It extracts the user data if he has already used the size recommendation tool.

Output

  • [Promise(Object)] Object promise with the user information.
        [String | null] hash Naiz Fit user hash received in the size recommendation.
        ['MALE' | 'FEMALE'] gender Gender entered by user.
        ['LOOSE' | 'NORMAL' | 'FIT'] loosening Loosening preference entered by the user.
        [Number] heigh Height entered by the user in centimetres.
        [Number] weight Weight entered by the user in kilograms.
        [Number] birthYear Year of birth entered by the user.
// script.js
// Example: Extracting user information from the browser storage.
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
  };
}

Default Output

It extracts the data stored in the browser local storage for the 'backend.production.naiz.fit' domain.

Important

Ideally, this method and the 'setConsumerData' method should use the same storage space to store and extract the user information.

extractFormData()

Extracts the data entered by the user in the form in order to send them to the Naiz Fit server.

Output

  • [Object] Object with the user information
        ['MALE' | 'FEMALE'] gender Gender entered by the user.
        ['LOOSE' | 'NORMAL' | 'FIT'] loosening Loosening preference entered by the user.
        [Number] heigh Height entered by the user in centimetres.
        [Number] weight Weight entered by the user in kilograms.
        [Number] birthYear Year of birth entered by the user.
// script.js
// Example: Extract the information from the form with the 'naiz-form' class.
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
  };
}

Default Output

Extracts the default form values with the 'naiz-form' class and the fields with the 'name' attribute indicated for every value.

extractImageSrc()

It allows to averride the 'src' attribute form the product image that appears in the default form.

Output

  • [String] Image URL that has to be overridden.
// script.js
// Example: Extract the URL from the first element 'img' inside the first element with 'carousel' class from the page
window.naizjs.SizeForm.prototype.extractImageSrc = function() {
  return document.querySelector('.carousel img').src;
}

extractLanguage()

Extract the code of the language that has to be used in the widget.

Output

  • [Object] Object with the 'lang' attribute
        ['es' | 'de' | 'it' | 'en'] lang Code of the language to be used.
// script.js
// Example: Returns the language extracted from the browser language.
window.naizjs.SizeForm.prototype.extractLanguage = function() {
  var userLang = navigator.language || navigator.userLanguage;
  var lang = userLang.split("-")[0].toLowerCase();
}

Default Output

Extracts the user's browser language or 'es' by default.

extractOrderData()

Extracts the order information from the purchase confirmation page so that it can be sent to the Naiz Fit server to register the order.

Output

  • [Object] Object with the order information
        [String] order_value Order value.
        [String] order_number Order number or reference.
        [Object] order_data Object with additional information regarding the order.
// script.js
// Example: We get the order inforamtion from some of the page elements.
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

This information is only extracted if the page is identified as a purchase confirmation page by the 'checkOrderPage' method.

extractProductReference()

Extracts the information of the product identification from the page so that it can be identified in the Naiz Fit server.

Output

  • [Object] Object with the 'reference' attribute.
        [Object] reference Object with the necessary information to identify the product.
            [String] code Product identification code.
            [String] brand Product brand name.
            [HTMLElement] el DOM element that contains the product information.
// script.js
// Example:
window.naizjs.SizeForm.prototype.extractProductReference = function() {
  // We use the static method supplied by the Commodities library of 'naizjs' to extract the reference
  // of a tag with the 'data-naiz-reference' (for the 'code') and 'data-naiz-brand' (for the brand name) attributes.
  const reference = window.naizjs.Commodities.productReferenceFromTags()
  if (!reference) return null
  return { 
    reference: { 
      code: reference.code,
      brand: reference.brand
      el: reference.el
    } 
  };
}

Default Output

In the 'DEMO' mode, the identifiers of the demonstration product will be used.

In the 'SELECTOR' mode, you will extract the code and the brand of the first element of the page with the 'data-naiz-reference' (for the 'code') and 'data-naiz-brand'(for the brand) attributes.

extractUrls()

Extracts de URL list that allow us to identify the product in the Naiz Fit systems.

Output

  • [Object] Object with the 'urls' attribute
        [String[]] urls URL list.
// script.js
// Example: Returns the browser URL and the canonical URL.
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};
}

Default Output

Extracts the existing browser URL, the canonical URL if it exists and any alternative URL defined in the page by 'link' tag with the 'rel'='alternate' attribute.

getCustomTemplateData()

Allows you to add data variables that can override or be added to the template input data.

Output

  • [Object] Data object that can be used as expressions inside the template. In case it matches with any of the template input data, they will be overridden by these values.
// script.js
// Example: 
// Overrides the 'GradientStart' colours and 'GradientEnd' and adds the new  'FormBckgnd' colour.
// Adds a new variable with an email address for the footer of the form
window.naizjs.SizeForm.prototype.getCustomTemplateData = function() { 
  return {
    colors: {
      GradientStart: '#d88',
      GradientEnd: '#a66',
      FormBckgnd: 'rgb(240,240,240)'
    },
    footerEmail: 'correo@dominio.com'
  }
}

postRender()

Allows to execute actions after the form render in the desired component.

// script.js
// Example: Add an alert to the default functionality
window.naizjs.SizeForm.prototype.postRender = function() { 
  window.naizjs.Defaults.prototype.postRender.call(this);
  alert("Recuerda que puedes consultar tu talla con nuestro recomendador");
}

Default Output

Adds all the specific functionality to the default form, such as the panel transitiion or the option to change the metrics system.

preRender()

Allows to execute actions in the desired component before the form is rendered.

// script.js
// Example: Eliminate the existing size guide
window.naizjs.SizeForm.prototype.preRender = function() { 
  var guia = document.querySelector('.guiaTallas');
  guia.parentElement.removeChild(guia);
}

purchaseHandler()

If this method is defined, an 'add to basket' button will be shown to add the product with the recommended size to the cart. This action will take place if the user clicks the button.

// script.js
// Example:
// EExecutes the 'selectSize' method to select the recommended size.
// 'Clicks' the add to cart button located in the product page
// Closes the form by calling the 'closeSizeForm' method
window.naizjs.SizeForm.prototype.purchaseHandler = function () {
  this.selectSize();
  document.querySelector(".product-info-wrap .purchase-details .add_to_cart").click();
  this.closeSizeForm();
}

selectSize(size)

If defined, it allows to automatically select the recommended size in the pdocut page after receiving a size recommendation.

Input

  • [string] size Name of the recommended size
// script.js
// Example: Looks for the element inside the page that corresponds to the recommended size and clicks on it.
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)

Stores the user information once he has received a size recommendation.

Input

  • [String | null] hash Naiz Fit user hash received in the size recommendation.
  • ['MALE' | 'FEMALE'] gender Gender entered by the user.
  • ['LOOSE' | 'NORMAL' | 'FIT'] loosening Loosening entered by the user.
  • [Number] heigh Height entered by the user in centimetres.
  • [Number] weight Weight enetered by the user in kilograms.
  • [Number] birthYear Year of birth enetered by the user.
// script.js
// Example: We store the user information in the browser local storage.
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);
  });
}

Output

  • [Promise] Returns a promise with the stored information.

Default Output

Stores the user information in the browser local storage for the 'backend.production.naiz.fit' domain.