Personnaliser Checkout | Ajouter des validations personnalisées avant le placement de la commande | Développeur Magento 2

6 octobre 2018 0 Par admin
Personnaliser  Checkout | Ajouter des validations personnalisées avant le placement de la commande | Développeur Magento 2

Cette rubrique explique comment ajouter des validations personnalisées à effectuer avant que la commande ne soit passée. À savoir, les validations qui sont effectuées après qu’un client a cliqué sur le bouton Passer une commande.

L’écriture de la logique de validation elle-même n’est pas traitée dans cette rubrique.

Pour ajouter des validations personnalisées avant l’action de placement de commande, vous devez procéder comme suit:

  1. Créez le validateur.
  2. Ajoutez un validateur au pool de validateurs.
  3. Déclarez la validation dans layout du checkout.

 

Étape 1: Créer le validateur:

Pour des raisons de compatibilité, d’évolutivité et de maintenance, ne modifiez pas le code Magento par défaut, ajoutez vos personnalisations dans un module séparé. Pour que votre personnalisation de paiement soit appliquée correctement, votre module personnalisé doit dépendre du module Magento_Checkout. N’utilisez pas Ui pour le nom de votre module personnalisé, car la notation %Vendor% _Ui, requise lors de la spécification des chemins, peut être à l’origine de problèmes.

Dans votre répertoire de module personnalisé, créez un fichier .js mettant en œuvre le validateur. Il doit être situé dans le répertoire <répertoire_module>/view/frontend/web/js/model.

 

define(
    [],
    function () {
        'use strict';
        return {
            /**
             * Validate something
             *
             * @returns {boolean}
             */
            validate: function() {
                //Put your validation logic here
                return true;
            }
        }
    }
);

Étape 2: Ajouter un validateur au pool de validateurs:

Votre validateur personnalisé doit être ajouté au groupe de «validateurs supplémentaires». Dans le répertoire <your_module_dir>/view/frontend/web/js/view, créez un nouveau fichier <your-validation>.js avec le contenu suivant:

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/additional-validators',
        '<your_module>/js/model/your-validator'
    ],
    function (Component, additionalValidators, yourValidator) {
        'use strict';
        additionalValidators.registerValidator(yourValidator);
        return Component.extend({});
    }
);


Étape 3: Déclarez la validation dans la structure de la checkout:

Dans votre répertoire de module personnalisé, créez un nouveau fichier <your_module_dir>/view/frontend/layout/checkout_index_index.xml. Dans ce fichier, ajoutez les éléments suivants:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="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="additional-payment-validators" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Declare your validation. START -->
<item name="your-validator" xsi:type="array">
<item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>

 

Téléchargement disponible pour cet article:https://github.com/marouanbmm/magento-2.2.6/commit/4cc91fa40a72601d8560e3171c96dc5ba42f73f4

Les livres qui peuvent vous aider :

Produits disponibles sur Amazon.fr

 

Please follow and like us: