Article publié le

Ajouter des attributs de catégorie personnalisés avec Magento 2

Il peut être utile de créer des champs spécifiques liés aux catégories avec Magento 2 pour afficher des informations supplémentaires (lier un bloc, une image, une zone de texte...). Ne disposant pas d'interface graphique comme pour l'ajout d'un attribut produit, cette manipulation est plus technique et elle nécessite le développement d'un module.

Pour ce tutorial, nous voulons ajouter la possibilité d'afficher un bloc de contenu dans une catégorie parent afin de créer un mega menu.

Pour cela, on va créer un module MegaMenu qui sera dans le namespace Pixel, ce qui donne cette arborescence :

app/code/Pixel/MegaMenu

On va enregistrer notre module en créant respectivement les fichiers module.xml et registration.php.

Pour le fichier module.xml, on va le mettre dans le répertoire etc :

app/code/Pixel/MegaMenu/etc/module.xml

Avec le code suivant

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Pixel_MegaMenu" setup_version="1.0.0">
</module>
</config>

Pour le fichier registration.php, on va le mettre à la racine du module :

app/code/Pixel/MegaMenu/registration.php

Avec le code suivant :


\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Pixel_MegaMenu',
    __DIR__
);

Ensuite nous allons créer le fichier InstallData.php pour ajouter 2 attributs dans nos catégories dans le répertoire Setup :

app/code/Pixel/MegaMenu/Setup/InstallData.php

Avec le code suivant :


namespace Pixel\MegaMenu\Setup;

/**
* On va utiliser le EavSetupFactory pour enregistrer nos attributs de catégorie
*/ use Magento\Eav\Setup\EavSetup; use Magento\Eav\Setup\EavSetupFactory; use Magento\Framework\Setup\InstallDataInterface; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\ModuleDataSetupInterface; class InstallData implements InstallDataInterface { /** * Category setup factory * * @var CategorySetupFactory */ private $eavSetupFactory; /** * Init * * @param CategorySetupFactory $categorySetupFactory */ public function __construct(EavSetupFactory $eavSetupFactory) { $this->eavSetupFactory = $eavSetupFactory; } /** * {@inheritdoc} */ public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) { /** @var EavSetup $eavSetup */ $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]); /** * On va ajouter une option oui/non pour dire si on veut afficher notre bloc positionné à droite de notre sous menu
* Dans les paramètres importants, on veut que notre attribut soit visible du front. Et on l'ajoute à notre groupe Mega */ $eavSetup->addAttribute( \Magento\Catalog\Model\Category::ENTITY, 'use_static_block_right', [ 'type' => 'int', 'label' => 'Use Static Block Right', 'input' => 'select', 'source' => 'Magento\Eav\Model\Entity\Attribute\Source\Boolean', 'visible_on_front' => true, 'required' => false, 'sort_order' => 10, 'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE, 'group' => 'Mega', ] ); /** * On va récupérer notre bloc en affichant la liste des blocs */ $eavSetup->addAttribute( \Magento\Catalog\Model\Category::ENTITY, 'static_block_right_value', [ 'type' => 'int', 'label' => 'Static Block Right Value', 'input' => 'select', 'source' => 'Magento\Catalog\Model\Category\Attribute\Source\Page', 'visible_on_front' => true, 'required' => false, 'sort_order' => 11, 'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE, 'group' => 'Mega', ] ); } }

Maintenant on va assigner nos 2 attributs dans le formulaire des catégories, pour cela, créer le fichier category_form.xml à l'adresse ci-dessous :

app/code/Pixel/MegaMenu/view/adminhtml/ui_component/category_form.xml

Avec le code suivante


<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="mega">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Mega Menu</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">100</item>
            </item>
        </argument>
        <field name="use_static_block_right">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Yesno</item>
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">17</item>
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Use Static Block Right </item>
                </item>
            </argument>
        </field>
        <field name="static_block_right_value">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Catalog\Model\Category\Attribute\Source\Page</item>
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">18</item>
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Static Block Right Value </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Il est important de bien mettre le nom de l'attribut pour la propriété name du noeud field.

A partir de là vous pouvez lancer la commande pour installer module :

php bin/magento setup:upgrade

Il faudra certainement réindexer les catégories et lancer la commande Deploy. Pensez également à vider le cache.

Maintenant vous devriez voir le bloc Mega Menu dans les catégories comme l'image ci-dessous :

Attribut de catégorie personnaliser pour Magento 2

Maintenant, c'est à vous de jouer !

Fermer

Télémaintenance

Pour assurer notre support à distance, nous avons opté pour la solution TeamViewer.
Pour installer l'application, merci de télécharger l'application en fonction de votre système d'exploitation :


Télécharger TeamViewer pour Windows

Télécharger TeamViewer pour Mac OS

Télécharger TeamViewer pour Linux


Les avantages de l'assistance à distance pour la maintenance de votre site sont nombreux :

  • Dépannage plus rapide lié à l'absence de manipulations expliquées par téléphone
  • Constatation directe du problème rencontré
  • Economie des frais de déplacement
  • Gain de temps important, car pas de déplacement, prise de rendez-vous
Fermer

Nous suivre

Si vous souhaitez nous suivre sur les réseaux sociaux, c'est par ici :


Facebook

Google +