cancel
Showing results for 
Search instead for 
Did you mean: 

Add a back button to the payment step in checkout

SOLVED

Add a back button to the payment step in checkout

I'm trying to add a back button to payment.html in my module.

I added the button in the html in my module like this:

 

 

<!--
 <li id="payment" role="presentation" class="checkout-payment-method" data-bind="fadeVisible: isVisible">
<div id="checkout-step-payment"
     class="step-content"
     data-role="content"
     role="tabpanel"
     aria-hidden="false">
    <!-- ko if: (quoteIsVirtual) -->
        <!-- ko foreach: getRegion('customer-email') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    <!--/ko-->
    <form id="co-payment-form" class="form payments" novalidate="novalidate">
        <input data-bind='attr: {value: getFormKey()}' type="hidden" name="form_key"/>
        <fieldset class="fieldset">
            <legend class="legend">
                <span data-bind="i18n: 'Payment Information'"></span>
            </legend><br />
            <!-- ko foreach: getRegion('beforeMethods') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
            <div id="checkout-payment-method-load" class="opc-payment" data-bind="visible: isPaymentMethodsAvailable">
                <!-- ko foreach: getRegion('payment-methods-list') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                <!-- /ko -->
            </div>
            <button class="button action continue primary" data-bind="goToPrevStep()">
                <span data-bind="i18n: 'Back'"></span>
            </button>

            <div class="no-quotes-block" data-bind="visible: isPaymentMethodsAvailable() == false">
                <!-- ko i18n: 'No Payment method available.'--><!-- /ko -->
            </div>
            <!-- ko foreach: getRegion('afterMethods') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
        </fieldset>
    </form>
</div>

 

But i'm unsure on the best way to add the js. I tried overwriting the payment.js but ofcourse then i also need to copy over the all the dependancies.

Is there any better way to do this.

 

I know I need something like this but with a prev or navigateTo function.

 

      goToPrevStep:function(){
        stepNavigator.next();
    },

That is dependent on stepNavigator. But i'm unsure where to exactly put it. 

 

Or is this the best solution? I feel like there should be a prettier solution, right?

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Add a back button to payment.html in module

I ended up extending the xml with a custom component and adding JS to that.

 

checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <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="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="billing-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="payment" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="afterMethods" xsi:type="array">

                                                                <item name="children" xsi:type="array">
                                                                    <item name="back-button" xsi:type="array">
                                                                        <item name="sortOrder" xsi:type="string">35</item>
                                                                        <item name="component"  xsi:type="string">uiComponent</item>
                                                                        <item name="config" xsi:type="array">
                                                                            <item name="template" xsi:type="string">BB_Checkout/back-button</item>
                                                                            <item name="component" xsi:type="string">BB_Checkout/js/view/back-button</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>

back-button.js

define([
    'uiComponent',
    'Magento_Checkout/js/model/step-navigator'
], function (Component, stepNavigator) {
    return Component.extend({
        goToPrevStep: function () {
            stepNavigator.navigateTo('shipping');
        }
    })
});

back-button.html

<div class="back">
    <a data-bind="click: goToPrevStep()"
       aria-describedby="checkout-back"
       class="action back">
        <span data-bind="i18n: '&lt; Back'"></span>
    </a>
</div>

Thanks for the help Smiley Happy

View solution in original post

22 REPLIES 22

Re: Add a back button to payment.html in module

Hello @SannNL

 

Good question.

 

Based on the magento2 standard you can do the same way as Magento doing for place order button.

 

vendor\magento\module-checkout\view\frontend\web\template\review\actions\default.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="actions-toolbar" id="review-buttons-container">
    <div class="primary">
        <button data-role="review-save" type="submit"
            data-bind="click: placeOrder($parents[1]), attr: {title: $t('Place Order')}"
            class="button action primary checkout"><span data-bind="i18n: 'Place Order'"></span></button>
    </div>
    <div class="secondary">
        <span id="checkout-review-edit-label" data-bind="i18n: 'Forgot an Item?'"></span>
        <a data-bind="attr: {href: $parents[1].cartUrl}"
           aria-describedby="checkout-review-edit-label"
           class="action edit">
            <span data-bind="i18n: 'Edit Your Cart'"></span>
        </a>
    </div>
</div>

In this file you can add your code for go to previous page.

vendor\magento\module-checkout\view\frontend\web\js\view\review\actions\default.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @deprecated since version 2.2.0
 */
define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/review/actions/default'
        },

        /**
         * @param {Object} parent
         * @return {Function}
         */
        placeOrder: function (parent) {
            return parent.placeOrder.bind(parent);
        }
    });
});
where you need to add your function and as well step-navigation into require.

Hope it will help you.

 

If it will work then mark as solution.


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Add a back button to payment.html in module

Ah that looks like a better solution, thanks.

 

I'm a bit unsure on how I would get the button to display on the payment page after adding it to default.html though?

 

I now have this:

Default.html

 

<div class="actions-toolbar" id="review-buttons-container">
    <div class="primary">
        <button data-role="review-save" type="submit"
            data-bind="click: placeOrder($parents[1]), attr: {title: $t('Place Order')}"
            class="button action primary checkout"><span data-bind="i18n: 'Place Order'"></span></button>
    </div>
    <div class="secondary">
        <span id="checkout-review-edit-label" data-bind="i18n: 'Forgot an Item?'"></span>
        <a data-bind="attr: {href: $parents[1].cartUrl}"
           aria-describedby="checkout-review-edit-label"
           class="action edit">
            <span data-bind="i18n: 'Edit Your Cart'"></span>
        </a>
    </div>

    <div class="back">
        <a data-bind="click: goToPrevStep()"
           aria-describedby="checkout-back"
           class="action back">
            <span data-bind="i18n: 'Back'"></span>
        </a>
    </div>
</div>

default.js (btw the @depricated worries me since i'm on 2.2.3)

/**
* @deprecated since version 2.2.0
*/
define([
'uiComponent',
'Magento_Checkout/js/model/step-navigator'
], function (
Component,
stepNavigator
) {
'use strict';

return Component.extend({
defaults: {
template: 'Magento_Checkout/review/actions/default'
},

/**
* @param {Object} parent
* @return {Function}
*/
placeOrder: function (parent) {
return parent.placeOrder.bind(parent);
},

goToPrevStep:function(){
stepNavigator.next();
},
});
});

Payment.html

<li id="payment" role="presentation" class="checkout-payment-method" data-bind="fadeVisible: isVisible">
    <div id="checkout-step-payment"
         class="step-content"
         data-role="content"
         role="tabpanel"
         aria-hidden="false">
        <!-- ko if: (quoteIsVirtual) -->
            <!-- ko foreach: getRegion('customer-email') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        <!--/ko-->
        <form id="co-payment-form" class="form payments" novalidate="novalidate">
            <input data-bind='attr: {value: getFormKey()}' type="hidden" name="form_key"/>
            <fieldset class="fieldset">
                <legend class="legend">
                    <span data-bind="i18n: 'Payment Information'"></span>
                </legend><br />
                <!-- ko foreach: getRegion('beforeMethods') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                <!-- /ko -->
                <div id="checkout-payment-method-load" class="opc-payment" data-bind="visible: isPaymentMethodsAvailable">
                    <!-- ko foreach: getRegion('payment-methods-list') -->
                        <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>

                <div class="back">
                    <a data-bind="click: goToPrevStep()"
                       aria-describedby="checkout-back"
                       class="action back">
                        <span data-bind="i18n: 'Back'"></span>
                    </a>
                </div>

                <div class="no-quotes-block" data-bind="visible: isPaymentMethodsAvailable() == false">
                    <!-- ko i18n: 'No Payment method available.'--><!-- /ko -->
                </div>
                <!-- ko foreach: getRegion('afterMethods') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                <!-- /ko -->
            </fieldset>
        </form>
    </div>
</li>

Thanks in advance @Sunil Patel

Re: Add a back button to payment.html in module

Hello @SannNL

 

Payment page means the second step of checkout page right?

 

 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Add a back button to payment.html in module

Yes I would like to add it next to the place order button.

 

Error: 'Unable to process binding "click: function (){return goToPrevStep() }"
Message: goToPrevStep is not defined'.

Re: Add a back button to payment.html in module

Hello @SannNL

 

click: goToPrevStep()

should be

click: goToPrevStep($parents[1])

 

 

Hope it will help you.

 

If it will work then mark as solution. 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Add a back button to payment.html in module

Sadly I still get this error:

 

Screen Shot 2018-04-26 at 15.28.50.png

Re: Add a back button to payment.html in module

Hello @SannNL

 

I am not able to see that image.

 

Can you please your site URL?

 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Add a back button to payment.html in module

I have the site on a local dev environment sadly.

 

This way you can click on the image:

 

https://community.magento.com/t5/image/serverpage/image-id/7611i1548962C8070A476/image-size/large?v=...

Re: Add a back button to payment.html in module

Hello

 

@SannNL

still i am not able to see image, please share image via online tool.


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer