Configurar la comparación de productos

Productos y SKUs

Este tutorial solo es válido para tiendas CMS Portal Legado.

La comparación de productos es una función nativa de VTEX que permite mostrar en paralelo los detalles y especificaciones de productos previamente seleccionados, lo que permite al usuario comparar los productos de la tienda de forma sencilla y visualizar fácilmente las diferencias entre sus especificaciones.

La configuración debe realizarse en dos pasos:

Página de comparación: lugar en que el usuario visualiza la comparación de los productos seleccionados en la vitrina.
Vitrina: lugar en que el usuario selecciona los productos para comparar.

La comparación de productos no funciona en la página de inicio de la tienda.

Instrucciones

Sigue los pasos a continuación para configurar la comparación de productos en tu tienda.

Página de comparación

Crea una plantilla de estantería de productos para estandarizar la visualización de productos en la página de comparación. En la plantilla, puedes utilizar cualquiera de los controles disponibles para estanterías de productos.
Crea una plantilla de página utilizando el control <vtex.cmc:ProductComparison/>, que se utiliza para mostrar los productos en paralelo en la página de comparación. Ejemplo de uso del control:


<vtex.cmc:ProductComparison ShelfLayoutId="12343216-4c8e-4cd5-bcd7-e3b062681f2a"/>

Donde ShelfLayoutId es elId de la plantilla de estantería de productos creada en el paso anterior.

Crea una carpeta para la página de comparación:

En el Admin VTEX, accede a Storefront > Layout
En la columna de la izquierda, haz clic en CMS > Sites and channels > {nombre del sitio web} > / > new folder. Sustituye {nombre del sitio web} con el nombre que se aplique a tu caso.
En el campo Folder Name, asigna un nombre a la carpeta y haz clic en OK.
Haz clic en Save Folder.

${"base64":" ","img":{"width":1296,"height":567,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1045814,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/productos-y-skus/configurando-a-comparacao-de-produtos_1.gif"}}$

Crea un layout predeterminado:

Abre la carpeta creada en el paso anterior.
Haz clic en new layout.
En el campo Template, vincula la plantilla de página creada en el paso 2 a la carpeta. Más información en Asociar un template con un layout.
Haz clic en Save Layout y después en OK.

${"base64":" ","img":{"width":1296,"height":567,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":760519,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/productos-y-skus/configurando-a-comparacao-de-produtos_2.gif"}}$

Vitrina

Para que los productos se muestren con la opción de comparación (casilla), asigna el control $product.Comparea las plantillas de estantería de productos que deseas incluir en este recurso. Este control mostrará una casilla para que el usuario pueda escoger los productos que desea comparar. Además, el control mostrará el link Comparar en el header y footer de la lista de productos. El usuario utilizará este link después de la selección y se le redirigirá a la página de comparación.

Solo se pueden comparar 4 productos a la vez.