Thanh toán Magento 2 - thêm trường tùy chỉnh giữa địa chỉ giao hàng và phương thức giao hàng


21

Tôi đang cố gắng thêm một trường tùy chỉnh ở giữa phần địa chỉ giao hàngphương thức giao hàng . Và tôi muốn các giá trị của trường này sẽ được lưu trữ trong cả hai quotesales_orderbảng cuối cùng. Đây là một cái gì đó tương tự như thêm một trường "nhận xét đơn hàng" nhưng trường này sẽ xuất hiện ngay sau phần địa chỉ giao hàng và trước phần phương thức giao hàng.

Tôi đã xem qua hướng dẫn dành cho nhà phát triển Magento về cách thêm trường tùy chỉnhbiểu mẫu tùy chỉnh vào thanh toán và triển khai giải pháp ở một mức độ nhất định.

Những gì tôi đã làm cho đến nay:

  1. Đã cập nhật checkout_index_index.xmlbố cục, thêm một uiComponent(container) mới trong mục "ShippingAddress".
  2. Đã thêm phần tử (trường) tôi yêu cầu bên trong container.
  3. Ghi đè /js/view/shipping.jsshipping.phtmltrong mô-đun tùy chỉnh của tôi.
  4. Đã gọi container được thực hiện ở trên shipping.phtmlở giữa giữa địa chỉ giao hàng thanh toán và phương thức giao hàng (tương tự như thêm một hình thức tĩnh mới)

Bây giờ trường tôi muốn được hiển thị trên thanh toán onepage chính xác nơi tôi muốn. Nhưng tôi đã gặp những vấn đề dưới đây.

  1. Làm cách nào để truy cập giá trị của trường tùy chỉnh mà tôi đã thêm ở trên? Tôi đang cố gắng lưu giá trị vào thuộc tính tiện ích mở rộng ShippingAddress. Tôi đã thêm một mixin vào setShippingInformationActionbên trong mà cố gắng làm như dưới đây

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

Nhưng mã trên thực sự thất bại vì phần tử không có trong shipping-address-fieldset. Tôi có thể có được giá trị thông qua các windowyếu tố. Nhưng có cách nào để truy cập thông qua Magento không?

  1. Có cách nào để lưu giá trị của phần tử này trong bộ nhớ cache cục bộ ( Magento_Checkout/js/checkout-data) để giá trị sẽ tồn tại ngay cả sau khi làm mới trang không?


Vui lòng tham khảo bên dưới liên kết tôi hy vọng nó sẽ giúp bạn magento.stackexchange.com/questions/187847/...
Pradeep Kumar

Câu trả lời:


1

Dựa trên câu hỏi của bạn, tôi theo giả định rằng bạn đã thiết lập các thuộc tính mở rộng của mình. Tôi đã thực hiện một sửa đổi tương tự và hy vọng câu trả lời của tôi sẽ giúp.

Trong mô-đun Tùy chỉnh của bạn, hãy tạo tệp Yêu cầu cấu hình để mở rộng bộ xử lý vận chuyển mặc định / mặc định

Không gian tên / CustomModule / view / frontend / allowjs-config.js
cấu hình var = {
    "bản đồ": {
        "*": {
            'Magento_Checkout / js / model / Shipping-save-bộ xử lý / mặc định': 'Namespace_CustomModule / js / model / Shipping-save-bộ xử lý / mặc định'
        }
    }
};

Thêm thuộc tính mở rộng của bạn vào tải trọng.

/ * định nghĩa toàn cầu, cảnh báo * /
định nghĩa(
    [
        'Giễu cợt',
        'không'
        'Magento_Checkout / js / model / quote',
        'Magento_Checkout / js / model / resource-url-manager',
        'Pháp sư / lưu trữ',
        'Magento_Checkout / js / model / dịch vụ thanh toán',
        'Magento_Checkout / js / mô hình / thanh toán / chuyển đổi phương thức',
        'Magento_Checkout / js / model / bộ xử lý lỗi',
        'Magento_Checkout / js / model / trình tải toàn màn hình',
        'Magento_Checkout / js / hành động / chọn địa chỉ thanh toán'
    ],
    chức năng (
        $,
        không,
        Trích dẫn,
        tài nguyên quản lý,
        lưu trữ,
        Dịch vụ thanh toán,
        phương thứcConverter,
        bộ xử lý lỗi,
        fullScreenLoader,
        chọnBillingAddressAction
    ) {
        'Sử dụng nghiêm ngặt';

        trở về {
            saveShippingIn information: function () {
                tải trọng var;

                if (! quote.billingAddress ()) {
                    chọnBillingAddressAction (quote.shippingAddress ());
                }
                // Thêm thuộc tính mở rộng vào địa chỉ giao hàng của bạn
                tải trọng = {
                    địa chỉ Thông tin: {
                        Shipping_address: quote.shippingAddress (),
                        Billing_address: quote.billingAddress (),
                        Shipping_method_code: quote.shippingMethod (). method_code,
                        Shipping_carrier_code: quote.shippingMethod (). Carrier_code,
                        extension_attribut: {
                            custom_field: $ ('# custom_field'). val (), 
                        }
                    }
                };

                fullScreenLoader.startLoader ();

                trả lại dung lượng.post (
                    resourceUrlManager.getUrlForSetShippingIn information (quote),
                    JSON.opesify (tải trọng)
                ).làm xong(
                    hàm (phản hồi) {
                        quote.setTotals (answer.totals);
                        PaymentService.setPaymentMethods (methodConverter (answer.payment_methods));
                        fullScreenLoader.stopLoader ();
                    }
                ).Thất bại(
                    hàm (phản hồi) {
                        errorProcessor. process (hồi đáp);
                        fullScreenLoader.stopLoader ();
                    }
                );
            }
        };
    }
);

Lưu thuộc tính vào Trích dẫn của bạn bằng một plugin (Không chắc bạn có thể sử dụng trình quan sát ở đây tôi chưa kiểm tra).

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>

SaveAddressIn information.php

lớp SaveAddressThông tin
{
    được bảo vệ $ quoteRep repository;
    chức năng công cộng __construct (
        \ Magento \ Trích dẫn \ Mô hình \ Trích dẫn $ quoteRep repository
    ) {
        $ this-> quoteRep repository = $ quoteRep repository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ ShippingIn informationQuản lý $ chủ đề
     * @param $ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ ShippingIn informationInterface $ addressIn information
     * /
    chức năng công khai trướcSaveAddressIn information (
        \ Magento \ Checkout \ Model \ ShippingIn informationQuản lý $ chủ đề,
        $ cartId,
        \ Magento \ Checkout \ Api \ Data \ ShippingIn informationInterface $ addressIn information
    ) {
        $ extensionAttribut = $ addressIn information-> getExtensionAttribut ();
        $ customField = $ extensionAttribut-> getCustomField ();
        $ quote = $ this-> quoteRep repository-> getActive ($ cartId);
        $ quote-> setCustomField ($ customField);

    }
}

Lưu thuộc tính vào đơn đặt hàng của bạn với một sự kiện Observer

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

lớp SaveCustomFieldToOrder thực hiện ObserverInterface
{
    / **
     * @var \ Magento \ Framework \ ObjectManagerInterface
     * /
    được bảo vệ $ _objectManager;

    / **
     * @param \ Magento \ Framework \ ObjectManagerInterface $ objectmanager
     * /
    hàm công khai __construct (\ Magento \ Framework \ ObjectManagerInterface $ objectmanager)
    {
        $ this -> _ objectManager = $ objectmanager;
    }

    thực thi chức năng công cộng (EventObserver $ observer)
    {
        $ order = $ observer-> getOrder ();
        $ quoteRep repository = $ this -> _ objectManager-> create ('Magento \ quote \ Model \ quoteRep repository');
        / ** @var \ Magento \ Trích dẫn \ Mô hình \ Trích dẫn $ quote * /
        $ quote = $ quoteRep repository-> get ($ order-> getQuoteId ());
        $ order-> setCustomField ($ quote-> getCustomField ());

        trả lại $ này;
    }
}


Ghi đè các phương pháp cốt lõi không phải là quá may mắn. Điều gì nếu một mô-đun khác ghi đè lên của bạn? magento.stackexchange.com/questions/135969/ từ
vaso123

điểm tốt, đã không nhận thức được phương pháp thay thế. Cảm ơn đã chỉ ra điều đó.
NathanielR

@ vaso123 Có vẻ như tôi cũng không biết gì về điều này bởi vì ở đây, Nathaniel đã tạo ra một plugin và một người quan sát sự kiện để chức năng cốt lõi nào được ghi đè ở đây. Bạn có thể vui lòng giải thích thêm một chút không, nó sẽ thực sự hữu ích ... Cảm ơn
Sarvagya

@Sarvagya Khi bạn sử dụng yêu cầu js, không sử dụng map *, thay vào đó hãy sử dụng mixin.
vaso123

.... -save-bộ xử lý / mặc định. } đã được một thời gian kể từ khi tôi viết bài này vì vậy Sarvagya vui lòng sửa cho tôi nếu tôi sai.
NathanielR

0

Tạo một plugin cho \Magento\Checkout\Block\Checkout\LayoutProcessor::processphương pháp này .

Tạo một mục trong di.xml trên đường dẫn này

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

Tạo lớp plugin trên Thư mục này.

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

2 => Tạo lớp plugin trên Thư mục này. 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;
}

}

Một khi điều này được thực hiện, kiểm tra trang thanh toán.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.