Add CSS Class to Body Tag for Checkout Step in Magento 2

checkoutcssjavascriptlayoutmagento2

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:

<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!

Related Topic