Magento 2: Bestellschaltfläche von Zahlung zu Seitenleiste auf der Checkout-Seite verschieben?

Ich möchte die Schaltfläche "Bestellung aufgeben" von der Zahlung in die Seitenleiste auf der Checkout-Seite verschieben.

Kann mir jemand einen Vorschlag machen?

Bearbeiten : Ist das überhaupt möglich (mit der Antwort / dem Ansatz) ?

Nach meinen Recherchen hat jede Zahlungsmethode eine eigene HTML-Vorlage mit einer eigenen Schaltfläche. Diese Schaltfläche wird nicht aus einer knockout.js-Vorlage geladen. ZB ein Teil der "kostenlosen" Zahlungsmethode:

    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()}
                    ">
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

Während die Zahlungsmethode "Scheck / Zahlungsanweisung" so aussieht (nur Unterschiede sind, enable: (getCode() == isChecked())aber hey, es gibt immer noch Unterschiede und es gibt keinen "1 allmächtigen allgemeinen Bestellknopf":

  <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()},
                    enable: (getCode() == isChecked())
                    "
                    disabled>
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

Die Antwort verschiebt nur die Vereinbarungen, die zu so etwas führen:

magento-2.1 onepage-checkout knockoutjs place-order TUYEN TRAN THANH
quelle

Hallo - hast du am Ende einen vernünftigen Weg gefunden, dies zu tun? Vielen Dank

Tom Burman

Wie haben Sie die Checkbox-Validierung der Allgemeinen Geschäftsbedingungen erfolgreich durchgeführt?

Condor

Antworten:

Ich hatte die ähnliche Anforderung, die Schaltfläche zum Bestellen am unteren Rand des Zusammenfassungsblocks zu ändern. Da jeder Zahlungsmethode eine Bestellschaltfläche zugeordnet ist. Ich habe eine benutzerdefinierte Bestellschaltfläche neben dem Bestellübersichtsblock erstellt. Beim Klicken auf die Schaltfläche habe ich die Schaltfläche Bestellung aufgeben der ausgewählten Zahlungsmethode ausgelöst.

Schritt 1:

Erstellen Sie eine checkout_index_index.xmlDatei in

app / code / VendorName / PlaceOrder / view / frontend / layout path

<?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="summary" xsi:type="array">
                                            <item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/summary</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">VendorName_PlaceOrder/summary</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Schritt 2:

Erstellen Sie eine Datei summary.htmlim Pfad

app / code / VendorName / PlaceOrder / view / frontend / web / template

<div class="opc-block-summary" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order Summary'" 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 -->

Schritt 3:

Erstellen Sie eine Datei summary.jsim Pfad

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

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/summary',
        '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();
            }

        });
    }
);

Schritt 4:

Verwenden Sie die folgende CSS-Datei, um die Standardschaltfläche für die Ortsreihenfolge auszublenden

app / code / VendorName / PlaceOrder / view / frontend / web / css / place_order_button.css

.payment-method-content .actions-toolbar{
    display: none;
}

Anbei der Screenshot!

Haritha
quelle

Hallo @ Haritha, ich habe deine Lösung ausprobiert, aber sie funktioniert nicht. Die Schaltfläche wird auf der Checkout-Seite nicht angezeigt. Können Sie mir bitte dabei helfen?

Hallo Mayank Zalavadia, können Sie überprüfen, ob Ihr benutzerdefiniertes Modul nach dem Magento_Checkout-Modul in app / etc / config.php

Haritha

Ich überprüfe das bereits und jetzt funktioniert es, aber ich kann die Schaltfläche "Bestellung aufgeben" nicht hinzufügen, wie Sie in Ihrem Screenshot erwähnt haben. Es wird nur in der Zusammenfassung angezeigt. Können Sie mir bitte helfen, die Schaltfläche "Bestellung aufgeben" an die Stelle zu verschieben, die Sie in Ihrem Screenshot erwähnt haben?

Können Sie Ihren Screenshot teilen?

Haritha

nimb.ws/5EdgS2 überprüfen Screenshot

Alle diese Antworten sind nicht vollständig, da die Datei register.php für das Registrierungsmodul fehlt

Dies ist die beste Antwort, die ich gefunden habe.

https://github.com/davidroberto/magento2-place_order_sidebar

Hier ist das komplette Modul, das Sie nur unter App / Code platzieren und den Befehl php bin / magento setup: upgrade ausführen müssen

Ich hoffe das hilft!!!

Драган Драган
quelle

Danke, es funktioniert bei mir.

Sarvesh Dineshkumar Patel

Zuerst müssen Sie checkout_index_index.xml in Ihrem Design erstellen und dann das Element vor der Bestellung in der Zeile 314 deaktivieren:

 <item name="before-place-order" xsi:type="array">

mit:

<item name="before-place-order" xsi:type="array">
      <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

Dann müssen Sie dieses Element am Ende Ihrer Kaufabwicklung nach der Schaltfläche zum Bestellen erneut wie folgt hinzufügen:

<item name="after-place-agreements" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">after-place-agreements</item>
<item name="dataScope" xsi:type="string">before-place-order</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="config" xsi:type="array">
    <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
</item>
<item name="children" xsi:type="array">
    <item name="agreementss" 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">after-place-agreements</item>
        <item name="dataScope" xsi:type="string">checkoutAgreements</item>
        <item name="provider" xsi:type="string">checkoutProvider</item>
    </item>
</item>

Kopieren Sie dann nach der Bestellung Ihre Standardvorlage (HTML):

<!-- ko foreach: getRegion('after-place-agreements') -->
<!-- ko template: getTemplate() --><!-- /ko -->

Magento-Lernender
quelle