How to Pass Data from PHP to JavaScript in Magento 2

No other platform offers you the power to create a unique and engaging shopping experience as Magento does!

Rich, seamless third-party integrations, out-of-the-box features, a flexible headless architecture, and an unlimited ability for customization are the most favourite features of mine!

Compatibility with scripting languages is the greatest advantage of Magento 2.

JavaScript is client-side and PHP is the server-side scripting language. Need often arrives to pass data from PHP to javascript in Magento 2, especially when data has to be fetched on the frontend in JS file from the backend.

For instance, I’ve created one configuration using XML and my requirement is if the extension is enabled then the value should be displayed on the frontend.

You can use this solution, for example, when you want to print the value of default country selected. One step forward, you can implement conditions to show the list of states if that country is selected. In that case, pass the value of condition instead of name in the below code.

Steps to Pass Data from PHP to JavaScript in Magento 2

1. Create di.xml in app/code/Vendor/Module/etc/frontend/
   
   <?xml version="1.0" encoding="UTF-8"?> <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="data_pass_checkout" xsi:type="object">Vendor\Module\Model\GetCustomValue</item> </argument> </arguments> </type> </config>

   1 2 3 4 5 6 7 8 9 10 11

   <?xml version="1.0" encoding="UTF-8"?> <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="data_pass_checkout" xsi:type="object">Vendor\Module\Model\GetCustomValue</item>             </argument>         </arguments>     </type> </config>

2. Create GetCustomValue.php in app/code/Vendor/Module/Model/
   
   
   <?php namespace Vendor\Module\Model; use Magento\Checkout\Model\ConfigProviderInterface; class GetCustomValue implements ConfigProviderInterface { public function getConfig() { $config = []; $config['name'] = 'John'; return $config; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <?php   namespace Vendor\Module\Model;   use Magento\Checkout\Model\ConfigProviderInterface;   class GetCustomValue implements ConfigProviderInterface {     public function getConfig()     {         $config = [];         $config['name'] = 'John';         return $config;     } }

3. Create custom.js  in app/code/Vendor/Module/view/frontend/web/js/
   
   
   define([ 'uiComponent', 'jquery' ], function (Component, $) { 'use strict'; console.log(window.checkoutConfig.name); return Component.extend({}); });

   1 2 3 4 5 6 7 8

   define([         'uiComponent',         'jquery'     ], function (Component, $) {         'use strict';         console.log(window.checkoutConfig.name);         return Component.extend({});     });

Seems complicated at first but using the above solution you can easily crack it!

Still, if you have any doubts, do mention them in the Comments section below 🙂

I would be happy to help.

Feel free to share the solution with Magento community via social media.

Thank You.