Lazy load related sales on the product edit page fixes #1883

craftcms · Nov 24, 2020 · 0c2f28e · 0c2f28e
1 parent 147e8dd
commit 0c2f28e
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Release Notes for Craft Commerce
 
+## Unreleased
+
+### Changed
+- Related sales are now populated on demand when the variant is visible on the Edit Product page. ([#1883](https://github.com/craftcms/commerce/issues/1883))
+
 ### Fixed
 - Fixed a bug where sending an email and downloading a pdf that's using twig template doesn't get the correct order locale. ([#1876](https://github.com/craftcms/commerce/issues/1876))
 

diff --git a/src/templates/products/_fields.html b/src/templates/products/_fields.html
@@ -242,6 +242,7 @@
     {%- import "_includes/forms" as forms -%}
     {% set output %}
         {% if not showAddAll %}
+            <div class="product-sales commerce-sales-spinner spinner" data-id="{{ id }}" data-loading="false"></div>
             <ul class="commerce-sales product-sales" data-id="{{ id }}"></ul>
             <div class="commerce-sales-buttons">
                 {# Add to existing sale #}

diff --git a/src/web/assets/editproduct/dist/js/CommerceProductEdit.js b/src/web/assets/editproduct/dist/js/CommerceProductEdit.js
@@ -14,20 +14,28 @@ Craft.Commerce.ProductEdit = Garnish.Base.extend({
     $salesList: null,
     $discountsList: null,
     salesListSelector: '.product-sales.commerce-sales',
+    spinnerSelector: '.product-sales.commerce-sales-spinner',
     discountListSelector: '.product-discounts.commerce-discounts',
     saleIdsByVariantId: {},
     discountIdsByVariantId: {},
     $container: null,
+    $window: null,
 
     init: function(settings) {
+        var _this = this;
         this.setSettings(settings, this.defaults);
         this.$container = $(this.settings.container);
+        this.$window = $(window);
 
         if (this.$container && this.$container.length) {
             // List sales
             this.$salesList = this.$container.find(this.salesListSelector);
             if (this.$salesList && this.$salesList.length) {
-                this.populateSalesList();
+                this.$window.scroll(function(ev) {
+                    _this.checkSalesInView();
+                });
+
+                _this.checkSalesInView();
             }
 
             this.$discountsList = this.$container.find(this.discountListSelector);
@@ -43,6 +51,25 @@ Craft.Commerce.ProductEdit = Garnish.Base.extend({
         }
     },
 
+    checkSalesInView: function() {
+        if (this.$salesList && this.$salesList.length) {
+            var _this = this;
+            this.$salesList.each(function(el) {
+                var $spinner = _this.$container.find(_this.spinnerSelector + '[data-id="' + $(this).data('id') + '"]');
+                if (!$spinner.hasClass('hidden') && !$spinner.data('loading')) {
+                    var top_of_element = $(this).offset().top;
+                    var bottom_of_element = $(this).offset().top + $(this).outerHeight();
+                    var bottom_of_screen = _this.$window.scrollTop() + _this.$window.innerHeight();
+                    var top_of_screen = _this.$window.scrollTop();
+
+                    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
+                        _this.populateSaleList($(this));
+                    }
+                }
+            });
+        }
+    },
+
     handleAddToSale: function(ev) {
         ev.preventDefault();
         var el = $(ev.target);
@@ -56,10 +83,27 @@ Craft.Commerce.ProductEdit = Garnish.Base.extend({
         });
     },
 
+    resetSales: function() {
+      var $spinners = this.$container.find(this.spinnerSelector);
+
+      if (this.$salesList && this.$salesList.length) {
+          this.$salesList.each(function() {
+              $(this).empty();
+          });
+      }
+
+      if ($spinners && $spinners.length) {
+          $spinners.each(function() {
+              $(this).removeClass('hidden');
+          });
+      }
+      this.checkSalesInView();
+    },
+
     createSalesModal: function(id, sales) {
         var data = {
             existingSaleIds: [],
-            onHide: $.proxy(this, 'populateSalesList')
+            onHide: $.proxy(this, 'resetSales')
         };
 
         if (id === 'all') {
@@ -71,36 +115,39 @@ Craft.Commerce.ProductEdit = Garnish.Base.extend({
 
         var salesModal = new Craft.Commerce.ProductSalesModal(sales, data);
     },
-    populateSalesList: function() {
-        if (this.$salesList && this.$salesList.length) {
-            var _this = this;
-            this.$salesList.each(function(el) {
-                var element = $(this);
-                var id = element.data('id');
-                var data = {
-                    id: id
-                };
 
-                element.empty();
+    populateSaleList: function(element) {
+        var _this = this;
+        var id = element.data('id');
+        var $spinner = _this.$container.find(_this.spinnerSelector + '[data-id="' + id + '"]');
+        var data = {
+            id: id
+        };
 
-                Craft.postActionRequest('commerce/sales/get-sales-by-purchasable-id', data, function(response) {
-                    if (response && response.success && response.sales.length) {
-                        for (var i = 0; i < response.sales.length; i++) {
-                            var sale = response.sales[i];
-                            if (_this.saleIdsByVariantId[id] === undefined) {
-                                _this.saleIdsByVariantId[id] = [];
-                            }
-                            _this.saleIdsByVariantId[id].push(sale.id);
+        $spinner.removeClass('hidden');
+        $spinner.data('loading', true);
 
-                            $('<li>\n' +
-                                '<a href="'+sale.cpEditUrl+'"><span>'+sale.name+'</span></a>\n' +
-                                '</li>').appendTo(element);
-                        }
+        element.empty();
+
+        Craft.postActionRequest('commerce/sales/get-sales-by-purchasable-id', data, function(response) {
+            $spinner.addClass('hidden');
+            $spinner.data('loading', false);
+            if (response && response.success && response.sales.length) {
+                for (var i = 0; i < response.sales.length; i++) {
+                    var sale = response.sales[i];
+                    if (_this.saleIdsByVariantId[id] === undefined) {
+                        _this.saleIdsByVariantId[id] = [];
                     }
-                });
-            });
-        }
+                    _this.saleIdsByVariantId[id].push(sale.id);
+
+                    $('<li>\n' +
+                        '<a href="'+sale.cpEditUrl+'"><span>'+sale.name+'</span></a>\n' +
+                        '</li>').appendTo(element);
+                }
+            }
+        });
     },
+
     populateDiscountList: function() {
         if (this.$discountsList && this.$discountsList.length) {
             var _this = this;