Catégorie : Magento 2.x

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

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>

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

[Magento 2] Google Tag Manager Google Analytics

09/01/2023 / admin

Admin, backoffice

Trouver et activer l’extension Google Tag Manager

Dans STORES > Configuration > SALES > Google API > Google Analytics. Mettre enable à « Yes ».

Ne pas oublier de mettre le Container Id dans le champ prévu à cet effet.

[Magento 2] Exploiter l’Escaper dans les fichiers PHTML et HTML utilisant Knockout JS (extension Page Builder) pour maintenir certaines balises dans du contenu HTML

16/12/2022 / admin

Escaper dans les templates PHTML

Magento 2 supprime de manière radicale toutes les balises HTML que vous pourriez renseigner dans des champs du BO. Dans notre exemple, le champ à renseigner affiche un titre en front et si on renseigne ceci: 50th Anniversary, l’élément  est automatiquement supprimé.

Pour éviter ceci, on peut déclarer⁽¹⁾ et exploiter l’Escaper dans les fichiers PHTML en listant dans un tableau⁽²⁾ l’ensemble des balises HTML à conserver:

/** @var \Magento\Framework\Escaper $escaper */

1	/** @var \Magento\Framework\Escaper $escaper */

<h1><?= $escaper->escapeHtml($story->getName(), ['sup']); ?></h1>

1	<h1><?= $escaper->escapeHtml($story->getName(), ['sup']); ?></h1>

Valable également en cas d’utilisation d’une clé de traduction (fichiers CSV):

"Related news & stories","Related<sup>TH</sup> news & stories"

1	"Related news & stories","Related<sup>TH</sup> news & stories"

<?= $escaper->escapeHtml(__('Related news & stories'), ['sup']) ?>

1	<?= $escaper->escapeHtml(__('Related news & stories'), ['sup']) ?>

Extension Page Builder de Magento 2 (payante)

Documentation officielle du Page Builder Adobe Commerce (ex Magento 2).

Knockout JS dans les fichiers HTML

C’est en fait dans un fichier title-tag-escaper.js qu’on liste les tags HTML à ne pas échapper:

/**
 * Strip html tags except strong|em|span|br|sup
 *
 * @param {string} name
 * @param {Object} data
 * @returns {string}
 */
;

_proto.toDom = function toDom(name, data) {
    var input = ((0, _object.get)(data, name));
    return this.stripTags(input, '<strong><em><span><br><sup>');
};

/**

* Strip html tags except strong|em|span|br|sup

* @param {string} name

* @param {Object} data

* @returns {string}

;

_proto.toDom = function toDom(name, data) {

var input = ((0, _object.get)(data, name));

return this.stripTags(input, ' ');

};

Configuration d’un module dans un fichier XML

Dans app/code/MyVendor/PageBuilder/view/adminhtml/pagebuilder/content_type/module_XX, afin que la liste des balises autorisées soit prise en compte il faut ajouter un attribut converter pour l’élément (le champ du formulaire d’édition en BO) ciblé:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="module_21"
          label="Text"
          menu_section="add_content"
          component="Magento_PageBuilder/js/content-type"
          preview_component="MyVendor_PageBuilder/js/content-type/module-21/preview"
          master_component="Magento_PageBuilder/js/content-type/master-collection"
          form="pagebuilder_module_21_form"
          icon="icon-pagebuilder-module-21"
          sortOrder="21"
          translate="label">
        <parents default_policy="deny">
            <parent name="root-container" policy="allow"/>
            <parent name="row" policy="allow"/>
        </parents>
        <children default_policy="deny"/>
        <appearances>
            <appearance name="theme_01"
                        default="true"
                        preview_template="MyVendor_PageBuilder/content-type/module-21/theme-01/preview"
                        master_template="MyVendor_PageBuilder/content-type/module-21/theme-01/master"
                        reader="Magento_PageBuilder/js/master-format/read/configurable">
                <elements>
                    <element name="title">
                        <html name="title" converter="MyVendor_PageBuilder/js/converter/html/title-tag-escaper"/>
                        <attribute name="title_italic" source="data-italic"/>
                        <attribute name="title_tag" source="data-tag"/>
                    </element>

<type name="module_21"

label="Text"

menu_section="add_content"

component="Magento_PageBuilder/js/content-type"

preview_component="MyVendor_PageBuilder/js/content-type/module-21/preview"

master_component="Magento_PageBuilder/js/content-type/master-collection"

form="pagebuilder_module_21_form"

icon="icon-pagebuilder-module-21"

sortOrder="21"

translate="label">

</parents>

<appearance name="theme_01"

default="true"

preview_template="MyVendor_PageBuilder/content-type/module-21/theme-01/preview"

master_template="MyVendor_PageBuilder/content-type/module-21/theme-01/master"

reader="Magento_PageBuilder/js/master-format/read/configurable">

</element>

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

</each>

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

[Magento 2] Etendre les possibilités de l’éditeur WYSIWYG TinyMCE 4

22/01/2020 / admin

Par défaut, l’éditeur WYSIWYG TinyMCE 4 proposé par Magento 2 n’inclut pas une bonne partie des fonctionnalités embarquées par la librairie TinyMCE 4 (couleur du texte, du fond, …) qui peuvent être utiles pour un rédacteur de contenu. Je prends pour exemple les Custom Formats (Demo CodePen), très utiles lorsque vous créez des styles qui reposent sur un assemblage d’éléments HTML et de classes.

Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced
Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch

Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced

Testé fonctionnel Magento 2.3.3. Attention: le plugin ne fournissant aucune licence, il est déconseillé de l’utiliser sur des projets que vous vendez.

Vous pouvez utiliser le plugin Better Magento 2 WYSIWYG TinyMCE4 Editor par Magefan.

Télécharger le code source du plugin Magento 2 TinyMCE 4 WYSIWYG extension (version 2.0.5.2) pour la postérité.
Accès à une brève documentation (installation, utilisation…) Magento 2.3 – TinyMCE 4 Toolbar / Text Color Tool Missing. Version PDF: magefan.com-Magento 23 – TinyMCE 4 Toolbar Text Color Tool Missing.
Fil de discussion sur magento.stackexchange.com: Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration et version PDF pour la postérité.

Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch

Testé fonctionnel Magento 2.3.3. Source: Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration. Créer plusieurs fichiers:

Convention: dans notre exemple, Project et project sont à remplacer par le libellé de votre Vendor.

Create the directory [app/code/vendor/module]: app/code/Project/Customtinymce

Create app/code/Project/Customtinymce/etc/di.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <type name="Magento\Ui\Component\Wysiwyg\ConfigInterface">
            <plugin name="project_customtinymce_config"
                    type="Project\Customtinymce\Plugin\Config"
                    sortOrder="10"/>
        </type>
</config>

<plugin name="project_customtinymce_config"

type="Project\Customtinymce\Plugin\Config"

sortOrder="10"/>

</type>

</config>

Create app/code/Project/Customtinymce/etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Project_Customtinymce" setup_version="0.1.0"/>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

</config>

Create app/code/Project/Customtinymce/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Project_Customtinymce',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Project_Customtinymce',

__DIR__

);

Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:

<?php

namespace Project\Customtinymce\Plugin;


class Config
{

 protected $activeEditor;

    public function __construct(\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor)
    {
        $this->activeEditor = $activeEditor;
    }

    /**
     * Return WYSIWYG configuration
     *
     * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface
     * @param \Magento\Framework\DataObject $result
     * @return \Magento\Framework\DataObject
     */
    public function afterGetConfig(
        \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface,
        \Magento\Framework\DataObject $result
    ) {

        // Get current wysiwyg adapter's path
        $editor = $this->activeEditor->getWysiwygAdapterPath();

        // Is the current wysiwyg tinymce v4?
        if(strpos($editor,'tinymce4Adapter')){

        if (($result->getDataByPath('settings/menubar')) || ($result->getDataByPath('settings/toolbar')) || ($result->getDataByPath('settings/plugins'))){
            // do not override ui_element config (unsure if this is needed)
            return $result;
        }

        $settings = $result->getData('settings');

        if (!is_array($settings)) {
            $settings = [];
        }

        // configure tinymce settings 
        $settings['menubar'] = true;
        $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code';
        $settings['plugins'] = 'textcolor image code';

        $result->setData('settings', $settings);
        return $result;
        }
        else{ // don't make any changes if the current wysiwyg editor is not tinymce 4
            return $result;
        }
    }
}

<?php

namespace Project\Customtinymce\Plugin;

class Config

{

protected $activeEditor;

public function __construct(\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor)

{

$this->activeEditor = $activeEditor;

}

/**

* Return WYSIWYG configuration

* @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface

* @param \Magento\Framework\DataObject $result

* @return \Magento\Framework\DataObject

public function afterGetConfig(

\Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface,

\Magento\Framework\DataObject $result

) {

// Get current wysiwyg adapter's path

$editor = $this->activeEditor->getWysiwygAdapterPath();

// Is the current wysiwyg tinymce v4?

if(strpos($editor,'tinymce4Adapter')){

if (($result->getDataByPath('settings/menubar')) || ($result->getDataByPath('settings/toolbar')) || ($result->getDataByPath('settings/plugins'))){

// do not override ui_element config (unsure if this is needed)

return $result;

}

$settings = $result->getData('settings');

if (!is_array($settings)) {

$settings = [];

}

// configure tinymce settings

$settings['menubar'] = true;

$settings['plugins'] = 'textcolor image code';

$result->setData('settings', $settings);

return $result;

}

else{ // don't make any changes if the current wysiwyg editor is not tinymce 4

return $result;

}

Remarque: dans ce fichier Config.php, si on désactive tous les $settings[''] = ; (comme ci-dessous), c’est les fonctionnalités prévues par défaut dans Magento 2 qui s’afficheront dans vos champs d’éditeurs WYSIWYG en admin.

            // configure tinymce settings
//            $settings['menubar'] = true;
//            $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code';
//            $settings['plugins'] = 'textcolor image code';

// configure tinymce settings

// $settings['menubar'] = true;

// $settings['plugins'] = 'textcolor image code';

Lancer les commandes:

$ n98-magerun2 module:enable Project_Customtinymce // où "Project" est le libellé de votre Vendor
$ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 cache:clean; n98-magerun2 cache:flush

1 2	$ n98-magerun2 module:enable Project_Customtinymce // où "Project" est le libellé de votre Vendor $ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 cache:clean; n98-magerun2 cache:flush

[Magento 2] Bonnes pratiques et astuces de développement front-end

09/10/2019 / admin

Les commandes Magento 2 du développeur Front-End
Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?
Ajouter un nouveau module à votre projet Magento 2
Ajouter un nouveau thème à votre projet Magento 2
Styles et héritage
Aliases

Les commandes Magento 2 du développeur Front-End

Disponibles ici: Commandes Magento 2 Magerun développeur front-end.

Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?

Problème: j’essaye d’installer les sample datas de Magento 2 via Composer, mais lorsque je tape la commande $ bin/magento sampledata:deploy, j’obtiens un message Authentication required (repo.magento.com): Username Password.

Solution: Il faudra créer un compte sur marketplace.magento.com et récupérer le login (clé publique) et le mot de passe (clé privée) sous My Profile > My Products > Access Keys. Il sera peut-être nécessaire de générer une paire de clé.

Le Username demandé correspond à la clé publique. Le Password demandé correspond à la clé privée. Et PAS aux username et password de votre compte marketplace.magento.com!

Ajouter un nouveau module à votre projet Magento 2

En ligne de commande: $ n98-magerun2 dev:module:create

Ajouter un nouveau thème à votre projet Magento 2

Fichiers à préparer

Partir d’un thème Luma Child

Tips: les sources d’un starter-theme Luma Child sont disponibles en suivant ce lien.

Partie conf à ajouter dans <project_root>\dev\tools\grunt\configs\local-themes.js:

    luma_child: {
        area: 'frontend',
        name: 'Magento/luma-child',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

luma_child: {

area: 'frontend',

name: 'Magento/luma-child',

locale: 'en_US',

files: [

'css/styles-m',

'css/styles-l'

dsl: 'less'

Partir from-scratch

Sinon, si vous souhaitez débuter +/- from-scratch, vous pouvez suivre la documentation officielle de Magento 2 pour créer un nouveau thème.

Différentes manipulations à effectuer et commandes à exécuter

Dans cet ordre (et PAS dans un autre ordre, sinon ça ne fonctionne pas) :

Ajouter le dossier du nouveau thème dans: app/design/frontend/<Vendor_name>/<theme_name>
Mettre à jour le nouveau thème dans l’interface admin: Content > Design > Configuration > (Select Edit on your Store View) > Default Theme > Applied Theme > "<your_new_theme_name>"
Flusher les caches avec la commande: $ n98-magerun2 cache:flush
Lancer les commandes Grunt: $ grunt clean && grunt exec && grunt less && grunt watch
Vider les caches statiques des thèmes: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/
Vous pouvez rafraîchir votre navigateur: ctrl + F5

Styles et héritage

Deux notions bien distinctes à intégrer: l’extension et la surcharge de styles.

Extension (extend) des styles

L’extension permet de conserver, pour le fichier qui est étendu, les styles déclarés dans le(s) thème(s) parent(s) et d’en écrire des supplémentaires. Cette méthode est pratique lorsque votre thème hérite d’un thème parent dont les styles vous conviennent déjà. Elle s’utilise pour apporter des modifications mineures à l’existant.

Surcharge (override) des styles

La surcharge écrase, pour le fichier qui est surchargé, l’intégralité des styles déclarés dans le(s) thème(s) parent(s) pour repartir d’une base neutre. Cette dernière demande beaucoup plus de travail côté front-end.

Override et déclaration de nouvelles variables less

Tips: Magento naming convention for the Less variables et Modifier les valeurs des variables par défaut d’un thème parent (blank/luma).

Ce qu’il faut retenir:

Pour surcharger les valeurs de variables existantes et déclarées dans un thème parent, il faut surcharger le fichier _theme.less. Ce fichier doit contenir uniquement des déclarations concernant des variables déjà existantes dans des thèmes parents.
Pour déclarer de nouvelles variables propres à votre thème enfant, il faut créer un nouveau fichier. Vous avez le choix entre:
- Créer un fichier _variables_extend.less qu’il faudra importer depuis le fichier _extend.less
- ou créer un fichier qui peut s’appeler comme vous voulez (à part _variables.less qui va faire exploser votre affichage!) et dans lequel vous consignerez vos nouvelles variables

Héritage des thèmes dans Magento 2: Luma < (hérite de) Blank < (hérite de) Core.

vendor/magento/theme-frontend-luma/web/css/source/_theme.less
- Contient uniquement des surcharges de variables ayant déjà été déclarées dans les fichiers .less du Core (cf. lib/web/css/source/lib/_variables.less).
vendor/magento/theme-frontend-luma/web/css/source/_variables.less
- Contient des surcharges de variables ayant déjà été déclarées dans le/les thème(s) parent(s) (Blank < Core), ainsi que de nouvelles variables qui seront exploitées dans plusieurs fichiers du thème Luma.
- Ce fichier n’a pas l’air surchargeable dans un theme qui serait enfant de Luma (héritage: Luma Child < Luma < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_extend.less.
- Ce fichier n’a pas l’air d’avatage surchargeable dans un theme qui serait simplement enfant de Blank (héritage: Blank Child < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_extend.less.
vendor/magento/theme-frontend-luma/web/css/source/_forms.less contient de nouvelles variables qui seront exploitées uniquement dans ce fichier.

vendor/magento/theme-frontend-luma/web/css/source/_variables.less

Luma nous donne un bon exemple de comment doit être organisée cette feuille de styles. Les grandes parties (Typography, Icons, …) contiennent des surcharges des valeurs de variables existantes déclarées respectivement au minimum dans lib/web/css/source/lib/variables/_typography.less et dans lib/web/css/source/lib/variables/_icons.less.

« Au minimum« car elles peuvent déjà être surchargées une première fois dans le thème Blank (intermédiaire). @font-family-name__base est, en effet, déclarée pour la première fois dans vendor/magento/theme-frontend-blank/web/css/source/_variables.less.

// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ // // Luma theme variables // _____________________________________________ // // Typography // --------------------------------------------- // Fonts @font-family-name__base: 'Open Sans'; // Hérité de: Blank @font-family__base: @font-family-name__base, @font-family__sans-serif; // Hérité de: Blank < Core // Colors nesting @page__background-color: @color-white; // Hérité de: Core // // Icons // --------------------------------------------- @icon-success: '\e60e'; @icon-error: '\e61f'; [...]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */

//
// Luma theme variables
// _____________________________________________

//
// Typography
// ---------------------------------------------

// Fonts
@font-family-name__base: 'Open Sans'; // Hérité de: Blank
@font-family__base: @font-family-name__base, @font-family__sans-serif; // Hérité de: Blank < Core

// Colors nesting
@page__background-color: @color-white; // Hérité de: Core

//
// Icons
// ---------------------------------------------

@icon-success: '\e60e';
@icon-error: '\e61f';
[...]

vendor/magento/theme-frontend-luma/web/css/source/_forms.less

// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ // // Variables // _____________________________________________ // Nouvelles variables qui seront exploitées uniquement dans ce fichier! @legend-border-bottom: 1px solid @color-gray-light6; @form-field__vertical-indent__desktop: 29px; @form-calendar-icon__color: @primary__color; // // Common // _____________________________________________ & when (@media-common = true) { .fieldset { [...]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */

//
// Variables
// _____________________________________________

// Nouvelles variables qui seront exploitées uniquement dans ce fichier!
@legend-border-bottom: 1px solid @color-gray-light6;
@form-field__vertical-indent__desktop: 29px;
@form-calendar-icon__color: @primary__color;

//
// Common
// _____________________________________________

& when (@media-common = true) {
 .fieldset {
[...]

Aliases

Une série d’aliases à ajouter au fichier .bashrc.

Pour éditer le fichier: $ vim ~/.bashrc

Pour valider les changements sans quitter le terminal: $ source ~/.bashrc

# Magento 2 aliases # Vider les caches statiques des thèmes alias m2_rmstatic='rm -rf pub/static/*; rm -rf var/view_preprocessed/*'

1
2
3
4

# Magento 2 aliases

# Vider les caches statiques des thèmes
alias m2_rmstatic='rm -rf pub/static/*; rm -rf var/view_preprocessed/*'

[Magento 2] Astuces et bonnes pratiques

11/04/2017 / admin

Magento 2 Frontools – Set of front-end tools for Magento 2 based on Gulp.js

[Magento 2.x] Les options du slider Fotorama natif

14/03/2017 / admin

Magento2 : How to disable product image slider on detail page. Dans /theme_folder/etc/view.xml :

<vars module="Magento_Catalog">  <var name="gallery"> <var name="nav">thumbs</var>  <var name="loop">true</var>  <var name="keyboard">true</var>  <var name="arrows">true</var>  <var name="caption">false</var>  <var name="allowfullscreen">true</var>  <var name="navdir">horizontal</var>  <var name="navarrows">true</var>  <var name="navtype">slides</var>  <var name="transition"> <var name="effect">slide</var>  <var name="duration">500</var>  </var> <var name="fullscreen"> <var name="nav">thumbs</var>  <var name="loop">true</var>  <var name="keyboard">true</var>  <var name="arrows">false</var>  <var name="caption">false</var>  <var name="navdir">horizontal</var>  <var name="thumbwidth">150</var>  <var name="thumbheight">150</var>  <var name="navigation_carousel">true</var>  <var name="transition"> <var name="effect">dissolve</var>  <var name="duration">500</var>  <var name="carousel">true</var>  </var> </var> </var>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<vars module="Magento_Catalog">

 
 <var name="gallery">
 <var name="nav">thumbs</var> 
 <var name="loop">true</var> 
 <var name="keyboard">true</var> 
 <var name="arrows">true</var> 
 <var name="caption">false</var> 
 <var name="allowfullscreen">true</var> 
 <var name="navdir">horizontal</var> 
 <var name="navarrows">true</var> 
 <var name="navtype">slides</var> 
 <var name="transition">
 <var name="effect">slide</var> 
 <var name="duration">500</var> 
 </var>
 <var name="fullscreen">
 <var name="nav">thumbs</var> 
 <var name="loop">true</var> 
 <var name="keyboard">true</var> 
 <var name="arrows">false</var> 
 <var name="caption">false</var> 
 <var name="navdir">horizontal</var> 
 <var name="thumbwidth">150</var> 
 <var name="thumbheight">150</var> 
 <var name="navigation_carousel">true</var> 
 <var name="transition">
 <var name="effect">dissolve</var> 
 <var name="duration">500</var> 
 <var name="carousel">true</var> 
 </var>
 </var>
 </var>

Ressources en ligne:

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

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:

Admin, backoffice

Trouver et activer l’extension Google Tag Manager

Escaper dans les templates PHTML

Extension Page Builder de Magento 2 (payante)

Knockout JS dans les fichiers HTML

Configuration d’un module dans un fichier XML

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

Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced

Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch

Create the directory [app/code/vendor/module]: app/code/Project/Customtinymce

Create app/code/Project/Customtinymce/etc/di.xml:

Create app/code/Project/Customtinymce/etc/module.xml:

Create app/code/Project/Customtinymce/registration.php

Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:

Lancer les commandes:

Les commandes Magento 2 du développeur Front-End

Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?

Ajouter un nouveau module à votre projet Magento 2

Ajouter un nouveau thème à votre projet Magento 2

Fichiers à préparer

Partir d’un thème Luma Child

Partir from-scratch

Différentes manipulations à effectuer et commandes à exécuter

Styles et héritage

Extension (extend) des styles

Surcharge (override) des styles

Override et déclaration de nouvelles variables less

Ce qu’il faut retenir:

Héritage des thèmes dans Magento 2: Luma < (hérite de) Blank < (hérite de) Core.

vendor/magento/theme-frontend-luma/web/css/source/_variables.less

vendor/magento/theme-frontend-luma/web/css/source/_forms.less

Aliases

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

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

Utiliser la méthode `.bindAll` de Underscore