Magento 2: spostare il pulsante dell'ordine dei luoghi dal pagamento alla barra laterale nella pagina di pagamento?

13

Voglio spostare il pulsante dell'ordine dei posti dal pagamento alla barra laterale nella pagina di pagamento.

Qualcuno può darmi un suggerimento?

Modifica : è anche possibile (con la risposta / l'approccio forniti) ?

Dalla mia ricerca ogni metodo di pagamento ha il suo modello .html incluso un proprio pulsante. Questo pulsante non è caricato da un modello knockout.js. Ad esempio una parte del metodo di pagamento "gratuito":

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

Mentre il metodo di pagamento "assegno / vaglia postale" assomiglia a questo (solo le differenze sono, enable: (getCode() == isChecked())ma ehi, ci sono ancora differenze e non c'è "1 pulsante di ordine generale onnipotente":

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

La risposta fornita sposta solo gli accordi che si traducono in qualcosa del genere:

— TUYEN TRAN THANH
fonte

Ciao, hai trovato un modo ragionevole di farlo alla fine? Grazie

— Tom Burman,

Come hai trovato successo nella convalida della casella di controllo dei termini e condizioni?

— Condor

6

Avevo lo stesso requisito per cambiare il pulsante dell'ordine dei posti nella parte inferiore del blocco di riepilogo. Poiché è presente un pulsante di ordine dei posti assegnato a ciascun metodo di pagamento. Ho creato un pulsante di ordine dei posti personalizzato accanto al blocco di riepilogo dell'ordine. Facendo clic sul pulsante ho attivato il pulsante di ordinazione del metodo di pagamento selezionato.

Passo 1:

Crea un checkout_index_index.xmlfile in

app / code / VendorName / PlaceOrder / view / frontend / path layout

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

Passo 2:

Crea un file summary.htmlnel percorso

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

Passaggio 3:

Crea un file summary.jsnel percorso

app / code / VendorName / PlaceOrder / view / frontend / web / js / vista

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

        });
    }
);

Passaggio 4:

Per nascondere il pulsante di ordine dei luoghi predefinito, utilizzare il file CSS come segue

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

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

In allegato è lo screenshot!

— Haritha
fonte

Ciao @Haritha, ho provato la tua soluzione ma non funziona. Pulsante non visualizzato nella pagina di pagamento. Potete per favore aiutarmi in questo.?

Ciao Mayank Zalavadia, puoi verificare se il tuo modulo personalizzato è caricato dopo il modulo Magento_Checkout nell'app / etc / config.php

— Haritha

Lo controllo già e ora funziona ma non riesco ad aggiungere il pulsante Ordina posto come menzionato nello screenshot. Viene visualizzato solo nel riepilogo. Potete per favore aiutarmi a spostare il pulsante Ordina posto nello stesso posto in cui menzionate nello screenshot.

Puoi condividere il tuo screenshot?

— Haritha,

nimb.ws/5EdgS2 verifica screenshot

1

Tutte queste risposte non sono complete perché manca il file registration.php per il modulo register

Questa è la migliore risposta che ho trovato.

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

Ecco il modulo completo che devi solo posizionare in App / codice ed eseguire l'installazione php bin / magento: comando di aggiornamento

Spero che questo aiuto !!!

— Драган Драган
fonte

grazie, funziona per me.

— Sarvesh Dineshkumar Patel,

0

all'inizio devi creare checkout_index_index.xml nel tuo tema, quindi devi disabilitare l'articolo prima di effettuare l'ordine nella riga 314:

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

con:

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

Quindi è necessario aggiungere nuovamente quell'elemento alla fine del pagamento, dopo aver effettuato il pulsante di ordinazione, in questo modo:

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

Quindi copia il modello predefinito (html) dopo l'ordine del posto:

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

— Magento Learner
fonte