Product Configurator

By Motion Displays

Índice

  1. Visión general
  2. Instalación
  3. Uso
  4. ¿Cómo funciona?
  5. Compatibilidad
  6. Demo
  7. Opciones
  8. Propiedades
  9. Funciones
  10. Eventos
  11. Contacto
  12. Próximos pasos

Visión general

Esta librería desarrollada para El Corte Inglés permite hacer uso de las herramientas provistas por Motion Displays para configurar los productos de categorías personalizables, como por ejemplo: sofás, poufs, etc. A continuación se describen los pasos necesarios para añadir esta funcionalidad en su sitio.

Instalación

Para activar la librería, el primer paso es importar los componentes básicos (scripts y estilos) desde nuestra red de distribución de contenido (CDN).

Scripts:

Agregar la siguiente porción de código en la sección de cabeceras de su sitio.

            
            
        

Estilos:

Agregar la siguiente porción de código en la sección de cabeceras de su sitio.

            
            
        

Otra alternativa es descargar ambos archivos e importarlos en su sitio, aunque esta opción no se recomienda debido a que deberá realizar el mismo proceso cada vez que se publique una nueva actualización.

Uso

Para activar la librería se debe crear una nueva instancia de la clase en algún punto del flujo, posterior al evento de carga, por ejemplo:

            
            
        

Si no se especifica un identificador de producto como parámetro, la librería intentará escanear el sitio para encontrarlo. Normalmente se encuentra en la dirección de cada producto, por ejemplo para la siguiente dirección:

La librería extraerá el segmento A27380579 para inicializar el plugin.

Luego del evento de carga se puede usar la función de inicialización en cualquier momento del flujo para cargar otro producto.

            
            
        

La sección con las opciones de configuración seleccionadas por el cliente son dibujadas por la librería en un contenedor con el identificador que se utilizó para inicializar la librería, en este caso sería: md-product-configurator. Este contenedor puede ubicarse en cualquier lugar del sitio.

            
            
        

Observaciones:

Se recomienda especificar el identificador del producto al inicializar la librería para evitar que ésta deje de funcionar si se llega a cambiar algún día la composición de las direcciones de su sitio.

¿Cómo funciona?

Al inicializar la librería se valida que el producto especificado sea configurable, si lo es, se activa la carga del iframe que contiene la página de configuración desarrollada por Motion Displays.

Una vez que el usuario ha terminado de configurar su producto, la página contenida envía una señal a esta librería en donde se especifican los detalles de la personalización del producto.

Con la señal ya recibida, es posible continuar el flujo de compra de la forma más conveniente para El Corte Inglés.

Compatibilidad

Esta librería hace uso de la función window.postMessage() para la comunicación cruzada entre orígenes, por lo que la compatibilidad entre navegadores queda sujeta a la de dicha función. A continuación se adjunta la siguiente imagen especificando desde qué versión es cada navegador compatible.

Browser compatibility

Fuente: MDN web docs

Demo

Buscar

Opciones

Lista de parámetros permitidos por la librería:

Nombre Tipo Descripción
id String Identificador del producto que se configurará. Si no se especifica, la librería intentará escanear el sitio en busca del él.
sku String Código de la variante preseleccionada (opcional). Sirve para diferenciar los productos en el caso en que todas las variantes tengan el mismo id.
container String Identificador del contenedor donde se dibujarán las opciones seleccionadas por el usuario. Si no se especifica, se utilizará el valor por defecto: md-product-configurator.
showOptions Boolean Define si se dibujarán las opciones seleccionadas por el cliente una vez que se termine el proceso de configuración (opcional). Por defecto el valor de esta variable es false.
callback(response) Function Función que se ejecutará cuando se complete el proceso de configuración. La función debe recibir como parámetro una variable que contendrá la respuesta del configurador con las opciones elegidas por el usuario.

Propiedades

Propiedades de una instancia de la clase:

Nombre Tipo Descripción
id String Corresponde al identificador del producto sobre el que se generó el configurador.
sku String Corresponde al código de la variante de un producto. Permite diferenciar los productos cuando todos tienen el mismo id.
container String Identificador del contenedor de las opciones de configuración escogidas por el usuario.
showOptions Boolean Variable que determina si se dibujarán o no las opciones de configuración seleccionadas por el cliente.
callback Function Función que se disparará cuando se termine el proceso de configuración del producto.
loading Boolean Indica si se ha terminado o no la carga de la solicitud que indica si el producto es configurable o no.
loadingConfigurator Boolean Indica si se ha terminado o no la carga en segundo plano del configurador del producto.
error Boolean Indica si se ha producido un error en la carga del configurador del producto.
errorMessage String Contiene el detalle del error cuando la propiedad error es true.
endpoint String Corresponde a la dirección del configurador del producto entregada por el servicio de validación. Si el producto no es configurable, esta variable tendrá el valor: undefined.
options Array Lista que contiene las selecciones realizadas por el usuario al configurar su producto.
host String Base de la dirección de la API de configuración de productos.

Funciones

Funciones de una instancia de la clase. No es necesario ejecutarlas en su sitio, la librería misma se hace cargo del control.

Nombre Parámetros Descripción
scanForProductIdentifier() Ninguno Realiza el escaneo del sitio en busca del identificador del producto y lo guarda en la propiedad id.
fetchConfigurationEndpoint(callback) callback:
Function
Valida si el producto es configurable o no, de serlo guardará la dirección del configurador en la propiedad endpoint. En caso de error, convertirá la propiedad error en true y guardará el detalle del error en la propiedad errorMessage.
drawGuide() Ninguno Dibuja el botón de configuración del producto en el contenedor con identificador guardado en la variable container.
drawOptions() Ninguno Dibuja las opciones seleccionadas por el usuario y además el botón para modificar las opciones en el contenedor con el identificador guardado en la variable: container.
setOptionsIconListener() Ninguno Evento para detectar errores en la carga de los íconos de las opciones seleccionadas. En caso de algún error en la carga, se muestra un ícono por defecto.
removeGuideAndOptions() Ninguno Elimina del sitio el contenedor con las opciones del usuario y el botón de configuración del producto.
drawConfigurator() Ninguno Añade al cuerpo del sitio el iframe con el configurador del producto.
removeConfigurator() Ninguno Elimina del sitio el iframe con el configurador del producto.
openConfigurator() Ninguno Abre el configurador del producto.
closeConfigurator() Ninguno Cierra el configurador del producto.
onConfiguratorLoad() Ninguno Evento que se dispara cuando se completa la carga del iframe con el configurador del producto. Habilita el botón de configuración que permite abrir el configurador.
onConfiguratorError() Ninguno Evento que se dispara cuando se produce un error en el flujo de la librería, la variable error se marca como true y se borran del sitio los componentes asociados para no mostrar residuos innecesarios a los usuarios.
removeConfiguratorLoader() Ninguno Elimina de la sitio el indicador de carga del iframe con el configurador del producto.
onMessageReceived(event) event:
Object
Función que se activa cuando se recibe un mensaje desde el configurador. Dispara el dibujado de las opciones seleccionadas por el usuario.
propagateSelectedProduct(message) message:
Object
Función que se encarga de preparar y enviar la respuesta con las configuraciones del producto seleccionado por el usuario.
propagateSelectedSample(message) message:
Object
Función que se encarga de preparar y enviar la respuesta con la muestra del producto seleccionado por el usuario.
init() Ninguno Función que inicia la librería, se ejecuta automáticamente al instanciar un objeto de esta clase.

Eventos

Descripción detallada de los eventos que ocurren durante el uso del configurador, se incluye la composición del mensaje para los eventos que transmiten uno.
Evento Identificador Descripción Composición
Producto configurado configured_product Se dispara una vez que el usuario ha terminado de configurar el producto. Contiene la lista de opciones seleccionadas.
                            
                        
Muestra seleccionada selected_sample Se dispara una vez que el usuario ha seleccionado la opción: Añadir muestra a la cesta. Contiene la información de la muestra.
                            
                        
Cerrar configurador close_modal Se dispara cuando se cancela la configuración del producto. Este evento cierra el configurador sin transmitir información. Ninguna

Contacto

Ante cualquier duda o nuevo requerimiento, favor comunicarse a alguno de los siguientes correos electrónicos:

Próximos pasos

Siguientes funcionalidades que deben desarrollarse:
  1. Hacer esta librería compatible con navegadores obsoletos. Referencia: Backwards compatible window.postMessage().