Add a again button to the fee step in checkout

So as to add again button on the fee step, it is advisable simply override two core file:

• magento/module-checkout/view/frontend/net/js/view/fee.js
• magento/module-checkout/view/frontend/net/template/fee.html

You’ll be able to override them both from theme or by creating customized module.

In fee.html file, add a again button :-

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license particulars.
 */
-->
<li id="fee" position="presentation" class="checkout-payment-method" data-bind="fadeVisible: isVisible">
    <div id="checkout-step-payment"
         class="step-content"
         data-role="content material"
         position="tabpanel"
         aria-hidden="false">
        <!-- ko if: (quoteIsVirtual) -->
            <!-- ko foreach: getRegion('customer-email') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        <!--/ko-->
        <type id="co-payment-form" class="type funds" novalidate="novalidate">
            <enter data-bind='attr: {worth: getFormKey()}' sort="hidden" identify="form_key"/>
            <fieldset class="fieldset">
                <legend class="legend">
                    <span data-bind="i18n: 'Fee Data'"></span>
                </legend><br />
                <!-- ko foreach: getRegion('place-order-captcha') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                <!-- /ko -->
                <br />
                <!-- ko foreach: getRegion('beforeMethods') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                <!-- /ko -->
                <div id="checkout-payment-method-load" class="opc-payment" data-bind="seen: isPaymentMethodsAvailable">
                    <!-- ko foreach: getRegion('payment-methods-list') -->
                        <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
                <div class="no-quotes-block" data-bind="seen: isPaymentMethodsAvailable() == false">
                    <!-- ko i18n: 'No Fee methodology accessible.'--><!-- /ko -->
                </div>
                <!-- ko foreach: getRegion('afterMethods') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                <!-- /ko -->
            </fieldset>
        </type>
        <div class="main">
            <button data-bind="click on: goToPrevStep()" class="again button motion main">
                <span translate="'Return'" />
            </button>
        </div>
    </div>
</li>

In fee.js file, it is advisable outline goToPrevStep() perform

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

 outline([
    'jquery',
    'underscore',
    'uiComponent',
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/action/get-payment-information',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'mage/translate'
], perform (
    $,
    _,
    Part,
    ko,
    quote,
    stepNavigator,
    paymentService,
    methodConverter,
    getPaymentInformation,
    checkoutDataResolver,
    $t
) {
    'use strict';

    /** Set fee strategies to assortment */
    paymentService.setPaymentMethods(methodConverter(window.checkoutConfig.paymentMethods));

    return Part.lengthen({
        defaults: {
            template: 'Magento_Checkout/fee',
            activeMethod: ''
        },
        isVisible: ko.observable(quote.isVirtual()),
        quoteIsVirtual: quote.isVirtual(),
        isPaymentMethodsAvailable: ko.computed(perform () {
            return paymentService.getAvailablePaymentMethods().size > 0;
        }),

        /** @inheritdoc */
        initialize: perform () {
            this._super();
            checkoutDataResolver.resolvePaymentMethod();
            stepNavigator.registerStep(
                'fee',
                null,
                $t('Assessment & Funds'),
                this.isVisible,
                _.bind(this.navigate, this),
                this.sortOrder
            );

            return this;
        },

        /**
         * Navigate methodology.
         */
        navigate: perform () {
            var self = this;

            if (!self.hasShippingMethod()) {
                this.isVisible(false);
                stepNavigator.setHash('transport');
            } else {
                getPaymentInformation().achieved(perform () {
                    self.isVisible(true);
                });
            }
        },

        /**
         * @return {Boolean}
         */
        hasShippingMethod: perform () {
            return window.checkoutConfig.selectedShippingMethod !== null;
        },

        /**
         * @return {*}
         */
        getFormKey: perform () {
            return window.checkoutConfig.formKey;
        },

        goToPrevStep: perform () {
            return stepNavigator.navigateTo('transport');
        }
    });
});

And right here is the end result (Return button) in backside.

Thanks..

Vikas Kumar
2 Badges

3 December 2022