Adding additional variables in window.checkoutConfig on Magento 2 Checkout page

Adding additional variables in window.checkoutConfig on Magento 2 Checkout page
We often need to add more variables that we need to use on the checkout page at the time of checkout. Here is how we can do that.

The first step is to add the following code in Vendor/Module/etc/frontend/di.xml of your custom module –

<?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="additional_provider" xsi:type="object">Armmage\test\Model\AdditionalConfigVars</item>
           </argument>
       </arguments>
   </type>
</config>

After this, we will create AdditionalConfigVars.php in Vendor/Module/Model and add the following code to it –

<?php

namespace Armmage\Test\Model;

use \Magento\Checkout\Model\ConfigProviderInterface

class AdditionalConfigVars implements ConfigProviderInterface
{
   public function getConfig()
   {
       $additionalVariables['test_var'] = 'Test Var';
       return $additionalVariables;
   }
}

Now all you need to do is flush the Magento cache and check  ‘window.checkoutConfig.test_var’ in your js on the checkout page. It will return ‘Test Var’.

This is all for now.

Basic module create --> link



Ready to elevate your e-commerce business?

Let's talk about your business goals. Contact us now to see how we can help achieve them.

 
Copyright © 2021-present ArmMage Inc. All rights reserved.