Sabe quando você compra um produto e fica pensando “eu poderia levar isso para combinar com aquele outro”. Você provavelmente já viu alguma loja virtual com a frase “quem comprou isso também levou isso:” ou “leve junto”. Todas estas frases são estratégias usadas para os produtos relacionados.
E por “sorte” este é um recurso nativo da plataforma de cor Magenta que veremos agora.
Como configurar
Para começar, você deve acessar o admin da sua loja, ir no menu Catalog > Products > Escolher um produto para editar.
Procure por Related Products, Up-Sells, and Cross-Sells (Produtos Relacionados, Venda Agregada, Venda Cruzada). Clique no botão Add Related Products [Adicionar Produtos Relacionados].
Na janela que abrir, você pode usar o Filtro para selecionar alguns produtos. Depois basta marcar o checkbox à esquerda dos itens que deseja conectar, e por fim, clicar no botão Add Selected Products [Adicionar Selecionados].
Feito isso, clique no botão Salvar no alto da tela.
Veja o resultado
Para este tipo de configuração, não é necessário limpar o cache, basta que você atualize a página do produto e o resultado será imediato (há não ser que você utilize algum sistema de cache externo, como Cloudflare ou Redis e precise forçar atualização).
Role a página para ver o resultado. A forma como os produtos serão exibidos depende do seu tema, por isso não há maneiras de customizar isso no admin (sem um módulo externo). A frase “Related Produtos Check items…” pode ser alterada de diversas maneiras, veja o post sobre tradução customizada.
Codificando a apresentação dos Produtos Relacionados
Caso você queira transformar a maneira como estes produtos são exibidos, existem basicamente três formas: XML, phtml, e CSS.
O XML você encontra em:
/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
<block class="Magento\Catalog\Block\Product\ProductList\Related" name="catalog.product.related" template="Magento_Catalog::product/list/items.phtml">
<arguments>
<argument name="type" xsi:type="string">related</argument>
<argument name="view_model" xsi:type="object">Magento\Catalog\ViewModel\Product\Listing\PreparePostData</argument>
</arguments>
...
</block>
Evite alterar arquivos da pasta “vendor”. Faça sempre uma cópia para dentro do seu template/tema customizado, e edite a cópia. Referência versão Community: 2.4.1
O phtml você encontra em:
/vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml
<?php if ($type == 'related' || $type == 'upsell'):?>
Tenha atenção, pois o mesmo arquivo que controla o upsell (venda agregada) também controla o related (relacionados). O código está todo amarrado.
O CSS/LESS você encontra em:
/vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/_module.less
E javascript não!? Sim… também é uma opção, mas geralmente ele será importado via XML, ou estará embutido no phtml.
Mais informação sobre Produtos Relacionados…
Aproveite e veja também os artigos Venda Cruzada no M2, Venda Agregada no M2. Você também encontra aqui no post o artigo Produtos Relacionados para M1.
Se tiver interesse em aprender mais sobre a administração dos recursos da sua loja, conheça o curso Como usar, gerenciar e administrar uma loja M2.
Por fim, você encontra diversos temas de alta qualidade para deixar sua loja com uma aparência ainda mais profissional em ThemeForest.
Sucesso!