Magento 2: Yer siparişi düğmesini ödeme sayfasından kenar çubuğuna taşıyın mı?

13

Yer siparişi düğmesini ödeme sayfasından kenar çubuğuna ödeme yapmak istiyorum.

Herkes bana bir öneri verebilir mi?

Edit : Bu bile mümkün (verilen cevap / yaklaşım ile) ?

Araştırmamdan, her ödeme yönteminin kendi düğmesi de dahil olmak üzere kendi .html şablonu vardır. Bu düğme bir knockout.js şablonundan yüklenmez. Örneğin, "ücretsiz" ödeme yönteminin bir parçası:

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

"Çek / havale" ödeme yöntemi böyle görünse de (sadece farklılıklar vardır enable: (getCode() == isChecked())ama hey, hala farklılıklar vardır ve "1 Yüce genel yer sipariş düğmesi" yoktur:

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

Verilen cevap sadece böyle bir şeyle sonuçlanan toplamaları taşır:

— TUYEN TRAN THANH
kaynak

Merhaba - sonunda bunu yapmanın makul bir yolunu buldunuz mu? Teşekkürler

— Tom Burman

Şartlar ve koşulların onay kutusu doğrulamasında başarıyı nasıl buldunuz?

— Condor

6

Özet bloğunun altındaki yer sipariş düğmesini değiştirmek için benzer bir gereklilik vardı. Her ödeme yöntemine yer sipariş düğmesi atanmış olduğundan. Sipariş özeti bloğunun yanında özel bir sipariş talimatı düğmesi oluşturdum. Düğmeye tıklarken, seçilen ödeme yönteminin sipariş talimatı düğmesini tetikledim.

Aşama 1:

İçinde checkout_index_index.xmldosya oluştur

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>

Adım 2:

Bir dosya oluşturun summary.htmlyolunda

Uygulamanın / kod / SatıcıAdı / PlaceOrder / görünüm / kullanıcı arayüzü / web / şablon

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

Aşama 3:

Bir dosya oluşturun summary.jsyolunda

Uygulama / kod / SatıcıAdı / PlaceOrder / görünüşüdür / ön / ağ / js / görünüşüdür

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. Adım:

Varsayılan yer sırası düğmesini gizlemek için CSS dosyasını aşağıdaki gibi kullanın

Uygulama / kod / SatıcıAdı / PlaceOrder / görünüşüdür / ön / ağ / CSS / place_order_button.css

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

Ekli ekran görüntüsü!

— Hârise
kaynak

Merhaba @Haritha, çözümünüzü denedim ama işe yaramıyor. Düğme ödeme sayfasında görünmüyor. Lütfen bana bu konuda yardım edebilir misin?

Merhaba Mayank Zalavadia, Özel modülünüzün app / etc / config.php'deki Magento_Checkout Modülünden sonra yüklenip yüklenmediğini kontrol edebilir misiniz

— Haritha

Bunu zaten kontrol ediyorum ve şimdi çalışıyor, ancak ekran görüntünüzde belirttiğiniz gibi Yer Siparişi düğmesini ekleyemiyorum. Yalnızca özette görüntülenir. Lütfen Yer Siparişi düğmesini ekran görüntünüzde bahsettiğiniz yerde taşımama yardımcı olun.

Ekran görüntünüzü paylaşabilir misiniz?

— Haritha

nimb.ws/5EdgS2 check ekran görüntüsü

1

Kayıt modülü için registration.php dosyası eksik olduğu için tüm bu yanıtlar tamamlanmadı

Bu bulduğum en iyi cevap.

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

İşte sadece App / code altına yerleştirmek ve php bin / magento setup komutunu çalıştırmak için ihtiyacınız olan komple modül: upgrade komutu

Umarım bu yardım !!!

— Драган Драган
kaynak

teşekkürler, benim için çalışıyor.

— sarvesh Dineshkumar Patel

0

önce temanızda checkout_index_index.xml oluşturmanız, ardından 314 satırında sipariş vermeden önce öğeyi devre dışı bırakmanız gerekir:

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

ile:

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

Ardından, sipariş verdikten sonra, bu öğeyi Checkout'unuzun sonuna yeniden eklemeniz gerekir:

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

Ardından yer siparişinden sonra varsayılan şablonunuzu (html) kopyalayın:

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

— Magento Öğrenen
kaynak