2

I want to add active class for respected checkout step like Shipping, Review and payments step in body tag.

enter image description here

3 Answers 3

1

Override progress-bar.js in your theme

vendor/magento/module-checkout/view/frontend/web/js/view/progress-bar.js

Search below code

isProcessed: function (item) {
  return stepNavigator.isProcessed(item.code);
}

Replace

isProcessed: function (item) {
     var itemCode = item.code;
     if (itemCode == "shipping") {
             jQuery('body').addClass(item.code);
     } else {
             jQuery('body').removeClass(item.code);
     }
     return stepNavigator.isProcessed(item.code);
}

Run CLI: php bin/magento setup:static-content:deploy -f

1
1

Override progress-bar.js in you custom active theme(Path given below):

vendor/magento/module-checkout/view/frontend/web/js/view/progress-bar.js

Find below code:

initialize: function () {
        var stepsValue;

        this._super();
        window.addEventListener('hashchange', _.bind(stepNavigator.handleHash, stepNavigator));

        if (!window.location.hash) {
            stepsValue = stepNavigator.steps();

            if (stepsValue.length) {
                stepNavigator.setHash(stepsValue.sort(stepNavigator.sortItems)[0].code);
            }
        }

        stepNavigator.handleHash();
    },

And replace with below code:

initialize: function () {
        var stepsValue;

        this._super();
        window.addEventListener('hashchange', _.bind(stepNavigator.handleHash, stepNavigator));

        if (!window.location.hash) {
            stepsValue = stepNavigator.steps();

            if (stepsValue.length) {
                stepNavigator.setHash(stepsValue.sort(stepNavigator.sortItems)[0].code);
            }
        }

        stepNavigator.handleHash();

        // add class for default active step
        $(document.body).addClass('shipping-step');

        $(window).hashchange(_.bind(function() {
            if (window.location.hash === '#shipping') {
                $(document.body)
                    .removeClass('payment-step')
                    .addClass('shipping-step');
            }
            if (window.location.hash === '#payment') {
                $(document.body)
                    .removeClass('shipping-step')
                    .addClass('payment-step');
            }
        }));
    },

Clear cache.

1
  • .hashchange triggers an error. I would recommend changing it to $(window).on('hashchange', function(){ and closing it with }).trigger('hashchange'); Apr 3 at 8:20
0

This works in magento 2.4.6 and also adds checkout step classes on page load (and change checkout step event). Adjust the class names to your need.

Override progress-bar.js in you custom active theme(Path given below):

vendor/magento/module-checkout/view/frontend/web/js/view/progress-bar.js

Add below code right after stepNavigator.handleHash(); (but still inside the initialize: function).

Add class on page load:

$(document).ready(function(){

if (location.hash === '#shipping') {
    $(document.body)
        .removeClass('payment-step')
        .addClass('shipping-step');
}

if (location.hash === '#payment') {
    $(document.body)
        .removeClass('shipping-step')
        .addClass('payment-step');
}
});

Add class on change checkout step event:

window.onhashchange = function(){

if (location.hash === '#shipping') {
    $(document.body)
        .removeClass('payment-step')
        .addClass('shipping-step');
}

if (location.hash === '#payment') {
    $(document.body)
        .removeClass('shipping-step')
        .addClass('payment-step');
}
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.