如何在Magento 2中自定义结帐步骤

如何自定义结帐步骤的样式

定制检出步骤的样式意味着在检出页面中删除,禁用或添加组件。

** =>探索Magento 2一站式结帐模块

由于主题涉及面很广,因此我们将从Magento Official Devdocs文档中的示例开始。然后,我们将添加自己的组件(新闻通讯注册组件)

自定义结帐步骤的样式。

您应该知道如何创建基本的Magento 2模块。所有自定义文件都将在此模块内。

让我们开始。

步骤1:了解Devdocs文档中的示例。

Devdocs通过Magento Shipping模块为我们提供了示例,该模块创建了一个策略组件。
这是将组件添加到布局的代码。

<item name="shipping_policy" xsi:type="array">
  <item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
</item>

如您所见,该组件只是一个javascript文件(js)。让我们打开它vendor/magento/module-shipping/view/frontend/web/js/view/checkout/shipping/shipping-policy.js

/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'uiComponent',
    'Magento_Shipping/js/model/config'

], function (Component, config) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Shipping/checkout/shipping/shipping-policy'
        },
        config: config()
    });
});

这里不多,它只是定义了模板 vendor/magento/module-shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html

总而言之,一个组件包含一个js,并以html文件作为其模板。

第2步:添加新的通讯注册组件。

步骤2.1:创建一个js文件。

newsletter.jsMageplaza/HelloWorld/view/frontend/web/js/view目录下创建文件。
编码:

define(
    [
        'ko',
        'uiComponent'
    ],
    function (ko, Component) {
        "use strict";

        return Component.extend({
            defaults: {
                template: 'Mageplaza_HelloWorld/newsletter'
            },
            isRegisterNewsletter: true
        });
    }
);

步骤2.2:创建模板html文件。

newsletter.htmlMageplaza/HelloWorld/view/frontend/web/template目录下创建文件。
编码:

<div class="col-mp mp-12">
    <input type="checkbox" name="newsletter" data-bind="checked: isRegisterNewsletter, attr: {id: 'place-order-newsletter'}"/>
    <label data-bind="attr: {for: 'place-order-newsletter'}"><span data-bind="i18n: 'Register for newsletter'"></span></label>
</div>

步骤2.3:将我们的组件添加到结帐页面的布局中。

将以下代码添加到。Mageplaza/HelloWorld/view/frontend/layout/checkout_index_index.xml
我们在shippingMethod表单之前添加组件。

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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">
                                            <!-- Modifying an existing step-->
                                            <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="before-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="newsletter" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Mageplaza_HelloWorld/js/view/newsletter</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>

                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

清理缓存,刷新浏览器,结果将如下所示

步骤2.4:禁用新闻通讯注册组件。

这是禁用组件的代码。

<item name="config" xsi:type="array">
       <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

整个节点情况如何

<item name="newsletter" xsi:type="array">
       <item name="component" xsi:type="string">Mageplaza_HelloWorld/js/view/newsletter</item>
       <item name="config" xsi:type="array">
             <item name="componentDisabled" xsi:type="boolean">true</item>
       </item>
</item>

步骤2.5:移除组件。

删除组件,您需要为\ Magento \ Checkout \ Block \ Checkout \ LayoutProcessor :: process方法创建一个插件。并实施around method。这就是Devdocs的建议。

如建议的那样,我们实现该aroundProcess方法并添加以下代码

public function aroundProcess($subject, $proceed, $jsLayout)
{
        unset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['before-form']['children']['newsletter']);
        $returnValue = $proceed($jsLayout);
        return $returnValue;
}

这是实时渲染时禁用和删除组件之间的区别

赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

相关文章

Please Login to comment