Magento 2: Pass variable from phtml to js

Question

here is my layout

    <referenceContainer name="minicart.addons">
  <block class="Vendor\Mymodule\Block\Cart\Sidebar" name="shipping_bar" template="Vendor_Mymodule::cart/minicart.phtml">
   <arguments>
     <argument name="jsLayout" xsi:type="array">
       <item name="components" xsi:type="array">
         <item name="minicart-addons" xsi:type="array">
           <item name="component" xsi:type="string">Vendor_Mymodule/js/view/minicartaddons</item>
           <item name="config" xsi:type="array"></item>
         </item>
       </item>
     </argument>
   </arguments>
 </block>

here is variable in phtml file

<script>
  maxpriceShipping = <?= /* @escapeNotVerified */ $maxpriceShipping ?>;
</script>

here is js file

define([
       'ko',
       'uiComponent',
       'Magento_Customer/js/customer-data',
   ], function (ko, Component, customerData) {
       'use strict';
       var subtotalAmount;
       var maxPrice = maxpriceShipping;
       var percentage;
       return Component.extend({
           displaySubtotal: ko.observable(true),
           maxprice:maxPrice.toFixed(2),
           /**
            * @override
            */
           initialize: function () {
               this._super();
               this.cart = customerData.get('cart');
           },
           getTotalCartItems: function () {
               return customerData.get('cart')().summary_count;
           },
           getpercentage: function () {
               subtotalAmount = customerData.get('cart')().subtotalAmount;
               if (subtotalAmount > maxPrice) {
                   subtotalAmount = maxPrice;
               }
               percentage = ((subtotalAmount * 100) / maxPrice);
               return percentage;
           }
       });
   });

How can I pass variable maxpriceShipping in phtml to js file without using a "script" tag. but can use "script type="text/x-magento-init""

Answer 1

In your .phtml please add following code.

<script type="text/x-magento-init">
{
    "*": {
        "Magepow_Ajaxcart/js/view/minicartaddons": {
            "maxpriceShipping": <?= /* @escapeNotVerified */ $maxpriceShipping ?>
        }
    }
}

And in your JS file please add below code to get maxpriceShipping

define([
       'ko',
       'uiComponent',
       'Magento_Customer/js/customer-data',
   ], function (ko, Component, customerData) {
       'use strict';
       var subtotalAmount;    
       var percentage;
       return Component.extend({
           displaySubtotal: ko.observable(true),
           maxprice:maxPrice.toFixed(2),
           /**
            * @override
            */
           initialize: function () {
               this._super();
               this.cart = customerData.get('cart');
               /* Add this code to get maxpriceShipping value*/
               /* You can use this variable to call this function in your JS*/
               this.maxPrice = ko.observable(this.maxpriceShipping);
               /* Code End*/
           },
           getTotalCartItems: function () {
               return customerData.get('cart')().summary_count;
           },
           getpercentage: function () {
               subtotalAmount = customerData.get('cart')().subtotalAmount;
               if (subtotalAmount > this.maxPrice) {
                   subtotalAmount = this.maxPrice;
               }
               percentage = ((subtotalAmount * 100) / this.maxPrice);
               return percentage;
           }
       });
   });

Please check and let me know in case of any issue.

Answer 2

you can add below code in ur phtml file

Hi you can use below code

<script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "*": {
                            "component": "NameSpace_Module/js/product/view/jsfile",
                            "yourvariable": <?php echo $variableValue ?>

                        }
                     }
                }
            }
        }
    </script>

and you can access it in js as this.yourvariable

Please let me know if it helps you.