From e3aae30cc078e015abf4e910f1474fe8b73c7713 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 7 Jul 2022 09:52:08 +0000
Subject: [PATCH] [IMP] website_sale: provide a visual feedback changing
 filters

Prior to this commit no visual feedback was provided when, clicking a
filter or category, the page loads and redirect.

This commit reduces the products grid's opacity after clicking, proving
the user that his click triggered an action.

task-2907955

Part-of: odoo/odoo#98558
---
 addons/website_sale/static/src/js/website_sale.js           | 6 ++++--
 .../static/src/js/website_sale_category_link.js             | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 09fb03dc852..d2e28cb4630 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -743,6 +743,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
     _onChangeAttribute: function (ev) {
         if (!ev.isDefaultPrevented()) {
             ev.preventDefault();
+            this.el.querySelector('.o_wsale_products_grid_table_wrapper').classList.add('opacity-50');
             $(ev.currentTarget).closest("form").submit();
         }
     },
@@ -1166,9 +1167,9 @@ odoo.define('website_sale.price_range_option', function (require) {
 const publicWidget = require('web.public.widget');
 
 publicWidget.registry.multirangePriceSelector = publicWidget.Widget.extend({
-    selector: '#o_wsale_price_range_option',
+    selector: '.o_wsale_products_page',
     events: {
-        'newRangeValue input[type="range"]': '_onPriceRangeSelected',
+        'newRangeValue #o_wsale_price_range_option input[type="range"]': '_onPriceRangeSelected',
     },
 
     //----------------------------------------------------------------------
@@ -1190,6 +1191,7 @@ publicWidget.registry.multirangePriceSelector = publicWidget.Widget.extend({
         if (parseFloat(range.max) !== range.valueHigh) {
             search['max_price'] = range.valueHigh;
         }
+        this.el.querySelector('.o_wsale_products_grid_table_wrapper').classList.add('opacity-50');
         window.location.search = $.param(search);
     },
 });
diff --git a/addons/website_sale/static/src/js/website_sale_category_link.js b/addons/website_sale/static/src/js/website_sale_category_link.js
index 1163da0aa82..7e8a81fa394 100644
--- a/addons/website_sale/static/src/js/website_sale_category_link.js
+++ b/addons/website_sale/static/src/js/website_sale_category_link.js
@@ -3,12 +3,16 @@
 import * as publicWidget from 'web.public.widget'
 
 publicWidget.registry.ProductCategoriesLinks = publicWidget.Widget.extend({
-    selector: '.products_categories',
+    selector: '.o_wsale_products_page',
     events: {
         'click [data-link-href]': '_openLink',
     },
 
     _openLink: function (ev) {
+        const productsDiv = this.el.querySelector('.o_wsale_products_grid_table_wrapper');
+        if (productsDiv) {
+            productsDiv.classList.add('opacity-50');
+        }
         window.location.href = ev.currentTarget.getAttribute('data-link-href');
     },
 });