Skip to main content
4 of 4
added 4 characters in body
Aasim Goriya
  • 5.5k
  • 2
  • 28
  • 53

Magento 2: Pass variable from phtml to js

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

MichaelHa
  • 661
  • 1
  • 8
  • 24