Menu
Feedback
Comece aqui
Tutoriais
Portal do desenvolvedor

Problemas conhecidos
Diretivas de suporte
Troubleshooting

Perguntas frequentes
Comunicados
Tutoriais
Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Storefront
Layout
Controle de destaque de coleção
Controle de destaque de coleção

existem duas formas de configurar coleções, por meio do CMS ou utilizando o módulo de Coleções Beta. Este artigo, refere-se à configuração de coleções por meio do Portal CMS Legado..

O controle <vtex.cmc:HightLight/> (para páginas de produto) ou $product.HightLight (para prateleiras) renderiza um elemento HTML com uma classe específica no contexto dos produtos que fizerem parte de uma coleção marcada com a flag Highlight.

Em primeiro lugar, vamos ver onde se encontra a flag Highlight:

  1. Accesse Storefront > Layout no Admin.
  2. Clique na pasta CMS e depois na pasta Product Clusters (Collections).
  3. Clique em uma coleção.
  4. Marque a flag Highlight, que fica na tela da coleção, e clique em Save Product Cluster.

{"base64":"  ","img":{"width":1556,"height":469,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":33955,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/controle-de-destaque-de-colecao_1.png"}}

Ao marcar a flag, você informa ao sistema que sempre que o controle de destaque for usado no template de uma página, os produtos exibidos nessa página que fizerem parte da coleção em questão devem aparecer com o elemento HTML abaixo, onde no lugar de {nomeDaColecao} aparece o nome da coleção cadastrada no CMS:

<p class="flag {nomeDaColecao}">{nomeDaColecao}</p>

Você pode, então, customizar o CSS para definir de que maneira a classe flag {nomeDaColecao} afetará a exibição dos produtos.

Este recurso pode ser usado, por exemplo, para fazer com que os produtos de uma coleção chamada "Lançamento" apareçam sempre com uma flag destacando que eles são novidade na loja. Ao adicionar o controle no template da página de categoria, por exemplo, todo produto da coleção Lançamento exibido em uma página de categoria aparecerá com esse destaque.

Lembre-se que, se a página for de produto, o controle que deve ser usado é o &lt;vtex.cmc:HightLight/&gt;. Já se for uma página de vitrine, você deve usar o $product.HightLight.

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback