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

12

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

Jawaban:

0

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 -->
  1. 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