Magento 2: Memindahkan tombol pesanan tempat dari pembayaran ke sidebar di halaman checkout?

13

Saya ingin memindahkan tombol pesanan dari pembayaran ke sidebar di halaman checkout.

masukkan deskripsi gambar di sini

Adakah yang bisa memberi saya saran?

Sunting : Apakah ini mungkin (dengan jawaban / pendekatan yang disediakan) ?

Dari penelitian saya, setiap metode pembayaran memiliki templat .html sendiri termasuk tombol sendiri. Tombol ini tidak dimuat dari templat knockout.js. Misalnya bagian dari metode pembayaran "gratis":

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

Sementara metode pembayaran "cek / wesel" terlihat seperti ini (hanya ada perbedaan enable: (getCode() == isChecked())tapi hei, masih ada perbedaan dan tidak ada "1 tombol pesanan tempat umum yang maha kuasa":

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

Jawaban yang diberikan hanya memindahkan perjanjian yang menghasilkan sesuatu seperti ini:

masukkan deskripsi gambar di sini

magento-2.1 onepage-checkout knockoutjs place-order TUYEN TRAN THANH
sumber
Hai - apakah Anda menemukan cara yang masuk akal untuk melakukan ini pada akhirnya? Terima kasih
Tom Burman
Bagaimana Anda menemukan keberhasilan dalam validasi kotak centang syarat dan ketentuan?
Condor

Jawaban:

6

Saya memiliki persyaratan yang sama untuk mengubah tombol pesanan di bagian bawah blok ringkasan. Karena ada tombol pesanan tempat yang ditetapkan untuk setiap metode pembayaran. Saya telah membuat tombol pesanan tempat khusus di sebelah blok ringkasan pesanan. Sambil mengklik tombol saya telah memicu tombol pesanan tempat dari metode pembayaran yang dipilih.

Langkah 1:

Buat checkout_index_index.xmlfile dalam

app / kode / VendorName / PlaceOrder / view / frontend / jalur tata letak

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

Langkah 2:

Buat file summary.htmldi jalur

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

Langkah 3:

Buat file summary.jsdi jalur

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();
            }

        });
    }
);

Langkah 4:

Untuk menyembunyikan tombol pesanan tempat default, gunakan file CSS sebagai berikut

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

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

Terlampir adalah tangkapan layar!

masukkan deskripsi gambar di sini

Haritha
sumber
Halo @Haritha, saya sudah mencoba solusi Anda tetapi tidak berfungsi. Tombol tidak muncul di halaman checkout. Bisakah Anda membantu saya dalam hal ini?
Halo Mayank Zalavadia, dapatkah Anda memeriksa apakah modul khusus Anda dimuat setelah Modul Magento_Checkout di app / etc / config.php
Haritha
Saya sudah memeriksa itu dan sekarang berfungsi tetapi saya tidak dapat menambahkan tombol Place Order seperti yang Anda sebutkan di tangkapan layar. Ini hanya ditampilkan dalam ringkasan. Tolong bantu saya untuk memindahkan tombol Place Order di tempat yang sama seperti yang Anda sebutkan di tangkapan layar.
Bisakah Anda membagikan tangkapan layar Anda?
Haritha
nimb.ws/5EdgS2 periksa tangkapan layar
1

Semua jawaban ini tidak lengkap karena tidak ada file registrasi.php untuk modul register

Ini jawaban terbaik yang saya temukan.

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

Berikut adalah modul lengkap yang Anda butuhkan hanya untuk menempatkan di bawah App / kode dan untuk menjalankan setup php bin / magento: perintah upgrade

Semoga bantuan ini !!!

Драган Драган
sumber
terima kasih, ini bekerja untuk saya.
sarvesh Dineshkumar Patel
0

pada awalnya Anda perlu membuat checkout_index_index.xml di tema Anda, kemudian perlu menonaktifkan item sebelum-pesanan di 314 baris:

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

dengan:

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

Maka Anda perlu menambahkan kembali elemen itu di akhir Checkout Anda, setelah tombol pesanan tempat, seperti ini:

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

Kemudian salin di templat default Anda (html) setelah pesanan tempat:

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