Cara menampilkan blok khusus pada metode pengiriman pilih di Magento 2

15

Menggunakan tautan referensi bagaimana cara menambahkan blokir khusus pada metode pengiriman di bawah ini di checkout di tempat? , Saya dapat membuat blok pengiriman tambahan di bagian bawah.

Tapi, saya hanya ingin menunjukkan konten, ketika metode pengiriman dipilih. Ketika metode pengiriman dipilih oleh pelanggan, kursor harus pergi ke informasi tambahan dan bidang khusus dan pengguna harus memasukkan data.

Ketika kami memilih metode pengiriman lain, informasi yang terkait dengan itu harus datang jika ada orang lain div harus disembunyikan.

Sama seperti http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ di Magento 2. Saya telah mengimplementasikannya di Magento 1.

magento2 checkout javascript uicomponent santhoshnsscoe
sumber

Jawaban:

13

Pertama, Anda mendefinisikan elemen baru shippingAdditionaldengan membuat file view/frontend/layout/checkout_index_index.xmlseperti ini

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

Kemudian buat file view/frontend/web/js/view/checkout/shipping/carrier_custom.jsseperti ini

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

Lalu buat file 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>

Pada dasarnya file XML memberitahu checkout untuk memulai file js yang merupakan komponen uiComponent. Ini memulai knockout template dan menggunakan selectedMethodfungsi untuk mendapatkan nilai pengiriman yang dipilih saat ini (carrier_method). Jika nilainya adalah apa yang Anda inginkan maka akan muncul blok. Anda dapat memodifikasinya sesuai dengan kebutuhan Anda, yaitu. hanya memeriksa operator yang dipilih. Karena selectedMethoddidefinisikan karena knockout.computed()akan dievaluasi kembali setiap kali pengguna mengubah operator karena quote.shippingMethod()dapat diamati.

saya memperbarui karena jalur templat salah

Zefiryn
sumber
Saya memiliki area teks di blok khusus. Bagaimana cara menyimpan data yang dimasukkan dalam teks ke kutipan dan pesanan.
santhoshnsscoe