Mise en place d’un thème Magento 2

Magento 2 intègre un système de thème puissant. Pour rappel, selon  le glossaire Magento, un thème contient des informations graphiques et d'apparence. Il permet de personnaliser le magasin à l'image de la marque.

Je sous propose de suivre la mise en place d'un thème et d'avoir un aperçu de certaines notions essentielles du système de thème utilisé par Magento 2.

Magento permet de disposer de thèmes installables via des packages composer, mais également de créer ses propres thèmes via app/design.

Les thèmes sont destinés à surcharger / étendre les ressources des vues, initialement utilisées par des modules et librairies.

Magento 2 intègre de base deux thèmes : Luma, un thème de démonstration déjà bien personnalisé, et blank, qui sert  de base à la création d'un thème custom, mais intégrant des éléments indispensables, comme la gestion du responsive.

Theme Luma.

Il est possible d'utiliser le thème Luma comme point de depart, mais il est fortement recommandé d'utiliser  le thème blank pour créer votre nouveau thème, qui héritera du blank.

Pour avoir une idée de l'implémentation de ces thèmes, il faut aller dans les répertoires:

  • vendor/magento/theme-frontend-blank
  • vendor/magento/theme-frontend-luma

L'héritage va permettre d'étendre le thème parent facilement, de le modifier avec un minimum d'efforts. Pour utiliser cela il faut définir le parent lors de la création de notre thème.

Créer le thème

Avant tout, il faut créer les répertoires de la manière suivante:

app/design/frontend/<Your_vendor_name>/<your_theme_name>

Ajouter un fichier de déclaration theme.xml avec le contenu suivant:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> 

     <title>Mytheme</title> 

     <parent>Magento/blank</parent> 

     <media> 

         <preview_image>media/preview.jpg</preview_image> 

     </media> 

</theme> 

Ajouter un fichier pour enregistrer le thème au niveau du système: registration.php

<?php
/**
* Copyright © 2017 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Vendor/theme,
__DIR__
); 

Créer les répertoires et fichiers suivants:

  • web/css/source
  • web/fonts
  • web/images
  • web/js
  • media/preview.jpg (Image de prévisualisation du theme)

 

Déclarer et ajouter un logo

Créer le fichier default.xml dans app/design/frontend/Vendor/theme/Magento_Theme/layout avec le contenu suivant:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/my_logo.png</argument>
                <argument name="logo_img_width" xsi:type="number">300</argument>
                <argument name="logo_img_height" xsi:type="number">300</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Et placer le fichier my_logo.png dans le dossier images (exemple de nom de fichier).

Configurer le thème dans le panneau d'Administration

Se connecter à l'admin et aller dans : Content → Configuration.

Edit:

Sélectionner le thème et enregistrer (save configuration):

Il faut maintenant exécuter quelques commandes Magento dans un terminal:

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/mageno cache:clean
php bin/magento cache:flush

Il n'y a plus qu'à aller sur le front pour apprécier les changements.

Configurer les images du theme

Les tailles et propriétés des images utilisées dans une boutique sont déclarées dans un fichier de configuration view.xml. Si le thème parent est satisfaisant, le fichier est optionnel.

Mais si les images sont différentes, il convient de mettre en place ce fichier.

Pour cela, créer dans notre thème le fichier etc/view.xml

Ce fichier configure les tailles d'images à utiliser par Magento pour notre thème, mais également les paramètres du visionneur d'images de la fiche produit.

Exemple:

...
    <image id="category_page_grid" type="small_image">
        <width>250</width>
        <height>250</height>
    </image>
...

Une fois les modifications effectuées, il convient de nettoyer les caches et de dire à Magento de redimensionner les images:

php bin/magento cache:flush
php bin/magento catalog:images:resize

 

Modifier et compiler le theme

Magento 2 utilise le langage less, et doit donc être compilé. Pour cela, Magento dispose du task-runner grunt et quelques commandes prédéfinies.

Afin de pouvoir l'utiliser, quelques étapes sont nécessaires:

  • Installer node.js sur la machine
  • Installer grunt :
npm install -g grunt-cli

 

Renommer les fichiers suivants à la racine du projet:

  • package.json.sample en package.json
  • Gruntfile.js.sample en Gruntfile.js

Installer (ou mettre à jour) les dépendances:

cd <racine_du_projet>npm install && npm update

 

Ajouter le thème à la config de Grunt:  dev/tools/grunt/configs/themes.js dans module.exports:

  • <theme>: code du theme
  • <language>: locale (ex: fr_FR)
  • <path_to_file>: relatif au repertoire app/design/frontend/<Vendor>/<theme>/web ( 'css/styles-m' et
    'css/styles-l' pour étendre le thème blank)

Commandes GRUNT:

Commande Action
grunt clean:<theme>

 

Efface les fichiers statiques générés précédemment dans les dossiers pub/static et var
grunt exec:<theme> Republie les symlinks des fichiers source vers les dossiers pub/static/frontend/<Vendor>/<theme>/<locale>.
grunt less:<theme> Compile en css les fichiers less en utilisant les symlinks précédemment publiés dans les dossiers

pub/static/frontend/<Vendor>/<theme>/<locale>

grunt watch Traque et detecte les changements sur les fichiers less, et recompile

Exemple de modification

Pour commencer, créer le fichier app\design\frontend\<Vendor>\<theme>\web\css\source\_theme.less

Changer la couleur du body dans ce fichier:

body {
    background-color: red;
}

Lancer les commandes suivantes à chaque rajout/suppression de fichier:

grunt clean:mytheme
grunt exec:mytheme

Et enfin pour compiler les changements:

grunt less:mytheme

 

Et on pourra apprécier un magnifique site avec un fond rouge!

 

Nous avons vu au travers de la mise en place du thème qu'il était facile et rapide de réaliser cette opération. On pourra noter que notre thème pourra servir de parent pour la mise en place d'un autre thème du même projet. Il ne reste plus qu'à laisser aux développeurs front-end le plaisir de modifier le thème aux couleurs du client!

Source: Documentation officielle magento 2.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.