Integración
Integración avanzada de opciones de compra
En el capítulo anterior, se mostraba un ejemplo de cómo listar las opciones de compra que puede poseer un producto (combinaciones de atributos que generan stocks de su inventario), y cómo implementar un botón de compra para cada uno de esos stocks o combinaciones.
Sin embargo, en productos que posean varias opciones, o cuyas opciones posean muchos valores (por ejemplo un pantalón que se vende en 10 talles y 6 colores diferentes), este listado puede ser demasiado largo y poco comprensible para el usuario.
Por ello se recomienda utilizar un componente de compra inteligente, que detecte si el producto posee opciones de compra y las presente en pasos.
Los productos que posean opciones de compra, poseen en sus datos xml, dentro del nodo Item, un nodo llamado DefinitionsWithStock.
(Este nodo no está presente en los productos que no poseen opciones de compra).
Cada opción de compra está representado por un nodo Definition que posee los siguientes elementos:
@Id: Valor numérico, corresponde al ID de la opción en base de datos.
Name: Nombre de la opción.
AttributeDefinitionValues: Contiene una serie de nodos llamados AttributeDefinitionValue, uno por cada valor disponibles para la opción.
Posee los siguientes elementos:
@DefinitionType: Tipo de valor. Si el valor es 1, se trata de un valor genérico. Si es 3, de un valor de color. Si es 4, un valor de medida.
@DefinitionId: Valor numérico, corresponde al ID de la opción en base de datos.
Además posee un nodo con la descripción del valor.
Si el valor pertenece a un atributo genérico (tipo 1), el nodo descriptivo se llamará AttributeValue, con los siguientes elementos:
@Id: Valor numérico, no se utiliza.
@AttributeId: Valor numérico, ID del atributo al que pertenece la opción. No se utiliza.
@AttributeDefinitionValueId: ID de la opción. Este valor es el que debe utilizarse para identificar la opción y para realizar interacciones con otros elementos.
Text: El nombre de la opción.
Si el valor pertenece a un atributo de color (tipo 3), el nodo descriptivo se llamará Color, con los siguientes elementos:
@HexCode: Valor hexadecimal del color en formato RRGGBB (No incluye el caracter # al comienzo).
@Link: No se utiliza.
@ID: No se utiliza.
@AttributeDefinitionValueId: ID de la opción. Este valor es el que debe utilizarse para identificar la opción y para realizar interacciones con otros elementos.
Name: El nombre del color.
Si el valor pertenece a un atributo de medidas (tipo 4), el nodo descriptivo se llamará AttributeSizeValue, con los siguientes elementos:
@Id: Valor numérico, no se utiliza.
@AttributeDefinitionValueId: ID de la opción. Este valor es el que debe utilizarse para identificar la opción y para realizar interacciones con otros elementos.
Value: El valor de la opción.
Ejemplo de integración de compra por pasos
Tomando como referencia el listado de stocks del producto (xml/Item/Stocks) y las opciones de compra (xml/Item/DefinitionsWithStock), se puede generar un componente de compra interactivo, donde se presenten las opciones por pasos.
En este ejemplo, que no es el único modo de realizar dicho componente, la funcionalidad obtenida es:
a- Productos que no poseen opciones de compra
En este caso, sólo muestra el botón de compra del producto, asociado a su único stock diponible.
b- Productos que poseen sólo una opción de compra
En este caso, se muestran las opciones y el comprador debe elegir una antes de poder utilizar el botón de compra.
Si una opción no posee stock, no aparecerá en el nodo DefinitionsWithStock.
c- Productos que poseen dos opciones de compra
Se muestran el primer grupo de opciones, y al elegir un valor para ese grupo, se muestra el segundo grupo de opciones.
Al elegir un valor de este segundo grupo, se habilita el botón de compra.
d- Productos que poseen tres opciones de compra (máximo soportado por el sistema)
Se muestran el primer grupo de opciones, y al elegir un valor para ese grupo, se muestra el segundo grupo de opciones.
Al elegir un valor de este segundo grupo, se habilita el botón de compra.
IMPORTANTE: Cuando los productos poseen dos o tres opciones de compra, puede suceder que alguna de las combinaciones de opciones no posea stock en el inventario, por lo que deberá verificarse ese dato.
Por ejemplo un producto de indumentaria que posea dos colores (Rojo / Negro) y tres talles (S / M / L), puede poseer stock de Rojo S y M y Negro M y L.
En ese caso, al elegir el color Rojo en la primera opción (color), y mostrarse las segundas opciones (talle), no debería aparecer el valor (L).
Esto requiere de una función de verificación javascript del lado del cliente.
También puede suceder que determinadas combinaciones de opciones posean precios diferentes (por ejemplo, que el talle L tenga un precio superior al talle M y S).
Esto también debe verificarse a la hora de crear este componente.
Componente de compra interactiva
Este componente guarda los stocks en un array javascript, y luego renderiza en el archivo XSLT las opciones de compra y sus valores.
Sólo deja visible el primer nivel de opciones, en caso de que hubiera más de uno.
Luego mediante una función javascript, recibe al valor seleccionado para las opciones y muestra las opciones del siguiente nivel que coincidan con el primer valor, y que posean stock.
Interacción con galerías de imágenes
Como se vio en el capítulo anterior, algunos tipos de producto pueden poseer imágenes asociadas a los valores de un determinado atributo, generando así galerías múltiples.
Muchas veces, ese atributo que genera las galerías de imágenes, también es un atributo que genera opciones de compra.
Por ejemplo, Color, en un producto de indumentaria.
En este caso, puede realizarse una integración entre las opciones de compra y las galerías de fotos, haciendo que al seleccionar un valor para una opción de compra que a su vez posea galerías de imágenes asociadas, ésta se muestre automáticamente.
Volviendo al capítulo anterior, puede verse que a cada galería de fotos se le asignaron atributos data-option y data-value y correspondientes a la opción y al valor que la genera.
Estos mismos atributos se utilizan en el componente interactivo (está indicado en el código de ejemplo), por lo que es fácil realizar una función que vincule ambos datos.
