Como personalizar o layout da página do produto no Magento

Como você deve saber, cada produto requer um layout de página específico com base em seus recursos exclusivos. Portanto, a coisa aqui é personalizar um layout de página de produto específico para vários produtos em uma categoria sem alterar o layout da categoria .

Para isso, precisaremos passar pelo básico e, somente a partir daí, aprenderemos a personalizar o layout da página do produto com arquivos de layout.

Sobre arquivos de layout

No Magento, arquivos de layout são arquivos .XML que são usados ​​para definir a estrutura de uma determinada página. Os arquivos de layout são classificados em:

• Layouts base : os arquivos de layout fornecidos pelos módulos

• Layouts de tema : os arquivos de layout fornecidos pelos temas

Como personalizar o layout da página do produto

Para personalizar o layout de uma determinada página, você precisará substituir o arquivo de layout dessa página por um personalizado. Para fazer isso, você precisará localizar os arquivos de layout da página do produto do seu tema.

Personalize o layout da página do produto para todos os tipos de produtos

Magento 2 Página anterior/próxima do produto

Magento 2 Previous Next Product Page é um recurso otimizado que permite que os clientes naveguem pelas páginas do produto com um único clique sem problemas. Esse recurso eleva a usabilidade da sua loja e mantém uma experiência de navegação suave e agradável para seus clientes.

E se você quiser personalizar o layout da página do produto para todos os seus tipos de produtos?

Essa é a parte fácil, pois você só precisará fazer alterações no arquivo de layout comum, ou seja, catalog_product_view.xml (localizado em /theme_dir/Magento_Catalog/layout/) para que a alteração seja refletida em todos os seus tipos de produto.

Estruturar o conteúdo no layout usando contêineres

O layout das páginas do seu produto é estruturado usando contêineres , que podem ser referenciados ou ter mais blocos adicionados a ele.

Exemplo :

 <move element="product.info.social" destination="product.info.main" before="product.info.price"/>

Aqui estão os contêineres comuns usados ​​no layout da página do produto:

• product.info.main
• product.info.price
• product.info.stock.sku
• product.info.form.content
• product.info.extrahint
• product.info.social
• product.info.media

Personalize o layout da página do produto para um produto específico

Há duas maneiras de personalizar o layout da página do produto para um produto específico, ambas envolvem colocar arquivos em uma pasta /layout/ especificada.

Método 1 : Criar uma atualização de layout personalizada

A partir do Magento 2.3.4, o campo XML de atualização de layout no painel de administração do Magento agora é convertido em um seletor, o que significa que você não pode mais adicionar código livremente neste campo.

Para aplicar atualizações de layout personalizado para suas páginas de produtos, você precisará colocar um arquivo .XML em uma pasta especificada ( app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/ ). A atualização de layout desse arquivo .XML aparecerá em Atualização de layout personalizado como uma opção selecionável.

A regra para nomes de arquivo de atualização de layout personalizado

Seus nomes de arquivo de atualização de layout personalizado precisarão seguir a seguinte regra:

catalog_product_view_selectable_<Product SKU>_<Name for Layout Update>.xml

Onde:

• <Product_SKU> : é o SKU do produto ao qual você deseja aplicar a atualização de layout personalizado
• <Name for Layout Update> : é o nome deste layout que será mostrado no seletor Custom Layout Update

Por exemplo, se quisermos aplicar uma nova atualização de layout personalizado para este SKU: MH05. Precisaremos colocar um arquivo de layout personalizado chamado catalog_product_view_selectable_ MH05_test.xml em /theme_dir/Magento_Catalog/layout/ , com o conteúdo abaixo:

 <?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <corpo>
        <move element="page.main.title" destination="product.info.main" before="-"/>
        <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
        <move element="product.info.review" destination="product.info.main" before="product.info.price"/>
		<referenceContainer name="page.wrapper">
             <referenceBlock name="breadcrumbs" remove="true"/>
         </referenceContainer>
    </body>
</page>

O que esse layout de teste fará é remover as migalhas de pão da página do produto SKU MH05.

Em seguida, em Catálogo > Produtos , escolha o produto com SKU MH05. Agora você poderá ver uma atualização de layout personalizada chamada test :

Escolha esta nova atualização de layout personalizado e salve as alterações.

Agora limpe seu cache usando:

 php bin/cache magento:flush

E as alterações agora devem ser refletidas em seu frontend.

Método 2 : Substituindo o layout

Com o método addPageLayoutHandles, você pode substituir o layout usando:

• ID do produto
• SKU do produto
• Tipo de Produto

Por exemplo, se você quiser personalizar o layout da página do produto para um produto com ID 68, o nome do arquivo de layout precisará seguir o seguinte formato:

catalog_product_view_id_number.xml

por exemplo, catalog_product_view_id_68

E o arquivo precisará estar na seguinte parte:

/theme_dir/Magento_Catalog/layout/

Limpe o cache seguindo a mensagem do sistema. Caso contrário, você pode acessar o frontend para conferir o novo layout de página personalizado para o produto específico.

Para o tipo de produto, você pode seguir as mesmas etapas e alterar o nome do arquivo de acordo. Por exemplo, use catalog_product_view_type_bundle.xml para aplicar o novo layout de página para produtos agrupados.

Espero que goste do novo layout de página para seus itens adoráveis!

Postagens relacionadas:
Como personalizar o processo de checkout no Magento 2
Como personalizar seus modelos de e-mail Magento