Magento 2 - Cara menambahkan Langkah Checkout Ekstra setelah Bagian Tinjauan & Pembayaran dengan Tombol Place Order

Saya mencoba menambahkan langkah checkout tambahan setelah bagian "tinjau & pembayaran". Persyaratannya adalah membagi pembayaran dan meninjau sebagai langkah terpisah. Setelah metode pembayaran dipilih, metode navigasi harus menuju ke langkah Terakhir "tinjau" di mana semua informasi pesanan harus ditunjukkan dengan tombol "pesanan".

sejauh ini saya telah menambahkan langkah kustom setelah langkah pembayaran, dengan mengikuti tautan di bawah ini. http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

Tapi Masalahnya di sini adalah Tombol "Pemesanan" diikat dengan Langkah Pembayaran, saya perlu memindahkan tombol pesanan tempat ke Langkah Terakhir.

Bantuan Apa Saja Yang Paling Dihormati !!

magento2 onepage-checkout

— rameshpushparaj
sumber

apakah Anda berhasil menambahkan langkah pada akhirnya setelah pembayaran?

— Ravi Bhalodia

@rameshpushparaj Sudahkah Anda melakukan ini?

— Arshad Hussain

Masalah yang sama di sini, beberapa solusi?

— Diego Queiroz

Alternatif untuk ini adalah menambahkan ringkasan pesanan ke langkah sukses. Tombol place order terikat pada langkah pembayaran karena akan menjadi masalah jika pelanggan membayar dan kemudian tidak menyelesaikan pesanan, maka pembayaran tidak akan menjadi milik pesanan apa pun.

— Sanne

Di bawah ini saya telah menambahkan beberapa langkah. silakan ikuti langkah

1.Buat file checkout_index_index.xml Anda di folder tata letak

app / code / 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. Buat file newstep.html dalam template

app / code / 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 -->

Buat file newstep.js di jalur

app / code / 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.Untuk Tambahkan syarat & ketentuan kotak centang di 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
sumber

File place_order_button.css tidak ada dalam jawaban ini

— Vignesh Bala

Apakah solusi ini menyelesaikan masalah Anda? sebenarnya, saya harus melakukan tugas yang sama persis

— Akash Agrawal