How to add active class for active step at checkout page in Magento 2?

Question

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

Answer 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

Answer 2

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.

Answer 3

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