Merge branch 'shopping-cart' into checkout

Author: Olexii Korshenko

app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js

@@ -4,8 +4,9 @@
  */
 define([
     'jquery',
+    'mage/translate',
     'jquery/ui'
-], function($) {
+], function($, $t) {
     "use strict";
 
     $.widget('mage.catalogAddToCart', {
@@ -16,7 +17,13 @@ define([
             bindSubmit: true,
             minicartSelector: '[data-block="minicart"]',
             messagesSelector: '[data-placeholder="messages"]',
-            productStatusSelector: '.stock.available'
+            productStatusSelector: '.stock.available',
+            addToCartButtonSelector: '.action.tocart',
+            addToCartButtonDisabledClass: 'disabled',
+            addToCartButtonTextWhileAdding: $t('Adding...'),
+            addToCartButtonTextAdded: $t('Added'),
+            addToCartButtonTextDefault: $t('Add to Cart')
+
         },
 
         _create: function() {
@@ -49,6 +56,9 @@ define([
 
         ajaxSubmit: function(form) {
             var self = this;
+            $(self.options.minicartSelector).trigger('contentLoading');
+            self.disableAddToCartButton(form);
+
             $.ajax({
                 url: form.attr('action'),
                 data: form.serialize(),
@@ -82,8 +92,30 @@ define([
                             .find('span')
                             .html(res.product.statusText);
                     }
+                    self.enableAddToCartButton(form);
                 }
             });
+        },
+
+        disableAddToCartButton: function(form) {
+            var addToCartButton = $(form).find(this.options.addToCartButtonSelector);
+            addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
+            addToCartButton.attr('title', this.options.addToCartButtonTextWhileAdding);
+            addToCartButton.find('span').text(this.options.addToCartButtonTextWhileAdding);
+        },
+
+        enableAddToCartButton: function(form) {
+            var self = this,
+                addToCartButton = $(form).find(this.options.addToCartButtonSelector);
+
+            addToCartButton.find('span').text(this.options.addToCartButtonTextAdded);
+            addToCartButton.attr('title', this.options.addToCartButtonTextAdded);
+
+            setTimeout(function() {
+                addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
+                addToCartButton.find('span').text(self.options.addToCartButtonTextDefault);
+                addToCartButton.attr('title', self.options.addToCartButtonTextDefault);
+            }, 1000);
         }
     });
 

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

@@ -9,12 +9,12 @@
 /** @var $block \Magento\Checkout\Block\Cart\Sidebar */
 ?>
 
-<div data-block="minicart" class="minicart-wrapper" >
+<div data-block="minicart" class="minicart-wrapper">
     <a class="action showcart" href="<?php echo $block->getShoppingCartUrl(); ?>"
        data-bind="scope: 'minicart_content'">
         <span class="text"><?php echo __('My Cart'); ?></span>
         <span class="counter qty empty"
-              data-bind="css: { empty: cart().summary_count == 0 }">
+              data-bind="css: { empty: cart().summary_count == 0 }, blockLoader: isLoading">
             <span class="counter-number"><!-- ko text: cart().summary_count --><!-- /ko --></span>
             <span class="counter-label">
             <!-- ko if: cart().summary_count -->

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

@@ -12,6 +12,7 @@ define([
     'use strict';
 
     var sidebarInitialized = false;
+    var addToCartCalls = 0;
     url.setBaseUrl(window.checkout.baseUrl);
 
     function initSidebar() {
@@ -57,12 +58,20 @@ define([
     return Component.extend({
         shoppingCartUrl: window.checkout.shoppingCartUrl,
         initialize: function () {
+            var self = this;
             this._super();
             this.cart = customerData.get('cart');
             this.cart.subscribe(function () {
+                addToCartCalls--;
+                this.isLoading(addToCartCalls > 0);
                 sidebarInitialized = false;
+            }, this);
+            $('[data-block="minicart"]').on('contentLoading', function(event) {
+                addToCartCalls++;
+                self.isLoading(true);
             });
         },
+        isLoading: ko.observable(false),
         initSidebar: ko.observable(initSidebar),
         closeSidebar: function(element) {
             var minicart = $('[data-block="minicart"]');