更改Magento Checkout页面并不总是一件容易的事。如您所知，这是因为Magento 2中的默认签出是由一系列的Knockout JS组件创建的，然后使用Knockout JS模板系统进行呈现。这些组件及其父/子关系在一个大型XML文件中定义，您可以在主题或模块中扩展或覆盖这些文件。
在执行优化步骤之前，您首先需要在主题中创建checkout_index_index.xml文件。
[Magento_Checkout_module_dir]/view/frontend/layout/checkout_index_index.xml创建文件后，您现在可以开始优化结帐页面：
[Magento_Checkout]/layout/checkout_index_index.xml如何优化默认结帐页面
- 解决方案1：从运输表格中删除字段
- 解决方案2：在Checkout上重新定位“条款和条件”位置
- 解决方案3：在页眉中添加自定义块
- 解决方案4：将自定义页脚添加到结帐
解决方案1：从运输表格中删除字段
在此示例中，我要删除的字段是“传真”。要删除它，您需要定义“传真”字段的路径，然后将以下项添加为子项：
<item name="visible" xsi:type="boolean">false</item><?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>
<referenceContainer name="content">
<block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false">
<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="fax" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
</item>
</item>
</item>
...
清除缓存后，所有更改都将可见。
解决方案2：在Checkout上重新定位“条款和条件”位置
我将向您展示从“付款方式”下的默认位置到Checkout末尾的更多“条款和条件”的方法。
步骤1：从默认位置禁用项目
在将项目显示在其他位置之前，您首先需要从其原始位置禁用该项目。为此，您需要遵循XML树并替换以下项目：
<item name="before-place-order" xsi:type="array">
...
</item>
与以下之一：
<item name="before-place-order" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
第2步：重新添加到所需位置
现在，您将其重新添加到Checkout的末尾
<item name="after-place-agreements" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">after-place-agreements</item>
<item name="dataScope" xsi:type="string">before-place-order</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
</item>
<item name="children" xsi:type="array">
<item name="agreementss" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="displayArea" xsi:type="string">after-place-agreements</item>
<item name="dataScope" xsi:type="string">checkoutAgreements</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
</item>
</item>
步骤3：在需要的地方调用模板
因为在此示例中，条款和条件将移至结帐的末尾，所以该模板将称为“ place-place-agreements”
<!-- ko foreach: getRegion('after-place-agreements') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
解决方案3：在页眉中添加自定义块
为了提高转换率和网站的安全性，您可能需要在Checkout标头中向客户提供更多信息。以下是帮助您轻松完成此操作的方法：
<referenceBlock name="checkout.header.wrapper">
<container name="additional-custom-block-wrapper" label="additional-custom-block-wrapper" htmlTag="div" htmlClass="additional-custom-block-wrapper">
<block class="Magento\Cms\Block\Block" name="additional-custom-block">
<arguments>
<argument name="block_id" xsi:type="string">additional-custom-block</argument>
</arguments>
</block>
</container>
</referenceBlock>
解决方案4：将自定义页脚添加到结帐
如果您想突出显示某些特定内容，例如付款方式，交货信息或其他优惠券，则可以在结帐时添加自定义页脚。以下是可以支持您使用CMS块创建自定义页脚的示例：
<referenceContainer name="page.bottom.container">
<container name="additional-custom-footer-wrapper" label="additional-custom-footer-wrapper" htmlTag="div" htmlClass="additional-custom-footer-wrapper">
<block class="Magento\Cms\Block\Block" name="additional-custom-footer">
<arguments>
<argument name="block_id" xsi:type="string">additional-custom-footer</argument>
</arguments>
</block>
</container>
</referenceContainer>
这是如何使用模板文件创建自定义页脚：
[Magento_Theme]/templates/checkout-footer.phtml
<referenceContainer name="page.bottom.container">
<container name="additional-custom-footer-wrapper" label="additional-custom-footer-wrapper" htmlTag="div" htmlClass="additional-custom-footer-wrapper">
<block class="Magento\Framework\View\Element\Template" name="additional-custom-footer" template="Magento_Theme::checkout-footer.phtml" />
</container>
</referenceContainer>
结论
最后，我刚刚向您展示了几种解决方案，可帮助您优化自己的Checkout Page。尽管这些不是完整的解决方案，但它们仍是很好的改进，可以修复默认功能的弱点