magento2结算页面修改-其它字段修改
7天成为Magento系统架构师,现在开始学习Magento全栈开发!
《Magento2.X企业级开发实战》
本主题介绍如何添加影响结帐页面上其他字段的自定义字段。
让我们考虑一种情况,需要添加一个复选框,其状态(选中或清除)会更改其他字段的状态:选中复选框后,送货地址字段会预先填充某个地址。
要实现这样的复选框,请执行以下步骤:
- 为
<Magento_Checkout_module_dir>/Block/Checkout/LayoutProcessor.php
类的 process 方法创建一个插件。 - 在模块的
di.xml
中声明插件。 - 使用自定义逻辑为复选框创建一个 JS 组件。
第一步:为LayoutProcessor的process方法创建一个插件
在自定义模块目录中,创建以下新文件:<your_module_dir>/Block/Checkout/SomeProcessor.php
。 在此文件中,添加以下代码示例。 这是一个添加复选框的插件,使街道标签可跟踪,并为复选框分配依赖项。
namespace Magento\Checkout\Block\Checkout;
class SomeProcessor
{
/**
* Checkout LayoutProcessor after process plugin.
*
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $processor
* @param array $jsLayout
* @return array
*/
public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $processor, $jsLayout)
{
$shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];
$billingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']
['children']['payment']['children']['payments-list']['children'];
//Checks if shipping step available.
if (isset($shippingConfiguration)) {
$shippingConfiguration = $this->processAddress(
$shippingConfiguration,
'shippingAddress',
[
'checkoutProvider',
'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.street',
'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.city',
'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.country_id'
]
);
}
//Checks if billing step available.
if (isset($billingConfiguration)) {
//Iterate over billing forms.
foreach($billingConfiguration as $key => &$billingForm) {
//Exclude not billing forms
if (!strpos($key, '-form')) {
continue;
}
$billingForm['children']['form-fields']['children'] = $this->processAddress(
$billingForm['children']['form-fields']['children'],
$billingForm['dataScopePrefix'],
[
'checkoutProvider',
'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.street',
'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.city',
'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.country_id'
]
);
}
}
return $jsLayout;
}
/**
* Process provided address to contains checkbox and have trackable address fields.
*
* @param $addressFieldset - Address fieldset config.
* @param $dataScope - data scope
* @param $deps - list of dependencies
* @return array
*/
private function processAddress($addressFieldset, $dataScope, $deps)
{
//Creates checkbox.
$addressFieldset['custom_checkbox'] = [
'component' => 'Magento_Checkout/js/single-checkbox',
'config' => [
'customScope' => $dataScope,
'template' => 'ui/form/field',
'prefer' => 'checkbox'
],
'dataScope' => $dataScope . '.custom_checkbox',
'deps' => $deps,
'label' => __('Army Address'),
'provider' => 'checkoutProvider',
'visible' => true,
'initialValue' => false,
'sortOrder' => 10,
'valueMap' => [
'true' => true,
'false' => false
]
];
//Makes each address field label trackable.
if (isset($addressFieldset['street']['children'])) {
foreach($addressFieldset['street']['children'] as $key => $street) {
$street['tracks']['label'] = true;
//Remove .additional class. Can be removed, but style fix provided instead.
$street['additionalClasses'] = '';
$addressFieldset['street']['children'][$key] = $street;
}
}
return $addressFieldset;
}
}
第二步:在di.xml中声明插件
在 <your_module_dir>/etc/frontend/di.xml
中,声明在上一步中创建的插件。 插件名称是任意的,在我们的例子中它是 ProcessAddressConfiguration:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
<plugin name="ProcessAddressConfiguration" type="Magento\Checkout\Block\Checkout\SomeProcessor"/>
</type>
</config>
第三步:为复选框创建一个JS组件
在自定义模块目录中,创建以下新文件:<your_module_dir>/view/frontend/web/js/single-checkbox.js
。 在此文件中,添加以下代码。 这是一个扩展 Magento_Ui/js/form/element/single-checkbox.js
的 JS 组件。 onCheckedChanged
方法调用更新街道标签、更改城市和国家/地区值以及禁用这些字段的方法:
define([
'Magento_Ui/js/form/element/single-checkbox',
'mage/translate'
], function (AbstractField, $t) {
'use strict';
return AbstractField.extend({
defaults: {
streetLabels: [$t('Company / Section / Unit'), $t('Post Sector Type'), $t('Post Sector')],
modules: {
street: '${ $.parentName }.street',
city: '${ $.parentName }.city',
country: '${ $.parentName }.country_id'
}
},
updateStreetLabels: function () {
if (this.value()) {
this.street().elems.each(function (street, key) {
this.street().elems()[key].set('label', this.streetLabels[key]);
}.bind(this));
} else {
this.street().elems.each(function (street, key) {
this.street().elems()[key].set('label', '');
}.bind(this));
}
},
updateCity: function () {
if (this.value()) {
this.city().value('Kyiv');
this.city().disabled(true);
} else {
this.city().value('');
this.city().disabled(false);
}
},
updateCountry: function () {
if (this.value()) {
this.country().value('UA');
this.country().disabled(true);
} else {
this.country().value('');
this.country().disabled(false);
}
},
onCheckedChanged: function () {
this._super();
this.updateStreetLabels();
this.updateCity();
this.updateCountry();
}
});
});
最后,清除缓存
php bin/magento s:up
chmod -R 777 ./
如无特殊说明或标注,任何个人或组织,复制、转载、采集本站内容请注明:
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。