Magento 2 checkout - เพิ่มฟิลด์ที่กำหนดเองระหว่างที่อยู่สำหรับจัดส่งและวิธีการจัดส่ง


21

ฉันกำลังพยายามเพิ่มฟิลด์ที่กำหนดเองระหว่างที่อยู่สำหรับจัดส่งและส่วนวิธีการจัดส่ง และฉันต้องการให้ค่าของเขตข้อมูลนี้ถูกจัดเก็บทั้งในquoteและsales_orderตารางในท้ายที่สุด นี่คือสิ่งที่คล้ายกับการเพิ่มฟิลด์ "ความคิดเห็นการสั่งซื้อ" แต่ฟิลด์นี้ควรปรากฏขึ้นทันทีหลังจากส่วนที่อยู่จัดส่งและก่อนที่ส่วนวิธีการจัดส่ง

ฉันผ่านคู่มือวีโอไอพี dev เกี่ยวกับวิธีเพิ่มฟิลด์ที่กำหนดเองและแบบฟอร์มที่กำหนดเองเพื่อการชำระเงินและนำโซลูชันไปใช้ในระดับหนึ่ง

สิ่งที่ฉันทำไปแล้ว:

  1. อัปเดตcheckout_index_index.xmlเค้าโครงแล้วเพิ่มใหม่uiComponent(คอนเทนเนอร์) ใต้รายการ "shippingAddress"
  2. เพิ่มองค์ประกอบ (ฟิลด์) ฉันต้องการภายในคอนเทนเนอร์
  3. แทนที่/js/view/shipping.jsและshipping.phtmlในโมดูลที่กำหนดเองของฉัน
  4. เรียกใช้คอนเทนเนอร์ที่ทำด้านบนภายในshipping.phtmlระหว่างที่อยู่สำหรับจัดส่งสินค้าเช็คเอาท์และวิธีการจัดส่ง (สิ่งที่คล้ายกับการเพิ่มฟอร์มแบบคงที่ใหม่)

ตอนนี้เขตข้อมูลที่ฉันต้องการถูกแสดงบนการชำระเงิน onepage ตรงตามที่ฉันต้องการ แต่ฉันได้พบกับปัญหาด้านล่าง

  1. วิธีเข้าถึงค่าของฟิลด์ที่กำหนดเองที่ฉันเพิ่มไว้ด้านบน ฉันพยายามบันทึกค่าลงในแอตทริบิวต์ส่วนขยาย shippingAddress ฉันเพิ่มมิกซ์อินเข้าไปsetShippingInformationActionด้านในซึ่งพยายามทำด้านล่าง

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

shipping-address-fieldsetแต่โค้ดข้างต้นจริงล้มเหลวตั้งแต่องค์ประกอบไม่ได้อยู่ใน ฉันอาจได้รับค่าผ่านwindowองค์ประกอบ แต่มีวิธีเข้าถึงผ่านวีโอไอพีหรือไม่?

  1. มีวิธีการบันทึกค่าขององค์ประกอบนี้ในการจัดเก็บแคชท้องถิ่น ( Magento_Checkout/js/checkout-data) ดังนั้นค่าจะยังคงอยู่แม้หลังจากรีเฟรชหน้า?

2
ลองดูสิ่งนี้ - magento.stackexchange.com/questions/135969/…
igloczek

โปรดอ้างอิงลิงค์ด้านล่างฉันหวังว่ามันจะช่วยให้คุณmagento.stackexchange.com/questions/187847//
Pradeep Kumar

คำตอบ:


1

จากคำถามของคุณฉันอยู่ภายใต้การสันนิษฐานว่าคุณได้ตั้งค่าแอตทริบิวต์ส่วนขยายแล้ว ฉันได้ทำการดัดแปลงที่คล้ายกันและหวังว่าคำตอบของฉันจะช่วยได้

ในโมดูลที่กำหนดเองของคุณสร้างไฟล์ requirejs-config เพื่อขยายตัวประมวลผลการจัดส่ง / ค่าเริ่มต้น

Namespace / CustomModule / view / ส่วนหน้า / requirejs-config.js
var config = {
    "map": {
        "*": {
            'Magento_Checkout / js / model / shipping-save-processor / default': 'Namespace_CustomModule / js / model / shipping-save-processor / default'
        }
    }
};

เพิ่มแอตทริบิวต์ส่วนขยายของคุณไปยังเพย์โหลด

/ * global define, alert * /
กำหนด(
    [
        'jQuery'
        'เกาะ'
        'Magento_Checkout / js / รุ่น / quote'
        'Magento_Checkout / js / รุ่น / ทรัพยากร URL ผู้จัดการ'
        'ผู้วิเศษจัดเก็บ /'
        'Magento_Checkout / js / รุ่น / ชำระเงินบริการ'
        'Magento_Checkout / js / รุ่น / ชำระเงิน / วิธีการแปลง'
        'Magento_Checkout / js / รุ่น / ข้อผิดพลาดของตัวประมวลผล'
        'Magento_Checkout / js / รุ่น / แบบเต็มหน้าจอ-loader'
        'Magento_Checkout / js / การกระทำ / การเลือกการเรียกเก็บเงินที่อยู่'
    ]
    ฟังก์ชั่น (
        $,
        เกาะ
        อ้าง
        resourceUrlManager,
        การจัดเก็บข้อมูล
        paymentService,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction
    ) {
        'ใช้อย่างเข้มงวด';

        กลับ {
            saveShippingInformation: function () {
                น้ำหนักบรรทุก var;

                if (! quote.billingAddress ()) {
                    selectBillingAddressAction (quote.shippingAddress ());
                }
                // การเพิ่มแอตทริบิวต์ส่วนขยายไปยังที่อยู่จัดส่งของคุณ
                payload = {
                    ที่อยู่ข้อมูล: {
                        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 ();

                การจัดเก็บคืน. เสา (
                    resourceUrlManager.getUrlForSetShippingInformation (อ้าง)
                    JSON.stringify (น้ำหนักบรรทุก)
                ) .done (
                    ฟังก์ชั่น (ตอบสนอง) {
                        quote.setTotals (response.totals);
                        paymentService.setPaymentMethods (methodConverter (response.payment_methods));
                        fullScreenLoader.stopLoader ();
                    }
                ).ล้มเหลว(
                    ฟังก์ชั่น (ตอบสนอง) {
                        errorProcessor.process (การตอบสนอง);
                        fullScreenLoader.stopLoader ();
                    }
                );
            }
        };
    }
);

บันทึกคุณสมบัติในใบเสนอราคาของคุณด้วยปลั๊กอิน (ไม่แน่ใจว่าคุณสามารถใช้ผู้สังเกตการณ์ที่นี่ฉันยังไม่ได้ตรวจสอบ)

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

คลาส SaveAddressInformation
{
    ป้องกัน $ quoteRepository;
    ฟังก์ชั่นสาธารณะ __ โครงสร้าง (
        \ Magento \ Quote \ Model \ QuoteRepository $ quoteRepository
    ) {
        $ this-> quoteRepository = $ quoteRepository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ Shipping ข้อมูลการจัดการ $ subject
     * @param $ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ Shipping ข้อมูลการป้อนข้อมูล $ addressInformation
     * /
    ฟังก์ชั่นสาธารณะก่อนบันทึก AddressInformation (
        \ Magento \ Checkout \ Model \ Shipping ข้อมูลการจัดการ $ subject
        $ cartid,
        \ Magento \ Checkout \ Api \ Data \ Shipping ข้อมูลการแทรกที่อยู่ $ ข้อมูล
    ) {
        $ extensionAttributes = $ addressInformation-> getExtensionAttributes ();
        $ customField = $ extensionAttributes-> getCustomField ();
        $ quote = $ this-> quoteRepository-> getActive ($ cartId);
        $ quote-> setCustomField ($ customField);

    }
}

บันทึกแอตทริบิวต์ลงในใบสั่งซื้อของคุณด้วย 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

ระดับ SaveCustomFieldToOrder ใช้ ObserverInterface
{
    / **
     * @var \ Magento \ Framework \ ObjectManagerInterface
     * /
    ป้องกัน $ _objectManager

    / **
     * @param \ Magento \ Framework \ ObjectManagerInterface $ objectmanager
     * /
    ฟังก์ชั่นสาธารณะ __ โครงสร้าง (\ Magento \ Framework \ ObjectManagerInterface $ objectmanager)
    {
        $ this -> _ objectManager = $ objectmanager;
    }

    ฟังก์ชั่นที่สาธารณะดำเนินการ (EventObserver $ observer)
    {
        $ order = $ ผู้สังเกตการณ์ -> getOrder ();
        $ quoteRepository = $ this -> _ objectManager-> create ('Magento \ Quote \ Model \ QuoteRepository');
        / ** @var \ Magento \ Quote \ Model \ Quote $ quote * /
        $ quote = $ quoteRepository-> get ($ order-> getQuoteId ());
        $ order-> setCustomField ($ quote-> getCustomField ());

        ส่งคืน $ this;
    }
}


การเอาชนะวิธีการหลักไม่ได้โชคดีเกินไป เกิดอะไรขึ้นถ้าโมดูลอื่นแทนที่ของคุณ? magento.stackexchange.com/questions/135969/…
vaso123

จุดดีไม่ได้ตระหนักถึงวิธีการอื่น ขอบคุณที่ชี้นำ
NathanielR

@ vaso123 ดูเหมือนว่าฉันไม่ได้ตระหนักถึงบางสิ่งบางอย่างเพราะที่นี่นาธาเนียลได้สร้างปลั๊กอินและผู้สังเกตการณ์เหตุการณ์หนึ่งคนเพื่อให้ฟังก์ชั่นหลักอยู่เหนือที่นี่ คุณช่วยอธิบายเพิ่มเติมอีกหน่อยได้ไหมมันจะมีประโยชน์จริงๆ ... ขอบคุณ
Sarvagya

@Sarvagya เมื่อคุณใช้ต้องการ js ห้ามใช้map *ให้ใช้ mixin แทน
vaso123

@ vaso123 ฉันเชื่อว่าเขาหมายถึง Magento_Checkout / js / model / shipping-save-processor / default ':' Namespace_CustomModule / js / model / shipping-save-processor / default 'ซึ่ง Ii เข้าใจแทนที่ Magento_Checkout / js / model / shipping ประหยัดประมวลผล / เริ่มต้น } เป็นเวลานานแล้วที่ข้าได้เขียนสิ่งนี้ดังนั้น Sarvagya ได้โปรดแก้ไขให้ถูกถ้าข้าผิด
NathanielR

0

สร้างปลั๊กอินสำหรับ \Magento\Checkout\Block\Checkout\LayoutProcessor::processวิธีนี้

ทำรายการใน di.xml บนพา ธ นี้

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

สร้างคลาสปลั๊กอินในไดเรกทอรีนี้

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

2 => สร้างคลาสปลั๊กอินในไดเรกทอรีนี้ 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;
}

}

เมื่อดำเนินการเสร็จแล้วให้ตรวจสอบหน้าชำระเงิน

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.