So zeigen Sie einen benutzerdefinierten Block bei der Versandartauswahl in Magento 2 an

Verwenden Sie den Referenzlink zum Hinzufügen eines benutzerdefinierten Blocks bei den unten aufgeführten Versandmethoden in der Onepage-Kaufabwicklung. Ich bin in der Lage, einen zusätzlichen Versandblock auf der Unterseite zu erstellen.

Ich möchte jedoch nur dann Inhalte anzeigen, wenn die Versandart ausgewählt ist. Wenn der Kunde eine Versandart auswählt, sollte der Cursor auf zusätzliche Informationen und benutzerdefinierte Felder zeigen und der Benutzer sollte die Daten eingeben.

Wenn wir eine andere Versandmethode auswählen, sollten die entsprechenden Informationen eintreffen, falls vorhanden, andernfalls sollte der div ausgeblendet werden.

Gleich wie http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ in Magento 2. Ich hatte es in Magento 1 implementiert.

— santhoshnsscoe
quelle

Zunächst definieren Sie ein neues Element in, shippingAdditionalindem Sie eine Datei view/frontend/layout/checkout_index_index.xmlwie diese erstellen

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

Dann erstelle die Datei view/frontend/web/js/view/checkout/shipping/carrier_custom.jsso

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;
        },
    });
});

Und dann eine Datei erstellen view/frontend/web/template/view/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>

Grundsätzlich weist die XML-Datei checkout an, die js-Datei zu initiieren, die eine uiComponent ist. Es initiiert die Knockout-Vorlage und verwendet die selectedMethodFunktion, um den Wert des aktuell ausgewählten Versands (carrier_method) abzurufen. Wenn der Wert Ihren Wünschen entspricht, wird der Block angezeigt. Sie können es entsprechend Ihren Bedürfnissen ändern, dh. Überprüfung nur ausgewählter Anbieter. Da dies selectedMethodso definiert ist knockout.computed(), wird es jedes Mal neu bewertet, wenn der Benutzer den Träger wechselt, da quote.shippingMethod()es sich um ein beobachtbares Ereignis handelt.

— Zefiryn
quelle

Ich habe einen Textbereich im benutzerdefinierten Block. So speichern Sie die im Textfeld eingegebenen Daten in Angebot und Bestellung.

— Santhoshnsscoe