MAGETWO-43159: [Dev experience] Incorrect binding for cart().extra_actions

Author: Ievgen Shakhsuvarov

app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml

@@ -14,11 +14,11 @@
        data-bind="scope: 'minicart_content'">
         <span class="text"><?php /* @escapeNotVerified */ echo __('My Cart'); ?></span>
         <span class="counter qty empty"
-              data-bind="css: { empty: cart().summary_count == 0 }, blockLoader: isLoading">
-            <span class="counter-number"><!-- ko text: cart().summary_count --><!-- /ko --></span>
+              data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
+            <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
             <span class="counter-label">
-            <!-- ko if: cart().summary_count -->
-                <!-- ko text: cart().summary_count --><!-- /ko -->
+            <!-- ko if: getCartParam('summary_count') -->
+                <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
                 <!-- ko i18n: 'items' --><!-- /ko -->
             <!-- /ko -->
             </span>

app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js

@@ -7,8 +7,9 @@ define([
     'Magento_Customer/js/customer-data',
     'jquery',
     'ko',
+    'underscore',
     'sidebar'
-], function (Component, customerData, $, ko) {
+], function (Component, customerData, $, ko, _) {
     'use strict';
 
     var sidebarInitialized = false;
@@ -69,20 +70,29 @@ define([
 
     return Component.extend({
         shoppingCartUrl: window.checkout.shoppingCartUrl,
+        cart: {},
+
+        /**
+         * @override
+         */
         initialize: function () {
-            var self = this;
-            this._super();
-            this.cart = customerData.get('cart');
-            this.cart.subscribe(function () {
+            var self = this,
+                cartData = customerData.get('cart');
+
+            this.update(cartData());
+            cartData.subscribe(function (updatedCart) {
                 addToCartCalls--;
                 this.isLoading(addToCartCalls > 0);
                 sidebarInitialized = false;
+                this.update(updatedCart);
                 initSidebar();
             }, this);
             $('[data-block="minicart"]').on('contentLoading', function(event) {
                 addToCartCalls++;
                 self.isLoading(true);
             });
+
+            return this._super();
         },
         isLoading: ko.observable(false),
         initSidebar: initSidebar,
@@ -96,6 +106,36 @@ define([
         },
         getItemRenderer: function (productType) {
             return this.itemRenderer[productType] || 'defaultRenderer';
+        },
+
+        /**
+         * Update mini shopping cart content.
+         *
+         * @param {Object} updatedCart
+         * @returns void
+         */
+        update: function (updatedCart) {
+            _.each(updatedCart, function (value, key) {
+                if (!this.cart.hasOwnProperty(key)) {
+                    this.cart[key] = ko.observable();
+                }
+                this.cart[key](value);
+            }, this);
+        },
+
+        /**
+         * Get cart param by name.
+         * @param {String} name
+         * @returns {*}
+         */
+        getCartParam: function (name) {
+            if (!_.isUndefined(name)) {
+                if (!this.cart.hasOwnProperty(name)) {
+                    this.cart[name] = ko.observable();
+                }
+            }
+
+            return this.cart[name]();
         }
     });
 });

app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html

@@ -9,9 +9,9 @@
         <span class="text"><!-- ko i18n: 'My Cart' --><!-- /ko --></span>
         <span
             class="qty empty"
-            data-bind="css: { empty: cart().summary_count == 0 },
+            data-bind="css: { empty: !!getCartParam('summary_count') == false },
                        attr: { title: $t('Items in Cart') }">
-            <!-- ko text: cart().summary_count --><!-- /ko -->
+            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
         </span>
     </strong>
 </div>
@@ -25,18 +25,18 @@
         <span><!-- ko i18n: 'Close' --><!-- /ko --></span>
     </button>
 
-    <!-- ko if: cart().summary_count -->
+    <!-- ko if: getCartParam('summary_count') -->
         <div class="items-total">
-            <span class="count"><!-- ko text: cart().summary_count --><!-- /ko --></span>
-            <!-- ko if: cart().summary_count == 1 -->
+            <span class="count"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
+            <!-- ko if: getCartParam('summary_count') == 1 -->
                 <!-- ko i18n: 'item' --><!-- /ko -->
             <!-- /ko -->
-            <!-- ko if: cart().summary_count > 1 -->
+            <!-- ko if: getCartParam('summary_count') > 1 -->
                 <!-- ko i18n: 'items' --><!-- /ko -->
             <!-- /ko -->
         </div>
 
-        <!-- ko if: cart().possible_onepage_checkout -->
+        <!-- ko if: getCartParam('possible_onepage_checkout') -->
             <!-- ko foreach: getRegion('subtotalContainer') -->
                 <!-- ko template: getTemplate() --><!-- /ko -->
             <!-- /ko -->
@@ -46,7 +46,7 @@
             <!-- ko template: getTemplate() --><!-- /ko -->
         <!-- /ko -->
 
-        <!-- ko if: cart().possible_onepage_checkout -->
+        <!-- ko if: getCartParam('possible_onepage_checkout') -->
         <div class="actions">
             <div class="primary">
                 <button
@@ -56,29 +56,29 @@
                         data-bind="attr: {title: $t('Go to Checkout')}">
                     <!-- ko i18n: 'Go to Checkout' --><!-- /ko -->
                 </button>
-                <div data-bind="html: cart().extra_actions"></div>
+                <div data-bind="html: getCartParam('extra_actions')"></div>
             </div>
         </div>
         <!-- /ko -->
     <!-- /ko -->
 
-    <!-- ko if: cart().summary_count -->
+    <!-- ko if: getCartParam('summary_count') -->
     <strong class="subtitle"><!-- ko i18n: 'Recently added item(s)' --><!-- /ko --></strong>
     <div data-action="scroll" class="minicart-items-wrapper">
-        <ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: cart().items, as: 'item' }">
+        <ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartParam('items'), as: 'item' }">
             <!-- ko foreach: $parent.getRegion($parent.getItemRenderer(item.product_type)) -->
                 <!-- ko template: {name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}} --><!-- /ko -->
             <!-- /ko -->
         </ol>
     </div>
     <!-- /ko -->
 
-    <!-- ko ifnot: cart().summary_count -->
+    <!-- ko ifnot: getCartParam('summary_count') -->
         <strong class="subtitle empty" data-bind="visible: closeSidebar()">
             <!-- ko i18n: 'You have no items in your shopping cart.' --><!-- /ko -->
         </strong>
-        <!-- ko if: cart().cart_empty_message -->
-            <p class="minicart empty text"><!-- ko text: cart().cart_empty_message --><!-- /ko --></p>
+        <!-- ko if: getCartParam('cart_empty_message') -->
+            <p class="minicart empty text"><!-- ko text: getCartParam('cart_empty_message') --><!-- /ko --></p>
 
             <div class="actions">
                 <div class="secondary">
@@ -90,7 +90,7 @@
         <!-- /ko -->
     <!-- /ko -->
 
-    <!-- ko if: cart().summary_count -->
+    <!-- ko if: getCartParam('summary_count') -->
     <div class="actions">
         <div class="secondary">
             <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">

app/code/Magento/Checkout/view/frontend/web/template/minicart/subtotal/totals.html

@@ -5,5 +5,5 @@
  */
 -->
 <div class="amount">
-    <span data-bind="html: cart().subtotal"></span>
+    <span data-bind="html: getCartParam('subtotal')"></span>
 </div>

app/code/Magento/Tax/view/frontend/web/template/checkout/minicart/subtotal/totals.html

@@ -11,11 +11,11 @@
             <span class="price-wrapper" data-bind="html: cart().subtotal_excl_tax"></span>
         <!-- /ko -->
 
-        <!-- ko if: !display_cart_subtotal_excl_tax && display_subtotal_incl_tax -->
+        <!-- ko if: !display_cart_subtotal_excl_tax && display_cart_subtotal_incl_tax -->
             <span class="price-wrapper" data-bind="html: cart().subtotal_incl_tax"></span>
         <!-- /ko -->
 
-        <!-- ko if: !display_cart_subtotal_excl_tax && !display_subtotal_incl_tax -->
+        <!-- ko if: !display_cart_subtotal_excl_tax && !display_cart_subtotal_incl_tax -->
             <span class="price-wrapper price-including-tax"
                   data-bind="attr: { 'data-label': $t('Incl. Tax') }, html: cart().subtotal_incl_tax">
             </span>