Magento 2: चेकआउट पृष्ठ पर भुगतान से साइडबार तक जगह ऑर्डर बटन को स्थानांतरित करें?

मैं चेकआउट पेज पर भुगतान से साइडबार तक जगह ऑर्डर बटन को स्थानांतरित करना चाहता हूं।

कोई मुझे एक सुझाव दे सकता है?

संपादित करें : क्या यह संभव है (प्रदान किए गए उत्तर / दृष्टिकोण के साथ) ?

मेरे शोध से प्रत्येक भुगतान विधि का अपना .html टेम्पलेट है जिसमें स्वयं का बटन भी शामिल है। यह बटन नॉकआउट.जेएस टेम्पलेट से लोड नहीं किया गया है। उदाहरण के लिए "नि: शुल्क" भुगतान विधि का एक हिस्सा:

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

उपलब्ध कराया गया उत्तर केवल उन वृत्तियों को आगे बढ़ाता है जिनके परिणामस्वरूप कुछ इस प्रकार होता है:

— त्येन त्रान तेन
स्रोत

हाय - क्या आपको अंत में ऐसा करने का एक उचित तरीका मिला? धन्यवाद

— टॉम बर्मन

आपने नियम और शर्तों के चेकबॉक्स सत्यापन में सफलता कैसे पाई?

— कोंडोर

जवाबों:

सारांश ब्लॉक के नीचे स्थान ऑर्डर बटन को बदलने के लिए मुझे समान आवश्यकता थी। चूंकि प्रत्येक भुगतान विधि को असाइन किया गया जगह ऑर्डर बटन है। मैंने सारांश ब्लॉक ऑर्डर के बगल में एक कस्टम प्लेस ऑर्डर बटन बनाया है। बटन पर क्लिक करते समय मैंने चयनित भुगतान पद्धति के स्थान ऑर्डर बटन को चालू कर दिया है।

चरण 1:

में एक checkout_index_index.xmlफ़ाइल बनाएँ

एप्लिकेशन / कोड / VendorName / PlaceOrder / दृश्य / दृश्य / लेआउट पथ

<?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पथ में एक फ़ाइल बनाएँ

एप्लिकेशन / कोड / VendorName / PlaceOrder / देखें / दृश्यपटल / वेब / टेम्पलेट

<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पथ में एक फ़ाइल बनाएँ

एप्लिकेशन / कोड / VendorName / PlaceOrder / देखें / दृश्यपटल / वेब / 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:

डिफ़ॉल्ट स्थान ऑर्डर बटन को छिपाने के लिए निम्नानुसार सीएसएस फ़ाइल का उपयोग करें

एप्लिकेशन / कोड / VendorName / PlaceOrder / देखें / दृश्यपटल / वेब / सीएसएस / place_order_button.css

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

संलग्न स्क्रीनशॉट है!

— Haritha
स्रोत

नमस्कार @Haritha, मैंने आपके समाधान की कोशिश की है लेकिन यह काम नहीं कर रहा है। बटन चेकआउट पृष्ठ पर नहीं दिखा रहा है। क्या आप इस पर मेरी मदद कर सकते हैं।

हाय मयंक ज़लावदिया, क्या आप जांच सकते हैं कि आपका कस्टम मॉड्यूल एप्लिकेशन / etc / config.php में Magento_Checkout मॉड्यूल के बाद लोड किया गया है या नहीं

— Haritha

मैं पहले से ही इसकी जांच कर रहा हूं और अब यह काम कर रहा है, लेकिन मैं आपके स्क्रीनशॉट में बताए अनुसार प्लेस ऑर्डर बटन नहीं जोड़ पा रहा हूं। यह केवल सारांश में प्रदर्शित होता है। क्या आप कृपया अपने स्क्रीनशॉट में उल्लेखित जगह पर प्लेस ऑर्डर बटन को स्थानांतरित करने में मेरी मदद कर सकते हैं।

क्या आप अपना स्क्रीनशॉट साझा कर सकते हैं?

— हरिता

nimb.ws/5EdgS2 चेक स्क्रीनशॉट

ये सभी उत्तर पूर्ण नहीं हैं क्योंकि रजिस्टर मॉड्यूल के लिए पंजीकरण .php फ़ाइल गायब है

यह मुझे मिला सबसे अच्छा जवाब है।

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

यहां पूरा मॉड्यूल है जिसे आपको केवल ऐप / कोड के तहत जगह देने की ज़रूरत है और php bin / magento सेटअप को चलाने के लिए: अपग्रेड कमांड

उममीद है कि इससे मदद मिलेगी!!!

— Драган Драган
स्रोत

धन्यवाद, यह मेरे लिए काम करता है।

— सर्वेश दिनेशकुमार पटेल

सबसे पहले आपको अपनी थीम में 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>

फिर आपको अपने चेकआउट के अंत में, उस स्थान के ऑर्डर बटन के बाद, इस तरह से फिर से जोड़ने की जरूरत है:

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

— मैजेंटो लर्नर
स्रोत