Magento 2 - Cách thêm Bước thanh toán bổ sung sau phần Xem lại & thanh toán bằng nút Đặt hàng

Tôi đang cố gắng thêm một bước thanh toán bổ sung sau phần "xem xét & thanh toán". Yêu cầu là phân chia thanh toán và xem xét như một bước riêng biệt. Sau khi phương thức thanh toán được chọn, nó sẽ điều hướng đến bước "xem xét" Bước cuối cùng trong đó tất cả thông tin đặt hàng phải được hiển thị bằng nút "đặt hàng".

Cho đến nay tôi đã thêm bước tùy chỉnh sau bước thanh toán, bằng cách theo liên kết dưới đây. http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

Nhưng vấn đề ở đây là nút "Đặt hàng" được liên kết với Bước thanh toán, tôi cần di chuyển nút đặt hàng đến Bước cuối cùng.

Bất kỳ trợ giúp đánh giá cao nhất !!

magento2 onepage-checkout

— rameshpushparaj
nguồn

bạn đã quản lý để thêm một bước cuối cùng sau khi thanh toán?

— Ravi Bhalodia

@rameshpushparaj Bạn đã làm điều này?

— Arshad Hussain

Vấn đề tương tự ở đây, một số giải pháp?

— Diego Queiroz

Một thay thế cho điều này là thêm một bản tóm tắt đơn hàng cho bước thành công. Nút đặt hàng được liên kết với bước thanh toán vì sẽ là một vấn đề nếu khách hàng thanh toán và sau đó không hoàn thành đơn hàng, thì khoản thanh toán sẽ không thuộc về bất kỳ đơn hàng nào.

— Sanne

Dưới đây tôi đã thêm một số bước. vui lòng làm theo bước

1. Tạo tệp checkout_index_index.xml của bạn trong thư mục bố cục

ứng dụng / mã / VendorName / PlaceOrder / view / frontend / layout

<?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="newstep" xsi:type="array">
                                            <item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

2. Tạo một tệp newstep.html trong mẫu

ứng dụng / mã / VendorName / PlaceOrder / view / frontend / web / template

<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order newstep'" 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 -->

Tạo một tệp newstep.js trong đường dẫn

ứng dụng / mã / VendorName / PlaceOrder / view / frontend / web / js / view

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/newstep',
        '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();
            }

        });
    }
);

4.Để thêm hộp kiểm điều khoản & điều kiện trong checkout_index_index.xml:

<?xml version="1.0"?>

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="sidebar" xsi:type="array">
                                        <item name="children" xsi:type="array">

                                            <item name="newstep" xsi:type="array">
                                                <item name="children" xsi:type="array">

                                                    <item name="agreements" 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">before-place-order</item>
                                                        <item name="dataScope" xsi:type="string">checkoutAgreements</item>
                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                    </item>

                                                    <item name="agreements-validator" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
                                                    </item>

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

— Shorabh
nguồn

Tệp place_order_button.css bị thiếu trong câu trả lời này

— Vignesh Bala