Ttdfjt

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?

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.

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);

In your .phtml file,

....
<?php $_helper = $this->helper('NamespaceModuleHelperData');
$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;
 ................
 ................
 ................
 );
;
);