Monthmars 2020

[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.

[Magento 2] js-translation.json Localisation de chaînes de caractères récalcitrantes (qui restent en anglais) dans les notifications messages d’alerte

Bug inhérent à Magento 2. Les chaînes non-traduites sont dasn des fichiers javaScript. Un fichier js-translation.json contenant les traductions nécessaires est généré en front au chargement de la page, mais il est incomplet!

The cause of issue is: Sometime file js-translation.json is loaded slower or later than other javascript file (I assume file a.js contain some texts need to translate) which contains some texts need to translate so at this time translated texts still not push to storage. Source: Magento 2 javascript translation sometime translate sometime not work – Why and how to fix?.

Voir ici:

Attention: les solutions 1 à 4 ont été testées alors qu’aucun language pack pour le core de Magento 2 n’avait été installé. Il se trouve que les clés de traduction n’étaient présentes qu’en anglais dans le projet. Le front ne pouvait de ce fait pas afficher de libellés en français. Il est impératif d’avoir installé un language pack au préalable, avant de procéder à des tests sur les problèmes de build du fichier js-translation.json.

Solution #1 (testée Magento 2.3.4, non fonctionnelle)

Dans la DB, virer les rangées de inline translation qui sont importées dans la table core_config_data:

Puis:

Solution #2 (non testée)

Il faut impérativement qu’on ait un environnement où les traductions fonctionnent pour mettre en place cette solution: Magento 2 – Translations : how does js-translation.json get populated? Mine is empty!

Solution #3 (testée Magento 2.3.4, non fonctionnelle)

Magento 2 Knockout Translation Bug

Solution #4 (non testée)

js-translation.json fails to generated

Solution #5 (testée non fonctionnelle Magento 2.3.3, 2.3.4)

Problème de traductions dans Magento 2: les traductions ne fonctionnent pas.

Packs de langues (traductions)

Installer mageplazza

Créer un token depuis Github

  • Vous logguer sur votre compte GitHub
  • Settings > Developer settings > Personal access tokens
  • Button « Generate new token »
  • Cocher la case read:packages
  • Copier-coller le token généré. Il vous sera demandé au composer require

Outils


ATTENTION: Magento 2 est très buggué au niveau des localisations traductions, notamment lorsque celles-ci reposent sur JavaScript. La solution ci-dessous permet de contourner le problème mais n’est pas propre. Dans le fichier app/design/frontend/MyVendor/myTheme/Magento_Theme/templates/messages.phtml, rajouter à la fin:

Axes d’amélioration: améliorer le code en le séparant en 2 plugins. Les mutation observers et le traducteur.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑