Monthdécembre 2020

[Magento 2] Afficher de manière dynamique la base URL d’un store dans un bloc statique, un template PHTML, un layout XML

Note: billet amené à être enrichi au gré de mes besoins.

Doc officielle: Using Markup Tags in Links

Blocs CMS statiques

Documentation

Templates PHTML

Testé fonctionnel Magento 2.4:

Layouts XML

Pas testé:

[jQuery] Utiliser la méthode .contents() pour supprimer un élément parent du DOM, mais conserver tous ses enfants

Cette méthode fait écho à tous les posts dans différents blogs et forums qui incitent à utiliser la méthode .unwrap() de jQuery. La méthode .contents() récupère absolument tout ce que contient l’élément parent qu’on souhaite supprimer alors qu'.unwrap() se montre plus sélective, ce qui peut entrainer quelques désagréments (perte de contenu, etc…).

Source: How to remove only the parent element and not its child elements in JavaScript?

HTML:

jQuery:

Résultat dans le DOM:

[Magento 2] Changer la valeur de l’attribut Colspan dans les tableaux des commandes du compte client

Vous allez trouver des valeurs pour l’attribut colspan dans certains Layouts. Exemple ici: /Magento/Sales/view/frontend/layout/sales_order_view.xml#L32 pour les tableaux ayant la classe .sales-order-view.

[Magento 2] Ajouter des blocs enfants via les layouts XML et la fonction getChildHtml dans un template PHTML

Note: voir ici pour les méthodes communément disponibles pour la variable $block. Elles vous permettront de récupérer pas mal d’infos disponibles dans n’importe quel template PHTML.

Fonctionnel Magento 2.4. Sources:

app/code/Magento/Sales/view/frontend/layout/sales_order_view.xml

Dans le DOM, les block imbriqués seront inclus à l’endroit où se trouve déclarée la fonction dans le PHTML du referenceContainer:

Comment afficher un child block en particulier?

[Magento 2] Etendre un composant JS natif

Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js

app/design/frontend/MyVendor/mytheme/requirejs-config.js

app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml

app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less

app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml

[Magento 2] Utiliser .addMethod() pour remplacer un libellé de message d’erreur de saisie dans un champ de formulaire (via la librairie jQuery Validate)

Testé fonctionnele Magento 2.4. Sources:

[Magento 2] Récupérer les données d’un client via son customer ID

Testé fonctionnel Magento 2.4! Source: How to get customer data by customer id in magento 2? (Version PDF – rakeshjesadiya.com-How to get customer data by customer id in magento 2).

ATTENTION: cet article ne traite pas de la manière de récupérer dynamiquement le customer ID. Il sera indispensable de le connaître afin que le code ci-dessous fonctionne correctement! Voici une manière rapide de récupérer le customer ID dans un template PHTML via l’Object Manager de Magento 2 (mais il s’agit d’une mauvaise pratique, alors servez-vous en uniquement pour tester le code ci-dessous; ensuite, faites ça proprement).

Liste des données client récupérées:

ATTENTION: bien que présent, le champ Prefix n’aura pas de valeur récupérée, même si vous avez activé la fonctionnalité d’affichage d’un champ « préfixe » (Madame, Monsieur, …) dans le formulaire de création d’un compte client et que l’utilisateur l’a renseigné lors de son inscription!

Vous pourrez afficher les valeurs récupérées dans un template PHTML en ajoutant la ligne suivante:

Valeurs récupérées:

Code:

Il faudra créer un nouveau module app/code/MyVendor/Customer et y surcharger le Block vendor/magento/module-customer/Block/CustomerData.php.

app/code/MyVendor/Customer/Block/CustomerData.php

Dans votre template PHTML:

Les autres fichiers standard que doit comporter un module Magento 2

app/code/MyVendor/Customer/registration.php

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

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

Les commandes a exécuter pour rendre votre module disponible

Voici une manière rapide de récupérer le customer ID dans un template PHTML via l’Object Manager de Magento 2

Source: Magento 2 Get Current Customer Id. (Version PDF – tutorialsplane.com-Magento 2 Get Current Customer Id)

A savoir: l’article donne également une manière propre de faire.

[Magento 2] Déplacer un éléments existant dans un layout XML avec la balise Move

Déplacer le titre de page element="page.main.title" dans les pages du compte client

Par défaut dans Magento 2 (version 2.4 lors de mes tests) le titre de page n’est pas posé au même endroit dans le DOM/layout de l’ensemble des pages du compte client.

Exemple pour la page « Modifier les informations du compte »

Pour cette page, on va surcharger le fichier vendor/magento/module-customer/view/frontend/layout/customer_account_edit.xml pour y ajouter la ligne de code suivante:

Problème: avec cette surcharge, nous avons impacté uniquement la page de modification des informations du compte. Si je me rends, par exemple, dans la page « Carnet d’adresses » le titre de page n’est logiquement pas posé au même endroit que dans la page que nous venons de surcharger.

Exemple pour homogénéïser la position du titre sur l’ensemble des pages du compte client

Procéder de la même manière que pour la page « Modifier les informations du compte », mais placer la balise move dans une surcharge du fichier vendor/magento/module-customer/view/frontend/layout/default.xml:

Déplacer les notifications element="page.messages" dans les pages du compte client

Note: en général, cette modification va de pair avec le déplacement du titre de page.

Ces notifications apparaissent lorsque l’utilisateur enregistre des actions de modification via l’un des formulaires de son compte client.

On va surcharger (si ce n’est pas déjà fait) le fichier vendor/magento/module-customer/view/frontend/layout/customer_account_edit.xml pour y ajouter la ligne de code suivante:

Ici, modifier la valeur de before="" si besoin.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑