Accueil
Magento 2
Comment ajouter du contenu HTML dans un layout de l'interface d'administration ?

Comment ajouter du contenu HTML dans un layout de l'interface d'administration ?

Contexte

Il peut être intéressant d'ajouter du contenu HTML (texte, photo...) dans le but d'enrichir l'interface d'administration de Magento. Dans cet article, nous allons voir comment ajouter du contenu dans la page de gestion d'une commande. Pour la rédaction de l'article, j'ai utilisé la version 2.4.6-p2 de Magento.

Création du module

Il est nécessaire de commencer par la création d'un module. Pour gagner du temps, je vous invite à utiliser mon dépôt Froggit qui contient un modèle de base.

Une fois le dossier téléchargé ou cloné, je vous invite à modifier les fichiers composer.json, module.xml et registration.php pour les adapter à votre projet. Pour ma part, j'ai nommé le module BejeanDeveloppement_BackendDocumentation.

Avant de passer à l'étape suivante, nous allons adapter le module dans le but qu'il soit installé et chargé par Magento après le module Magento_Sales. Pour cela, il faut modifier le fichier etc/module.xml en ajoutant la balise sequence :

<?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="BejeanDeveloppement_BackendDocumentation">
        <sequence>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

Aussi, il faut également modifier le fichier composer.json car, le module est dépendant du paquet magento/module-sales en version 103.0.*. Pour cela, il faut ajouter la ligne "magento/module-sales": "*" dans la partie require du fichier composer.json :

{
    "name": "bejeandeveloppement/module-backend-documentation",
    "description": "Ajout de documentation dans l'interface d'administration de Magento",
    "type": "magento2-module",
    "version": "1.0.0",
    "require": {
        "php": "~8.1.0||~8.2.0",
        "magento/framework": "103.0.*",
        "magento/module-sales": "103.0.*"
    },
    "license": [
        "GPL-3.0-only"
    ],
    "autoload": {
        "psr-4": {
            "BejeanDeveloppement\\BackendDocumentation\\": ""
        },
        "files": [
            "registration.php"
        ]
    }
}

Désormais, nous pouvons vérifier que le module s'installe correctement en lançant les commandes :

bin/magento setup:upgrade && bin/magento setup:di:compile

Modification du layout

Nous allons ajouter un bloc de texte dans la page de visualisation d'une commande. Pour cela, nous allons modifier le layout sales_order_view.xml du module Magento_Sales en ajoutant un bloc de texte.

Commençons par créer le fichier sales_order_view.xml dans le dossier view/adminhtml/layout du module BejeanDeveloppement_BackendDocumentation. Le fichier devra contenir le code ci-dessous :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="sales.order.content.block" before="-" template="BejeanDeveloppement_BackendDocumentation::text.phtml" />
        </referenceContainer>
    </body>
</page>

Le code ci-dessus précise que nous souhaitons ajouter un bloc de type Magento\Framework\View\Element\Template dans le conteneur content. Ce dernier sera affiché avant les autres blocs, car nous avons précisé le positionnement avec l'attribut before="-". Le contenu du bloc sera défini dans le template text.phtml du module BejeanDeveloppement_BackendDocumentation que nous allons compléter dans la partie suivante.

Si vous souhaitez positionner le bloc de texte à un autre endroit de la page, par exemple, avant le tableau des produits commandés, il faut remplacer <referenceContainer name="content"> par <referenceContainer name="order_additional_info">.

Création du template

Le fichier text.phtml doit être créé dans le dossier view/adminhtml/templates du module BejeanDeveloppement_BackendDocumentation. Afin de respecter le design des pages défini par Magento, le fichier contiendra le code ci-dessous :

<?php
/**
 * @var \Magento\Framework\View\Element\Template $block;
 */
?>
<section class="admin__page-section">
    <div class="admin__page-section-title">
        <span class="title"><?= $block->escapeHtml(__('Lorem ipsum dolor sit amet')) ?></span>
    </div>
    <div class="admin__page-section-content">
        <div class="admin__page-section-item">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec vehicula quam. Maecenas est nibh, sodales vel auctor sit amet, tincidunt eu sem. Maecenas vitae tempus tortor. Donec interdum facilisis neque ut semper. Cras venenatis enim libero, eget pharetra magna luctus ut. Nam ut mauris nec turpis pretium iaculis quis a justo.</p>
        </div>
    </div>
</section>

Vous pouvez vous rendre dans la page d'une commande pour contrôler que le bloc de texte est bien affiché.

Section title

Comment ajouter du contenu HTML dans un layout de l'interface d'administration ?

Contexte

Création du module

Modification du layout

Création du template