Magento 2: Przenieś przycisk zamówienia miejsca z płatności na pasek boczny na stronie kasy?

13

Chcę przenieść przycisk zamówienia miejsca z płatności na pasek boczny na stronie kasy.

Czy ktoś może mi coś zasugerować?

Edycja : Czy to w ogóle możliwe (z podaniem odpowiedzi / podejścia) ?

Z moich badań wynika, że każda metoda płatności ma własny szablon .html, w tym własny przycisk. Ten przycisk nie jest ładowany z szablonu knockout.js. Np. Część „bezpłatnej” metody płatności:

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

Chociaż metoda płatności „czekiem / przekazem pieniężnym” wygląda tak (tylko różnice, enable: (getCode() == isChecked())ale hej, nadal istnieją różnice i nie ma „1 wszechmocnego ogólnego przycisku zamówienia”:

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

Podana odpowiedź jedynie przenosi agresje, co prowadzi do czegoś takiego:

— TUYEN TRAN THANH
źródło

Cześć - czy w końcu znalazłeś rozsądny sposób na zrobienie tego? Dzięki

— Tom Burman,

Jak odnalazłeś sukces w sprawdzaniu poprawności warunków?

— Condor,

6

Miałem podobny wymóg zmiany przycisku zamówienia miejsca na dole bloku podsumowania. Ponieważ do każdej metody płatności przypisany jest przycisk zamówienia. Utworzyłem niestandardowy przycisk zamówienia obok bloku podsumowania zamówienia. Klikając przycisk, uruchomiłem przycisk zamówienia miejsca wybranej metody płatności.

Krok 1:

Utwórz checkout_index_index.xmlplik w

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>

Krok 2:

Utwórz plik summary.htmlna ścieżce

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

Krok 3:

Utwórz plik summary.jsna ścieżce

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

        });
    }
);

Krok 4:

Aby ukryć domyślny przycisk zamówienia miejsca, użyj pliku CSS w następujący sposób

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

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

Załączony zrzut ekranu!

— Haritha
źródło

Witaj @ Haritha, wypróbowałem Twoje rozwiązanie, ale nie działa. Przycisk nie wyświetla się na stronie kasy. Czy możesz mi pomóc w tej sprawie.

Cześć Mayank Zalavadia, czy możesz sprawdzić, czy moduł niestandardowy jest załadowany po module Magento_Checkout w aplikacji / etc / config.php

— Haritha

Już to sprawdzam i teraz działa, ale nie mogę dodać przycisku Złóż zamówienie, jak wspomniałeś na zrzucie ekranu. Wyświetla się tylko w podsumowaniu. Czy możesz mi pomóc przesunąć przycisk Złóż zamówienie w tym samym miejscu, o którym wspomniałeś na zrzucie ekranu.

Czy możesz udostępnić zrzut ekranu?

— Haritha

nimb.ws/5EdgS2 sprawdź zrzut ekranu

1

Wszystkie te odpowiedzi nie są kompletne, ponieważ brakuje pliku register.php dla modułu rejestru

To najlepsza odpowiedź, jaką znalazłem.

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

Oto kompletny moduł, który wystarczy umieścić w obszarze App / code i uruchomić polecenie php bin / magento setup: upgrade

Mam nadzieję, że to pomoże!!!

— Драган Драган
źródło

dzięki, to działa dla mnie.

— sarvesh Dineshkumar Patel

0

najpierw musisz utworzyć plik checkout_index_index.xml w swoim motywie, a następnie wyłączyć zamówienie przed złożeniem zamówienia w wierszu 314:

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

z:

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

Następnie musisz ponownie dodać ten element na końcu zamówienia, po złożeniu zamówienia, w następujący sposób:

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

Następnie po złożeniu zamówienia skopiuj szablon domyślny (HTML):

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

— Uczeń Magento
źródło