2

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

1

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!

2

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.

0

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>
  • that will add the class name to all steps of the checkout. I was hoping to add it to a single step – Holly Jun 1 '18 at 9:51
  • It's not possible to add class in single step because we have same layout in all steps – hweb87 Jun 1 '18 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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