Magento 2: How to pass value to JS

Pass Configuration Values to JS in magento 2 -sbdevblog

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.

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


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


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.
sb dev blog adobe commece Magento 2


One thought on “Magento 2: How to pass value to JS

Leave a Reply

Your email address will not be published. Required fields are marked *