Magento 2: ¿Mover el botón de orden de lugar del pago a la barra lateral en la página de pago?

13

Quiero mover el botón de orden de lugar desde el pago a la barra lateral en la página de pago.

ingrese la descripción de la imagen aquí

¿Alguien me puede dar una sugerencia?

Editar : ¿Es esto posible (con la respuesta / enfoque proporcionado) ?

Según mi investigación, cada método de pago tiene su propia plantilla .html que incluye un botón propio. Este botón no se carga desde una plantilla knockout.js. Por ejemplo, una parte del método de pago "gratis":

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

Si bien el método de pago de "cheque / giro postal" se ve así (solo las diferencias son enable: (getCode() == isChecked())pero bueno, todavía hay diferencias y no hay un "1 botón de orden general todopoderoso":

  <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 respuesta proporcionada solo mueve los acuerdos que resultan en algo como esto:

ingrese la descripción de la imagen aquí

magento-2.1 onepage-checkout knockoutjs place-order TUYEN TRAN THANH
fuente
Hola, ¿encontraste una forma razonable de hacer esto al final? Gracias
Tom Burman el
¿Cómo encontró éxito en la validación de la casilla de verificación de los términos y condiciones?
Cóndor

Respuestas:

6

Tuve el requisito similar de cambiar el botón de orden de lugar en la parte inferior del bloque de resumen. Dado que hay un botón de orden de lugar asignado a cada método de pago. He creado un botón de pedido de lugar personalizado junto al bloque de resumen de pedido. Al hacer clic en el botón, he activado el botón de pedido de lugar del método de pago seleccionado.

Paso 1:

Crea un checkout_index_index.xmlarchivo en

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>

Paso 2:

Crea un archivo summary.htmlen la ruta

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

Paso 3:

Crea un archivo summary.jsen la ruta

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

        });
    }
);

Etapa 4:

Para ocultar el botón de orden de lugar predeterminado, use el archivo CSS de la siguiente manera

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

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

Se adjunta la captura de pantalla!

ingrese la descripción de la imagen aquí

Haritha
fuente
Hola @ Haritha, he probado tu solución pero no funciona. El botón no se muestra en la página de pago. Puedes por favor ayudarme en esto.?
Hola, Mayank Zalavadia, ¿Puedes verificar si tu módulo personalizado está cargado después de Magento_Checkout Module en la aplicación / etc / config.php
Haritha
Ya lo compruebo y ahora funciona, pero no puedo agregar el botón Realizar pedido como mencionas en tu captura de pantalla. Solo se muestra en el resumen. ¿Puede ayudarme a mover el botón Realizar pedido en el mismo lugar que menciona en su captura de pantalla?
¿Puedes compartir tu captura de pantalla?
Haritha
Captura de pantalla de verificación de nimb.ws/5EdgS2
1

Todas estas respuestas no están completas porque falta el archivo Registration.php para el módulo de registro

Esta es la mejor respuesta que encontré.

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

Aquí hay un módulo completo que solo necesita colocar bajo la aplicación / código y ejecutar php bin / magento setup: comando de actualización

¡¡¡Espero que esto ayude!!!

Драган Драган
fuente
gracias, funciona para mi
sarvesh Dineshkumar Patel
0

al principio necesita crear checkout_index_index.xml en su tema, luego debe deshabilitar el artículo antes de realizar el pedido en la línea 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>

Luego, debe volver a agregar ese elemento al final de su Pago, luego de realizar el pedido, de esta manera:

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

Luego copie su plantilla predeterminada (html) después de realizar el pedido:

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