我会尽力回答您的问题。
没有。这不是将自定义属性添加到收货地址表单的正确方法。您无需进行编辑new-customer-address.js
。实际上,此JS文件列出了所有预定义的地址属性并匹配了相应的后端接口,\Magento\Quote\Api\Data\AddressInterface
但是Magento提供了将任何自定义属性传递给后端的功能,而无需修改后端/前端组件。
提到的JS组件具有customAttributes
属性。如果您的自定义属性$dataScopePrefix
为“ shippindAddress.custom_attributes
”,则会自动处理。
如果我正确理解了您的问题,则您的数据不是客户地址的一部分,但您也需要将其发送到后端。这个问题的答案是:
这要看情况。例如,您可以选择以下方法:将自定义表单添加到包括所有额外字段的结帐页面 (like comment, invoice request etc)
,添加将基于某些事件处理该表单的JS逻辑,并提供将接收来自前端的数据并存储的自定义服务它在某个地方以备将来使用。
与结帐有关的所有官方文档都位于http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_overview.html。术语“静态”是指所有字段都是已知/预定义的表单(例如:表单将始终具有2个带有预定义标签的文本字段),并且不能根据后端中的某些设置进行更改。
可以使用声明这种形式layout XML configuration
。另一方面,术语“动态”是指其字段集可以更改的表单(例如:根据配置设置,结帐表单可以具有更多/更少的字段)。
在这种情况下,声明这种形式的唯一方法是使用LayoutProcessor
插件。
:) Magento尝试涵盖尽可能多的用例,这些用例对Magento使用/定制期间的商家而言可能意义重大。有时,这会导致某些简单用例变得更加复杂的情况。
希望这可以帮助。
================================================== =======================
好吧 ...让我们写一些代码;)
- 在LayoutProcessor中插入其他字段的PHP代码
========
/**
* @author aakimov
*/
$customAttributeCode = 'custom_field';
$customField = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
// customScope is used to group elements within a single form (e.g. they can be validated separately)
'customScope' => 'shippingAddress.custom_attributes',
'customEntry' => null,
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'tooltip' => [
'description' => 'Yes, this works. I tested it. Sacrificed my lunch break but verified this approach.',
],
],
'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode,
'label' => 'Custom Attribute',
'provider' => 'checkoutProvider',
'sortOrder' => 0,
'validation' => [
'required-entry' => true
],
'options' => [],
'filterBy' => null,
'customEntry' => null,
'visible' => true,
];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;
return $jsLayout;
如前所述,这会将您的字段添加到customAttributes
JS地址对象的属性中。此属性旨在包含自定义的EAV地址属性,并且与\Magento\Quote\Model\Quote\Address\CustomAttributeListInterface::getAttributes
方法有关。
上面的代码将自动处理前端的本地存储持久性。您可以通过从本地存储让您的字段值checkoutData.getShippingAddressFromData()
(如果checkoutData
是Magento_Checkout/js/checkout-data
)。
- 添加mixin来更改“ Magento_Checkout / js / action / set-shipping-information”的行为(此组件负责在运输和结算结帐步骤之间提交数据)
========
2.1。创造your_module_name/view/frontend/requirejs-config.js
/**
* @author aakimov
*/
var config = {
config: {
mixins: {
'Magento_Checkout/js/action/set-shipping-information': {
'<your_module_name>/js/action/set-shipping-information-mixin': true
}
}
}
};
2.2。创建your_module_name / view / frontend / web / js / action / set-shipping-information-mixin.js
/**
* @author aakimov
*/
/*jshint browser:true jquery:true*/
/*global alert*/
define([
'jquery',
'mage/utils/wrapper',
'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
'use strict';
return function (setShippingInformationAction) {
return wrapper.wrap(setShippingInformationAction, function (originalAction) {
var shippingAddress = quote.shippingAddress();
if (shippingAddress['extension_attributes'] === undefined) {
shippingAddress['extension_attributes'] = {};
}
// you can extract value of extension attribute from any place (in this example I use customAttributes approach)
shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];
// pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
return originalAction();
});
};
});
- 创建your_module_name / etc / extension_attributes.xml
========
<?xml version="1.0"?>
<!--
/**
* @author aakimov
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
<extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
<attribute code="custom_field" type="string" />
</extension_attributes>
</config>
这会将扩展属性添加到后端的地址模型。扩展属性是Magento提供的扩展点之一。要在后端访问数据,您可以使用:
// Magento will generate interface that includes your custom attribute
$value = $address->getExtensionAttributes()->getCustomField();
希望这会有所帮助,并将被添加到官方文档中。