Configurar a comparação de produtos

2 min de leitura

Tutorial válido apenas para lojas CMS Portal Legado.

A comparação de produtos é um recurso nativo da VTEX que permite exibir, lado a lado, detalhes e especificações de produtos previamente selecionados, possibilitando que o usuário compare os produtos da loja de forma simples e visualize facilmente as diferenças entre suas especificações.

A configuração deve ser realizada em dois momentos:

Página de comparação: onde o usuário visualizará a comparação dos produtos selecionados na vitrine.
Vitrine: onde o usuário selecionará os produtos a serem comparados.

A comparação de produtos não funciona na página inicial da loja.

Instruções

Siga os passos a seguir para configurar a comparação de produtos em sua loja.

Página de comparação

Crie um template de prateleira para padronizar a exibição dos produtos na página de comparação. Nesse template, você pode utilizar qualquer um dos controles disponíveis para prateleiras.
Crie um template de página utilizando o controle <vtex.cmc:ProductComparison/>, que é o responsável pela exibição dos produtos, lado a lado na página de comparação. Exemplo de uso do controle:


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

onde ShelfLayoutId é Id do template de prateleira criado na etapa anterior.

Crie uma pasta para a página de comparação:

No Admin VTEX, acesse Storefront > Layout
Na coluna ao lado, clique em CMS > Sites and channels > {nome do website} > / > New folder. Substituia {nome do website} de acordo com seu cenário.
No campo Folder Name, atribua um nome para a pasta e clique em OK.
Clique em Save Folder.

${"base64":" ","img":{"width":1296,"height":567,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1117304,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/cat%C3%A1logo/produtos-e-skus/configurando-a-comparacao-de-produtos_1.gif"}}$

Crie um layout padrão:

Abra a pasta criada no item anterior.
Clique em new layout.
No campo Template, vincule o template de página criado no passo 2 à pasta. Saiba mais em Associando um template a um layout.
Clique em Save Layout e, em seguida, em OK.

${"base64":" ","img":{"width":1296,"height":567,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":715215,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/cat%C3%A1logo/produtos-e-skus/configurando-a-comparacao-de-produtos_2.gif"}}$

Vitrine

Para que os produtos sejam exibidos com a opção de comparação (checkbox), atribua o controle $product.Compare nos templates de prateleira que você deseja incluir esse recurso. Esse controle renderizará um checkbox para que o usuário possa escolher os produtos para comparar. Além disso, o controle disponibilizará no header e no footer da listagem de produtos o link Comparar, que será utilizado pelo usuário após a seleção e o redirecionará para a página de comparação.

Só é possível realizar a comparação de 4 produtos por vez.