Étiquette : magento

[Magento 2] Utiliser les arguments dans les layouts XML pour afficher/masquer sous condition certaines zones d’un template PHTML

Objectif

  • Utiliser les arguments pour afficher ou masquer une partie de template PHTML dans le DOM qui va être généré (il peut arriver qu’on cherche à afficher certaines parties d’un PHTML et à en masquer d’autres sous condition)
  • Utiliser $block->hasData() et $block->getData() dans un template PHTML pour interroger les arguments placés dans le layout XML
  • Utiliser la fonctionnalité de Custom Layout Update pour surcharger un layout XML de page

Ressources en ligne:

Layout XML

ATTENTION: j’ai écrit ça un peu vite; se référer plutôt à la doc officielle (lien ci-dessus).

On crée un Custom Layout Update. Le nom du fichier est important:

  • cms_page_view_selectable_socialmedia_NoSocialFooter.xml: la surcharge sera à appliquer à la main, via le BO, pour n’importe quelle page CMS.
  • cms_page_view_id_socialmedia.xml: la surcharge sera appliquée automatiquement à la page CMS dont l’URL Key est « socialmedia ».

Fichier: app/design/frontend/Vendor/default/Magento_Cms/layout/cms_page_view_selectable_socialmedia_NoSocialFooter.xml

Template PHTML

Fichier: app/design/frontend/Vendor/default/Magento_Theme/templates/html/footer/main.phtml

  • [1] On interroge le $block pour savoir si l’argument display_social_footer est redéfini dans le layout XML. Mais par défaut, on set la variable $display_social_footer à true.
  • [2] Si l’argument display_social_footer est redéfini à false dans mon exemple dans le layout XML (pour cela, il faut que le Custom Layout Update « NoSocialFooter » soit sélectionné en BO dans la config de la page CMS « socialmedia »), le <p>Lorem ipsum dolor sit amet</p> n’apparaîtra pas dans le DOM généré. Sinon, il apparaîtra.

En BO:

cache flush de rigueur!

[Magento 2] Validation des champs de formulaire via les UI components, ressources en ligne et astuces

Ressources en ligne:

ATTENTION: il y a pas mal de ressources en ligne (blogs, stack overflow) qui, sans donner de solutions incorrectes, ne donnent que des solutions partielles ou partiellement dépréciées.

J’ai notamment perdu pas mal de temps avant de comprendre qu’il existait deux systèmes de validation des champs de formulaires, dont un
est spécifique au Checkout et que ça avait son importance au moment d’ajouter un nouveau test de validation par le biais d’une mixin
!

DONC… J’ai trié les ressources en deux catégories: celles à consulter en 1er et celles qui vous aideront moins, voire vous embrouilleront…

D’une manière générale avec les ressources en ligne sur Magento 2 (ou Adobe Commerce maintenant), préférez en priorité la documentation officielle de développement Front sous Magento 2/Adobe Commerce avant toute autre ressource!

Ressources à consulter en priorité

Ressources à consulter ensuite, si vous n’avez pas résolu votre problème

Ressources sur ce blog (ma propre expérience de dev avec la validation des champs de formulaire sous Magento 2/Adobe Commerce)

Ajouter une validation supplémentaire au champ Code Postal (name="postcode") dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce

Comme expliqué dans l’excellent billet de Hervé Hennes sur l’ajout d’une validation sur un champ « Numéro de téléphone » dans Magento 2:

L’environnement de validation de données utilisées dans le compte clients et dans le tunnel de commandes étant différents il faudra créer 2 mixins.

app/code/Vendor/Customer/view/frontend/requirejs-config.js

app/code/Vendor/Customer/view/frontend/web/js/validator-mixin.js

app/code/Vendor/Customer/view/frontend/layout/checkout_index_index.xml

[Magento 2] Désactiver l’extension Amasty Google Invisible Captcha qui bloque le click de certains boutons

Il peut arriver que des boutons ne soient pas cliquables dans certaines pages si il y a un problème avec Google reCAPTCHA. Vous devriez voir un encart reCAPTCHA en bas à droite de votre écran, avec le message suivant:

L’hôte local ne figure pas dans la liste des domaines acceptés pour la clé de ce site.

Pour le supprimer, il faut désactiver Google Invisible Captcha depuis l’interface d’admin:

  • STORES > Settings > Configuration > AMASTY EXTENSIONS > Google Invisible Captcha
  • General Settings > Enable Invisible Captcha: « No »
  • Bouton Save Config

[Magento 2] Gestion des événements et du passage de l’objet This dans les widgets jQuery UI avec les méthodes proxy ou bind

Ce post sur stack overflow qui explique très bien le problème et donne des solutions: How to handle events in jQuery UI widgets.

Cet autre post sur stack overflow qui explique comment solutionner le problème à l’aide de la méthode .bind(): Pass correct « this » context to setTimeout callback?.

Exemple de widget complet

$(document).on('click', <DOM element>, <JS function>.bind(this)); et setTimeout(function () { ... }.bind(this), 250);

L’objet this passé dans l’événement .on('click', ...) par l’intermédiaire de la méthode .bind() est bien celui du widget et pas la cible du click (récupérable au besoin dans la fonction _handleNewOptionSelection via un e.target.

Autres manières d’utiliser des événements:

ATTENTION: dans l’exemple ci-dessus, la présence du paramètre true dans this.element.on('focus', this.setActiveState.bind(this, true)); peut dans certains cas faire que la fonction cible ne soit pas exécutée!
A ce moment, essayer ceci:

Cas d’utilisation de .bind() avec setInterval():

Cas avec l’utilisation de matchMedia/mediaCheck

Notez la présence de .bind(this) après chaque fonction (entry, exit).

Utiliser la méthode .bindAll de Underscore

La méthode dans le code source du framework Underscore (version 1.8.2):

Dans les faits:

[Magento 2] Récupérer des informations via un Block PHP plutôt qu’en passant par l’invocation de l’Object Manager dans un template PHTML

L’invocation de l’Object Manager dans un template PHTML pour de la récupération d’informations est une mauvaise pratique dans Magento 2. Pourtant, sur le web, bon nombre de solutions données à nos problèmes partent de ce principe…

Dans mon exemple, je souhaitais récupérer depuis une page produit des informations sur les attributs produit associées (leurs attribute_code à proprement parler). Le template PHTML et le Block PHP desquels je suis parti sont détaillés dans le billet [Magento 2] Etendre un Block pour en hériter et lui ajouter de nouvelles fonctionnalités.

Avec l’Object Manager dans le template PHTML (mauvaise pratique dans Magento 2)

J’ai d’abord procédé comme suggéré ici (How to Get Product Options in Magento 2) en invoquant l’object manager directement dans le template PHTML (mauvaise pratique).

Et ça fonctionne: la variable $attributeCodeArr me remonte bien un tableau avec plusieurs attribute_code.

Même chose via un Block PHP (bonne pratique dans Magento 2)

Dans le Block app/code/MyVendor/KlarnaOnsitemessaging/Block/Product.php:

Dans le template PHTML:

De la même manière, la variable $attributeCodeArr me remonte bien un tableau avec plusieurs attribute_code.

[Magento 2] Etendre un Block pour en hériter et lui ajouter de nouvelles fonctionnalités

Note: dans un but d’anonymisation, le véritable libellé du vendor a été remplacé par MyVendor.

Ressource en ligne: Créer un bloc sous magento 2.

Les fichiers obligatoires pour la création d’un nouveau module dans Magento 2 (ou Adobe Commerce)

app/code/MyVendor/KlarnaOnsitemessaging/registration.php

app/code/MyVendor/KlarnaOnsitemessaging/etc/module.xml

app/code/MyVendor/KlarnaOnsitemessaging/etc/di.xml

Etendre un Block dans Magento 2

Le Block (fichier) initial

vendor/klarna/module-onsitemessaging/Block/Product.php

Le Block étendu

app/code/MyVendor/KlarnaOnsitemessaging/Block/Product.php

Raison de l’extension: dans la fiche produit, nous avons besoin de cacher la bannière Klarna pour les produits > 10 000 euros ainsi que les produits not salable ou qui ont un stock = 0.

Nous allons pour ce faire créer une fonction publique getProduct() qui va nous permettre de récupérer tout un tas d’informations sur le produit affiché et notamment celles que nous allons exploiter dans la fonction publique conditionalShowOnProduct() qui teste que toutes les conditions sont remplies pour afficher la bannière.

app/code/MyVendor/KlarnaOnsitemessaging/etc/config.xml

Dans la class Product que nous venons d’étendre (cf. extension de /Block/Product.php), nous utilisons une config const CHECKOUT_PRICES_ABOVE = 'checkout/prices_above'; que nous définissons dans ce fichier (plutôt qu’en dur).

app/design/frontend/MyTheme/default/Klarna_Onsitemessaging/templates/html/placement/product.phtml

On interroge la fonction conditionalShowOnProduct() présente dans notre Block étendu pour afficher ou non la bannière Klarna.

[Magento 2] matchMedia mediaCheck boucler dans un tableau de media-queries avec la méthode jQuery each()

Ressource: How to loop through array in jQuery?. très bien expliqué avec des exemples spécifiques pour du javasqcript vanilla (ES5, ES6, …) et l’utilisation avec this.

Dans mon exemple, je cherche simplement à ré-initialiser un carousel Slick Slider dès qu’un nouveau breakpoint est rencontré. Il est important de comprendre que c’est le même code qui est exécuté à chaque fois.

Si vous souhaitez utiliser des paramètres différents en fonction de vos vues (Mobile, Tablet, Desktop) avec Slick Slider, il faut utiliser l’option responsive.

…revient à déclarer ceci:

[Magento 2] Récupérer la config JSON d’un produit configurable en front

Depuis la fiche produit d’un produit configurable, afficher la source (crtl + u) et effectuer une recherche sur Magento_Swatches/js/swatch-renderer": {.

ATTENTION: c’est la première occurence qui sera retournée qui est la bonne, à moins que vous ne cherchiez un product ID spécifique. A ce moment là, votre recherche peut se faire sur le modèle "[data-role=swatch-option-XXXX]"XXXX correspond au product ID.

Le JSON récupéré peut ensuite être affiché joliment.

[Magento 2] Récupérer la placeholder image de votre store dans un block PHP

Objectif:

Dans la fonction suivante, je souhaite rajouter en else la possibilité d’afficher la placeholder image rendue disponible par Magento 2 si l’utilisateur admin backoffice n’a pas uploadé d’image spécifique.

Solution:

Tout d’abord, juste après la déclaration class myClassName extends…, déclarer le Helper Image et sa variable $imageHelper:

NOTE: dans mon cas (un peu particulier), une protected function _construct(): void existe déjà dans le block. Il ne faut pas chercher à la modifier!

Au lieu de ça, dans notre code et juste en-dessous ce premier contructeur, on crée une nouvelle extension de public function __construct sur le modèle de la fonction _construct tout droit issue de vendor/magento/framework/View/Element/Template.php et on y ajoute le image helper:

NOTE: \Template\Context $context devient \Magento\Framework\View\Element\Template\Context $context pour l’occasion.

Puis compléter la fonction de départ avec un else qui retourne l’image placeholder:

Cette manip’ donnera le même résultat que si on mettait en place le code suivant la le fichier template PHTML chargé d’afficher les images ou, à défaut, le placeholder. On est cependant plus efficace en renvoyant directement l’image adéquate via le block PHP. Donc, le code ci-dessous est présent juste à titre informatif mais éviter de l’utiliser dans la mesure du possible (on voit qu’on utilise, comme argument de la condition, la même méthode empty() que dans le block PHP):

[Magento 2] i18n, bonnes pratiques

Insérer un ou plusieurs liens dans une même chaîne de caractères:

(Exemple pour dans un fichier PHTML)

Insérer un mail:

(Exemple pour dans un fichier PHTML)