Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
Does anyone know of a reliable way in which I could add a css class name on the body tag for a specific checkout step? For example my-custom-step or payment-step.
I was thinking I could use jQuery in a JavaScript mixin for when a checkout step is initiated, i.e. stepNavigator.next(). But I don't think this is very reliable, as a user can land on a step from anywhere using the # symbol in the url, i.e. example.com/checkout/#payment
Alternative way, with a module which adds a component. Instead of any type of overriding of the Magento-core. Tested with 2.1.x to 2.2.6.
I assume you know how to create a basic Magento 2-module. We'll call this one Daan_CustomBodyClass:
Create Daan/CustomBodyClass/view/frontend/layout/checkout_index_index.xml:
We'll add a custom component here to progressBar:
<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="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="progressBar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="daan-custom-body-class" xsi:type="array">
<item name="component" xsi:type="string">Daan_CustomBodyClass/js/view/custom-body-class</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Create Daan/CustomBodyClass/view/frontend/web/js/view/custom-body-class.js:
define([
'jquery',
'underscore',
'ko',
'uiComponent',
'Magento_Checkout/js/model/step-navigator',
'jquery/jquery.hashchange'
], function ($, _, ko, Component, stepNavigator) {
'use strict';
var steps = stepNavigator.steps;
return Component.extend({
steps: steps,
/**
* Initially we add a 'shipping-step' class to the body on Step 1.
* After switching to billing we remove that class and add a 'payment-step' class.
*/
initialize: function() {
this._super();
$(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');
}
}));
return this;
}
});
}
);
This should add a class 'shipping-step' to the document body on the Shipping Step and replace it with 'payment-step' whenever is switched to the Payment Step.
Hope this helps!
Copy file from
vendor/magento/module-checkout/view/frontend/web/js/view/progress-bar.js
and paste into
app/design/frontend/Namespace/Theme/Magento_Checkout/web/js/view/progress-bar.js
find following code
isProcessed: function (item) {
return stepNavigator.isProcessed(item.code);
}
and replace with this
isProcessed: function (item) {
var itemCode = item.code;
if (itemCode == "shipping") {
jQuery('body').addClass('payment-step');
} else {
jQuery('body').removeClass('payment-step');
}
return stepNavigator.isProcessed(item.code);
}
Run a command: php bin/magento setup:static-content:deploy -f
Note: Default item code is payment. When you complete the shipping and navigate to the payment step, it will return "shipping" in isProcessed function.
It will add the class even if the user comes to the checkout payment step by entering '#payment' manually.
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');
}
};
Create new XML checkout_index_index.xml in your theme.
/app/design/frontend/Vendor/YourTheme/Magento_Checkout/layout/checkout_index_index.xml
Add below code:
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<attribute name="class" value="my-custom-step"/>
</body>
</page>
