How to Add Additional Variables in window.checkoutConfig
on Magento 2 Checkout Page
In Magento 2, window.checkoutConfig
is a global JavaScript object that holds configuration data used throughout the checkout process. You might need to add custom variables to window.checkoutConfig
to pass additional data to your custom checkout components or JavaScript logic. Here’s how you can do this step by step.
Step 1: Create a Custom Module
First, create a custom module to keep your changes organized and maintainable.
- Create the module directory structure:
app/code/Vendor/CheckoutCustomConfig
- Create the
registration.php
file:<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Vendor_CheckoutCustomConfig', __DIR__ );
- Create the
module.xml
file:<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Vendor_CheckoutCustomConfig" setup_version="1.0.0"/> </config>
Step 2: Add the Custom Variables to window.checkoutConfig
Now that your module is set up, you can add custom variables to the checkout configuration. This is done using a plugin to extend the configuration array.
- Create the plugin class:
app/code/Vendor/CheckoutCustomConfig/Plugin/CheckoutConfigPlugin.php
- Implement the plugin logic:
<?php namespace Vendor\CheckoutCustomConfig\Plugin; class CheckoutConfigPlugin { public function afterGetConfig( \Magento\Checkout\Model\DefaultConfigProvider $subject, array $result ) { // Add your custom variables here $result['customVariable1'] = 'Custom Value 1'; $result['customVariable2'] = 'Custom Value 2'; return $result; } }
This plugin adds two custom variables,
customVariable1
andcustomVariable2
, to thewindow.checkoutConfig
object. - Define the plugin in
di.xml
:app/code/Vendor/CheckoutCustomConfig/etc/frontend/di.xml
- Add the following content to
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\DefaultConfigProvider"> <plugin name="vendor_checkout_custom_config" type="Vendor\CheckoutCustomConfig\Plugin\CheckoutConfigPlugin" /> </type> </config>
This registers your plugin so it modifies the checkout configuration as expected.
Step 3: Clear Cache and Test
After setting up the plugin, you’ll need to clear the Magento cache and verify that your custom variables have been added to window.checkoutConfig
.
- Enable the module:
Run the following command to enable your custom module:
bin/magento module:enable Vendor_CheckoutCustomConfig
- Clear the cache:
bin/magento cache:clean
- Test the changes:
Open the checkout page in your browser, and use the developer tools to inspect the
window.checkoutConfig
object. You should see the custom variables you added.
Conclusion
By following these steps, you can easily add custom variables to window.checkoutConfig
on the Magento 2 checkout page. This allows you to extend the checkout functionality without modifying core files, keeping your implementation clean and maintainable.
For more detailed Magento 2 tutorials and expert advice, feel free to contact us at [email protected].
Comments