Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Add a back button to the payment step in checkout

SOLVED
Go to solution
‎04-30-2018 06:31 AM
‎04-30-2018 06:31 AM

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

@Sunil Patel
Ah i talked to fast. The back button works but after it go's back to the previous step it instantly refreshes and changes the url from:

 

https://aaaaaa.nl/checkout/


To 

https://aaaaaa.nl/checkout/?form_key=fWiNyi8xo8QToyS2&payment%5Bmethod%5D=checkmo#shipping

Do you have any clue why? Thanks in advance.

0 Kudos
Reply
‎04-30-2018 06:53 AM
‎04-30-2018 06:53 AM

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

Ow apparently I needed to drop the

()

behind the function in my template.

0 Kudos
Reply
‎07-03-2018 11:32 AM
‎07-03-2018 11:32 AM

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

The complete working code for Magento version 2.2.2 is:

 

 app/design/frontend/VendorName/ThemeName/Magento_Checkout/layout/checkout_index_index.xml

 

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
       <referenceBlock name="base-footer-container" remove="false" />
        <move element="secure-shop-logo" destination="micro-header-container" />
        <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="component"  xsi:type="string">Magento_Checkout/js/view/back-button</item>
                                                                        <item name="displayArea" xsi:type="string">afterMethods</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>

                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>


 app/design/frontend/Vendor/yourTheme/Magento_Checkout/web/template/back-button.html

 

<div class="actions-toolbar" id="shipping-method-buttons-container">
    <div class="primary">
<div class="back">
    <a data-bind="click: goToPrevStep"
       aria-describedby="checkout-back"
       class="action back">
        <span data-bind="i18n: '&lt; Back'"></span>
    </a>
</div>
    </div></div>

 

app/design/frontend/Vendor/yourTheme/Magento_Checkout/web/js/view/back-button.js

 


define(
    [
        'ko',
        'uiComponent',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (ko, Component, stepNavigator) {
        "use strict";

    return Component.extend({

        defaults: {
            template: 'Magento_Checkout/back-button'
        },

        goToPrevStep: function () {
            stepNavigator.navigateTo('shipping');
        }
    })
});

 

This is the working code for adding a back button to checkout payment step to go back to shipping step. 

0 Kudos
Reply