Як показати спеціальний блок у способі доставки, виберіть у Magento 2

Як додати посилання, як додати спеціальний блок при способах доставки нижче в одній сторінці замовлення? , Я в змозі створити додатковий блок доставки знизу.

Але я хотів би показувати вміст лише тоді, коли обраний спосіб доставки. Коли клієнт вибирає спосіб доставки, курсор повинен перейти до додаткової інформації та спеціальних полів, а користувач повинен ввести дані.

Коли ми вибираємо інший спосіб доставки, інформація, пов’язана з цим, повинна надходити, якщо інший Div повинен бути прихований.

Так само, як http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ в Magento 2. Я реалізував це в Magento 1.

— сантошнское
джерело

По- перше, ви визначаєте новий елемент shippingAdditionalшляхом створення файлу , view/frontend/layout/checkout_index_index.xmlяк це

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

Потім створіть файл view/frontend/web/js/view/checkout/shipping/carrier_custom.jsтаким

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

А потім створити файл 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>

Фактично, XML-файл повідомляє касі розпочати js-файл, який є uiComponent. Він ініціює шаблон вибивання та використовує selectedMethodфункцію для отримання значення поточно вибраної доставки (carrier_method). Якщо значення є таким, яке ви хочете, воно покаже блок. Ви можете модифікувати його відповідно до своїх потреб, тобто. перевірка лише вибраного оператора. Тому що selectedMethodвизначено, як knockout.computed()воно буде переоцінюватися щоразу, коли користувач змінює оператора, тому що quote.shippingMethod()це спостерігається.

я оновив, тому що шлях шаблону був неправильним

— Зефірин
джерело

У користувальницькому блоці є область тексту. Як зберегти дані, введені в текстовій області, до цитати та порядку.

— santhoshnsscoe