devfrontend.info

[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

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

01/02/2022 / admin

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

déléguer un événement à un élément du DOM créé dynamiquement
détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

<div id="combinationSummaryList">
    <a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>
    <a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a> <!-- la délégation d'événement sert pour cet élément -->
</div>

<a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>

<a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a>

</div>

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-link' ) ) return;
    event.preventDefault();
    // code à exécuter
}, false );

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-link' ) ) return;

event.preventDefault();

// code à exécuter

}, false );

Javascript dans le cas d’un SVG:

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;
        event.preventDefault();
        const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );
}, false );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;

event.preventDefault();

const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );

}, false );

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

11/01/2022 / admin

Source: Pure javascript method to wrap content in a div

function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

// example: wrapping an element $_SUMMARY_CONTAINER into a new div element with class uk-offcanvas-bar
let $_OFFCANVAS_BAR = document.createElement( 'div' );
$_OFFCANVAS_BAR.className = "uk-offcanvas-bar";

wrap( $_SUMMARY_CONTAINER, $_OFFCANVAS_BAR );

function wrap(el, wrapper) {

el.parentNode.insertBefore(wrapper, el);

wrapper.appendChild(el);

}

// example: wrapping an element $_SUMMARY_CONTAINER into a new div element with class uk-offcanvas-bar

let $_OFFCANVAS_BAR = document.createElement( 'div' );

$_OFFCANVAS_BAR.className = "uk-offcanvas-bar";

wrap( $_SUMMARY_CONTAINER, $_OFFCANVAS_BAR );

[Javascript] Annuler la sélection d’un bouton radio

11/01/2022 / admin

Décocher un bouton radio sélectionné en cliquant dessus. Source: How to make a radio button unchecked by clicking it?

function deselectableRadios(rootElement) {
    if(!rootElement) rootElement = document;
    if(!window.radioChecked) window.radioChecked = {};
    window.radioClick = function(e) {
        const obj = e.target, name = obj.name || "unnamed";
        if(e.keyCode) return obj.checked = e.keyCode!=32;
        obj.checked = window.radioChecked[name] != obj;
        window.radioChecked[name] = obj.checked ? obj : null;
    }
    rootElement.querySelectorAll("input[type='radio']").forEach( radio => {
        radio.setAttribute("onclick", "radioClick(event)");
        radio.setAttribute("onkeyup", "radioClick(event)");
    });
}
deselectableRadios( $_IMPRINT_LIST );

function deselectableRadios(rootElement) {

if(!rootElement) rootElement = document;

if(!window.radioChecked) window.radioChecked = {};

window.radioClick = function(e) {

const obj = e.target, name = obj.name || "unnamed";

if(e.keyCode) return obj.checked = e.keyCode!=32;

obj.checked = window.radioChecked[name] != obj;

window.radioChecked[name] = obj.checked ? obj : null;

}

rootElement.querySelectorAll("input[type='radio']").forEach( radio => {

radio.setAttribute("onclick", "radioClick(event)");

radio.setAttribute("onkeyup", "radioClick(event)");

});

}

deselectableRadios( $_IMPRINT_LIST );

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

11/01/2022 / admin

Source: DYNAMICALLY Accessing nested JavaScript objects and arrays by string path et un petit jsFiddle pour la route.

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Object.byString = function(o, s) {

s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties

s = s.replace(/^\./, ''); // strip a leading dot

var a = s.split('.');

for (var i = 0, n = a.length; i < n; ++i) {

var k = a[i];

if (k in o) {

o = o[k];

} else {

return;

}

return o;

}

const priceTable = {
    "<=4": {
        "size": [
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60
            { "100": "5.88", "250": "4.88",  "500": "4.88", "1000": "3.88", "2000": "3.88" }
        ]
    }
}

const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères
const targetValue = Object.byString( priceTable, combinedPath );  // interprété comme une chaîne de caractères (<=4.size[4]['2000'])

const priceTable = {

"<=4": {

"size": [

{ "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" },

{ "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60

{ "100": "5.88", "250": "4.88", "500": "4.88", "1000": "3.88", "2000": "3.88" }

]

}

const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères

const targetValue = Object.byString( priceTable, combinedPath ); // interprété comme une chaîne de caractères (<=4.size[4]['2000'])

[UIKit v3] Mettre à jour les options d’un composant

11/01/2022 / admin

Source: Is it possible to update the options of a component?. ATTENTION: le code d’illustration donnée dans l’issue Git est FAUX! Mais il m’a mis sur la bonne piste. Reportez-vous au code ci-dessous:

//init accordion component with options
var accordion = UIkit.accordion(element, {collapse:true});

//change options on the fly
accordion.collapse = false;

//init accordion component with options

var accordion = UIkit.accordion(element, {collapse:true});

//change options on the fly

accordion.collapse = false;

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

21/12/2021 / admin

Source: Accessing nested JavaScript objects and arrays by string path et demo.

Mon chemin dynamique était, par exemple, de ce type: const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold;. Le problème venait du fait qu’il n’était pas interprété par javascript comme un chemin mais comme une chaîne de caractères (un console.log m’affichait quelque chose d’aplati du style: priceTable.<=2.size[0].100 au lieu de m’afficher la valeur stockée dans l’objet priceTable qui correspondait au chemin <=2.size[0].100).

Afin que le chemin construit dynamiquement via javascript ne soit pas interprété comme une chaîne de caractères, nous pouvons utiliser la fonction suivante:

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Object.byString = function(o, s) {

s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties

s = s.replace(/^\./, ''); // strip a leading dot

var a = s.split('.');

for (var i = 0, n = a.length; i < n; ++i) {

var k = a[i];

if (k in o) {

o = o[k];

} else {

return;

}

return o;

}

Utilisation:

Object.byString(someObj, 'part3[0].name');

1	Object.byString(someObj, 'part3[0].name');

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

27/05/2021 / admin

Source: Set twig variable to json file as an include.

Fichier _data/test.json:

{ "name":"John", "age":30, "car":null }

1	{ "name":"John", "age":30, "car":null }

Fichier template.twig:

{% set json %}
    {% include "_data/test.json" %}
{% endset %}

[...]

<h1>{{ json }}</h1>

{% set json %}

{% include "_data/test.json" %}

{% endset %}

[...]

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

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

Etendre les styles less d’un composant

[Magento 2] Afficher les champs additionnels d’adresse client (street2, street3) dans les pages du compte client et les mails 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

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

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

Javascript dans le cas d’un SVG:

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

[Javascript] Annuler la sélection d’un bouton radio

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

[UIKit v3] Mettre à jour les options d’un composant

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Etendre les styles less d’un composant

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

Javascript dans le cas d’un SVG: