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.