Atención: existen dos formas de configurar colecciones, mediante el CMS o utilizando el módulo Colecciones Beta. Este artículo se refiere a la configuración de colecciones mediante el Portal CMS Legado.
El control <vtex.cmc:HightLight/> (para páginas de producto) o $product.HightLight (para estantes) renderiza un elemento HTML con una clase específica en el contexto de los productos que forman parte de una colección marcada con la flag Highlight.
En primer lugar, vamos a ver dónde se encuentra la flag Highlight:
- En el Admin VTEX, accede a Storefront > Layout.
- Haga clic en la carpeta CMS y luego en la carpeta Product Clusters (Collections).
- Haga clic en una colección.
- Marque la flag Highlight, que se encuentra en la pantalla de la colección, y haga clic en Save Product Cluster.
Al marcar la flag, usted informa al sistema que siempre que el control de destaque se utilice en el template de una página, los productos mostrados en esa página que formen parte de la colección deben aparecer con el elemento HTML abajo, donde en lugar de {nombreDeLaColeccion} aparece el nombre de la colección registrada en el CMS:
<p class="flag {nombreDeLaColeccion}">{nombreDeLaColeccion}
Usted puede, entonces, personalizar el CSS para definir de qué manera la clase flag {nombreDeLaColeccion} afectará la visualización de los productos.
Esta feature se puede utilizar, por ejemplo, para hacer que los productos de una colección llamada "Lanzamiento" aparezcan siempre con una flag que señala que son novedad en la tienda. Al agregar el control en el template de la página de categoría, por ejemplo, todos los productos de la colección Lanzamiento que aparecen en una página de categoría se mostrarán con este destaque.
Recuerde que si la página es de producto, el control que se debe utilizar es el
<vtex.cmc:HightLight/>. Si es una página de vitrina, usted debe utilizar el$product.HightLight.