Comment afficher un bloc personnalisé sur la méthode d'expédition sélectionnée dans Magento 2

À l'aide du lien de référence, comment ajouter un bloc personnalisé aux méthodes d'expédition ci-dessous lors du paiement en une page? , Je peux créer un bloc d'expédition supplémentaire en bas.

Mais, je voudrais afficher le contenu uniquement, lorsque la méthode d'expédition est sélectionnée. Lorsqu'une méthode d'expédition est sélectionnée par le client, le curseur doit aller vers des informations supplémentaires et des champs personnalisés et l'utilisateur doit saisir les données.

Lorsque nous sélectionnons une autre méthode d'expédition, les informations liées à cela devraient venir si elles sont présentes, sinon la div devrait être masquée.

Identique à http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ dans Magento 2. Je l'avais implémenté dans Magento 1.

— santhoshnsscoe
source

Tout d'abord, vous définissez un nouvel élément en shippingAdditionalcréant un fichier view/frontend/layout/checkout_index_index.xmlcomme celui-ci

<?xml version="1.0"?>
<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="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="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="carrier_custom" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/carrier_custom</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Ensuite, créez le fichier view/frontend/web/js/view/checkout/shipping/carrier_custom.jscomme ceci

define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/quote'
], function ($, ko, Component, quote) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/checkout/shipping/carrier_custom'
        },

        initObservable: function () {

            this.selectedMethod = ko.computed(function() {
                var method = quote.shippingMethod();
                var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
                return selectedMethod;
            }, this);

            return this;
        },
    });
});

Et puis créez un fichier view/frontend/web/template/checkout/shipping/carrier_custom.html

<div id="my-carrier-custom-block-wrapper" data-bind="visible: selectedMethod() == 'mycarrier_mymethod'">
    <p data-bind="i18n: 'This is custom block shown only when selected specific method'"></p>
</div>

Fondamentalement, le fichier XML indique à la caisse de lancer le fichier js qui est un uiComponent. Il lance un modèle de selectedMethoddésactivation et utilise la fonction pour obtenir la valeur de l'expédition actuellement sélectionnée (carrier_method). Si la valeur est ce que vous voulez, elle affichera le bloc. Vous pouvez le modifier selon vos besoins, ie. vérification uniquement du transporteur sélectionné. Parce que selectedMethodest défini car knockout.computed()il sera réévalué chaque fois que l'utilisateur change de support car il quote.shippingMethod()est observable.

j'ai mis à jour parce que le chemin du modèle était incorrect

— Zefiryn
source

J'ai une zone de texte dans le bloc personnalisé. Comment enregistrer les données saisies dans la zone de texte pour le devis et la commande.

— santhoshnsscoe