Monthnovembre 2019

[Magento 2] Astuces d’utilisation du thème Supro

Eviter des conflits d’édition entre le FO et le BO

Selon la doc officielle du thème Supro, veiller à bien désactiver le cache « full_page »:

MAIS en procédant ainsi, les modification appliquées via le BO ne sont pas remontées en FO. Le seule solution semble être de désactiver TOUS LES CACHES:

Après l’import d’une base de données, pour retrouver le paramètrage backoffice et l’aspect visuel frontoffice

Puis se rendre en BO > MGS > Theme Setting [MGS Theme] > et cliquer sur le bouton « Save Config » sans faire de modif.

Modifier le logo du site sans passer par l’interface d’édition des pages en front

Fichier à remplacer (en conservant le même libellé et la même extension): Z:\magento2\pdv\pub\static\frontend\Mgs\supro\fr_FR\images\logo.svg

Composer un habillage depuis le code source (et pas depuis l’interface d’admin)

Il est possible de composer un habillage du thème Supro depuis le code source. Supro fournit 2 moyens bien distincts d’agir sur le front:

  • En remplissant les champs prévus depuis l’interface d’admin
  • En remplissant les (mêmes) champs prévus depuis l’options « Customize » en front-office

Il y a une différence de fonctionnement très importante entre ces 2 modes (edit: vérifier que l’édition depuis l’admin génère bien uniquement des CSS et l’édition depuis le front uniquement des fichiers XML):

  • L’édition admin stocke les valeurs saisies en base de données et des fichiers CSS sont générés via le fichier <votre_projet>\app\code\MGS\ThemeSettings\Helper\Config.php.

    Les fichiers CSS, générés à partir du contenu renseigné en BO dans le champ MGS > Page Builder Setting [Page Builder] > Font & Style > Custom Style, sont les suivants:

    • pub/media/mgs/fbuilder/css/<store_id>/fbuilder_config.css
    • pub/media/mgs/fbuilder/css/<store_id>/fbuilder_config.min.css: ce fichier est une copie de celui déclaré juste au-dessus. Le code est probablement sensé être minifié mais ce n’est pas le cas sur l’instance où j’ai effectué mes tests… C’est cependant lui qui est utilisé en front. Il est chargé en tout dernier.
    • A noter, dans certains cas, la génération des fichiers pub/media/mgs/fbuilder/css/blocks.css et pub/media/mgs/fbuilder/css/blocks.min.css
  • L’édition front-office stocke les valeurs saisies dans un fichier <votre_projet>\pub\media\mgs\customize\<store_id>\settings.xml

Note: dans le chemin vers le fichier settings.xml, le store_id vous permet de retrouver à quel store le fichier va s’appliquer. Le store « 1 » (<votre_projet>\pub\media\mgs\customize\1\settings.xml) correspond à la configuration par défaut de votre Magento. Voir ici comment retrouver rapidement des informations comme le store_id dans Magento 2.

Lorsque vous éditez un fichier settings.xml, vos modifications ne seront visibles en front qu’à partir du moment ou vous aurez cliqué sur le bouton « Customize » puis sur le bouton Save for « Vue magasin » (pour une store view donnée) ou « Configuration par défaut » (pour le store par défaut, duquel l’ensemble des stores de votre instance de Magento 2 hérite) et que vous aurez rechargé la page avec un Ctrl + F5.

ATTENTION:

  • Si vous souhaitez éditer un habillage via ces fichiers settings.xml, n’utilisez pas les fonctionnalités d’habillage proposées dans l’interface d’admin!
  • (Si vous avez plusieurs stores) lorsque vous procédez à des modifications pour le store par défaut et que vos autres stores doivent en hériter, il faudra ré-effectuer chaque modiifcation à la main dans autant de fichiers settings.xml que vous avez de stores.

Fallback héritage CSS dans le thème Supro

Voici l’ordre de priorité (fallback/héritage) dans lequel les feuilles de styles sont déclarées en front, de la plus prioritaire à la moins prioritaire.
(notez comment procéder si vous souhaitez déclarer une CSS qui prendra le pas sur toutes les autres – cette feuille de style n’est pas listée ci-dessous)

  1. /static/frontend/Mgs/supro/fr_FR/mage/calendar.css »
  2. /static/frontend/Mgs/supro/fr_FR/css/styles-m.css »
  3. /static/frontend/Mgs/supro/fr_FR/MGS_AjaxCart/css/style.css »
  4. /static/frontend/Mgs/supro/fr_FR/mage/gallery/gallery.css »
  5. /static/frontend/Mgs/supro/fr_FR/MGS_ExtraGallery/css/style.css »
  6. /static/frontend/Mgs/supro/fr_FR/MGS_GDPR/css/gdpr.css »
  7. /static/frontend/Mgs/supro/fr_FR/MGS_Lookbook/css/theme.default.min.css »
  8. /static/frontend/Mgs/supro/fr_FR/MGS_Lookbook/css/styles.css »
  9. /static/frontend/Mgs/supro/fr_FR/MGS_Mmegamenu/css/megamenu.css »
  10. /static/frontend/Mgs/supro/fr_FR/MGS_ThemeSettings/css/theme_setting.css »
  11. /static/frontend/Mgs/supro/fr_FR/MGS_InstantSearch/css/styles.css »
  12. /static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/fontawesome.v4.7.0/fontawesome.css »
  13. /static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/owl.carousel.css »
  14. /static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/animate.css »
  15. /static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/magnific-popup.css »
  16. /static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/pbanner.css »
  17. /static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/styles.css »
  18. media= »screen and (min-width: 768px) » /static/frontend/Mgs/supro/fr_FR/css/styles-l.css »
  19. media= »print » /static/frontend/Mgs/supro/fr_FR/css/print.css »
  20. /static/frontend/Mgs/supro/fr_FR/css/mgs_theme_style_guide.css »
  21. /static/frontend/Mgs/supro/fr_FR/css/mgs_theme_fonts.css »
  22. /static/frontend/Mgs/supro/fr_FR/css/mgs_theme.css »
  23. /static/frontend/Mgs/supro/fr_FR/css/mgs_theme_responsive.css »
  24. /static/frontend/Mgs/supro/fr_FR/MGS_Aquickview/css/aquickview.css »
  25. /static/frontend/Mgs/supro/fr_FR/MGS_Brand/css/mgs_brand.css »
  26. media= »all » /media/mgs/fbuilder/css/blocks.min.css »
  27. media= »all » /media/mgs/fbuilder/css/1/fbuilder_config.min.css »

Surcharger (override) les valeurs de style par défaut (ou celles définies depuis l’interface d’admin)

Astuce testée fonctionnelle.

Les fichiers concernés dans votre thème qui doit logiquement être enfant de Supro

app/design/frontend/Sodifrance/pdv/MGS_Fbuilder/templates/html/head.phtml

app/design/frontend/Sodifrance/pdv/MGS_ThemeSettings/templates/html/head.phtml

app/design/frontend/Sodifrance/pdv/web/css/source/_extend.less

app/design/frontend/Sodifrance/pdv/web/css/source/_theme-variables.less

Dans ce fichier, vos variables LESS. Il n’existe pas de variables LESS parentes dans le thème Supro (la feuille de style étant générée via le fichier app/code/MGS/ThemeSettings/Helper/Config.php). Il ne s’agit donc pas de surcharges et vous pouvez les nommer comme bon vous semble (sachant que Supro fournit quand même un pattern dans le fichier Config.php dont le chemin a été communiqué juste au-dessus).

Pattern utilisé par le thème Supro pour la nomenclature de ses variables LESS

Le pattern utilisé est $<scope><LibelléDeLaVariable>. Un exemple ci-dessous ou la valeur de $mainPriceColor est directement injectée dans la feuille de style:

Ici, $mainPriceColor pourrait devenir, dans vos sources LESS: @mainPriceColor: <valeur>;

app/design/frontend/Sodifrance/pdv/web/css/supro-override.less

Les fichiers concernés hors thème

dev/tools/grunt/configs/local-themes.js

On y déclare la feuille de style supro-override.less.

[Magento 2] Les commandes Magerun du développeur Front-End

Ressources en ligne:

Notes valables pour la version 2.3.x

Accéder au bash d’un container Docker en tant qu’utilisateur www-data: docker exec -tiu www-data {container name} bash.

Exécuter une commande Magento 2 dans le container Docker « web » en tant qu’utilisateur www-data: docker exec -tiu www-data {web container name} n98-magerun2 {commande}.

Certaines commandes Magento (Magerun) ne fonctionnent plus?

Erreur: There are no commands defined in the « app:config » namespace.

Mettre à jour l’autoloading composer:

Changement de mode

Déployer les sample datas

Nettoyer les caches

  • $ bin/magento cache:clean ($ bin/magento cache:flush pour un nettoyage plus radical qui va impacter les caches d’autres sites/applications -> à n’exécuter que si cache:clean n’a pas fonctionné)
  • rm -rf pub/static/*; rm -rf var/view_preprocessed/* Vider les caches statiques du thème (pas utile en mode developer à priori).

Nettoyer les caches CSS (moins bourrin que le rm -rf pub/static/... de Magento 2)

Attention: ces commandes ne concernent que les ressources CSS (pas les JS).

Ces commandes expliquées:

Attention: en cas de modification dans la hiérarchie des thèmes ou d’ajout d’un nouveau thème un rm -rf pub/static/*; rm -rf var/view_preprocessed/* reste conseillé.

Les commandes de compilation des assets front-end

  • grunt clean && grunt exec && grunt less && grunt watch La commande grunt à lancer le matin.

Aide au développement/debug

  • $ bin/magento dev:template-hints:enable; bin/magento cache:clean et $ bin/magento dev:template-hints:disable; bin/magento cache:clean pour activer/désactiver les templates hints.
    • $ n98-magerun2 dev:template-hints:enable; n98-magerun2 cache:clean
    • $ n98-magerun2 dev:template-hints:disable; n98-magerun2 cache:clean

Faire un backup (dump) de la base de données et des médias

Il existe deux commandes magerun pour ça:

Importer un backup (dump) de la base de données et des médias

Importer un backup (dump) de la base de données gzippé

Si erreur You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '' at line 1:

Appliquer les changements après import d’une nouvelle base de données

Appliquer les modifications des fichiers app/etc/config.php et app/etc/env.php

Appliquer les changements de schéma en base de données

Déployer le thème adminhtml en langue anglaise

Si les pages de votre interface d’admin sont très lentes à se charger:

Déployer tous les thèmes frontend en langue française

…sans se taper une erreur d'allowed memory size en plein milieu du déploiement:

setup:di:compile

Si erreur: PHP Fatal error: Allowed memory size ... bytes exhausted...:

Créer un compte admin

Modifier le mot de passe du compte admin

Dévérouiller le compte admin

Faire un dump de la toute la config BO (fichier généré: config.php)

ATTENTION AVANT DE LANCER CETTE COMMANDE, FAITES UNE COPIE DE VOTRE FICHIER config.php INITIAL CAR IL SERA ECRASE!

Pour prise en compte des modifications effectuées dans le fichier config.php:

Ré-indexer le catalogue

Si vous n’avez pas de produits en front après avoir lancé la commande de réindexation, vous pouvez tenter ceci:

Manipuler les données des comptes clients (customers)

Lister les comptes clients

Changer le mot de passe d’un compte client

[Magento 2] Utiliser Grunt pour compiler les assets front-end

Difference between static content deploy & grunt exec.

Utilisation de Grunt lorsque le mode developer de Magento 2 est activé

Activer le mode developer de Magento 2

Activer le mode Developer de Magento 2: $ bin/magento deploy:mode:set developer.

Se rendre en backoffice dans Stores > Configuration [Settings] > ADVANCED > Developer. Dans Frontend Development Workflow > champ Workflow type > sélectionner « Client side less compilation » (au besoin, décocher la case « Use system value »). Bouton « Save Config » en haut à droite.

Préparer les fichiers de config nécessaires à l’utilisation de Grunt dans Magento 2

$ cp package.json.sample package.json; cp Gruntfile.js.sample Gruntfile.js; cp grunt-config.json.sample grunt-config.json; cp dev/tools/grunt/configs/themes.js dev/tools/grunt/configs/local-themes.js

Nous allons partir du principe que nous utilisons Grunt pour processer les fichiers source d’un thème enfant « luma-child ». C’est la raison pour laquelle nous créons un fichier dev/tools/grunt/configs/local-themes.js qui contient donc ceci:

Lancer les tâches Grunt et commencer à développer

Lancer la commande $ grunt clean && grunt exec && grunt watch. Lorsque Grunt est arrivé au bout des tâches clean, et exec, la tâche watch débute et vos fichiers sont surveillés. Désormais, à chaque fois que vous souhaiterez tester une modification en front pendant que la tâche watch tourne, il faudra lancer la commande $ rm -rf pub/static/*; rm -rf var/view_preprocessed/* avant de rafraîchir la fenêtre de votre navigateur.

Remarque: si vous rencontrez une erreur (dans l’exécution des tâches précédant le grunt watch) qui stoppe le process, le grunt watch ne fonctionnera pas correctement.

Remarque #2: la tâche $ grunt watch semble fonctionner uniquement si elle est exécutée précédée des tâches $ grunt clean && grunt exec.

Remarque #3: pour la surveillance des fichiers *.less, elle semble concerner l’ensemble des fichiers présents dans le scope du dossier /app/design/frontend/<Vendor>/theme/web/css/source. Autrement dit, pas besoin de déclarer ces fichiers dans /dev/tools/grunt/configs/local-theme.js. Exemple ci-dessous avec un thème luma_child:

A savoir: La présence des fichiers css/styles-m et css/styles-l n’est pas obligatoire dans votre thème, mais les déclarer dans votre fichier /dev/tools/grunt/configs/local-theme.js permet à Grunt de bien prendre en compte les fichiers de base d’un thème Magento 2 (_theme.less, _extend.less, etc…). J’ai eu, par exemple, un cas où la tâche grunt watch ne surveillait pas le code que j’écrivais et les fichiers que j’importais depuis le fichier natif _extend.less dans mon thème enfant. Après avoir signalé la présence des fichiers css/styles-m et css/styles-l dans mon fichier /dev/tools/grunt/configs/local-theme.js, le fichier _extend.less et tous les fichiers importés depuis ce dernier étaient surveillés.

Créer une tâche custom dans Grunt

Testé fonctionnel. Source: How to create a custom Grunt task in Magento 2 et version PDF pour la postérité.

Ajouter un plugin pour grunt-contrib-less

Attention: WiP pas fonctionnel

Attention #2: pensez à vérifier la compatibilité de votre plugin avec la version de grunt-contrib-less déclarée dans le fichier package.json à la racine de votre projet Magento 2!

$ npm install --save-dev less-plugin-lists

Modifier <project_root_folder>\dev\tools\grunt\configs\less.js en déclarant le plugin less-plugin-lists via l’option plugins de grunt-contrib-less:

$ grunt clean && grunt exec && grunt less && grunt watch

Supprimer la sous-tâche Grunt less:documentation du process de compilation des assets front-end de Magento 2

Lorsque le process Grunt en arrive à la sous-tâche less:documentation, j’obtiens ce message d’erreur (Magento 2.3):

Il s’agit d’une variable less qui n’est pas définie. On peut donc corriger les fichier less en définissant cette variable manquante, mais on peut aussi supprimer la sous-tache Grunt qui consiste à générer la documentation. Pour ce faire, éditer le fichier dev\tools\grunt\configs\less.js pour mettre les lignes suivantes en commentaire:

Ne pas compiler certains thèmes

Dans le fichier dev/tools/grunt/configs/less.js, ajouter une condition à la fonction _each et y lister les thèmes qui ne doivent pas être compilés:

Grunt dans Magento 2 – Troubleshooting

Erreur SyntaxError: unexpected token -" au lancement d’une tâche Grunt

ATTENTION: n’utilisez pas le caractère « tiret du 6 » (-) pour déclarer le libellé du thème dans le fichier dev/tools/grunt/configs/local-themes.js; préférez l’underscore (_) pour ne pas obtenir l’erreur SyntaxError: unexpected token -" au lancement de vos tâches Grunt!

Example de mauvaise pratique dans la déclaration d’un thème:

Example de bonne pratique dans la déclaration d’un thème:

En backoffice, la colonne de gauche est tassée

Les libellés des onglets s’affichent un caractère par ligne. Solution: lancer les processes Grunt avec la commande $ grunt clean && grunt exec && grunt less && grunt watch. Laisser terminer. Lorsque Grunt est en watch, taper dans un terminal la commande de suppression des fichiers statiques: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*. Rafraîchir votre page.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑