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!
Você precisa fazer login para comentar.