User interface

The user interface personalization for the Naiz Fit SizeForm widget can be done by the specified file in the domain configuration "custom/html" (form now on, we will refer to it as "template" o "template.hbs").

Template system

The form uses Handlebars as a template system to render the Naiz Fit SizeForm widget.

Modules are added as tools for this template system, such as handlebars-layouts, that will allow you to personalize the default template acting on specific elements of the template.

Template input data

During the render, the template receives the following input parameters, which can be used as expressions of Handlebars

Name Description
lang Object composed by the chains of text needed by the form in the required language through the overridable "extractLanguage"
  • es - Spanish
  • de - German
  • it - Italian
  • fr - French
  • en - English
sizechart Object with the sizechart data
sizechart.dimensions A list with the product's 2D and 3D dimensions
sizechart.sizes Object with the product's 2D and 3D measurements data
sizechart.svg Garment SVG
data.assets.svg.body Body SVG
consumerData User data
years Year list for the ge field
isMobile Helper to know if the page is being visited in a mobile device. {{#if isMobile}} It is a mobile device {{/if}}
colors Object with the template color definition
product Object with the general product data

This parameters will be completed or overriden by the method getCustomTemplateData()

An example of this data can be found here

Form opener

The button that opens the form's widget can be personalized extending the "Opener" handlebars helper, through the "opener" block.

<!-- Default content for the "opener" block inside the "Opener" helper -->
<div>{{lang.find_your_size}}</div>

If you want to change this content for your own content, you can do it by inserting the following code inside your template: 

<!-- template.hbs -->
{{#extend "Opener"}}
  {{#content "opener"}}
    <button class="miclase">Encuentra tu talla</button>
  {{/content}}
{{/extend}}

By using "#extend" you can determine that you are taking as a reference the "Opener" helper. By using "#content" you can determine that you want to substitute the content of the "Opener" block.

Form

The form of the widget can be personalized extending then "SizeForm" handlebars helper. This helper exposes different blocks that can be overriden or extended to personalize each part of the form individually:

style: Forms CSS stylesheet.
form: Sizeform window.
└─form-body: Sizeform body
  ├─image-wrapper: Images section
  ├─divider: Section divider between images and data
  └─form-wrapper: Data section
    ├─form-data: Data form
    │ ├─form-data-title: Form titlebar
    │ ├─form-data-body: Form body with data fields
    │ └─form-data-footer: Form footer
    ├─form-sizechart: Sizechart page
    │ ├─form-sizechart-title: Sizechart titlebar
    │ ├─form-sizechart-body: Sizechart body
    │ │ ├─form-sizechart-selector: Body-Garment selector
    │ │ ├─form-sizechart-charts: Measurements tables
    │ │ ├─form-sizechart-actions: Bottom buttons
    │ ├─form-sizechart-footer: Sizechart footer
    ├─form-recommendation-loading: Loading message
    └─form-recommendation: Recommendation page
      ├─form-recommendation-title: Recommendation titlebar
      ├─form-recommendation-body: Recommendation body with size and charts
      │ ├─form-recommendation-options: Body-Garment selector
      │ ├─form-recommendation-actions: Bottom buttons
      └─form-recommendation-footer: Recommendation footer

Each of this blocks can be personalized in two ways:

  • By default the content of the block is overriden by the defined #content
  • We can also append the desired content by using the mode=append attribute in th #content
# template.hbs
# In this example we add a CSS class to the stylesheet
# and replace the content of the forms data title block for adding that new class
# We use the lang data for the title string
{{#extend "SizeForm"}}
  {{#content "style" mode="append"}}
    .my-title {
      color: red;
      font-size: 1.2em;
    }
  {{/content}}
  {{#content "form-data-title"}}
    <div class="naiz-form-title my-title">{{{lang.create_profile}}}</div>
  {{/content}}  
{{/extend}}

Here you can find the default handlebars template for the form as a reference of the default content of all the blocks.