3

I am using Magento2.2 . I want to pass variable in component JS from phtml file on frontend but don't know how ? I am using following code

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>

</div>

Namespace/Modulename/view/frontend/template/web/js/customjs.js

define([
'jquery',
'ko',
'uiComponent',
'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend(function(config){      
      console.log(config);
      });
})

Please help me solve this problem. Any help would be appreciated.

Thanks in advance.

4

First you need to define your template in the JS file and pass variables from phtml.

In js:

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },
        productInfo: window.customInfo

        initialize: function () {
            //init function code here
        }
    });
})

and in PHTML:

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script>
        window.customInfo = 'variable';
    </script>
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>

</div>

If you have the information from backend block function , something like an array you can do as follows

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script>
        window.configs = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
    </script>
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>
</div>

And in JS

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },
        productInfo: window.customInfo.**keyName**

        initialize: function () {
            //init function code here
        }
    });
})

where keyName should be the array key from the block

UPDATE You can do without window.... variables something like this:

return Component.extend({

        initialize: function (config) {
            var paramValue = config.parameter;
        }
    });

and in your PHTML:

<script type="text/x-magento-init">
{
    "#some-element-id": {
        "Namespace_Module/js/jsfilename": {"parameter":"value"} 
    } 
} 
</script>
5
  • Thanks @Vlad. But in case multiple times render same html on same page. It always picking one of them either 1st or last. – zed Blackbeard Mar 16 '18 at 6:15
  • it that case I would recomand in XML setting an ID_Modifier and make the init dependent on that maybe add that modifiere as an sufix for the variables – Vlad Patru Mar 16 '18 at 6:20
  • Can you please add sample code ? – zed Blackbeard Mar 16 '18 at 6:23
  • Is there any way to get the parameter without using window object – zed Blackbeard Mar 16 '18 at 7:43
  • @zedBlackbeard updated answer – Vlad Patru Mar 16 '18 at 8:05
9

The bellow work as a treat for me:

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
  "#product-custom-info": {
        "Magento_Ui/js/core/app": {
        "components":{
          "custom-scope":{
            "component":"Namespace_Modulename/js/customjs",
            "myVar" : "My Value"
          }
        }
      }
  }
}
</script>

Then in customjs:

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
        'use strict';
        return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },

        initialize: function (config) {
            console.log(config.myVar) //logs My Value
        }
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.