Magento 2 – Pass Variable from PHTML to JavaScript

javascriptmagento2phtmlvariables

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""

Best Answer

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.

Related Topic