Magento 2: déplacer le bouton de commande du paiement vers la barre latérale sur la page de paiement?

Je souhaite déplacer le bouton de commande du paiement vers la barre latérale de la page de paiement.

N'importe qui peut me faire une suggestion?

Edit : Est-ce même possible (avec la réponse / approche fournie) ?

D'après mes recherches, chaque méthode de paiement a son propre modèle .html, y compris un propre bouton. Ce bouton n'est pas chargé à partir d'un modèle knockout.js. Par exemple, une partie du mode de paiement "gratuit":

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

Alors que la méthode de paiement par "chèque / mandat" ressemble à ceci (seules les différences sont enable: (getCode() == isChecked())mais bon, il y a toujours des différences et il n'y a pas de "1 bouton de commande général tout-puissant"):

  <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 réponse fournie ne déplace que les agrégats, ce qui se traduit par quelque chose comme ceci:

magento-2.1 onepage-checkout knockoutjs place-order TUYEN TRAN THANH
la source

Salut - avez-vous trouvé un moyen raisonnable de le faire à la fin? Merci

Tom Burman

Comment avez-vous trouvé le succès dans la validation des cases à cocher des termes et conditions?

Condor

Réponses:

J'avais la même exigence de changer le bouton de commande en bas du bloc récapitulatif. Puisqu'un bouton de commande est affecté à chaque mode de paiement. J'ai créé un bouton de commande personnalisé à côté du bloc récapitulatif de la commande. En cliquant sur le bouton, j'ai déclenché le bouton de commande du mode de paiement sélectionné.

Étape 1:

Créez un checkout_index_index.xmlfichier dans

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>

Étape 2:

Créer un fichier summary.htmldans le chemin

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

Étape 3:

Créer un fichier summary.jsdans le chemin

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

        });
    }
);

Étape 4:

Pour masquer le bouton de commande par défaut, utilisez le fichier CSS comme suit

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

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

Ci-joint la capture d'écran!

Haritha
la source

Bonjour @Haritha, j'ai essayé votre solution mais ça ne marche pas. Le bouton ne s'affiche pas sur la page de paiement. Pouvez-vous m'aider à ce sujet.?

Salut Mayank Zalavadia, pouvez-vous vérifier si votre module personnalisé est chargé après le module Magento_Checkout dans app / etc / config.php

Haritha

Je vérifie déjà cela et maintenant cela fonctionne mais je ne suis pas en mesure d'ajouter le bouton Passer une commande comme vous le mentionnez dans votre capture d'écran. Il s'affiche uniquement dans le résumé. Pouvez-vous m'aider à déplacer le bouton Passer la commande au même endroit que vous le mentionnez dans votre capture d'écran.

Pouvez-vous partager votre capture d'écran?

Haritha

nimb.ws/5EdgS2 vérifier capture d'écran

Toutes ces réponses ne sont pas complètes car il manque le fichier registration.php pour le module d'enregistrement

C'est la meilleure réponse que j'ai trouvée.

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

Voici le module complet qu'il vous suffit de placer sous App / code et d'exécuter la configuration de php bin / magento: commande de mise à niveau

J'espère que cette aide !!!

Драган Драган
la source

merci, ça marche pour moi.

sarvesh Dineshkumar Patel

au début, vous devez créer checkout_index_index.xml dans votre thème, puis vous devez désactiver l'élément avant de passer la commande sur la ligne 314:

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

avec:

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

Ensuite, vous devez rajouter cet élément à la fin de votre commande, après le bouton de commande, comme ceci:

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

Copiez ensuite dans votre modèle par défaut (html) après avoir passé la commande:

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

Magento Learner
la source