Jak wyświetlić niestandardowy blok w metodzie wysyłki wybierz w Magento 2

15

Za pomocą linku referencyjnego, jak dodać niestandardowy blok w metodach wysyłki poniżej w kasie na stronie? , Jestem w stanie utworzyć dodatkowy blok wysyłkowy na dole.

Chciałbym jednak wyświetlać tylko treść po wybraniu metody wysyłki. Gdy klient wybierze metodę wysyłki, kursor powinien przejść do dodatkowych informacji i pól niestandardowych, a użytkownik powinien wprowadzić dane.

Kiedy wybieramy inną metodę wysyłki, informacje związane z tym powinny pojawić się, jeśli obecne, div powinien zostać ukryty.

To samo, co http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ w Magento 2. Zaimplementowałem go w Magento 1.

magento2 checkout javascript uicomponent Santhoshnsscoe
źródło

Odpowiedzi:

13

Najpierw definiujesz nowy element shippingAdditional, tworząc view/frontend/layout/checkout_index_index.xmltaki plik

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

Następnie utwórz plik view/frontend/web/js/view/checkout/shipping/carrier_custom.jsw ten sposób

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

A następnie utwórz plik 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>

Zasadniczo plik XML informuje kasę o zainicjowaniu pliku js, który jest komponentem uiComponent. Inicjuje szablon nokaut i używa selectedMethodfunkcji, aby uzyskać wartość aktualnie wybranej wysyłki (metoda_przenośnika). Jeśli wartość jest taka, jaką chcesz, wyświetli blok. Możesz go zmodyfikować zgodnie ze swoimi potrzebami, tj. sprawdzanie tylko wybranego przewoźnika. Ponieważ selectedMethodjest zdefiniowany, ponieważ knockout.computed()będzie ponownie oceniany za każdym razem, gdy użytkownik zmieni przewoźnika, ponieważ quote.shippingMethod()jest to obserwowalne.

zaktualizowałem, ponieważ ścieżka szablonu była nieprawidłowa

Zefiryn
źródło
Mam pole tekstowe w bloku niestandardowym. Jak zapisać dane wprowadzone w polu tekstowym do wyceny i zamówienia.
santhoshnsscoe