Índice
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.
Fuente: MDN web docs
Demo
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
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
Próximos pasos
- Hacer esta librería compatible con navegadores obsoletos. Referencia: Backwards compatible window.postMessage().