Magento 2 - Come aggiungere la sezione Passaggio dopo verifica e pagamenti con il pulsante Ordina ordine

Sto cercando di aggiungere un ulteriore passaggio di pagamento dopo la sezione "Revisione e pagamenti". Il requisito è quello di dividere il pagamento e rivederlo come passaggi separati. Una volta selezionato il metodo di pagamento successivo, dovrebbe passare al passaggio finale "revisione" in cui tutte le informazioni sull'ordine devono essere visualizzate con il pulsante "effettua ordine".

finora ho aggiunto un passaggio personalizzato dopo il passaggio di pagamento, seguendo il link seguente. http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

Ma il problema qui è che il pulsante "Effettua ordine" è associato alla fase di pagamento. Devo spostare il pulsante di ordinazione all'ultima fase.

Qualsiasi aiuto più apprezzato !!

magento2 onepage-checkout

— rameshpushparaj
fonte

sei riuscito ad aggiungere un passaggio dopo il pagamento?

— Ravi Bhalodia,

@rameshpushparaj Hai fatto questo?

— Arshad Hussain,

Lo stesso problema qui, qualche soluzione?

— Diego Queiroz,

Un'alternativa a questo è l'aggiunta di un riepilogo dell'ordine alla fase di successo. Il pulsante dell'ordine del luogo è vincolato alla fase di pagamento perché sarebbe un problema se un cliente paga e quindi non completa l'ordine, quindi il pagamento non appartiene a nessun ordine.

— Sanne,

Di seguito ho aggiunto qualche passaggio. per favore segui il passaggio

1.Crea il tuo file checkout_index_index.xml nella cartella layout

app / code / VendorName / PlaceOrder / view / frontend / disposizione

<?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. Creare un file newstep.html nel modello

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

Crea un file newstep.js nel percorso

app / code / VendorName / PlaceOrder / view / frontend / web / js / vista

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.Per aggiungere la casella di controllo Termini e condizioni in 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
fonte

Il file place_order_button.css non è presente in questa risposta

— Vignesh Bala,

questa soluzione ha risolto il tuo problema? in realtà, devo fare esattamente lo stesso compito

— Akash Agrawal il