Magento 2 – How to Add More Variable to Window.checkoutConfig on Checkout Page

Sometimes we need to add some custom variables to the Window.checkoutConfig which we can get on checkout page and can use to implement some custom functionality or develop some custom logic. So here I am going to explain how you can add custom variable to Window.checkoutConfig.

Here, I am using my custom module – Ht_Mymodule

First, create di.xml in your module and add following code in it.

File Path: app/code/Ht/Mymodule/etc/frontend/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="more_config_provider" xsi:type="object">Ht\Mymodule\Model\Checkout\MoreConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Create MoreConfigProvider.php

File Path: app/code/Model/Checkout/MoreConfigProvider.php

<?php

namespace Ht\Mymodule\Model\Checkout;

class MoreConfigProvider implements \Magento\Checkout\Model\ConfigProviderInterface 
{
    public function getConfig() {
        $output['custom_data'] = 'your data value';
        return $output;
    }
}

Now, inside your knockout js file, You can get value like,

var customData = window.checkoutConfig.custom_data;
console.log(customData);

Team HiddenTechies

Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!