[Magento 2] Afficher une liste produits par sous-catégories sur la page principale d’une catégorie

Par défaut, Magento 2 utilise un template PHTML unique pour afficher les listes produits d’une catégorie et de ses sous-catégories. Il s’agit du fichier vendor/magento/module-catalog/view/frontend/templates/product/list.phtml.

L’un des problèmes posé par ce mode de fonctionnement réside dans le fait qu’on se retrouve avec une page catégorie principale/main qui affiche, dans une liste unique, tous les produits contenus dans cette catégorie ainsi que ses sous-catégories et ceux sans aucun distingo. Ce qui nous donne, de manière très schématisée:

<h1>Ma catégorie principale</h1>
<ul>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #3</li>
<li>Produit issu de ma sous catégorie #4</li>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #2</li>
<li>Produit issu de ma sous catégorie #2</li>
</ul>

<h1>Ma catégorie principale</h1>

<ul>

<li>Produit issu de ma sous catégorie #1</li>

<li>Produit issu de ma sous catégorie #3</li>

<li>Produit issu de ma sous catégorie #4</li>

<li>Produit issu de ma sous catégorie #1</li>

<li>Produit issu de ma sous catégorie #2</li>

</ul>

Le code décrit dans ce billet va permettre d’obtenir ceci:

<h1>Ma sous catégorie #1</h1>
<ul>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #1</li>
</ul>
<h1>Ma sous catégorie #2</h1>
<ul>
<li>Produit issu de ma sous catégorie #2</li>
<li>Produit issu de ma sous catégorie #2</li>
</ul>
<h1>Ma sous catégorie #3</h1>
<ul>
<li>Produit issu de ma sous catégorie #3</li>
</ul>
<h1>Ma sous catégorie #4</h1>
<ul>
<li>Produit issu de ma sous catégorie #4</li>
</ul>

<h1>Ma sous catégorie #1</h1>

<ul>

<li>Produit issu de ma sous catégorie #1</li>

</ul>

<h1>Ma sous catégorie #2</h1>

<ul>

<li>Produit issu de ma sous catégorie #2</li>

</ul>

<h1>Ma sous catégorie #3</h1>

<ul>

<li>Produit issu de ma sous catégorie #3</li>

</ul>

<h1>Ma sous catégorie #4</h1>

<ul>

<li>Produit issu de ma sous catégorie #4</li>

</ul>

Création d’un Helper: `app/code/Pdv/Catalog/Helper/Data.php`

Note: j’avais déjà créé ce Helper pour récupérer les Simple Products associés à un Configurable Product. Consulter le billet en question pour de plus amples infos si vous ne souhaitez pas exploiter tout le code ci-dessous. Ce Helper étend vendor/magento/module-catalog/Helper/Data.php.

<?php

namespace Pdv\Catalog\Helper;

use Magento\Framework\Exception\NoSuchEntityException;

/**
 * Catalog data helper
 *
 */
class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
    /**
     * @var \Pdv\Catalog\Model\Layer\Resolver $resolver
     */
    protected $resolver;

    /**
     * @var \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable
     */
    protected $typeConfigurableResourceModel; // 1. Du nom du model dont je veux injecter la propriété de la classe

    /**
     * @var \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository
     */
    protected $categoryRepository;

    public function __construct(
        \Pdv\Catalog\Model\Layer\Resolver $resolver,
        \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel, // 2. Demande à Magento une instance de mon configurable ressource model
        \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository
    ) {
        $this->resolver = $resolver;
        $this->typeConfigurableResourceModel = $typeConfigurableResourceModel; // 3. ...et mappe le paramètre du constructeur avec la propriété de la classe
        $this->categoryRepository = $categoryRepository;
    }

    /**
     * @param int $id
     * @return \Magento\Catalog\Api\Data\CategoryInterface | \Magento\Catalog\Model\Category
     *
     * @throws NoSuchEntityException
     */
    public function getCategory($id = null)
    {
        return $id ? $this->categoryRepository->get($id) : $this->resolver->getCurrentCategory();
    }

    /**
     * @param $childId
     * @return string[]
     */
    public function getConfigurableParentIdsByChildId($childId)
    {
        // 4. Je donne accès à ma nouvelle méthode dans le PHTML
        return $this->typeConfigurableResourceModel->getParentIdsByChild($childId);
    }
}

<?php

namespace Pdv\Catalog\Helper;

use Magento\Framework\Exception\NoSuchEntityException;

/**

* Catalog data helper

class Data extends \Magento\Framework\App\Helper\AbstractHelper

{

/**

* @var \Pdv\Catalog\Model\Layer\Resolver $resolver

protected $resolver;

/**

* @var \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable

protected $typeConfigurableResourceModel; // 1. Du nom du model dont je veux injecter la propriété de la classe

/**

* @var \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

protected $categoryRepository;

public function __construct(

\Pdv\Catalog\Model\Layer\Resolver $resolver,

\Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel, // 2. Demande à Magento une instance de mon configurable ressource model

\Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

) {

$this->resolver = $resolver;

$this->typeConfigurableResourceModel = $typeConfigurableResourceModel; // 3. ...et mappe le paramètre du constructeur avec la propriété de la classe

$this->categoryRepository = $categoryRepository;

}

/**

* @param int $id

* @return \Magento\Catalog\Api\Data\CategoryInterface | \Magento\Catalog\Model\Category

* @throws NoSuchEntityException

public function getCategory($id = null)

{

return $id ? $this->categoryRepository->get($id) : $this->resolver->getCurrentCategory();

}

/**

* @param $childId

* @return string[]

public function getConfigurableParentIdsByChildId($childId)

{

// 4. Je donne accès à ma nouvelle méthode dans le PHTML

return $this->typeConfigurableResourceModel->getParentIdsByChild($childId);

}

Rajouts par rapport au Helper existant:

Sous la ligne namespace Pdv\Catalog\Helper;:

use Magento\Framework\Exception\NoSuchEntityException;

1	use Magento\Framework\Exception\NoSuchEntityException;

Sous la ligne protected $typeConfigurableResourceModel; // 1. Du nom du model dont je veux injecter la propriété de la classe:

    /**
     * @var \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository
     */
    protected $categoryRepository;

/**

* @var \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

protected $categoryRepository;

Dans le constructeur, sous la ligne \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel // 2. Demande à Magento une instance de mon configurable ressource model (EN RAJOUTANT UNE VIRGULE en fin de la ligne existante):

\Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel, // 2. Demande à Magento une instance de mon configurable ressource model
\Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

1 2	\Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel, // 2. Demande à Magento une instance de mon configurable ressource model \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

Sous la ligne $this->typeConfigurableResourceModel = $typeConfigurableResourceModel; // 3. ...et mappe le paramètre du constructeur avec la propriété de la classe:

$this->categoryRepository = $categoryRepository;

1	$this->categoryRepository = $categoryRepository;

Le commentaire:

    /**
     * @return \Magento\Catalog\Model\Category
     */

/**

* @return \Magento\Catalog\Model\Category

…est enrichi comme suit:

    /**
     * @param int $id
     * @return \Magento\Catalog\Api\Data\CategoryInterface | \Magento\Catalog\Model\Category
     *
     * @throws NoSuchEntityException
     */

/**

* @param int $id

* @return \Magento\Catalog\Api\Data\CategoryInterface | \Magento\Catalog\Model\Category

* @throws NoSuchEntityException

Et la fonction getCurrentCategory() qui suit…

    public function getCurrentCategory()
    {
        return $this->resolver->getCurrentCategory();
    }

public function getCurrentCategory()

{

return $this->resolver->getCurrentCategory();

}

…est remaniée en:

    public function getCategory($id = null)
    {
        return $id ? $this->categoryRepository->get($id) : $this->resolver->getCurrentCategory();
    }

public function getCategory($id = null)

{

return $id ? $this->categoryRepository->get($id) : $this->resolver->getCurrentCategory();

}

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml`

Ce template PHTML se contente de boucler, autant de fois qu’il y a de sous-catégories, sur le template Magento_Catalog::product/list_abonnements_subcategory.phtml qui est une version custom du template vendor/magento/module-catalog/view/frontend/templates/product/list.phtml.

<?php
/** @var \Magento\Catalog\Block\Product\ListProduct $block */
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
$subcats = $category->getChildrenCategories();

$objectManager =  \Magento\Framework\App\ObjectManager::getInstance();
$categoryFactory = $objectManager->get('\Magento\Catalog\Model\CategoryFactory');
?>
<ul class="product details product-item-details">
    <?php
    /** @var \Magento\Catalog\Model\Category $subcat */
    foreach ($subcats as $subcat) {
        if ($subcat->getIsActive()) {
            /** @var \Magento\Catalog\Block\Product\ListProduct $categoryBlock */
            $categoryBlock = $block->getLayout()->createBlock("Magento\Catalog\Block\Product\ListProduct")
                ->setTemplate("Magento_Catalog::product/list_abonnements_subcategory.phtml")
                ->setCategoryId($subcat->getid());

            echo $categoryBlock->toHtml();
        }
    } ?>
</ul>

<?php

/** @var \Magento\Catalog\Block\Product\ListProduct $block */

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');

$subcats = $category->getChildrenCategories();

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$categoryFactory = $objectManager->get('\Magento\Catalog\Model\CategoryFactory');

<?php

/** @var \Magento\Catalog\Model\Category $subcat */

foreach ($subcats as $subcat) {

if ($subcat->getIsActive()) {

/** @var \Magento\Catalog\Block\Product\ListProduct $categoryBlock */

$categoryBlock = $block->getLayout()->createBlock("Magento\Catalog\Block\Product\ListProduct")

->setTemplate("Magento_Catalog::product/list_abonnements_subcategory.phtml")

->setCategoryId($subcat->getid());

echo $categoryBlock->toHtml();

}

} ?>

</ul>

L’équivalent de ce fichier list_abonnements_subcategory.phtml DOIT exister dans votre projet. Si vous n’avez pas besoin d’en créer un spécifique, vous pouvez boucler sur le template par défaut fourni par Magento 2. Dans le code ci-dessus: ->setTemplate("Magento_Catalog::product/list.phtml"). Edit: il faut en créer un spécifique pour exploiter notre Helper.

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_subcategory.phtml`

Ce template PHTML doit partir de vendor/magento/module-catalog/view/frontend/templates/product/list.phtml. Il est impératif de rajouter les lignes suivantes en haut de fichier, sous la ligne $hoverChange = $themeSettingConfig->getStoreConfig('themesettings/catalog/hover_change');:

/** @var \Pdv\Catalog\Helper\Data $helper */
$helper = $this->helper('Pdv\Catalog\Helper\Data');
/** @var \Magento\Catalog\Model\Category $currentCategory */
$currentCategory = $helper->getCategory($this->getCategoryId());
$currentCategoryProductCount = $currentCategory->getProductCount();

/** @var \Pdv\Catalog\Helper\Data $helper */

$helper = $this->helper('Pdv\Catalog\Helper\Data');

/** @var \Magento\Catalog\Model\Category $currentCategory */

$currentCategory = $helper->getCategory($this->getCategoryId());

$currentCategoryProductCount = $currentCategory->getProductCount();

`app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_category.xml`

Reportez-vous à ce billet pour voir comment afficher un layout différent selon une catégorie spécifique. Cette étape est indispensable pour faire pointer notre catégorie vers notre template PHTML spécifique app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml. Un exemple de code pour ce fichier ci-dessous:

<?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="catalog.leftnav" remove="true" />

    <!--		From: vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml-->
    <referenceContainer name="columns.top">
        <referenceBlock name="category.products.list" template="Magento_Catalog::product/list_abonnements_category.phtml">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements_category.phtml</argument>
            </action>
        </referenceBlock>
    </referenceContainer>
    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.file"
               before="-"
               template="Magento_Catalog::product/list_abonnements_js.phtml"
        />
    </referenceContainer>
</layout>

<?xml version="1.0"?>

</referenceContainer>

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

</action>

</referenceBlock>

</referenceContainer>

<block class="Magento\Framework\View\Element\Template"

name="custom.file"

before="-"

template="Magento_Catalog::product/list_abonnements_js.phtml"

</referenceContainer>

</layout>

Vous voudrez aussi créer le layout XML `app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml`

…pour fairez pointer les sous-catégories vers le template 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="catalog.leftnav" remove="true" />

    <!--		From: vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml-->
    <referenceContainer name="columns.top">
        <referenceBlock name="category.products.list" template="Magento_Catalog::product/list_abonnements_subcategory.phtml">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements_subcategory.phtml</argument>
            </action>
        </referenceBlock>
    </referenceContainer>
    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.file"
               before="-"
               template="Magento_Catalog::product/list_abonnements_js.phtml"
        />
    </referenceContainer>
</layout>

<?xml version="1.0"?>

</referenceContainer>

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

</action>

</referenceBlock>

</referenceContainer>

<block class="Magento\Framework\View\Element\Template"

name="custom.file"

before="-"

template="Magento_Catalog::product/list_abonnements_js.phtml"

</referenceContainer>

</layout>

Externaliser le code JS

Afin que le code JS initialement présent au bas du fichier list.phtml ne soit pas exécuté autant de fois qu’il existe de sous-catégories, il a été externalisé dans un fichier app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml et déclaré de la sorte dans nos layouts XML spécifiques:

    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.file"
               before="-"
               template="Magento_Catalog::product/list_abonnements_js.phtml"
        />
    </referenceContainer>

<block class="Magento\Framework\View\Element\Template"

name="custom.file"

before="-"

template="Magento_Catalog::product/list_abonnements_js.phtml"

</referenceContainer>

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml`

Le code de ce fichier, sorti de list.phtml:

<script type="text/javascript">
    require([
        'jquery'
    ], function(jQuery){
        (function($) {
            $('.action-filter').click(function(){
                $(this).toggleClass('active');
                $('.filter-content').slideToggle();
            });
        })(jQuery);
    });
</script>

require([

'jquery'

], function(jQuery){

(function($) {

$('.action-filter').click(function(){

$(this).toggleClass('active');

$('.filter-content').slideToggle();

});

})(jQuery);

});

</script>

Articles récents

Catégories

Archives

Méta

[Magento 2] Afficher une liste produits par sous-catégories sur la page principale d’une catégorie

Création d’un Helper: `app/code/Pdv/Catalog/Helper/Data.php`

Rajouts par rapport au Helper existant:

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml`

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_subcategory.phtml`

`app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_category.xml`

Vous voudrez aussi créer le layout XML `app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml`

Externaliser le code JS

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml`

[Magento 2] Afficher une liste produits par sous-catégories sur la page principale d’une catégorie

Création d’un Helper: app/code/Pdv/Catalog/Helper/Data.php

Rajouts par rapport au Helper existant:

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_subcategory.phtml

app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_category.xml

Vous voudrez aussi créer le layout XML app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml

Externaliser le code JS

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml

Création d’un Helper: `app/code/Pdv/Catalog/Helper/Data.php`

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml`

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_subcategory.phtml`

`app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_category.xml`

Vous voudrez aussi créer le layout XML `app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml`

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml`