Magento 2 结帐表单 – 如何在类中包装多个元素

如何在div中包含两个checkout表单元素?
例如,假设我想将这些国家/地区的邮政编码/邮政编码字段包装在一个div中
example-class,我该怎么做?

为了实现您的目标并将结帐送货地址字段包装到自定义元素中,应添加以下元素:

  1. 使用新UI组件定义自定义checkout_index_index.xml文件
  2. 带有自定义元素的新HTML模板
  3. 布局处理器插件
  4. 新插件的di.xml声明

Custom_Checkout\view\frontend\layout\checkout_index_index.xml 文件:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
    <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="custom-field-group" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="sortOrder" xsi:type="string">0</item>
                                                                <item name="template" xsi:type="string">Custom_Checkout/checkout/field-group</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="field-group" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">field-group</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

在布局中,我们应该添加新的自定义字段组 UI组件。该组件具有自己的模板Custom_Checkout \ view \ web \ template \ checkout \ field-group.html,其中呈现所有字段。此外,custom-field-group组件对于sortOrder节点具有“0”值。它允许在将所有字段声明为shipping-address-fieldset组件的一部分之前呈现组件。

此外,还有一个具有自己的displayArea设置的字段组 UI组件。

Custom_Checkout\view\web\template\checkout\field-group.html 模板文件:

<div class="custom">
<!-- ko foreach: getRegion('field-group') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>

该模板允许将所有组件添加到字段组区域(也称为displayArea)中。

Custom\Checkout\Plugin\AddressLayoutProcessor 类文件:

namespace Custom\Checkout\Plugin;

use Magento\Checkout\Block\Checkout\LayoutProcessor;

/**
 * Class AddressLayoutProcessor
 */
class AddressLayoutProcessor
{
    /**
     * @param LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(LayoutProcessor $subject, array $jsLayout)
    {
        $fieldGroup = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']
            ['children']['custom-field-group']['children']['field-group']['children'];

        $shippingAddressFields = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

        $fieldGroup['country_id'] = $shippingAddressFields['country_id'];
        $fieldGroup['postcode'] = $shippingAddressFields['postcode'];

        $shippingAddressFields['country_id']['visible'] = false;
        $shippingAddressFields['postcode']['visible'] = false;

        return $jsLayout;
    }
}

该类负责将country_idpostcode字段配置复制到新创建的自定义字段组组件中。

分配给自定义字段组的字段应标记为隐藏(visible = true),以避免在呈现期间出现重复。由于其他依赖关系(例如region.js文件)和送货地址处理机制,componentDisabled不应用于禁用country_id和postcode。

Custom\Checkout\etc\frontend\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\Block\Checkout\LayoutProcessor">
        <plugin name="customFieldGroupPlugin" type="Custom\Checkout\Plugin\AddressLayoutProcessor"/>
    </type>
</config>

用于字段的插件方法会更改,因为应使用完整配置复制字段。如果在自定义模块中声明布局处理器,插件将捕获更改。

因此,country_idpostcode字段都在发货地址表单中呈现并包装到下面的自定义元素中(我为自定义 CSS类添加了几个样式以使其在表单中脱颖而出)

如果您还想对帐单地址表单进行修改,则应更新Custom \ Checkout \ Plugin \ AddressLayoutProcessor类。您所要做的就是使用特定付款方式的帐单邮寄地址执行相同的操作,就像我们的送货地址字段一样。

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论