Magento 2：将下订单按钮从付款移动到结帐页面上的侧边栏？

13

我想将下订单按钮从付款移动到结帐页面的侧边栏中。

有人可以给我一个建议吗？

编辑：这甚至可能（提供答案/方法）吗？

根据我的研究，每种付款方式都有自己的.html模板，其中包括自己的按钮。该按钮不是从kickout.js模板加载的。例如，“免费”付款方式的一部分：

    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()}
                    ">
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

虽然“支票/汇票”付款方式如下所示（只有差异，enable: (getCode() == isChecked())但是，还是有差异，并且没有“ 1个万能的通用下单按钮”：

  <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()},
                    enable: (getCode() == isChecked())
                    "
                    disabled>
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

提供的答案只会移动达成共识的结果，例如：

— 都恩清
source

嗨-您最终找到了一种合理的方法吗？谢谢

— 汤姆·伯曼

您如何在条款和条件的复选框验证中找到成功？

— 神鹰

6

我有类似的要求，即要更改汇总块底部的下订单按钮。由于有分配给每种付款方式的下单按钮。我在订单摘要块旁边创建了一个自定义下订单按钮。在单击按钮时，我触发了所选付款方式的下订单按钮。

步骤1：

在以下位置创建checkout_index_index.xml文件

应用/代码/供应商名称/ PlaceOrder /视图/前端/布局路径

<?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">
    <head>
        <css src="VendorName_PlaceOrder::css/place_order_button.css"/>
    </head>
    <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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/summary</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">VendorName_PlaceOrder/summary</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

第2步：

summary.html在路径中创建文件

应用/代码/供应商名称/ PlaceOrder /视图/前端/网络/模板

<div class="opc-block-summary" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order Summary'" class="title"></span>
    <!-- ko foreach: elems() -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
    <button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
        <span>Place Order</span>
    </button>
</div>
<!-- /ko -->

第三步：

summary.js在路径中创建文件

应用/代码/供应商名称/ PlaceOrder /视图/前端/ web / js /视图

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/summary',
        'Magento_Checkout/js/model/step-navigator',
    ],
    function(
        $,
        ko,
        Component,
        stepNavigator
    ) {
        'use strict';

        return Component.extend({

            isVisible: function () {
                return stepNavigator.isProcessed('shipping');
            },
            initialize: function () {
                $(function() {
                    $('body').on("click", '#place-order-trigger', function () {
                        $(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
                    });
                });
                var self = this;
                this._super();
            }

        });
    }
);

第四步：

要隐藏默认的下订单按钮，请使用CSS文件，如下所示

app / code / VendorName / PlaceOrder / view / frontend / web / css / place_order_button.css

.payment-method-content .actions-toolbar{
    display: none;
}

附上截图！

— 哈里察
source

您好，@ Haritha，我已经尝试过您的解决方案，但是没有用。结帐页面上未显示按钮。你能帮我这个忙吗？

嗨Mayank Zalavadia，您可以检查是否您的自定义模块在应用程序的/ etc / config.php文件Magento_Checkout模块加载后

— Haritha

我已经检查过了，现在可以正常使用了，但是我无法添加屏幕截图中提到的“下订单”按钮。它仅显示在摘要中。您能帮我将“下单”按钮移到您在屏幕快照中提到的位置吗？

可以分享您的截图吗？

— Haritha

nimb.ws/5EdgS2检查屏幕快照

1

所有这些答案都不完整，因为缺少注册模块的registration.php文件

这是我发现的最佳答案。

https://github.com/davidroberto/magento2-place_order_sidebar

这是完整的模块，您只需要将其放在App / code下并运行php bin / magento setup：upgrade命令

希望这个帮助！！！

— ДраганДраган
source

谢谢，它为我工作。

— sarvesh Dineshkumar Patel

0

首先，您需要在主题中创建checkout_index_index.xml，然后需要在314行中禁用项目在放置前的顺序：

 <item name="before-place-order" xsi:type="array">

与：

<item name="before-place-order" xsi:type="array">
      <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

然后，您需要在下订单按钮之后的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>

然后在下订单后复制到您的默认模板（html）中：

<!-- ko foreach: getRegion('after-place-agreements') -->
<!-- ko template: getTemplate() --><!-- /ko -->

— Magento学习者
source