Mois : mai 2022

[Magento 2] Surcharger le markup HTML du template de prix

25/05/2022 / admin

Le markup HTML par défaut pour l’affichage du prix (dans le fiche produit par exemple) est régi par un widget mage.priceBox qu’on peut retrouver ici: view/base/web/js/price-box.js. C’est l’option priceTemplate qui définit le markup par défaut <span class="price"><%- data.formatted %></span>.

Pour le surcharger, dans app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/price/amount/default.phtml, rajouter à la fin:

<script type="text/x-magento-init">
    {
        "[data-role=priceBox]": {
            "Magento_Catalog/js/price-box": {
                "priceTemplate": "<strong class=\"price\"><%- data.formatted %></strong>"
            }
        }
    }
</script>

{

"[data-role=priceBox]": {

"Magento_Catalog/js/price-box": {

"priceTemplate": "<strong class=\"price\"><%- data.formatted %></strong>"

}

</script>

[Magento 2] Etendre ou surcharger des styles less parent, de composants ou de modules dans un thème

16/05/2022 / admin

Testé fonctionnel Magento 2.4

Sources: Best way to extend module less found in web/css/source/module, like _minicart.less? et Extend or override parent, components or modules styles in Magento 2 et version PDF pour la postérité.

Etendre les styles less d’un composant

Fichier parent: app/design/frontend/Vendor/default/Magento_Catalog/web/css/source/module/listings/_prod-small.less.

Son extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/module/listings/_prod-small_extend.less

L’import de l’extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/_extend.less

@import 'module/listings/_prod-small_extend.less';

1	@import 'module/listings/_prod-small_extend.less';

[Magento 2] Afficher les champs additionnels d’adresse client (street2, street3) dans les pages du compte client et les mails de confirmation de commande

13/05/2022 / admin

Source: How to get Customer Address in formated way and print it – Magento2.3 et version PDF pour la postérité.

Pour les lignes d’adresse manquantes, il faut aller en BO, choisir le scope et effectuer la manip’ décrite dans la méthode 2 du tuto.
J’ai pour ma part modifié les Address templates Text et HTML. Il faut commencer par décocher les cases « Use Default » pour les champs que tu veux modifier, puis:

Pour Text, remplacer:

{{if street1}}{{var street1}}{{/if}}

1	{{if street1}}{{var street1}}{{/if}}

…par:

{{if street1}}{{var street1}}{{/if}}{{if street2}}{{var street2}}{{/if}}{{if street3}}{{var street3}}{{/if}}

1	{{if street1}}{{var street1}}{{/if}}{{if street2}}{{var street2}}{{/if}}{{if street3}}{{var street3}}{{/if}}

Pour HTML, remplacer:

{{if street1}}{{var street1}}<br/>{{/if}}

1	{{if street1}}{{var street1}}<br/>{{/if}}

…par:

{{if street1}}{{var street1}}<br/>{{/if}}{{if street2}}{{var street2}}<br/>{{/if}}{{if street3}}{{var street3}}<br/>{{/if}}

1	{{if street1}}{{var street1}}<br/>{{/if}}{{if street2}}{{var street2}}<br/>{{/if}}{{if street3}}{{var street3}}<br/>{{/if}}

Avec ça:

Ok compte client > historique des commandes
Ok checkout > succès de la commande
Ok mail de confirmation de commande

[Magento 2] Utiliser le binding Foreach de Knockout JS pour splitter un tableau en autant d’items que le nombre qu’il contient dans un fichier html

12/05/2022 / admin

Sources:

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/address-renderer-mixin.js

/**
 * @return {string}
 */
formatStreet: function (str) {
    return String(str).replace(/,(?=[^\s])/g, ", ");
},

/**

* @return {string}

formatStreet: function (str) {

return String(str).replace(/,(?=[^\s])/g, ", ");

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-information/address-renderer/default.html

<text args="formatStreet(address().street)"></text>

1	<text args="formatStreet(address().street)"></text>

Résultat en front:
Street 1,Street 2,Street 3

<each args="data: address().street, as: 'streetLine'">
    <text args="streetLine"></text>
    <br>
</each>

<br>

</each>

Résultat en front:
Street 1
Street 2
Street 3

Articles récents

Catégories

Archives

Méta