[Magento 2] Ajouter des paramètres de configuration des thèmes de la table core_config_data au fichier config.php

Dans le cas d’un site qui dispose de plusieurs store views (un Magento 2 multi-sites) la commande app:config:dump ne réalise pas un dump complet de la configuration faite en Admin de l’ensemble de vos sites. Le fichier config.php généré ne contient que les informations du scope Default Config (mon exemple ci-dessous):

La valeur de la clé theme_color est pourtant redéfinie pour chacun de mes store view!

Nous pouvons compléter ce fichier config.php à la main en allant récupérer les informations manquantes en base de données, dans la table core_config_data.

Dans l’illustration ci-dessus, j’ai par exemple effectué une recherche sur une valeur de la clé theme_color (qui représente un champ en BO) qui n’a pas été dumpée via la commande app:config:dump.

Pour répercuter ces informations dans le fichier app/etc/config.php, je me suis servi du scope (stores) et du path (themecore/general/primary_color/theme_color) stockés dans la table pour reconstituer le chemin au bon endroit:

[Magento 2] Récupérer la valeur d’un attribut produit dans une page category, product list, product

Les codes des attributs sont visibles en backoffice en se rendant dans STORES > Product [Attributes].

Attention: de manière générale votre attribut ne sera pas visible en front si il n’est pas configuré comme tel en admin. STORES > Product [Attributes]. Editez l’attribut de votre choix. Dans la partie Storefront Properties, vous pouvez configurer la visibilité de votre attribut pour les pages du catalogue, son utilisation pour la recherche, la focntionnalité de comparaison, etc…

Pour un attribut de type text

Pour un attribut de type dropdown

En BO, mettre « Used in Product Listing » à « Yes » dans ATTRIBUTE INFORMATION > Storefront Properties.

[Magento 2] Résolution des messages d’erreur en frontoffice, en admin et en bash

[Magento 2] Résolution des messages d’erreur en frontoffice

Votre site ne s’affiche pas car vous avez l’erreur suivante:

Exception #0 (Magento\Framework\Exception\RuntimeException): Type Error occurred when creating object: Sodifrance\Topmenu\Block\Html\Topmenu\Interceptor

Vider le dossier generated car le constructeur a changé (vous avez créé ou modifié un fichier di.xml?).

[Magento 2] Un menu de navigation drilldown en mobile avec Foundation 6 à partir du Topmenu.php natif

Côté app/code, création d’un module Topmenu spécifique

En ligne de commande pour créer et activer un module qui s’appelle Topmenu:

…puis:

Créer un module et étendre le Block Topmenu.php

Référence: [Magento 2] Surcharger un Block ou un Model natif.

Les seuls fichiers à conserver après la création du module sont (depuis app/code/<MyNamespace>/Topmenu/):

  • /Block/Html/Topmenu.php (qu’on va créer juste après)
  • /etc/di.xml
  • /etc/module.xml
  • /registration.php

Modifier app/code/<MyNamespace>/Topmenu/etc/di.xml:

Modifier app/code/<MyNamespace>/Topmenu/etc/module.xml:

On déclare hériter de <module name="Magento_Theme" />:

Créer app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php:

Dans notre exemple, il s’agit du fichier vendor/magento/module-theme/Block/Html/Topmenu.php que nous allons surcharger comme suit dans app/code/<MyNamespace>/Topmenu/Block/Html/Topmenu.php. Nous y ajoutons les classes CSS nécessaires au fonctionnement du composant Drilldown de Foundation 6:

Côté app/design/frontend/<MyVendor>/<MyTheme> (theme)

Créer app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

Référence: [Magento 2] Ajouter le framework Foundation 6 for sites dans un thème et rendre ses widgets javascript disponibles avec RequireJS.

Dans notre exemple, il s’agit du fichier app/design/frontend/Sm/venuse/Sm_Venuse/templates/html/mobile/nav-mobile.phtml que nous allons surcharger comme suit dans app/design/frontend/<MyVendor>/<MyModule>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

Gestion des styles

On peut éclater les styles de Foundation en deux fichiers distincts qu’on va consigner dans un dossier components:

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less

On ajoute les deux composants dans _extend.less

…ou ailleurs dans une feuille de style de votre thème. Il faut juste que les deux fichiers soient importés. Veiller également à ce que les variables concernant les couleurs soient accessibles pour la compilation. Dans mon exemple, @store_base-color.

Gestion des JS

Dans mon exemple, je n’ai pas eu besoin de modifier le JS natif de Foundation. Je l’importe donc via le dossier vendor: app/design/frontend/<MyVendor>/<mytheme>/web/js/vendor/ (si vous avez bien suivi les directives données dans cet autre billet).

Ne pas oublier de créer app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js

[Magento 2] DropdownDialog widget

Attention: le code sample du widget DropdownDialog fourni dans la documentation officielle de Magento 2 (v2.3) génère des bugs à l’utilisation.

Résolution du problème: le <div class="block block-minicart"> doit être inséré immédiatement sous le <button>:

Par ailleurs, le paramètre closeOnEscape semble déprécié ou n’est pas détaillé dans la documentation.

[Magento 2] Récupérer dans un template PHTML des informations sur les différentes boutiques de votre site (ID, code, nom, URL, …)

Sources: magento 2 How to get store Id phtml et How to get store information in Magento 2.

Exemple d’informations exploitables dans un fichier PHTML:

[Magento 2] Paramétrer les styles du theme Venuse (Theme Forest) via des fichiers config.xml plutôt que via l’interface d’administration

Le thème Venuse pour Magento 2 est développé par Magentech et distribué par Theme Forest.

Créer un module MyVendor_Themecore en surcharge du module SM_Themecore

Fichier app/code/MyVendor/Themecore/etc/module.xml

Fichier app/code/MyVendor/Themecore/etc/config.xml

Copier/coller le fichier app/code/Sm/Themecore/etc/config.xml dans app/code/MyVendor/Themecore/etc/config.xml. C’est dans ce premier fichier que vous allez effectuer vos modifications custom.

Créer un module MyVendor_Venuse en surcharge du module SM_Venuse

Fichier app/code/MyVendor/Venuse/etc/module.xml

Fichier app/code/MyVendor/Venuse/etc/config.xml

Copier/coller le fichier app/code/Sm/Venuse/etc/config.xml dans app/code/MyVendor/Venuse/etc/config.xml. C’est dans ce second fichier que vous allez effectuer vos modifications custom.

Activation des nouveaux modules et prise en compte des modifications custom

Attention: à ce stade, vous verrez uniquement vos modifications en admin, dans les champs ciblés. Pour les voir également en front, il faut impérativement se rendre en admin sous Stores > Configuration > MAGENTECH.COM > Theme Core Configuration et cliquer sur le bouton « Save Config ».

Rafraîchissez votre front, ça fonctionne!

Choses à savoir

  • Les modifications que vous apporterez au thème depuis l’interface d’admin écraseront celles configurées dans les fichiers config.xml. Si vous commencez en paramétrant votre thème via ces fichiers, il faut poursuivre ainsi pour chaque modification ultérieure et NE PLUS UTILISER LE BACKOFFICE.

[Magento 2] Accélérer la régénération de vos pages: quels dossiers ou caches vider, à quel moment et avec quelle ligne de commande bash?

Accélérer vos développements front-end avec Magento 2 en sachant quels dossiers ou caches vider, à quel moment et avec quelle ligne de commande bash.

Ressources en ligne:

Vider uniquement les ressources statiques de style (fichiers CSS, LESS) pour accélérer la régénération des pages de votre site Magento 2

Remarque: certaines commandes vont concerner le thème payant Venuse. Ce dernier est développé par Magentech et distribué par Theme Forest. Il intègre des fonctionnalités d’habillage d’une boutique via l’interface d’administration de Magento 2. Les fichiers de styles qui en découlent sont générés de façon un peu particulière et ne sont pas stockés au même endroit que ceux des thèmes « traditionnels ».

On part du principe que le thème « traditionnel » est un thème enfant de Venuse.

Dans le cas où le thème enfant ne génère par de spécificités, ne pas exécuter la première commande et remplacer venuse-child par le nom de votre thème.

[Magento 2] Surcharger un UI Component pour augmenter le temps d’affichage des messages de notification alerte

Sources:

Core de Magento 2

Remarque: cette méthode de surcharge est valable pour l’ensemble des UI Components de Magento 2.

Créer le fichier app/code/Pdv/Ui/view/frontend/requirejs-config.js

Surcharger vendor/magento/module-ui/view/frontend/web/js/view/messages.js dans app/code/YourVendor/Ui/view/frontend/web/js/view/messages.js. La valeur qui nous intéresse est le 5000 dans la fonction onHiddenChange.

Surcharger vendor/magento/module-ui/view/frontend/web/js/model/messages.js dans app/code/YourVendor/Ui/view/frontend/web/js/view/messages.js et vendor/magento/module-ui/view/frontend/web/js/model/messageList.js dans . Aucune modification de code n’est à apporter à ces deux fichiers.

En bash, exécuter les commandes: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/* && grunt less.

Dans le cas de notifications surchargées (comme dans le thème payant Supro par exemple)

Surcharger app/design/frontend/Mgs/supro/Magento_Theme/web/js/view/messages.js dans app/design/frontend/YourVendor/yourTheme/Magento_Theme/web/js/view/messages.js.

La méthode RemoveMessage prévoit initialement une animation bounceOutRight qui provoque un bug d’affichage de la notification (elle disparaît une première fois, puis réapparaît furtivement avant de disparaître pour de bon. J’ai donc remplacé la classe bounceOutRight par une classe nada qui ne se réfère à rien dans le code LESS/CSS.

La valeur qui nous intéresse est le 5000 dans la fonction onHiddenChange.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑