Magento 2: How to pass value to JS

We will pass the dynamic configuration values to JS in this post. We can pass values to the configuration using checkoutConfig in checkout. However, we can also pass values to the jQuery widget from the PHTML files.

Let’s check how we can pass values to the jQuery widget from the PHTML.

Before proceeding, let’s understand how to use JS in our PHTML templates.

We can use declarative or imperative notation to insert a JS component into a PHTML template.

Imperative notation

Use the PHTML template’s imperative notation to incorporate raw JavaScript code to execute the provided business logic on the pages. This approach uses the <script> tag without the type=”text/x-magento-init” attribute.

Declarative notation

When a JS component is inserted using declarative notation, all backend setup is ready and outputs to the page source using standard tools. If your JavaScript component needs initialization, you can use declarative notation.

You have two choices in Magento 2 for specifying declarative notation:

1. Using the data-mage-init attribute
   
   Using this, you can target a certain HTML element. It is more widely used for jQuery UI widgets since it is simpler to implement. Only the HTML tag that has been specifically mentioned can use this strategy. <div data-mage-init='{"<component_name>": {...}}'></nav>. , for instance. Because of its clear syntax and easy access to the HTML element.
   
2. Using the <script type="text/x-magento-init"> ... </script> tag
   
   This can be used to target a CSS selector or the character *. The script will execute for each HTML element that matches the CSS selector, if it matches more than one HTML element. The script will run once with the HTML DOM as its target for * because no HTML element is chosen. Any HTML element can be targeted with this method, which can be applied from anywhere in the codebase. This is preferred when no target HTML element or direct access to the HTML element is limited.

Magento 2: How to pass value to JS

We have used the second method of Declarative notation. Let’s look into the code.

<?php
/**
 * @copyright Copyright (c) sbdevblog (http://www.sbdevblog.com)
 */
?>
<script type="text/x-magento-init">
{
    "selector": {
        "Vendor_Module/js/jsfile": {
            "configuration": <?= /** @noEscape */
    $block->getConfig() ?>
        }
    }
}

</script>

We can simply use it in the jquery widget by accessing the widget’s options:

this.options.configuration

That’s it; passing configuration values to the JS widget is straightforward.

Thanks for reading Post-Magento 2: How to Pass Value to JS.

Thank you. Please use the comment box for your valuable comments. I’d like you to subscribe and stay tuned. Also, please share the post with your connections.

I have created a module to check the availability of products using the jQuery widget without using AJAX.

Download Source Code

Note: Please verify the code of this blog and the relevant git repository before using it in production.

🙂 HAPPY CODING 🙂