2020年6月17日
浏览量 54
4 min read
Magento 2中的结帐是由一系列Knockout JS组件构建的，然后使用Knockout JS模板系统进行渲染。Magneto 2在一个大的XML文件中定义了每个组件及其父/子关系，该文件可以在您自己的主题或模块中扩展或覆盖。
首先，从checkout_index_index.xml开始。
[Magento_Checkout_module_dir]/view/frontend/layout/checkout_index_index.xml在您的主题中创建此文件：
[Magento_Checkout]/layout/checkout_index_index.xml
示例1：从Shipping表单中删除字段
定义要删除的组件的路径，并将其作为子组件添加：
<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上移动组件
在这种情况下，我们将把条款和条件从默认位置(付款方式下)移动到结帐最后。
第一步：要在新位置显示项目，我们必须首先禁用默认位置的项目，遵循XML树并替换项目：
<item name="before-place-order" xsi:type="array">
...
</item>with：
<item name="before-place-order" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>第2步：重新添加到您想要的位置，这种情况下是在最后：
<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步：调用此模板：
<!-- ko foreach: getRegion('after-place-agreements') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
示例3：在Header中添加自定义块
您可能遇到这样的问题，即客户希望在Checkout header中包含更多信息，以提高转换率、提高网站安全感等。
<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：向Checkout添加自定义Footer
如果想要突出某些特定的内容，如付款方式、信息传递、其他优惠券等。
以下是如何使用CMS block或模板创建自定义footer的示例：
CMS Block
<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>