0

I have passed two variables in my phtml to js file as below

<script type="text/x-magento-init">
        {
            ".slider-gallery": {
                "slickSlider": {
                    "autoplay": <?php /* @escapeNotVerified */ echo $block->getConfigData('autoplay'); ?>,
                    "autoplay_speed":  <?php /* @escapeNotVerified */ echo $block->getConfigData('autoplay_speed'); ?>
                }
            }
        }

        </script>

My js file is

require([
    'jquery',
    'slick'
], function ($) {

    $(document).ready(function () {
 var slickConfig = {
            autoplay: true,
            infinite: true,
            arrows: true,
            dots: true,
            draggable: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplaySpeed: 1000,
        };
        $('.slider-gallery').slick(slickConfig);

    });
});

How to get values of these variables in my js file?

  • get reference from here – Hitesh Oct 9 '18 at 4:46
  • Can you please post getConfigData() function code here? – Rohan Hapani Oct 9 '18 at 5:11
  • public function getConfigData($fieldName) { $configValue = $this->_scopeConfig->getValue( 'slider/slider_js_config/' . $fieldName, \Magento\Store\Model\ScopeInterface::SCOPE_STORE); return $this->_jsonHelper->jsonEncode($configValue); } – Magento User Oct 9 '18 at 5:16
  • Please check my updated answer – Rohan Hapani Oct 9 '18 at 5:21
  • Is it working for you? – Rohan Hapani Oct 9 '18 at 5:31
2

This is a simple example of passing data from phtml template to your js using js-component.

app/code/Anshu/Custom/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            myjscomponent: 'Anshu_Custom/js/customjs'
        }
    }
};

app/code/Anshu/Custom/view/frontend/templates/myTemplate.phtml

<?php
$yourCustomValue = 'My Custom Data';
?>
<script type="text/x-magento-init">
{
    "*": {
        "myjscomponent": {
            "customData": <?= $yourCustomValue ?>
        }
    }
}
</script>

app/code/Anshu/Custom/view/frontend/web/js/customjs.js

define([], function(){
    'use strict';

    return function(config, element){
        var myData = config.customData;
        console.log(myData);
    }
});

You can modify the code according to your requirement.

1

Try to use this below code in your js :

Modify this below code in your phtml file :

<script type="text/x-magento-init">
{
    ".slider-gallery": {
        "slickSlider": {
            "autoplay": <?= /* @escapeNotVerified */ $block->getConfigData('autoplay'); ?>,
            "autoplay_speed":  <?= /* @escapeNotVerified */ $block->getConfigData('autoplay_speed'); ?>
        }
    }
}
</script>

Now, you can get value using this below way :

console.log(this.autoplay);
console.log(this.autoplay_speed);
  • No. It is showing undefined... – Magento User Oct 9 '18 at 5:10
0

In your .phtml file,

....
<?php $_helper = $this->helper('Namespace\Module\Helper\Data');
$zoomType = $_helper->getZoomType(); ?>
.....
<script type="text/x-magento-init">
{
    "*": {
         "quickView": {
              "zoomType": "<?= __($zoomType) ?>"
         }
    }
}
</script>

And Obtain zoomType is your JS like,

define([
'jquery',
'underscore',
'Magento_Ui/js/modal/modal'
], function ($, _, modal) {
"use strict";

return function (config) {
    console.log(config.zoomType); //Checked passed variable here
    if (config.zoomType == 'hover') {
        $(document).ready(function() {
            $('.fotorama__stage').live('mouseleave', function() {
                $('.magnify-lens').addClass('magnify-hidden');
                $('.magnifier-preview').addClass('magnify-hidden');
            });
        });
    }

    $(document).ready(function() {
        var documentPadding = 25;
        var firstAttempt = true;
        ................
        ................
        ................
    });
};
});

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.