Checkout Magento 2 - tambahkan bidang khusus antara alamat pengiriman dan metode pengiriman

Saya mencoba menambahkan bidang khusus di antara bagian alamat pengiriman dan metode pengiriman . Dan saya ingin nilai-nilai bidang ini disimpan dalam tabel quotedan keduanya sales_orderpada akhirnya. Ini adalah sesuatu yang mirip dengan menambahkan bidang "komentar pesanan" tetapi bidang ini akan muncul tepat setelah bagian alamat pengiriman dan sebelum bagian metode pengiriman.

Saya membaca panduan dev Magento tentang cara menambahkan bidang khusus dan formulir khusus ke checkout dan menerapkan solusi sampai batas tertentu.

Apa yang telah saya lakukan sejauh ini:

1. Memperbarui checkout_index_index.xmltata letak, menambahkan baru uiComponent(wadah) di bawah item "shippingAddress".
2. Menambahkan elemen (bidang) yang saya butuhkan di dalam wadah.
3. Ganti /js/view/shipping.jsdan shipping.phtmldalam modul khusus saya.
4. Meminta wadah yang dibuat di atas shipping.phtmldi dalam di antara alamat pengiriman checkout dan metode pengiriman (sesuatu yang mirip dengan menambahkan formulir statis baru)

Sekarang bidang yang saya inginkan sedang ditampilkan di checkout di tempat persis seperti yang saya inginkan. Namun saya telah menemui masalah di bawah ini.

1. Bagaimana cara mengakses nilai bidang khusus yang telah saya tambahkan di atas? Saya mencoba menyimpan nilai ke atribut ekstensi shippingAddress. Saya menambahkan mixin ke setShippingInformationActiondalam yang mencoba melakukan di bawah ini

   shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];

Tetapi kode di atas sebenarnya gagal karena elemen tidak ada dalam shipping-address-fieldset. Saya mungkin bisa mendapatkan nilai melalui windowelemen. Tetapi apakah ada cara untuk mengakses ini melalui Magento?

2. Apakah ada cara untuk menyimpan nilai elemen ini dalam penyimpanan cache lokal ( Magento_Checkout/js/checkout-data) sehingga nilainya akan tetap bertahan bahkan setelah refresh halaman?

Berdasarkan pertanyaan Anda, saya berasumsi Anda sudah menyiapkan atribut ekstensi. Saya telah melakukan modifikasi serupa dan semoga jawaban saya membantu.

Dalam modul Kustom Anda buat file requirejs-config untuk memperpanjang prosesor pengiriman default / default

Namespace / CustomModule / view / frontend / requireejs-config.js
var config = {
    "map": {
        "*": {
            'Magento_Checkout / js / model / pengiriman-save-processor / default': 'Namespace_CustomModule / js / model / pengiriman-save-processor / default'
        }
    }
};

Tambahkan atribut ekstensi Anda ke payload.

/ * global define, waspada * /
menetapkan(
    [
        'jquery',
        'ko',
        'Magento_Checkout / js / model / quote',
        'Magento_Checkout / js / model / resource-url-manager',
        'penyihir / penyimpanan',
        'Magento_Checkout / js / model / layanan pembayaran',
        'Magento_Checkout / js / model / payment / method-converter',
        'Magento_Checkout / js / model / error-processor',
        'Magento_Checkout / js / model / full-screen-loader',
        'Magento_Checkout / js / action / select-billing-address'
    ],
    fungsi (
        $,
        ko,
        mengutip,
        resourceUrlManager,
        penyimpanan,
        layanan pembayaran,
        metodeConverter,
        pengolah kesalahan,
        fullScreenLoader,
        pilihBillingAddressAction
    ) {
        'gunakan yang ketat';

        kembali {
            saveShippingInformation: function () {
                var payload;

                if (! quote.billingAddress ()) {
                    selectBillingAddressAction (quote.shippingAddress ());
                }
                // Menambahkan atribut ekstensi ke alamat pengiriman Anda
                payload = {
                    Informasi alamat: {
                        shipping_address: quote.shippingAddress (),
                        billing_address: quote.billingAddress (),
                        shipping_method_code: quote.shippingMethod (). method_code,
                        shipping_carrier_code: quote.shippingMethod (). carrier_code,
                        extension_attributes: {
                            custom_field: $ ('# custom_field'). val (), 
                        }
                    }
                };

                fullScreenLoader.startLoader ();

                return storage.post (
                    resourceUrlManager.getUrlForSetShippingInformation (quote),
                    JSON.stringify (payload)
                ). dilakukan (
                    fungsi (respons) {
                        quote.setTotals (response.totals);
                        paymentService.setPaymentMethods (methodConverter (response.payment_methods));
                        fullScreenLoader.stopLoader ();
                    }
                ).gagal(
                    fungsi (respons) {
                        errorProcessor.process (response);
                        fullScreenLoader.stopLoader ();
                    }
                );
            }
        };
    }
);

Simpan Atribut ke Kutipan Anda dengan sebuah plugin (Tidak yakin apakah Anda bisa menggunakan pengamat di sini yang belum saya periksa).

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="Namespace_CustomModule_save_delivery_date_in_quote" type="Namespace\CustomModule\Plugin\Checkout\SaveAddressInformation" />
    </type>

</config>

SaveAddressInformation.php

kelas SaveAddressInformation
{
    protected $ quoteRepository;
    fungsi publik __construct (
        \ Magento \ Penawaran \ Model \ QuoteRepository $ quoteRepository
    ) {
        $ this-> quoteRepository = $ quoteRepository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject
     * @param $ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
     * /
    fungsi publik sebelumSimpanAddressInformation (
        \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subjek,
        $ cartId,
        \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
    ) {
        $ extensionAttributes = $ addressInformation-> getExtensionAttributes ();
        $ customField = $ extensionAttributes-> getCustomField ();
        $ quote = $ this-> quoteRepository-> getActive ($ cartId);
        $ quote-> setCustomField ($ customField);

    }
}

Simpan atribut ke pesanan Anda dengan Observer events.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="sales_model_service_quote_submit_before">
        <observer name="unique_observer_name" instance="Namespace\CustomModule\Observer\SaveCustomFieldToOrder"/>
    </event>
</config>

SaveCustomFieldToOrder.php

class SaveCustomFieldToOrder mengimplementasikan ObserverInterface
{
    / **
     * @var \ Magento \ Framework \ ObjectManagerInterface
     * /
    protected $ _objectManager;

    / **
     * @param \ Magento \ Framework \ ObjectManagerInterface $ objectmanager
     * /
    fungsi publik __construct (\ Magento \ Framework \ ObjectManagerInterface $ objectmanager)
    {
        $ this -> _ objectManager = $ objectmanager;
    }

    mengeksekusi fungsi publik (EventObserver $ observer)
    {
        $ order = $ observer-> getOrder ();
        $ quoteRepository = $ this -> _ objectManager-> create ('Magento \ Quote \ Model \ QuoteRepository');
        / ** @var \ Magento \ Penawaran \ Model \ Penawaran $ quote * /
        $ quote = $ quoteRepository-> get ($ order-> getQuoteId ());
        $ order-> setCustomField ($ quote-> getCustomField ());

        mengembalikan $ this;
    }
}

Buat plugin untuk \Magento\Checkout\Block\Checkout\LayoutProcessor::processmetode ini .

Buat entri di di.xml di jalur ini

app/code/CompanyName/Module/etc/frontend/di.xml

Buat kelas plugin di Direktori ini.

app/code/CompanyName\Module\Model\Plugin\Checkout

2 => Buat kelas plugin pada Direktori ini. app/code/CompanyName\Module\Model\Plugin\Checkout

    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAddress.custom_attributes',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/input',
            'options' => [],
            'id' => 'custom-field'
        ],
        'dataScope' => 'shippingAddress.custom_attributes.custom_field',
        'label' => 'Custom Field',
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [],
        'sortOrder' => 250,
        'id' => 'custom-field'
    ];


    return $jsLayout;
}

}

Setelah ini selesai, periksa halaman checkout.