在Magento 2中购物结算页面的运费计算页面的字段排序

本内容转载自maxiaoke.com，magento专区。

随着时间的流逝，我们越来越熟悉Magento 2结帐。我们正在努力进一步建立我们的知识。希望本文能在此过程中为您提供帮助。在本文中，我们将学习如何更改结帐页面上的输入字段顺序。

如果您曾经测试过Magento 2，那么您熟悉默认的Magento 2 Checkout和默认字段的排序顺序。

对于美国或其他一些国家/地区（州/省是重要且必填字段）的地址，此顺序是完全可以理解的。但在大多数欧洲国家，州/省字段并不重要。在这里，大多数欧盟客户期望其他一些字段，例如此处邮政编码或国家/地区具有更高的优先级。

请记住，我们希望更改默认的Magento结帐字段排序顺序以满足我们的需求。因此，我们的目标是实现这一目标：

此外，我们希望保持一致性，考虑了所有结帐步骤，因此我们将对运输和计费步骤中的输入字段重新排序。

### 运输步骤

在运输步骤中重新排序字段是一项简单的任务，我们只需要知道相关字段的排序顺序值和一些xml Magento 2特定命令。

首先，我们需要有自己的布局覆盖。如果您没有它，请创建新的xml文件，以便我们可以以正确的Magento方式操作结帐布局。文件需要位于以下路径上：checkout_index_indexcheckout_index_index

/app/design/frontend/Vendor/themeName/Magento_Checkout/layout/checkout_index_index.xml

新的布局文件需要具有结构清晰的树，以便定位正确的元素 Checkout UI 组件，如下所示：

<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">
                                            <!-- The name of the form the field belongs to -->
                                            <item name="shipping-address-fieldset" xsi:type="array">
                                                <item name="children" xsi:type="array">
 
                    <!— Start: Important part —>
 
                                                    <item name="postcode" xsi:type="array">
                                                        <item name="sortOrder" xsi:type="string">71</item>
                                                    </item>
 
                                                    <item name="country_id" xsi:type="array">
                                                        <item name="sortOrder" xsi:type="string">81</item>
                                                    </item>
                    <!— End: Important part: —>
 
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </item>
    </argument>
</arguments>
</referenceBlock>

有很多嵌套和很多子元素。但是在该项目下，我们针对两个表示输入字段的子元素。如果您仔细观察，您会注意到我们试图定位：shippingAddress

### 邮政编码字段 （postcode)

提交的国家 （country_id)

为了改变这些元素（邮政编码和国家/地区）的位置，我们需要用适合我们的想法的值更新值，以便更好地排序。默认情况下，sortOrder 值为 110，值为 115。我们已经用 71 和 81 更新了它们，在这种情况下，目标字段将很好地适应我们的新布局。sortOrderingpostcodecountry_id

清除您的Magento缓存。重新加载结帐页面，您会注意到更改。

我们还需要指出的是，XML布局更新也会影响结帐地址弹出窗口，当注册客户希望在第一个结帐步骤中使用现有地址添加新地址时，该弹出窗口将可见。

现在让我们调整计费步骤。

### 计费步骤

更改计费步骤请求不同的方法，然后是运输步骤。原因是计费步骤建立在动态 UI 组件上。目前，这里要知道的最重要的事情是，在计费步骤中，每种付款方式使用不同的计费地址表单（每种付款方式的不同组件）。因此，考虑到这一点，我们需要对结帐时使用的所有付款方式应用布局更改。但出于本文的目的，我们将只介绍支票/货币付款方式。

我们将通过扩展计费步骤的默认Magento布局处理器接口来做到这一点。这将需要一些 PHP 后端调整。但考虑到必要的工作水平，做起来不会太复杂。请通过在签出、块目录下创建新的 PHP 类文件来扩展：LayoutProcessorInterface

/app/code/Vendor/Checkout/Block/LayoutProcessor.php

对于我们的起点将使用简单的函数检查：

namespace Inchoo\Checkout\Block;
use Magento\Checkout\Block\Checkout\LayoutProcessorInterface;
 
class LayoutProcessor implements LayoutProcessorInterface
{
    public function process($jsLayout)
    {
        return $jsLayout;
    }
}

此外，我们需要为配置创建，以便Magento了解布局处理器更改。XML 文件将包含以下代码：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\Onepage">
        <arguments>
            <argument name="layoutProcessors" xsi:type="array">
                <item name="checkoutFieldsReorder" xsi:type="object">Inchoo\Checkout\Block\LayoutProcessor</item>
            </argument>
        </arguments>
    </type>
</config>

我们需要确保在计费步骤中定位正确的 UI 组件。为此，请检查Magento敲除在前端给我们的JSON对象。您可以通过 IDE 或某些 JSON 在线编辑器执行此操作。在结帐 JSON 中查找要重新定位的元素的值。在 JSON 树之后，我们将声明数组的相同路径。所以基本上，我们将这样做：sortOrder$jsLayout

namespace Inchoo\Checkout\Block;
use Magento\Checkout\Block\Checkout\LayoutProcessorInterface;
class LayoutProcessor implements LayoutProcessorInterface
{
    /**
     * Reposition postcode to be above city input, and country drop down to be above region
     *
     * @param array $jsLayout
     * @return array
     */
    public function process($jsLayout)
    {
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['postcode']['sortOrder'] = 71;
 
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['country_id']['sortOrder'] = 81;
 
        return $jsLayout;
    }
}

清除缓存并重新加载页面。您将看到更改。

如果您想更改其他方法的布局，请随时执行此操作。您只需要更换为您的付款方式即可。但请确保您在结帐时使用哪种方法。至少检查您的 JSON 对象以及您的项目下可用的表单。这样做的原因是有时可能看起来像这样：['checkmo-form']payment-listpayment-list

因此，很难猜测我们需要针对哪种形式。