Interfaz de usuario
La personalización de la interfaz de usuario del widget de Naiz Fit SizeForm se realiza mediante el fichero especificado en la configuración del dominio "custom/html" (de ahora en adelante lo llamaremos "plantilla" o "plantilla.hbs").
Sistema de plantillas
El formulario emplea Handlebars como sistema de plantillas para renderizar el widget de Naiz Fit SizeForm.
Se añaden como herramientas a este sistema de plantillas el módulo handlebars-layouts que nos permite personalizar las plantilla por defecto actuando sobre elementos concretos de la misma.
Datos de entrada de la plantilla
En el momento del renderizado la plantilla recibe los siguientes parametros de entrada, lo cuales podemos emplear como expresiones de Handlebars
| Nombre | Descripción |
|---|---|
| lang | Objeto compuesto por las cadenas de texto necesarios por el formulario en el idioma requerido mediante la función sobreescribible "extractLanguage" |
| sizechart | Objeto con los datos de la guía de tallas del producto |
| sizechart.dimensions | Listado de las dimensiones 2D y 3D del producto |
| sizechart.sizes | Objeto con la información de medidas 2D y 3D del producto |
| sizechart.svg | SVG de la prenda |
| data.assets.svg.body | SVG del cuerpo |
| consumerData | Datos del usuario |
| years | Listado de años para el selector de edad |
| isMobile | Ayudante para detectar si se está visualizando la página en un dispositivo móvil. {{#if isMobile}} Es un dispositivo móvil {{/if}} |
| colors | Objeto con la definición de colores |
| product | Objeto con los datos generales del producto |
Estos parametros son completados o sobreescritos mediante el método getCustomTemplateData()
Se puede ver un ejemplo de datos de entrada completo aquí
Lanzador del formulario
El botón que lanza el formulario del widget puede ser personlizado extendiendo el ayudante de handlebars "Opener", mediante el bloque "opener".
<!-- Contenido por defecto del bloque "opener" dentro del ayudante "Opener" -->
<div>{{lang.find_your_size}}</div>
Si quisieramos reemplazar este contenido por uno propio, podríamos intrducir el siguiente código en nuestra plantilla:
<!-- plantilla.hbs -->
{{#extend "Opener"}}
{{#content "opener"}}
<button class="miclase">Encuentra tu talla</button>
{{/content}}
{{/extend}}
Mediante "#extend" indicamos que estamos tomando como referencia el ayudante "Opener". Mediante "#content" indicamos que queremos sustituir el contenido del bloque "opener"
Formulario
El formulario del widget puede ser personalizado extendiendo el ayudante de handlebars "SizeForm". Este ayudante expone diferentes bloques que permiten personalizar cada una de las partes del formulario de forma independiente:
style: Permite personalizar el estilo CSS del formulario.
form: Ventana del Sizeform.
└─form-body: Cuerpo del Sizeform
├─image-wrapper: Apartado de imagenes
├─divider: Divisor entre apartados
└─form-wrapper: Apartado de información
├─form-data: Formulario de datos
│ ├─form-data-title: Título del formulario
│ ├─form-data-body: Cuerpo del formulario
│ └─form-data-footer: Pie del formulario
├─form-sizechart: Guía de tallas
│ ├─form-sizechart-title: Título de la guía de tallas
│ ├─form-sizechart-body: Cuerpo de la guía de tallas
│ │ ├─form-sizechart-selector: Selector de cuerpo-prenda
│ │ ├─form-sizechart-charts: Tablas de medidas
│ │ ├─form-sizechart-actions: Botones inferiores
│ ├─form-sizechart-footer: Pie de la guía de tallas
├─form-recommendation-loading: Mensaje de carga
└─form-recommendation: Recomendación de talla
├─form-recommendation-title: Título de la recomendación
├─form-recommendation-body: Cuerpo de la recomendación
│ ├─form-recommendation-options: Selector de datos cuerpo-prenda
│ ├─form-recommendation-actions: Botones inferiores
└─form-recommendation-footer: Pie de la recomendación
Cada uno de estos bloques se puede personalizar de dos maneras:
- Por defecto reemplazaremos todo el contenido del bloque especificado mediante
#content - Podemos añadir contenido al final del bloque añadiendo el atributo
mode=appendal#content
# plantilla.hbs
# En este ejemplo añadimos una clase a la hoja de estilos del formulario
# y reemplazamos el contenido del título del formulario para añadirle esa nueva clase.
# Usamos los datos de 'lang' pra el contenido del título.
{{#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}}
En este enlace puede encontrar la plantilla por defecto del formulario para que pueda ser usada como implementación de referencia así como para poder visualizar los contenidos por defecto de cada uno de los bloques.