Produtos Relacionados – Related no M2

Escrito por Mario SAM

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].

Configurando os produtos relacionados no M2.

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].

Produtos que foram relacionados ao produto selecionado no M2.

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).

Resultado da configuração dos Produtos Relacionados no M2

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!

O Autor

Mario SAM

Graduado em Web Design e Programação, com pós-graduação em Gestão de Projetos e TI, MBA em Marketing, Mestrado (incompleto) em Comércio Eletrônico e Internet, Estudante de Educação Física e faixa-preta em Taekwondo. Também possui as certificações Google Analytics, Sun Java Certified, Magento Developer e a Magento Front-End Developer.

Magento FrontEnd Developer Certification  Magento Developer Certification