Magento 2 - Comment ajouter une étape de paiement supplémentaire après la section Révision et paiements avec le bouton de commande

J'essaie d'ajouter une étape de paiement supplémentaire après la section "avis et paiements". L'obligation est de fractionner le paiement et de passer en revue en tant qu'étapes distinctes. Une fois que le mode de paiement est sélectionné, il doit accéder à l'étape finale "Revoir" où toutes les informations de commande doivent être affichées avec le bouton "Passer la commande".

Jusqu'à présent, j'ai ajouté une étape personnalisée après l'étape de paiement, en suivant le lien ci-dessous. http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

Mais le problème ici est que le bouton "Passer une commande" est lié à l'étape de paiement, je dois déplacer le bouton de commande à la dernière étape.

Toute aide la plus appréciée !!

magento2 onepage-checkout

— rameshpushparaj
source

avez-vous enfin réussi à ajouter une étape après le paiement?

— Ravi Bhalodia

@rameshpushparaj L'avez-vous fait?

— Arshad Hussain

Même problème ici, une solution?

— Diego Queiroz

Une alternative à cela consiste à ajouter un résumé de commande à l'étape de réussite. Le bouton de commande est lié à l'étape de paiement, car ce serait un problème si un client payait et ne terminait pas la commande, le paiement n'appartiendrait à aucune commande.

— Sanne

Ci-dessous, j'ai ajouté une étape. veuillez suivre l'étape

1.Créez votre fichier checkout_index_index.xml dans le dossier de disposition

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.Créez un fichier newstep.html dans le modèle

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

Créez un fichier newstep.js dans le chemin

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.Pour ajouter la case à cocher Termes et conditions dans 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
source

Le fichier place_order_button.css est manquant dans cette réponse

— Vignesh Bala

cette solution résout-elle votre problème? en fait, je dois faire exactement la même tâche

— Akash Agrawal