Cách hiển thị khối tùy chỉnh trên phương thức giao hàng, chọn trong Magento 2

Sử dụng liên kết tham chiếu làm thế nào để thêm khối tùy chỉnh tại các phương thức giao hàng bên dưới trong thanh toán onepage? , Tôi có thể tạo khối vận chuyển bổ sung ở phía dưới.

Nhưng, tôi chỉ muốn hiển thị nội dung khi phương thức giao hàng được chọn. Khi khách hàng chọn phương thức giao hàng, con trỏ sẽ chuyển đến thông tin bổ sung và các trường tùy chỉnh và người dùng nên nhập dữ liệu.

Khi chúng tôi chọn một phương thức vận chuyển khác, thông tin liên quan đến điều đó sẽ xuất hiện nếu hiện tại div sẽ bị ẩn.

Tương tự như http://excellencemagentoblog.com/blog/2011/11/07/magento-advified-shipping-method-development/ trong Magento 2. Tôi đã triển khai nó trong Magento 1.

— santhoshnsscoe
nguồn

Đầu tiên, bạn xác định một yếu tố mới shippingAdditionalbằng cách tạo tệp view/frontend/layout/checkout_index_index.xmlnhư thế này

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

Sau đó tạo tập tin view/frontend/web/js/view/checkout/shipping/carrier_custom.jsnhư thế này

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

Và sau đó tạo một tập tin 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>

Về cơ bản, tệp XML yêu cầu thanh toán để bắt đầu tệp js là một uiComponent. Nó khởi tạo mẫu loại trực tiếp và sử dụngselectedMethod chức năng để lấy giá trị của vận chuyển hiện được chọn (Carrier_method). Nếu giá trị là những gì bạn muốn, nó sẽ hiển thị khối. Bạn có thể sửa đổi nó theo nhu cầu của bạn, tức là. chỉ kiểm tra hãng đã chọn. Bởi vì selectedMethodđược định nghĩa vì knockout.computed()nó sẽ được đánh giá lại mỗi khi người dùng thay đổi nhà mạng vì quote.shippingMethod()có thể quan sát được.

tôi đã cập nhật vì đường dẫn mẫu bị sai

— Zefiryn
nguồn

Tôi có một vùng văn bản trong khối tùy chỉnh. Làm thế nào để lưu dữ liệu được nhập vào vùng văn bản để báo giá và đặt hàng.

— santhoshnsscoe