category – devfrontend.info

Astuce testée fonctionnelle Magento 2.3!

Afficher un page layout différent selon une catégorie de produits spécifique

Ce que je veux: j’ai plusieurs catégories de produits dans ma boutique Magento 2. L’affichage des listes produits de l’une de ces catégories (la catégorie Abonnements dans ce tutoriel) doit bénéficier d’un affichage complètement différent par rapport aux listes produits des autres catégories de mon site Magento 2, dont l’affichage restera « standard ».

Nativement, c’est l’articulation du layout vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml et du template vendor/magento/module-catalog/view/frontend/templates/product/list.phtml qui génèrent l’affichage de l’ensemble des listes produits dans les pages du catalogue d’une boutique Magento 2.

Nous allons créer un nouveau page layout XML qui servira à rediriger vers un template PHTML de liste spécifique. Une action en backoffice sera nécessaire pour affecter ce nouveau page layout aux catégories concernées.

Conventions pour ce tuto: je pars du principe qu’il existe un Vendor/theme Sodifrance/pdv dans votre arborescence de fichiers et que la catégorie pour laquelle nous cherchons à surcharger l’affichage s’appelle Abonnements.

Commencer par déclarer un nouveau page layout XML dans votre thème

Chemin vers ce fichier: app/design/frontend/Sodifrance/pdv/Magento_Theme/layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="abonnements_subcategory">
        <label translate="true">[PDV] Abonnements (sous-catégorie)</label>
    </layout>
</page_layouts>

<?xml version="1.0" encoding="UTF-8"?>

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">

<label translate="true">[PDV] Abonnements (sous-catégorie)</label>

</layout>

</page_layouts>

Créer ensuite le nouveau page layout XML `abonnements_subcategory.xml` correspondant

Source: Magento2: Add a new page layout.

Nous allons créer un page layout XML spécifique app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml.

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

<?xml version="1.0"?>

</referenceContainer>

</layout>

L'<update handle="empty"/> et le contenu du <referenceContainer name="page.wrapper"> sont copiés/collés du page layout vendor/magento/module-theme/view/frontend/page_layout/1column.xml dont je veux reprendre les bases. Aucun merge n’étant prévu par Magento 2 à ce niveau (jusqu’à ce qu’on me contredise, je ne peux déclarer nulle part que mon nouveau layout abonnements_subcategory.xml doit hériter d’un parent existant column1.xml), je suis obligé de faire du copier/coller, sinon mon front-end n’affiche plus rien…

Créer un template PHTML custom `list_abonnements.pthml` dans votre thème

Ce template sera une surcharge du fichier vendor/magento/module-catalog/view/frontend/templates/product/list.phtml, située dans app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements.phtml et dans laquelle vous consignerez les spécificités d’affichage liées à la catégorie Abonnements de votre boutique.

Je ne vous mets pas d’exemple de code ici. Votre projet n’aura pas les mêmes spécificités que le mien.

Enfin, rajouter un `referenceContainer` à notre `list_abonnements.phtml` spécifique

Source: Different list.phtml for categorys in the backend of Magento 2.1.7.

Sur les bases du fichier app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml crée précédemment, nous allons ajouter un referenceContainer à notre template PHTML de liste spécifique app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements.phtml.

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>


    <referenceContainer name="columns.top">
        <referenceBlock name="category.products.list">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements.phtml</argument>
            </action>
        </referenceBlock>
    </referenceContainer>
</layout>

<?xml version="1.0"?>

</referenceContainer>

<argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements.phtml</argument>

</action>

</referenceBlock>

</referenceContainer>

</layout>

Affecter le nouveau layout à vos catégories via l’interface d’admin

En backoffice: Catalogue > Catégories > choisir une catégorie ou une sous-catégorie dans l’arborescence de votre catalogue > volet Design > champ Agencement > sélectionner votre page layout ([PDV] Abonnements (sous-catégorie) dans mon exemple).

Autre méthode

Source: Different template for different categories in magento 2 [category_id layout handle in M2].

Il ne s’agit pas à proprement parler d’un override. Il faut créer un fichier XML catalog_category_view_id_{{id}}.xml sous app/design/frontend/<vendorName>/<themeName>/Magento_Catalog/layout/, où {{id}} est l’ID de votre catégorie (visible en admin sous Catalogue > Catégories > choisir la catégorie/sous-catégorie).

Commande à exécuter pour voir les modifs en front: $ n98-magerun2 cache:clean.

Créer un widget custom dans Magento 2 peut être utile, notamment car cette solution permet de placer un bloc statique de manière beaucoup plus sélective (on peut cibler une catégorie unique du catalogue par exemple) et depuis l’interface d’admin.

Dans ce billet:

Je me suis inspiré de la doc officielle et d’un autre tuto pour arriver à mes fins, la doc officielle étant incomplète et les exemples de code erronés!

On part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.

Initialiser le widget

app/code/Sodifrance/Pdv/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Sodifrance_Pdv',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Sodifrance_Pdv',

__DIR__

);

app/code/Sodifrance/Pdv/etc/widget.xml

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Sodifrance\Pdv\Block\Widget\Test" id="pdv_test_widget">
        <label>Test Widget</label>
        <description>This is a test widget!!!</description>
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
                <label>Label</label>
            </parameter>
            <parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20">
                <label translate="true">Size</label>
                <options>
                    <option name="s" value="S">
                        <label>S</label>
                    </option>
                    <option name="m" value="M" selected="true">
                        <label>M</label>
                    </option>
                    <option name="l" value="L">
                        <label>L</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

<label>Test Widget</label>

<description>This is a test widget!!!</description>

<label>Label</label>

</parameter>

</option>

</option>

</option>

</options>

</parameter>

</parameters>

</widget>

</widgets>

Créer un template pour le widget

app/code/Sodifrance/Pdv/view/frontend/templates/widget/test.phtml

<?php
/** \Sodifrance\Pdv\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>

<?php

/** \Sodifrance\Pdv\Block\Widget\Test $block */

<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>

<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>

Créer un block pour le widget

app/code/Sodifrance/Pdv/Block/Widget/Test.php

<?php
namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface {

    protected $_template = "widget/test.phtml";

}

<?php

namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface {

protected $_template = "widget/test.phtml";

}

Ajouter une dépendance au module Magento_Widget dans le fichier `module.xml`

app/code/Sodifrance/Pdv/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Sodifrance_Pdv" setup_version="1.0.0">
        <sequence>
            <module name="MGS_ThemeSettings" />
            <module name="Magento_Widget" />
        </sequence>
    </module>
</config>

<?xml version="1.0"?>

</sequence>

</module>

</config>

Commandes à exécuter

Appliquer la dépendance de module déclarée dans le fichier module.xml:

$ n98-magerun2 module:disable Sodifrance_Pdv
$ n98-magerun2 module:enable Sodifrance_Pdv

1 2	$ n98-magerun2 module:disable Sodifrance_Pdv $ n98-magerun2 module:enable Sodifrance_Pdv

Flusher les caches:

$ n98-magerun2 cache:flush

1	$ n98-magerun2 cache:flush

Accès BO à votre widget custom

Contenu > Widgets > Ajouter un widget
Choisir le type de widget dans la liste déroulante: « Test Widget »

Pour afficher un widget dans une seule catégorie du catalogue:

Contenu > Widgets > Ajouter un widget
Choisir le type de widget et le thème de design
Remplir les champs obligatoires de la section « Propriétés du front office »
Dans la section « Mises à jour d’agencements » > Ajouter une mise à jour d’agencements
Display on: catégorie ancrée
Catégories: Spécifique à Categories
Cliquer sur l’icône « Ouvrir le sélecteur »
Déplier l’arbre de catégories/sous-catégories et cocher la ou les catégories dans laquelle le widget doit s’afficher; il ne s’affichera pas dans les autres

[Magento 2] Inclure un bloc statique depuis un champ WYSIWYG (nouvelle fenêtre).

Une liste de ressources en ligne intéressantes sur le sujet

Dépôts Git de démonstration, proof of concepts, etc …

Magento 2: Widgets – This module is to demonstrate the different fields available for Magento 2 widgets. The idea is to use this as a base or reference for creating your own widgets. There is an example widget provided which has all the possible field types available.

Tutoriels

inchoo.net – Magento 2 custom widget. Now we will see how we can create a custom one, or even better, how to extend the core one. For this example I picked default catalog product listing widget that I will extend with sorting fields for better customization of this widget.

Articles récents

Catégories

Archives

Méta

Étiquette : category

[Magento 2] Afficher un layout différent selon une catégorie spécifique

Afficher un page layout différent selon une catégorie de produits spécifique

Commencer par déclarer un nouveau page layout XML dans votre thème

Créer ensuite le nouveau page layout XML `abonnements_subcategory.xml` correspondant

Créer un template PHTML custom `list_abonnements.pthml` dans votre thème

Enfin, rajouter un `referenceContainer` à notre `list_abonnements.phtml` spécifique

Affecter le nouveau layout à vos catégories via l’interface d’admin

Autre méthode

[Magento 2] Créer un widget custom et l’utiliser pour afficher un bloc statique dans une catégorie unique du catalogue

Créer un widget custom dans Magento 2

Initialiser le widget

Créer un template pour le widget

Créer un block pour le widget

Ajouter une dépendance au module Magento_Widget dans le fichier `module.xml`

Commandes à exécuter

Accès BO à votre widget custom

Pour afficher un widget dans une seule catégorie du catalogue:

Ajouter un bloc statique dans un widget custom Magento 2

Une liste de ressources en ligne intéressantes sur le sujet

Dépôts Git de démonstration, proof of concepts, etc …

Tutoriels

Afficher un page layout différent selon une catégorie de produits spécifique

Commencer par déclarer un nouveau page layout XML dans votre thème

Créer ensuite le nouveau page layout XML abonnements_subcategory.xml correspondant

Créer un template PHTML custom list_abonnements.pthml dans votre thème

Enfin, rajouter un referenceContainer à notre list_abonnements.phtml spécifique

Affecter le nouveau layout à vos catégories via l’interface d’admin

Autre méthode

Créer un widget custom dans Magento 2

Initialiser le widget

Créer un template pour le widget

Créer un block pour le widget

Ajouter une dépendance au module Magento_Widget dans le fichier module.xml

Commandes à exécuter

Accès BO à votre widget custom

Pour afficher un widget dans une seule catégorie du catalogue:

Ajouter un bloc statique dans un widget custom Magento 2

Une liste de ressources en ligne intéressantes sur le sujet

Dépôts Git de démonstration, proof of concepts, etc …

Tutoriels

Créer ensuite le nouveau page layout XML `abonnements_subcategory.xml` correspondant

Créer un template PHTML custom `list_abonnements.pthml` dans votre thème

Enfin, rajouter un `referenceContainer` à notre `list_abonnements.phtml` spécifique

Ajouter une dépendance au module Magento_Widget dans le fichier `module.xml`