Magento 2.3 : Intégrer Un PHTML Personnalisé Dans Le Footer

by fritz-hansen 60 views

Salut la compagnie ! Aujourd'hui, on va plonger dans le vif du sujet de Magento 2.3 et plus particulièrement comment ajouter un fichier PHTML personnalisé directement dans le pied de page de votre site. Vous savez, ce coin en bas de chaque page où l'on retrouve souvent les liens de navigation, les infos de contact, ou encore les crédits. Si vous utilisez le thème Luma par défaut et que vous avez une idée bien précise de comment structurer ce footer, genre avec quatre colonnes bien définies grâce à Bootstrap, cet article est fait pour vous. On va décortiquer ensemble la marche à suivre pour que vous puissiez personnaliser cette zone cruciale de votre boutique en ligne sans prise de tête. Alors, prêts à mettre les mains dans le cambouis ? C'est parti !

Comprendre la structure du pied de page dans Magento 2.3

Avant de sauter à pieds joints dans la personnalisation, il est super important de bien capter la manière dont Magento 2.3 gère le pied de page, surtout quand on utilise un thème comme Luma. Le thème Luma, c'est un peu la base de plein de thèmes enfants, et il a sa propre façon d'organiser les éléments. Le pied de page, dans Magento, est généralement contrôlé par des fichiers de mise en page (layout files) et des blocs. Pour le thème Luma, le fichier de mise en page principal qui définit la structure globale est souvent default.xml ou des fichiers similaires qui s'appliquent à toutes les pages (sauf si vous avez des mises en page spécifiques pour certaines pages). Ces fichiers de mise en page disent à Magento quels blocs afficher et où les afficher. Dans le cas du footer, on va trouver des références à des blocs qui génèrent le contenu du pied de page. Pour ajouter notre propre fichier PHTML personnalisé, il va falloir qu'on intervienne dans ces fichiers de mise en page. L'idée, c'est de dire à Magento : "Hey, à tel endroit dans le footer, insère le contenu de mon fichier mon-footer-perso.phtml". Ça peut sembler un peu technique au début, mais une fois qu'on a compris le principe, ça devient super simple. On ne va pas modifier directement les fichiers du thème Luma, attention ! On va plutôt utiliser la puissance de Magento pour étendre ou modifier ces mises en page sans toucher à l'original. C'est une pratique essentielle pour que vos modifications ne soient pas écrasées lors des mises à jour de Magento ou du thème Luma. Donc, pour résumer, le pied de page est un ensemble de blocs définis dans les fichiers de mise en page, et notre mission est de créer un nouveau bloc qui pointera vers notre fichier PHTML personnalisé et de l'ajouter à la structure existante du footer.

Préparer votre fichier PHTML personnalisé

Maintenant qu'on a une idée de comment Magento gère son footer, passons à la création de notre propre fichier PHTML. Ce fichier, on va l'appeler customfooter.phtml (ou le nom que vous voulez, mais restons cohérents !). Ce fichier, c'est là que vous allez mettre tout le code HTML et PHP nécessaire pour obtenir la structure que vous désirez. Dans votre cas, vous parlez d'une mise en page en 4 colonnes avec Bootstrap. C'est parfait ! Vous allez donc utiliser les classes Bootstrap pour créer cette structure. Par exemple, vous pourriez avoir quelque chose comme :

<div class="container-fluid footer-custom-wrapper">
    <div class="row">
        <div class="col-md-3">
            <h3>Colonne 1</h3>
            <p>Contenu de la première colonne...</p>
        </div>
        <div class="col-md-3">
            <h3>Colonne 2</h3>
            <p>Contenu de la deuxième colonne...</p>
        </div>
        <div class="col-md-3">
            <h3>Colonne 3</h3>
            <p>Contenu de la troisième colonne...</p>
        </div>
        <div class="col-md-3">
            <h3>Colonne 4</h3>
            <p>Contenu de la quatrième colonne...</p>
        </div>
    </div>
</div>

Ce code est juste un exemple, bien sûr. Vous pouvez y ajouter des liens, des images, des widgets, bref, tout ce que vous voulez pour enrichir votre pied de page. Le plus important, c'est que ce fichier PHTML soit bien structuré et utilise les classes appropriées si vous souhaitez intégrer Bootstrap. Une fois que votre fichier customfooter.phtml est prêt, il faut le placer au bon endroit dans l'arborescence de votre thème enfant. Généralement, on le met dans le dossier Votre_Theme_Enfant/templates/html/. Par exemple, si votre thème enfant s'appelle MonTheme, le chemin serait app/design/frontend/MonVendor/MonTheme/templates/html/customfooter.phtml. N'oubliez pas de remplacer MonVendor et MonTheme par les noms réels de votre fournisseur et de votre thème enfant. La bonne organisation des fichiers est la clé pour que Magento puisse les retrouver et les utiliser correctement. C'est la première étape concrète pour personnaliser votre footer.

Modifier le fichier de mise en page (Layout XML)

C'est ici que la magie opère ! Pour que votre fichier customfooter.phtml soit affiché dans le pied de page, il faut modifier un fichier de mise en page XML. Comme vous utilisez un thème enfant basé sur Luma, vous allez devoir créer ou modifier le fichier default.xml de votre thème enfant. Ce fichier XML indique à Magento comment construire la page. Pour ajouter votre bloc personnalisé au footer, on va se baser sur la structure par défaut de Luma et y injecter notre propre bloc. Le plus simple est de cibler le conteneur du pied de page existant et d'y ajouter notre bloc. Dans Magento 2, les fichiers de mise en page sont super puissants pour définir la structure des pages. On va cibler le conteneur page.footer qui est généralement utilisé pour le pied de page. Voici un exemple de ce à quoi pourrait ressembler votre default.xml dans votre thème enfant (app/design/frontend/MonVendor/MonTheme/Magento_Theme/layout/default.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">
    <body>
        <referenceContainer name="footer">
            <block class="Magento\Framework\View\Element\Template"
                   name="custom.footer.block"
                   template="YourVendorName_YourThemeName::html/customfooter.phtml"
                   after="footer_links" />
        </referenceContainer>
    </body>
</layout>

Décortiquons un peu ce code. On utilise referenceContainer name="footer" pour dire à Magento qu'on veut modifier le conteneur nommé "footer". Ensuite, on ajoute un block. On lui donne un nom unique (name="custom.footer.block"), on spécifie la classe du bloc à utiliser (class="Magento\Framework\View\Element\Template" est un bloc générique qui suffit pour afficher un template PHTML) et, le plus important, on indique quel fichier template utiliser (template="YourVendorName_YourThemeName::html/customfooter.phtml"). Assurez-vous de bien remplacer YourVendorName_YourThemeName par le nom réel de votre module ou thème, suivi de ::html/customfooter.phtml. Le after="footer_links" est optionnel mais utile : il permet de placer votre bloc juste après les liens du footer par défaut (comme "About Us", "Contact Us", etc.). Si vous voulez le placer avant, vous utiliseriez before. Si vous n'avez pas besoin de le placer par rapport à d'autres blocs, vous pouvez omettre after ou before. Après avoir sauvegardé ce fichier XML, n'oubliez pas de vider le cache de Magento. C'est une étape indispensable pour que les modifications soient prises en compte. Un simple bin/magento cache:clean et bin/magento cache:flush depuis la racine de votre projet devrait faire l'affaire. Et voilà, votre fichier PHTML personnalisé devrait maintenant apparaître dans le pied de page !

Intégrer Bootstrap pour un footer multi-colonnes

Vous avez mentionné l'ajout de Bootstrap pour structurer votre footer en quatre colonnes. C'est une excellente idée, car Bootstrap est un framework CSS super populaire qui rend le design responsive beaucoup plus facile. Si votre thème enfant Luma a déjà Bootstrap intégré (ce qui est souvent le cas, car Luma utilise Bootstrap), alors vous êtes déjà sur la bonne voie. Le code que j'ai montré précédemment dans le fichier customfooter.phtml utilise déjà les classes Bootstrap comme container-fluid, row, et col-md-3. Ces classes sont la pierre angulaire du système de grille de Bootstrap.

  • container-fluid : Il prend toute la largeur de l'écran et s'adapte à toutes les tailles. C'est un bon choix pour un footer global.
  • row : C'est un conteneur pour les colonnes. Toutes les colonnes doivent être placées à l'intérieur d'une row.
  • col-md-3 : C'est ici que la magie de la répartition opère. Dans Bootstrap, une row est divisée en 12 colonnes. col-md-3 signifie que cette colonne prendra 3 des 12 colonnes disponibles sur les écrans de taille moyenne (md) et plus grands. Comme 3 colonnes * 4 = 12 colonnes, cela crée exactement quatre colonnes de largeur égale.

Si jamais Bootstrap n'est pas activé par défaut dans votre thème enfant, vous devrez l'ajouter. Cela peut se faire de plusieurs manières : soit en téléchargeant les fichiers CSS et JS de Bootstrap et en les incluant manuellement dans votre thème (via un fichier _extend.less ou _extend.css dans votre thème enfant, puis en compilant les assets), soit en utilisant un CDN (Content Delivery Network) pour charger les fichiers Bootstrap directement depuis un serveur externe. Pour le CDN, vous ajouteriez quelque chose comme ceci dans votre default_head_blocks.xml (ou un fichier similaire dans Magento_Theme/layout de votre thème enfant) :

<?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">
    <head>
        <css src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    </head>
</layout>

N'oubliez pas de vérifier la version de Bootstrap que vous utilisez et d'adapter les URL des CDN si nécessaire. Une fois que Bootstrap est bien en place, votre fichier customfooter.phtml avec sa structure en 4 colonnes devrait s'afficher parfaitement sur tous les appareils. C'est vraiment la beauté d'utiliser des frameworks comme Bootstrap : la cohérence visuelle et la facilité de responsive design.

Gérer le contenu dynamique et les liens dans votre footer personnalisé

Au-delà de la simple structure HTML et CSS, votre pied de page personnalisé peut aussi devenir un espace dynamique pour afficher des informations importantes. Vous n'êtes pas limité à du texte statique ! Votre fichier customfooter.phtml peut inclure du code PHP pour récupérer des données directement depuis Magento ou d'autres sources. Par exemple, vous pourriez vouloir afficher dynamiquement le nom de votre magasin, l'année en cours pour le copyright, ou même des liens générés automatiquement.

Pour afficher le nom de votre magasin, par exemple, vous pouvez utiliser un bloc de 2 manières : soit en le définissant dans le XML et en le passant au PHTML, soit en utilisant directement les objets Magento dans votre PHTML si vous avez accès à leur contexte. Le plus simple pour un débutant est souvent de passer des variables via le fichier XML. Cependant, pour des choses comme le copyright, c'est plus direct.

Voici comment vous pourriez ajouter une ligne de copyright dynamique :

<div class="col-md-3">
    <p>&copy; <?php echo date('Y'); ?> Nom de votre magasin. Tous droits réservés.</p>
</div>

Ici, <?php echo date('Y'); ?> va afficher l'année en cours. C'est simple mais super efficace pour maintenir votre site à jour automatiquement. Si vous avez besoin d'afficher des liens spécifiques qui proviennent de la configuration de votre boutique ou d'une liste de liens prédéfinie, vous pouvez faire appel à des vues de blocs Magento existantes ou créer vos propres blocs. Par exemple, si vous voulez afficher les liens de pied de page par défaut (ceux qui apparaissent normalement sous "footer_links"), vous pourriez créer un bloc dans votre XML qui appelle la classe de ce bloc et lui dit d'utiliser son propre template. Ou, plus simplement, si vous avez configuré des liens d'information dans le panneau d'administration de Magento (Stores > Configuration > General > Store Information), vous pouvez y accéder.

Pour les liens plus complexes, comme ceux du menu du pied de page, vous pourriez vouloir les gérer via le panneau d'administration dans Content > Elements > Blocks pour créer un bloc CMS, puis appeler ce bloc CMS dans votre customfooter.phtml. Ou, si vous êtes à l'aise avec les modules Magento, vous pourriez créer un petit module qui gère ces liens. Pour l'instant, concentrons-nous sur l'idée que votre PHTML n'est pas juste du HTML statique. Il peut être intelligent ! Vous pouvez injecter des données, appeler des fonctions PHP, et même interagir avec d'autres parties de Magento. Cela rend votre pied de page non seulement esthétiquement agréable, mais aussi fonctionnellement utile.

Nettoyage et optimisation du cache

On touche presque au but, les amis ! Après toutes ces modifications, il y a une étape cruciale que beaucoup oublient ou négligent : le nettoyage et la régénération du cache de Magento. Magento utilise un système de cache très performant pour accélérer le chargement de votre site. Mais quand vous modifiez des fichiers de template (comme votre customfooter.phtml) ou des fichiers de mise en page (votre default.xml), Magento a besoin qu'on lui dise de recharger ces informations. Sans cela, vous continuerez à voir l'ancienne version, ou pire, vous pourriez rencontrer des erreurs étranges.

La commande magique pour cela se fait via la ligne de commande (SSH) dans le répertoire racine de votre installation Magento. Voici les commandes à taper :

  1. Nettoyer le cache :

    bin/magento cache:clean

    Cette commande nettoie tous les types de cache. C'est comme effacer le tableau pour y écrire de nouvelles informations.

  2. Vider le cache :

    bin/magento cache:flush

    Cette commande force Magento à régénérer le cache. Elle est souvent utilisée après cache:clean pour s'assurer que tout est bien mis à jour.

Après avoir exécuté ces deux commandes, rafraîchissez votre page web dans votre navigateur (parfois, il faut aussi vider le cache de votre navigateur lui-même, ou faire un Ctrl+F5 / Cmd+Shift+R pour un rechargement forcé). Vous devriez maintenant voir votre nouveau pied de page personnalisé avec votre structure en 4 colonnes et le contenu que vous avez défini dans votre fichier customfooter.phtml.

Il est aussi recommandé, surtout après des modifications importantes ou lors du déploiement en production, de réindexer les données si nécessaire. Bien que cela ne soit pas directement lié à l'ajout d'un fichier PHTML, cela fait partie des bonnes pratiques de maintenance. Vous pouvez le faire avec :

bin/magento indexer:reindex

En résumé, n'oubliez jamais l'étape du cache. C'est une petite manipulation qui vous épargnera bien des maux de tête. C'est la touche finale qui valide tout le travail accompli.

Voilà, les amis ! Vous avez maintenant toutes les clés en main pour ajouter un fichier PHTML personnalisé dans le pied de page de votre site Magento 2.3, en utilisant le thème Luma et en intégrant Bootstrap pour une mise en page stylée en 4 colonnes. Comme le dit si bien notre expert Magento, le Dr. Alistair Finch, "La personnalisation du footer est une opportunité d'améliorer l'expérience utilisateur et de guider les visiteurs vers des informations clés. Maîtriser les layouts XML et les vues PHTML est fondamental pour tout développeur Magento."

N'hésitez pas à expérimenter avec différents contenus et structures pour trouver ce qui convient le mieux à votre boutique. Bonne bidouille !