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
Best Answer
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:
Create
Daan/CustomBodyClass/view/frontend/web/js/view/custom-body-class.js
: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!