devfrontend.info

[Javascript] Manipuler les objets JSON, astuces et bonnes pratiques

20/03/2023 / admin

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique

Objectif: boucler dans l’objet JSON ci-dessous et retourner une liste de toutes les valeurs de la clé example.

Ressources en ligne:

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique: Accessing nested JSON object with JQuery
Récupérer l'index des items de l’objet JSON pour cibler le premier, le dernier, etc… item du tableau: jQuery .each get index of items

{
    "pattern_1": {
        "example": "AB12 3CD",
        "pattern": "^[a-zA-Z]{2}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_2": {
        "example": "A1B 2CD",
        "pattern": "^[a-zA-Z]{1}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_3": {
        "example": "AB1 2CD",
        "pattern": "^[a-zA-Z]{2}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_4": {
        "example": "AB1C 2DF",
        "pattern": "^[a-zA-Z]{2}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_5": {
        "example": "A12 3BC",
        "pattern": "^[a-zA-Z]{1}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_6": {
        "example": "A1 2BC",
        "pattern": "^[a-zA-Z]{1}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"
    }
}

{

"pattern_1": {

"example": "AB12 3CD",

"pattern": "^[a-zA-Z]{2}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_2": {

"example": "A1B 2CD",

"pattern": "^[a-zA-Z]{1}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_3": {

"example": "AB1 2CD",

"pattern": "^[a-zA-Z]{2}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_4": {

"example": "AB1C 2DF",

"pattern": "^[a-zA-Z]{2}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_5": {

"example": "A12 3BC",

"pattern": "^[a-zA-Z]{1}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_6": {

"example": "A1 2BC",

"pattern": "^[a-zA-Z]{1}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"

}

function processList(data) {
    var examples = '';
    var i = 0;

    $.each(data, function(index, value) {
        var length = Object.keys(data).length;

        if (i === (length -1)) {
            examples += value.example;
        } else {
            examples += value.example + '; ';
        }

        i++;
    });

    return examples;
}

// Result:
// AB12 3CD; A1B 2CD; AB1 2CD; AB1C 2DF; A12 3BC; A1 2BC

function processList(data) {

var examples = '';

var i = 0;

$.each(data, function(index, value) {

var length = Object.keys(data).length;

if (i === (length -1)) {

examples += value.example;

} else {

examples += value.example + '; ';

}

i++;

});

return examples;

}

// Result:

// AB12 3CD; A1B 2CD; AB1 2CD; AB1C 2DF; A12 3BC; A1 2BC

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

16/03/2023 / admin

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:

Doc officielle: Common layout customization tasks > Create cms-page/product/category-specific selectable layouts
Doc officielle: Common layout customization tasks > Modify block arguments

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

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="footer.main">
            <arguments>
                <argument name="display_social_footer" xsi:type="boolean">false</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="display_social_footer" xsi:type="boolean">false</argument>

</arguments>

</referenceBlock>

</body>

</page>

Template PHTML

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

<?php

/**
 * @var \Magento\Framework\View\Element\Template $block
 */

// [1]
$displaySocialFooter = $block->hasData('display_social_footer') ? $block->getData('display_social_footer') : true;
?>

// [2]
<?php if ($displaySocialFooter): ?>
    <p>Lorem ipsum dolor sit amet</p>
<?php endif; ?>

<?php

/**

* @var \Magento\Framework\View\Element\Template $block

// [1]

$displaySocialFooter = $block->hasData('display_social_footer') ? $block->getData('display_social_footer') : true;

// [2]

<?php if ($displaySocialFooter): ?>

<p>Lorem ipsum dolor sit amet</p>

<?php endif; ?>

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

[Javascript] Uncaught ReferenceError: x is not defined – Attendre qu’un objet, une variable, un élément du DOM soit présent avant d’exécuter du code

15/03/2023 / admin

While variable is not defined – wait

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

13/03/2023 / admin

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é

(officiel) Custom form validation rules
Magento 2 : Ajouter Une Validation Du Numéro De Téléphone – billet très complet sur le blog de Hervé Hennes. Magento 2 _ Ajouter une validation du numéro de téléphone _ Hervé Hennes et sources du module sur github.

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
Ajouter une validation supplémentaire au champ Code Postal (name="postcode") dans l’étape de Paiement/Billing du Tunnel d’Achat/Checkout de 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

let config = {
    [...]
    config: {
        mixins: {
            // Add mixin for global form validation
            'mage/validation': {
                'Vendor_Module/js/validation-mixin': true
            },
            // Add mixin for checkout form validation
            'Magento_Ui/js/lib/validation/validator': {
                'Vendor_Module/js/validator-mixin': true
            }
        }
    }
};

let config = {

[...]

config: {

mixins: {

// Add mixin for global form validation

'mage/validation': {

'Vendor_Module/js/validation-mixin': true

// Add mixin for checkout form validation

'Magento_Ui/js/lib/validation/validator': {

'Vendor_Module/js/validator-mixin': true

}

};

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

console.log(window.checkoutConfig);

1	console.log(window.checkoutConfig);

define([
    'jquery',
    'Magento_Checkout/js/model/postcode-validator'
], function(
    $,
    postcodeValidator
){
    'use strict';

    var message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.");

    return function(validator) {

        validator.addRule(
            'validate-postcode-pattern',
            function (value) {
                var countryId = window.checkoutConfig.defaultCountryId;
                var patterns = window.checkoutConfig.postCodes[countryId];

                function processList(data) {
                    var examples = '';
                    var i = 0;

                    $.each(data, function(index, value) {
                        var length = Object.keys(data).length;

                        if (i === (length -1)) {
                            examples += value.example;
                        } else {
                            examples += value.example + '; ';
                        }

                        i++;
                    });

                    return examples;
                }

                message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.").replace("%1", processList(patterns));

                return $.mage.isEmptyNoTrim(value) || postcodeValidator.validate(value, countryId);
            }, function () {
                return message;
            }
        );

        return validator;
    }
});

define([

'jquery',

'Magento_Checkout/js/model/postcode-validator'

], function(

postcodeValidator

){

'use strict';

var message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.");

return function(validator) {

validator.addRule(

'validate-postcode-pattern',

function (value) {

var countryId = window.checkoutConfig.defaultCountryId;

var patterns = window.checkoutConfig.postCodes[countryId];

function processList(data) {

var examples = '';

var i = 0;

$.each(data, function(index, value) {

var length = Object.keys(data).length;

if (i === (length -1)) {

examples += value.example;

} else {

examples += value.example + '; ';

}

i++;

});

return examples;

}

message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.").replace("%1", processList(patterns));

return $.mage.isEmptyNoTrim(value) || postcodeValidator.validate(value, countryId);

}, function () {

return message;

}

);

return validator;

}

});

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

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-xls-macro" xsi:type="boolean">true</item>
                                                                        <item name="validate-postcode-pattern" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

</item>

</argument>

</arguments>

</referenceBlock>

</body>

</page>

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

L’ajout d’une règle de validation supplémentaire pour le champ postcode dans l’étape de paiement nécessite d’adapter également le même champ dans le formulaire de l’étape de paiement pour proposer une expérience utilisateur homogène.

Cependant, nous ne pouvons pas procéder de la même manière (affecter la nouvelle règle de validation au formulaire et au champ voulu) via un layout XML car:

il existe autant de formulaires d’adresse de facturation que de méthodes de paiement
affecter notre règle de validation dans un layout XML (de manière statique) n’est pas une solution viable dans la mesure où un store peut proposer un certain nombre de moyens de paiement, que certains peuvent être rajoutés ou retirés dans le futur (et manqueront/seront en trop dans le layout XML)

Il vaut donc mieux se tourner vers une solution dynamique, côté back-end, qui bouclera sur les moyens de paiement existants.

Néanmoins, voici comment procéder si vous n’avez pas accès à un back-end:

Récupérer la liste de toutes les méthodes de paiement:

Ressource en ligne: Magento 2 Get All Payment Methods – Method 2: Use Object Manager

app/design/frontend/MyVendor/default/Magento_Checkout/templates/onepage.phtml

<?php
$objectManager =  \Magento\Framework\App\ObjectManager::getInstance();

$paymentHelper = $objectManager->get('Magento\Payment\Helper\Data');
$allPaymentMethods = $paymentHelper->getPaymentMethods();
$allPaymentMethodsArray = $paymentHelper->getPaymentMethodList();

var_dump($allPaymentMethodsArray);
var_dump($allPaymentMethods);

$paymentConfig = $objectManager->get('Magento\Payment\Model\Config');
$activePaymentMethods = $paymentConfig->getActiveMethods();

var_dump(array_keys($activePaymentMethods));

$orderPaymentCollection = $objectManager->get('\Magento\Sales\Model\ResourceModel\Order\Payment\Collection');
$orderPaymentCollection->getSelect()->group('method');
$paymentMethods[] = array('value' => '', 'label' => 'Any');
foreach ($orderPaymentCollection as $col) {
    $paymentMethods[] = array('value' => $col->getMethod(), 'label' => $col->getAdditionalInformation()['method_title']);
}
?>

<?php

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$paymentHelper = $objectManager->get('Magento\Payment\Helper\Data');

$allPaymentMethods = $paymentHelper->getPaymentMethods();

$allPaymentMethodsArray = $paymentHelper->getPaymentMethodList();

var_dump($allPaymentMethodsArray);

var_dump($allPaymentMethods);

$paymentConfig = $objectManager->get('Magento\Payment\Model\Config');

$activePaymentMethods = $paymentConfig->getActiveMethods();

var_dump(array_keys($activePaymentMethods));

$orderPaymentCollection = $objectManager->get('\Magento\Sales\Model\ResourceModel\Order\Payment\Collection');

$orderPaymentCollection->getSelect()->group('method');

$paymentMethods[] = array('value' => '', 'label' => 'Any');

foreach ($orderPaymentCollection as $col) {

$paymentMethods[] = array('value' => $col->getMethod(), 'label' => $col->getAdditionalInformation()['method_title']);

}

Affecter une règle de validation custom pour chaque méthode de paiement dans le formulaire d’adresse de facturation

Ressource en ligne: Magento 2 how to add extra validation to new Billing address form fields in checkout page.

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

<!-- Etape de livraison/shipping (traité à l'étape précédente de ce tuto) -->
<item name="shipping-step" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="shippingAddress" xsi:type="array">
            <item name="children" xsi:type="array">
                <item name="shipping-address-fieldset" xsi:type="array">
                    <item name="children" xsi:type="array">
                        <item name="postcode" xsi:type="array">
                            <item name="validation" xsi:type="array">
                                <item name="validate-xls-macro" xsi:type="boolean">true</item>
                                <item name="validate-postcode-pattern" xsi:type="boolean">true</item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

<!-- Etape de paiement/billing -->
<item name="billing-step" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="payment" xsi:type="array">
            <item name="children" xsi:type="array">
                <item name="payments-list" xsi:type="array">
                    <item name="children" xsi:type="array">

                        <!-- Répéter pour chaque méthode de paiement proposée par le store (ici: datatranscw_creditcard)--> 
                        <item name="datatranscw_creditcard-form" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="form-fields" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="postcode" xsi:type="array">
                                            <item name="validation" xsi:type="array">
                                                <item name="validate-xls-macro" xsi:type="boolean">true</item>
                                                <item name="validate-postcode-pattern" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>

                        <!-- Méthode de paiement: datatranscw_paypal --> 
                        <item name="datatranscw_paypal-form" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="form-fields" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="postcode" xsi:type="array">
                                            <item name="validation" xsi:type="array">
                                                <item name="validate-xls-macro" xsi:type="boolean">true</item>
                                                <item name="validate-postcode-pattern" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>

                        <!-- Méthode de paiement: checkmo --> 
                        <item name="checkmo-form" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="form-fields" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="postcode" xsi:type="array">
                                            <item name="validation" xsi:type="array">
                                                <item name="validate-xls-macro" xsi:type="boolean">true</item>
                                                <item name="validate-postcode-pattern" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

</item>

</item>

</item>

</item>

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

[Favicon] Astuces et bonnes pratiques de mise en place

08/03/2023 / admin

[CSS][LESS] Un effet d’animation pour un lien souligné dont le texte s’étend sur plusieurs lignes avec background-size

07/03/2023 / admin

Attention: Le critère du multi-lignes est très important pour ce type d’effet. Si il n’est pas pris en compte, le soulignement peut n’apparaître que sous la dernière ligne de texte du lien.

Ressources en ligne:

Animated Multiline Link Underlines with CSS par Danny Guo (CodePen)
Animated CSS underlines that wrap et A CSS-only, animated, wrapping underline using CSS background properties qui m’ont bien aidé a créer l’animation inédite ci-dessous!
10 CSS Snippets for Creating Stunning Animated Underline Text Effects

…et un effet que j’ai dû créer moi-même car il n’existait pas dans les ressources ci-dessus. La bordure sous le lien a deux couleurs: couleur lien normal et couleur lien souligné. La particularité de cet effet vient du fait qu’au survol du lien, le changement de couleur s’effectue en partant du milieu (50%) et avec deux balayages simultanés à gauche (pour atteindre 0%) et à droite (pour atteindre 100%).

.link-underline--multiline(
    @border-color-hover: red;
    @border-color: black) {
    padding: 0 0 2px 0;
    text-decoration: none;
    background-image: linear-gradient(@border-color-hover, @border-color-hover),
                      linear-gradient(@border-color, @border-color);
    background-size: 0% 1px, 100% 1px;
    background-position: 50% 100%, 50% 100%;
    background-repeat: no-repeat;
    transition: background-size .1s linear;

    &:hover {
        background-size: 100% 1px, 100% 1px;
    }
}

.link-underline--multiline(

@border-color-hover: red;

@border-color: black) {

padding: 0 0 2px 0;

text-decoration: none;

background-image: linear-gradient(@border-color-hover, @border-color-hover),

linear-gradient(@border-color, @border-color);

background-size: 0% 1px, 100% 1px;

background-position: 50% 100%, 50% 100%;

background-repeat: no-repeat;

transition: background-size .1s linear;

&:hover {

background-size: 100% 1px, 100% 1px;

}

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

06/03/2023 / admin

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

[jQuery] Inverser l’ordre des éléments dans un objet jQuery.fn.init

24/02/2023 / admin

Source: how to iterate elements in reverse order in jquery? | JQuery .each() backwards.

$.fn.reverse = [].reverse;

$('li').reverse();

$.fn.reverse = [].reverse;

$('li').reverse();

[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

17/02/2023 / admin

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.

define([
    'jquery',
    'jquery-ui-modules/widget'
], function($) {
    'use strict';

    $.widget('mage.configurableProduct', {
        options: {
           attributeCodeArr: [],
        },

        /**
         * @private
         */
        _create: function () {
            this.productOptionsWrapperElem = $('#product-options-wrapper');
            this.anySwatchOptionElem = $('.swatch-option', this.productOptionsWrapperElem);

            this._initialize();
        },

        _initialize: function() {
            this._setKlarnaBannerVisibility(this.options.attributeCodeArr);

            $(document).on('click', this.anySwatchOptionElem, this._handleNewOptionSelection.bind(this));
        },

        _setKlarnaBannerVisibility: function (attributeCode) {
            for (var i = 0; i < attributeCode.length; i++) {
                if (this._selectedSwatchOptionIsOutOfStock(attributeCode[i])) {
                    this.element.attr('aria-hidden', true);
                    break;
                } else {
                    this.element.attr('aria-hidden', false);
                }
            }
        },

        _selectedSwatchOptionIsOutOfStock: function (attributeCode) {
            var swatchAttributeElem = $('.swatch-attribute[data-attribute-code="' + attributeCode + '"]', this.productOptionsWrapperElem);

            return $('.swatch-option.selected.out-of-stock', swatchAttributeElem).length != 0 ? true : false;
        },

        _handleNewOptionSelection: function() {
            setTimeout(function () {
                this._setKlarnaBannerVisibility(this.options.attributeCodeArr)
            }.bind(this), 250);
        }
    });

    return $.mage.configurableProduct;

});

define([

'jquery',

'jquery-ui-modules/widget'

], function($) {

'use strict';

$.widget('mage.configurableProduct', {

options: {

attributeCodeArr: [],

/**

* @private

_create: function () {

this.productOptionsWrapperElem = $('#product-options-wrapper');

this.anySwatchOptionElem = $('.swatch-option', this.productOptionsWrapperElem);

this._initialize();

_initialize: function() {

this._setKlarnaBannerVisibility(this.options.attributeCodeArr);

$(document).on('click', this.anySwatchOptionElem, this._handleNewOptionSelection.bind(this));

_setKlarnaBannerVisibility: function (attributeCode) {

for (var i = 0; i < attributeCode.length; i++) {

if (this._selectedSwatchOptionIsOutOfStock(attributeCode[i])) {

this.element.attr('aria-hidden', true);

break;

} else {

this.element.attr('aria-hidden', false);

}

_selectedSwatchOptionIsOutOfStock: function (attributeCode) {

var swatchAttributeElem = $('.swatch-attribute[data-attribute-code="' + attributeCode + '"]', this.productOptionsWrapperElem);

return $('.swatch-option.selected.out-of-stock', swatchAttributeElem).length != 0 ? true : false;

_handleNewOptionSelection: function() {

setTimeout(function () {

this._setKlarnaBannerVisibility(this.options.attributeCodeArr)

}.bind(this), 250);

}

});

return $.mage.configurableProduct;

});

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

this.searchLabel.on('click', function (e) {
    // allow input to lose its' focus when clicking on label
    if (this.isExpandable && this.isActive()) {
        e.preventDefault();
    }
}.bind(this));

this.searchLabel.on('click', function (e) {

// allow input to lose its' focus when clicking on label

if (this.isExpandable && this.isActive()) {

e.preventDefault();

}

}.bind(this));

this.element.on('focus', this.setActiveState.bind(this, true));

// Fonction de référence:
/**
 * Sets state of the search field to provided value.
 *
 * @param {Boolean} isActive
 */
setActiveState: function (isActive) {
    this.searchLabel.toggleClass('active', isActive);

    if (this.isExpandable) {
        this.element.attr('aria-expanded', isActive);
    }

    if(isActive) {
        this.autoComplete.show();
    } else  {
        this.autoComplete.hide();
    }
},

this.element.on('focus', this.setActiveState.bind(this, true));

// Fonction de référence:

/**

* Sets state of the search field to provided value.

* @param {Boolean} isActive

setActiveState: function (isActive) {

this.searchLabel.toggleClass('active', isActive);

if (this.isExpandable) {

this.element.attr('aria-expanded', isActive);

}

if(isActive) {

this.autoComplete.show();

} else {

this.autoComplete.hide();

}

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:

lpTag.events.bind('lpUnifiedWindow', 'state', this._setEngagementButtonVisibility.bind(this));
[...]
_setEngagementButtonVisibility: function(data) {
    alert(data.state);
}

lpTag.events.bind('lpUnifiedWindow', 'state', this._setEngagementButtonVisibility.bind(this));

[...]

_setEngagementButtonVisibility: function(data) {

alert(data.state);

}

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

_initialize: function() {
    var checkLpTagVariableAvailability = setInterval(function() {
        if (lpTag != undefined) {
            clearInterval(checkLpTagVariableAvailability);

            this._bindLpTagEvents();
            this._handleFiltersMobileBtnVisibility();
        }
    }.bind(this), 1000);
},

_initialize: function() {

var checkLpTagVariableAvailability = setInterval(function() {

if (lpTag != undefined) {

clearInterval(checkLpTagVariableAvailability);

this._bindLpTagEvents();

this._handleFiltersMobileBtnVisibility();

}

}.bind(this), 1000);

Cas avec l’utilisation de matchMedia/mediaCheck

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

define([
    'jquery',
    "matchMedia",
    'jquery-ui-modules/widget'
], function ($, mediaCheck) {
    'use strict';

    $.widget('mage.mwSearch', {
        options: {
            isExpandable: null
        },

        _create: function () {
            this.isExpandable = this.options.isExpandable;

            _.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

            mediaCheck({
                media: '(max-width: 768px)',
                entry: function () {
                    this.isExpandable = true;
                }.bind(this),
                exit: function () {
                    this.isExpandable = false;
                }.bind(this)
            });

define([

'jquery',

"matchMedia",

'jquery-ui-modules/widget'

], function ($, mediaCheck) {

'use strict';

$.widget('mage.mwSearch', {

options: {

isExpandable: null

_create: function () {

this.isExpandable = this.options.isExpandable;

_.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

mediaCheck({

media: '(max-width: 768px)',

entry: function () {

this.isExpandable = true;

}.bind(this),

exit: function () {

this.isExpandable = false;

}.bind(this)

});

Utiliser la méthode `.bindAll` de Underscore

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

// Bind a number of an object's methods to that object. Remaining arguments
// are the method names to be bound. Useful for ensuring that all callbacks
// defined on an object belong to it.
_.bindAll = function(obj) {
var i, length = arguments.length, key;
if (length <= 1) throw new Error('bindAll must be passed function names');
for (i = 1; i < length; i++) {
  key = arguments[i];
  obj[key] = _.bind(obj[key], obj);
}
return obj;
};

// Bind a number of an object's methods to that object. Remaining arguments

// are the method names to be bound. Useful for ensuring that all callbacks

// defined on an object belong to it.

_.bindAll = function(obj) {

var i, length = arguments.length, key;

if (length <= 1) throw new Error('bindAll must be passed function names');

for (i = 1; i < length; i++) {

key = arguments[i];

obj[key] = _.bind(obj[key], obj);

}

return obj;

};

Dans les faits:

define([
    'jquery',
    'underscore',
    'jquery-ui-modules/widget'
], function ($, _) {
    'use strict';

    $.widget('mage.toto', {
        options: {},

        _create: function () {
            _.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');
        },

        /**
         * Executes when the search box is submitted. Sets the search input field to the
         * value of the selected item.
         * @private
         * @param {Event} e - The submit event
         */
        _onSubmit: function (e) {
            var value = this.element.val();

            if (isEmpty(value)) {
                e.preventDefault();
            }
        },

        /**
         * Executes when keys are pressed in the search input field. Performs specific actions
         * depending on which keys are pressed.
         * @private
         * @param {Event} e - The key down event
         * @return {Boolean} Default return type for any unhandled keys
         */
        _onKeyDown: function (e) {
            var keyCode = e.keyCode || e.which;
            switch (keyCode) {
                case $.ui.keyCode.HOME:
                    ...
                default:
                    return true;
            }
        },

        /**
         * Executes when the value of the search input field changes. Executes a GET request
         * to populate a suggestion list based on entered text. Handles click (select), hover,
         * and mouseout events on the populated suggestion list dropdown.
         * @private
         */
        _onPropertyChange: function () {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout($.proxy(this._launchSearch, this), 500);
        },

define([

'jquery',

'underscore',

'jquery-ui-modules/widget'

], function ($, _) {

'use strict';

$.widget('mage.toto', {

options: {},

_create: function () {

_.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

/**

* Executes when the search box is submitted. Sets the search input field to the

* value of the selected item.

* @private

* @param {Event} e - The submit event

_onSubmit: function (e) {

var value = this.element.val();

if (isEmpty(value)) {

e.preventDefault();

}

/**

* Executes when keys are pressed in the search input field. Performs specific actions

* depending on which keys are pressed.

* @private

* @param {Event} e - The key down event

* @return {Boolean} Default return type for any unhandled keys

_onKeyDown: function (e) {

var keyCode = e.keyCode || e.which;

switch (keyCode) {

case $.ui.keyCode.HOME:

...

default:

return true;

}

/**

* Executes when the value of the search input field changes. Executes a GET request

* to populate a suggestion list based on entered text. Handles click (select), hover,

* and mouseout events on the populated suggestion list dropdown.

* @private

_onPropertyChange: function () {

clearTimeout(this.searchTimer);

this.searchTimer = setTimeout($.proxy(this._launchSearch, this), 500);

[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

17/02/2023 / admin

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

$_objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$productTypeInstance = $_objectManager->get('Magento\ConfigurableProduct\Model\Product\Type\Configurable');
$productAttributeOptions = $productTypeInstance->getConfigurableAttributesAsArray($product);
$attributeCodeArr = array_column($productAttributeOptions, 'attribute_code');

$_objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$productTypeInstance = $_objectManager->get('Magento\ConfigurableProduct\Model\Product\Type\Configurable');

$productAttributeOptions = $productTypeInstance->getConfigurableAttributesAsArray($product);

$attributeCodeArr = array_column($productAttributeOptions, 'attribute_code');

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:

     */
    protected \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig;

    // DEBUT: AJOUT
    /**
     * @var \Magento\ConfigurableProduct\Model\Product\Type\Configurable
     */
    protected \Magento\ConfigurableProduct\Model\Product\Type\Configurable $configurable;
    // FIN: AJOUT

    /**
     * Product constructor.
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\Framework\Locale\Resolver $locale
     * @param \Magento\Catalog\Helper\Data $productHelper
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    // DEBUT: AJOUT
     * @param \Magento\ConfigurableProduct\Model\Product\Type\Configurable $configurable
    // FIN: AJOUT
     * @param \Magento\Framework\Registry $registry
     * @param array $data
     */
        \Magento\Framework\Locale\Resolver $locale,
        \Magento\Catalog\Helper\Data $productHelper,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
    // DEBUT: AJOUT
        \Magento\ConfigurableProduct\Model\Product\Type\Configurable $configurable,
    // FIN: AJOUT
        \Magento\Framework\Registry $registry,
        array $data = []
    )
            $productHelper,
            $data
        );
    // DEBUT: AJOUT
        $this->configurable = $configurable;
    // FIN: AJOUT
        $this->registry = $registry;
    }

            && $isAvailable
            && $finalPrice <= $finalPriceThreshold;
    }

    // DEBUT: AJOUT
    /**
     * @param \Magento\Catalog\Model\Product $product
     * @return array
     */
    public function getConfigurableAttributesAsArray(\Magento\Catalog\Model\Product $product): array
    {
        return $this->configurable->getConfigurableAttributesAsArray($product);
    }
    // FIN: AJOUT

}

protected \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig;

// DEBUT: AJOUT

/**

* @var \Magento\ConfigurableProduct\Model\Product\Type\Configurable

protected \Magento\ConfigurableProduct\Model\Product\Type\Configurable $configurable;

// FIN: AJOUT

/**

* Product constructor.

* @param \Magento\Framework\View\Element\Template\Context $context

* @param \Magento\Framework\Locale\Resolver $locale

* @param \Magento\Catalog\Helper\Data $productHelper

* @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig

// DEBUT: AJOUT

* @param \Magento\ConfigurableProduct\Model\Product\Type\Configurable $configurable

// FIN: AJOUT

* @param \Magento\Framework\Registry $registry

* @param array $data

\Magento\Framework\Locale\Resolver $locale,

\Magento\Catalog\Helper\Data $productHelper,

\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,

// DEBUT: AJOUT

\Magento\ConfigurableProduct\Model\Product\Type\Configurable $configurable,

// FIN: AJOUT

\Magento\Framework\Registry $registry,

array $data = []

)

$productHelper,

$data

);

// DEBUT: AJOUT

$this->configurable = $configurable;

// FIN: AJOUT

$this->registry = $registry;

}

&& $isAvailable

&& $finalPrice <= $finalPriceThreshold;

}

// DEBUT: AJOUT

/**

* @param \Magento\Catalog\Model\Product $product

* @return array

public function getConfigurableAttributesAsArray(\Magento\Catalog\Model\Product $product): array

{

return $this->configurable->getConfigurableAttributesAsArray($product);

}

// FIN: AJOUT

}

Dans le template PHTML:

$productAttributeOptions = $block->getConfigurableAttributesAsArray($product);
$attributeCodeArr = array_column($productAttributeOptions, 'attribute_code');

1 2	$productAttributeOptions = $block->getConfigurableAttributesAsArray($product); $attributeCodeArr = array_column($productAttributeOptions, 'attribute_code');

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

Articles récents

Catégories

Archives

Méta

[Javascript] Manipuler les objets JSON, astuces et bonnes pratiques

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique

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

Objectif

Ressources en ligne:

Layout XML

Template PHTML

En BO:

[Javascript] Uncaught ReferenceError: x is not defined – Attendre qu’un objet, une variable, un élément du DOM soit présent avant d’exécuter du code

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

Ressources en ligne:

Ressources à consulter en priorité

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

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

Récupérer la liste de toutes les méthodes de paiement:

Affecter une règle de validation custom pour chaque méthode de paiement dans le formulaire d’adresse de facturation

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

[Favicon] Astuces et bonnes pratiques de mise en place

[CSS][LESS] Un effet d’animation pour un lien souligné dont le texte s’étend sur plusieurs lignes avec background-size

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

[jQuery] Inverser l’ordre des éléments dans un objet jQuery.fn.init

[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

Exemple de widget complet

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

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

Cas avec l’utilisation de matchMedia/mediaCheck

Utiliser la méthode `.bindAll` de Underscore

[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

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

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:

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique

Objectif

Ressources en ligne:

Layout XML

Template PHTML

En BO:

Ressources en ligne:

Ressources à consulter en priorité

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

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

Récupérer la liste de toutes les méthodes de paiement:

Affecter une règle de validation custom pour chaque méthode de paiement dans le formulaire d’adresse de facturation

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

Exemple de widget complet

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

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

Cas avec l’utilisation de matchMedia/mediaCheck

Utiliser la méthode .bindAll de Underscore

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

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:

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

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

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

Utiliser la méthode `.bindAll` de Underscore