Comment personnaliser la mise en page de la page produit dans Magento

Comme vous le savez peut-être, chaque produit nécessite une mise en page particulière basée sur ses caractéristiques uniques. Il s'agit donc ici de personnaliser une mise en page de produit spécifique pour plusieurs produits d'une catégorie sans modifier la mise en page de la catégorie .

Pour ce faire, nous devrons passer par les bases, et seulement à partir de là, nous apprendrons à personnaliser la mise en page du produit avec des fichiers de mise en page.

À propos des fichiers de mise en page

Dans Magento, les fichiers de mise en page sont des fichiers .XML qui sont utilisés pour définir la structure d'une page donnée. Les fichiers de mise en page sont classés en :

• Layouts de base : les fichiers de layout fournis par les modules

• Layouts de thème : les fichiers de layout fournis par les thèmes

Comment personnaliser la mise en page de la page produit

Pour personnaliser la mise en page d'une page donnée, vous devrez remplacer le fichier de mise en page de cette page par un fichier personnalisé. Pour ce faire, vous devrez localiser les fichiers de mise en page de la page produit de votre thème.

Personnalisez la mise en page des produits pour tous les types de produits

Page produit précédente/suivante de Magento 2

Magento 2 Previous Next Product Page est une fonctionnalité optimisée qui permet aux clients de naviguer de manière transparente dans les pages de produits en un seul clic. Cette fonctionnalité améliore la convivialité de votre boutique et maintient une expérience de navigation fluide et agréable pour vos clients.

Que faire si vous souhaitez personnaliser la présentation de la page produit pour tous vos types de produits ?

C'est la partie la plus facile, car vous n'aurez qu'à apporter des modifications au fichier de mise en page commun, c'est-à-dire catalog_product_view.xml (situé dans /theme_dir/Magento_Catalog/layout/) pour que la modification soit reflétée sur tous vos types de produits.

Structurer le contenu dans la mise en page à l'aide de conteneurs

La mise en page de vos pages de produits est structurée à l'aide de conteneurs , qui peuvent être référencés ou auxquels plusieurs blocs ont été ajoutés.

Exemple :

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

Voici les conteneurs courants utilisés dans la mise en page de la page produit :

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

Personnaliser la mise en page du produit pour un produit spécifique

Il existe deux façons de personnaliser la mise en page de votre page de produit pour un produit spécifique, les deux impliquent de placer des fichiers dans un dossier /layout/ spécifié.

Méthode 1 : créer une mise à jour de mise en page personnalisée

À partir de Magento 2.3.4, le champ XML de mise à jour de la mise en page dans le panneau d'administration de Magento est désormais converti en sélecteur, ce qui signifie que vous ne pouvez plus ajouter librement de code dans ce champ.

Afin d'appliquer des mises à jour de mise en page personnalisées pour vos pages de produits, vous devrez placer un fichier .XML dans un dossier spécifié ( app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/ ). La mise à jour de la mise en page à partir de ce fichier .XML apparaîtra alors sous Mise à jour de la mise en page personnalisée en tant qu'option sélectionnable.

La règle pour les noms de fichiers de mise à jour de mise en page personnalisés

Les noms de fichiers de mise à jour de votre mise en page personnalisée devront respecter la règle suivante :

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

où:

• <Product_SKU> : est le SKU du produit auquel vous souhaitez appliquer la mise à jour de mise en page personnalisée
• <Name for Layout Update> : est le nom de cette mise en page qui sera affiché dans le sélecteur Custom Layout Update

Par exemple, si nous voulons appliquer une nouvelle mise à jour de mise en page personnalisée pour ce SKU : MH05. Nous devrons mettre un fichier de mise en page personnalisé nommé catalog_product_view_selectable_ MH05_test.xml dans /theme_dir/Magento_Catalog/layout/ , avec le contenu comme ci-dessous :

 <?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">
    <corps>
        <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>

Ce que cette mise en page de test fera, c'est qu'elle supprimera le fil d'Ariane de la page produit du produit SKU MH05.

Ensuite, dans Catalogue > Produits , choisissez le produit avec SKU MH05. Vous devriez maintenant pouvoir voir une mise à jour de mise en page personnalisée nommée test :

Choisissez cette nouvelle mise à jour de mise en page personnalisée et enregistrez les modifications.

Videz maintenant votre cache en utilisant :

 php bin/cache magento : vider

Et les changements devraient maintenant être reflétés sur votre interface.

Méthode 2 : Redéfinition de la mise en page

Avec la méthode addPageLayoutHandles, vous pouvez remplacer la mise en page en utilisant :

• Identifiant du produit
• Référence du produit
• Type de produit

Par exemple, si vous souhaitez personnaliser la mise en page du produit pour un produit avec l'ID 68, le nom du fichier de mise en page devra respecter le format suivant :

catalog_product_view_id_number.xml

par exemple, catalog_product_view_id_68

Et le fichier devra être dans la partie suivante :

/theme_dir/Magento_Catalog/layout/

Effacez le cache après le message du système. Sinon, vous pouvez accéder à l'interface pour consulter la nouvelle mise en page personnalisée pour le produit spécifique.

Pour le type de produit, vous pouvez suivre les mêmes étapes et modifier le nom du fichier en conséquence. Par exemple, utilisez catalog_product_view_type_bundle.xml pour appliquer la nouvelle mise en page des produits groupés.

J'espère que vous apprécierez votre nouvelle mise en page pour vos beaux articles !

Articles Similaires:
Comment personnaliser le processus de paiement dans Magento 2
Comment personnaliser vos modèles d'e-mails Magento