Magento 2结帐-在送货地址和送货方式之间添加自定义字段


21

我正在尝试在送货地址送货方式部分之间添加自定义字段。而且我想这个字段的值存储在这两个quotesales_order表大势所趋。这类似于添加“订单注释”字段,但是此字段应出现在“收货地址”部分之后和“送货方式”部分之前。

我浏览了Magento开发人员指南,了解如何在结帐中添加自定义字段自定义表单,并在一定程度上实现了解决方案。

到目前为止,我所做的是:

  1. 更新了checkout_index_index.xml布局,uiComponent在“ shippingAddress”项下添加了一个新的(容器)。
  2. 在容器内添加了我需要的元素(字段)。
  3. 在我的自定义模块中覆盖/js/view/shipping.jsshipping.phtml
  4. shipping.phtml在结帐送货地址和送货方式之间调用上述制成的容器(类似于添加新的静态表格)

现在,我想要的字段正被呈现在一页结帐上,正是我想要的位置。但是我遇到了以下问题。

  1. 如何访问我在上面添加的自定义字段的值?我正在尝试将值保存到shippingAddress扩展属性。我在setShippingInformationAction里面添加了一个mixin ,尝试执行以下操作

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

但是上述代码实际上失败了,因为该元素不在中shipping-address-fieldset。我也许能够通过window元素获取值。但是有没有办法通过Magento来访问它呢?

  1. 有没有一种方法可以将该元素的值保存在本地缓存存储(Magento_Checkout/js/checkout-data)中,这样即使在刷新页面后该值也将保持不变?


请参考以下链接我希望它会帮助你magento.stackexchange.com/questions/187847/...
普拉迪普库马尔

Answers:


1

根据您的问题,我假设您已经设置了扩展属性。我进行了类似的修改,希望我的回答会有所帮助。

在您的自定义模块中,创建一个requirejs-config文件以扩展默认的运送处理器/默认

命名空间/CustomModule/view/frontend/requirejs-config.js
var config = {
    “地图”:{
        “ *”:{
            'Magento_Checkout / js / model / shipping-save-processor / default':'Namespace_CustomModule / js / model / shipping-save-processor / default'
        }
    }
};

将扩展属性添加到有效负载。

/ *全局定义,警报* /
限定(
    [
        'jquery',
        'ko',
        'Magento_Checkout / js / model / quote',
        'Magento_Checkout / js / model / resource-url-manager',
        “法师/存储”,
        'Magento_Checkout / js / model / payment-service',
        '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'
    ],
    功能(
        $,
        ,
        引用,
        resourceUrlManager,
        存储,
        PaymentService,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction
    ){
        “使用严格”;

        返回{
            saveShippingInformation:function(){
                var有效负载;

                如果(!quote.billingAddress()){
                    selectBillingAddressAction(quote.shippingAddress());
                }
                //将扩展属性添加到您的收货地址
                有效载荷= {
                    地址信息: {
                        送货地址: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();

                返回storage.post(
                    resourceUrlManager.getUrlForSetShippingInformation(quote),
                    JSON.stringify(有效载荷)
                )。完成(
                    功能(响应){
                        quote.setTotals(response.totals);
                        paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                        fullScreenLoader.stopLoader();
                    }
                )。失败(
                    功能(响应){
                        errorProcessor.process(response);
                        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;
    公共功能__construct(
        \ Magento \ Quote \ Model \ QuoteRepository $ quoteRepository
    ){
        $ this-> quoteRepository = $ quoteRepository;
    }
    / **
     * @param \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject
     * @参数$ cartId
     * @param \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
     * /
    公用函数beforeSaveAddressInformation(
        \ Magento \ Checkout \ Model \ ShippingInformationManagement $ subject,
        $ cartId,
        \ Magento \ Checkout \ Api \ Data \ ShippingInformationInterface $ addressInformation
    ){
        $ 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;

    / **
     * @参数\ Magento \ Framework \ ObjectManagerInterface $ objectmanager
     * /
    公共函数__construct(\ Magento \ Framework \ ObjectManagerInterface $ objectmanager)
    {
        $ this-> _ objectManager = $ objectmanager;
    }

    公共函数execute(EventObserver $ observer)
    {
        $ order = $ observer-> 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似乎我也不知道什么,因为Nathaniel在这里创建了一个插件和一个事件观察器,因此此处覆盖了哪个核心功能。您
能再

@Sarvagya当您使用require js时,请勿使用map *,而应使用mixin。
vaso123 '18

@ vaso123我相信他指的是Magento_Checkout / js / model / shipping-save-processor / default':'Namespace_CustomModule / js / model / shipping-save-processor / default'据我所知,它取代了Magento_Checkout / js / model / shipping -save-processor /默认。}自从我写这篇文章已有一段时间,所以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;
}

}

完成后,检查结帐页面。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.