Magento 2 - Hinzufügen eines zusätzlichen Checkout-Schritts nach dem Überprüfungs- und Zahlungsbereich mit der Schaltfläche "Bestellung aufgeben"

Ich versuche, nach dem Abschnitt "Überprüfung und Zahlungen" einen zusätzlichen Checkout-Schritt hinzuzufügen. Die Anforderung besteht darin, die Zahlung aufzuteilen und als separate Schritte zu überprüfen. Sobald die Zahlungsmethode ausgewählt ist, sollte sie zum letzten Schritt "Überprüfen" navigieren, in dem alle Bestellinformationen mit der Schaltfläche "Bestellung aufgeben" angezeigt werden müssen.

Bisher habe ich einen benutzerdefinierten Schritt nach dem anderen hinzugefügt, indem ich dem unten stehenden Link folge. http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

Das Problem hierbei ist jedoch, dass die Schaltfläche "Bestellung aufgeben" mit dem Zahlungsschritt verknüpft ist. Ich muss die Schaltfläche "Bestellung aufgeben" auf den letzten Schritt verschieben.

Jede Hilfe am meisten geschätzt !!

magento2 onepage-checkout

— rameshpushparaj
quelle

Haben Sie es geschafft, nach der Zahlung endlich einen Schritt hinzuzufügen?

— Ravi Bhalodia

@rameshpushparaj Hast du das getan?

— Arshad Hussain

Gleiches Problem hier, eine Lösung?

— Diego Queiroz

Eine Alternative dazu ist das Hinzufügen einer Auftragsübersicht zum Erfolgsschritt. Die Schaltfläche "Bestellung aufgeben" ist an den Zahlungsschritt gebunden, da es ein Problem wäre, wenn ein Kunde bezahlt und die Bestellung dann nicht abschließt. Dann würde die Zahlung keiner Bestellung angehören.

— Sanne

Unten habe ich einen Schritt hinzugefügt. Bitte folgen Sie Schritt

1.Erstellen Sie Ihre Datei checkout_index_index.xml im Layoutordner

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.Erstellen Sie eine Datei newstep.html in der Vorlage

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

Erstellen Sie eine Datei newstep.js im Pfad

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.Für das Kontrollkästchen Allgemeine Geschäftsbedingungen in checkout_index_index.xml hinzufügen:

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

Die Datei place_order_button.css fehlt in dieser Antwort

— Vignesh Bala