Magento 2: ย้ายปุ่มคำสั่งซื้อจากการชำระเงินไปยังแถบด้านข้างในหน้าเช็คเอาต์?

ฉันต้องการย้ายปุ่มคำสั่งซื้อจากการชำระเงินไปยังแถบด้านข้างในหน้าเช็คเอาต์

ทุกคนสามารถให้คำแนะนำแก่ฉันได้บ้าง

แก้ไข : เป็นไปได้หรือไม่(พร้อมคำตอบ / วิธีการที่ให้ไว้) ?

จากการวิจัยของฉันทุกวิธีการชำระเงินมีเทมเพลต. html ของตัวเองรวมถึงปุ่มของตัวเอง ปุ่มนี้ไม่ได้โหลดจากเทมเพลต knockout.js เช่นวิธีการชำระเงิน "ฟรี":

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

ในขณะที่วิธีการชำระเงิน "เช็ค / ธนาณัติ" มีลักษณะเช่นนี้ (ความแตกต่างเพียงอย่างเดียวคือenable: (getCode() == isChecked())เฮ้ แต่ยังคงมีความแตกต่างและไม่มี "1 ปุ่มสั่งซื้อสถานที่ทั่วไปที่ยิ่งใหญ่":

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

คำตอบที่มีให้จะย้ายความหงุดหงิดซึ่งทำให้บางสิ่งเช่นนี้:

— ถานแดนทราน
แหล่งที่มา

สวัสดี - คุณได้พบวิธีที่เหมาะสมในการทำสิ่งนี้ในที่สุด? ขอบคุณ

— Tom Burman

คุณประสบความสำเร็จได้อย่างไรในการตรวจสอบความถูกต้องของข้อกำหนดและเงื่อนไข?

— แร้ง

คำตอบ:

ฉันมีข้อกำหนดที่คล้ายกันเพื่อเปลี่ยนปุ่มคำสั่งซื้อสถานที่ที่ด้านล่างของบล็อกสรุป เนื่องจากมีปุ่มสถานที่ที่กำหนดให้กับวิธีการชำระเงินแต่ละวิธี ฉันได้สร้างปุ่มคำสั่งซื้อที่กำหนดเองถัดจากบล็อกสรุปการสั่งซื้อ ในขณะที่คลิกที่ปุ่มฉันได้เรียกปุ่มสั่งซื้อของวิธีการชำระเงินที่เลือก

ขั้นตอนที่ 1:

สร้างcheckout_index_index.xmlไฟล์ใน

แอป / รหัส / ชื่อผู้ขาย / สถานที่สั่งซื้อ / ดู / ส่วนหน้า / เส้นทางเค้าโครง

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

ขั้นตอนที่ 2:

สร้างไฟล์summary.htmlในเส้นทาง

app / รหัส / VendorName / PlaceOrder / view / ส่วนหน้า / เว็บ / แม่แบบ

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

ขั้นตอนที่ 3:

สร้างไฟล์summary.jsในเส้นทาง

app / รหัส / VendorName / PlaceOrder / view / ส่วนหน้า / เว็บ / js / มุมมอง

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

        });
    }
);

ขั้นตอนที่ 4:

ในการซ่อนปุ่มลำดับสถานที่เริ่มต้นให้ใช้ไฟล์ CSS ดังนี้

app / รหัส / VendorName / PlaceOrder / view / ส่วนหน้า / เว็บ css / / place_order_button.css

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

ภาพหน้าจอที่แนบมา!

— Haritha
แหล่งที่มา

สวัสดี @Haritha ฉันได้ลองวิธีการแก้ปัญหาของคุณ แต่มันไม่ทำงาน ปุ่มไม่แสดงในหน้าชำระเงิน คุณช่วยฉันเรื่องนี้ได้ไหม

สวัสดี Mayank Zalavadia คุณสามารถตรวจสอบว่าโมดูลที่กำหนดเองของคุณถูกโหลดหลังจากโมดูล Magento_Checkout ในแอป / etc / config.php หรือไม่

— Haritha

ฉันตรวจสอบแล้วและตอนนี้ก็ใช้งานได้ แต่ฉันไม่สามารถเพิ่มปุ่มคำสั่งซื้อตามที่คุณพูดถึงในภาพหน้าจอของคุณ มันจะแสดงเฉพาะในการสรุป ได้โปรดช่วยฉันย้ายปุ่มคำสั่งซื้อในสถานที่เดียวกันกับที่คุณพูดถึงในภาพหน้าจอของคุณ

คุณสามารถแชร์ภาพหน้าจอของคุณได้หรือไม่

— Haritha

nimb.ws/5EdgS2ตรวจสอบภาพหน้าจอ

คำตอบทั้งหมดนี้ไม่สมบูรณ์เพราะไฟล์ register.php หายไปสำหรับโมดูลการลงทะเบียน

นี่คือคำตอบที่ดีที่สุดที่ฉันพบ

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

นี่คือโมดูลที่สมบูรณ์ที่คุณต้องการเพียงวางไว้ภายใต้แอพ / รหัสและเพื่อเรียกใช้การติดตั้ง php bin / magento: คำสั่งอัพเกรด

หวังว่าความช่วยเหลือนี้ !!!

— ДраганДраган
แหล่งที่มา

ขอบคุณมันใช้งานได้สำหรับฉัน

— sarvesh Dineshkumar Patel

ในตอนแรกคุณต้องสร้าง checkout_index_index.xml ในชุดรูปแบบของคุณจากนั้นต้องปิดใช้งานรายการก่อนสั่งซื้อในบรรทัด 314:

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

ด้วย:

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

จากนั้นคุณต้องเพิ่มองค์ประกอบนั้นอีกครั้งที่ส่วนท้ายของ Checkout ของคุณหลังจากกดปุ่มสั่งซื้อเช่นนี้:

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

จากนั้นคัดลอกเทมเพลตเริ่มต้น (html) หลังจากสั่งซื้อ:

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

— วีโอไอพีเรียน
แหล่งที่มา