From 8ecb1e3083537aa2d2cd856bf71d05b91f09e89c Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 13 Jul 2022 12:09:13 +0000
Subject: [PATCH] [FIX] website, website_sale: update client action url on
 variant change

Before this commit, clicking on a different variant of a product from
the WebsitePreview client action introduced in [1] would not update the
browser's url.

This commit adds an event listener to update the browser url on hash
changes, as load events are currently handled.

The product variant buttons are directly changing the hash instead of
replacing the state of the history.

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-2687506

Part-of: odoo/odoo#95955
---
 .../website_preview/website_preview.js           | 16 +++++++++++-----
 .../website_sale/static/src/js/website_sale.js   |  6 +++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 891624571fe..1f84b1ea21c 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -187,16 +187,22 @@ export class WebsitePreview extends Component {
         return host !== window.location.host || (pathname && (backendRoutes.includes(pathname) || pathname.startsWith('/@/')));
     }
 
-    _onPageLoaded() {
-        this.iframe.el.contentWindow.addEventListener('beforeunload', this._onPageUnload.bind(this));
-
-        // This replaces the browser url (/web#action=website...) with
-        // the iframe's url (it is clearer for the user).
+    /**
+     * This replaces the browser url (/web#action=website...) with
+     * the iframe's url (it is clearer for the user).
+     */
+    _replaceBrowserUrl() {
         const currentUrl = new URL(this.iframe.el.contentDocument.location.href);
         currentUrl.pathname = `/@${currentUrl.pathname}`;
         this.currentTitle = this.iframe.el.contentDocument.title;
         history.replaceState({}, this.currentTitle, currentUrl.href);
         this.title.setParts({ action: this.currentTitle });
+    }
+
+    _onPageLoaded() {
+        this.iframe.el.contentWindow.addEventListener('beforeunload', this._onPageUnload.bind(this));
+        this._replaceBrowserUrl();
+        this.iframe.el.contentWindow.addEventListener('hashchange', this._replaceBrowserUrl.bind(this));
 
         this.websiteService.pageDocument = this.iframe.el.contentDocument;
 
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 6d25860a9af..514a88ef80e 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -326,7 +326,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
         var attributeIds = _.map($attributes, function (elem) {
             return $(elem).data('value_id');
         });
-        history.replaceState(undefined, undefined, '#attr=' + attributeIds.join(','));
+        window.location.hash = 'attr=' + attributeIds.join(',');
     },
     /**
      * Set the checked values active.
@@ -784,7 +784,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
                 }
             }
             if (dataValueIds.length) {
-                history.replaceState(undefined, undefined, `#attr=${dataValueIds.join(',')}`);
+                window.location.hash = `attr=${dataValueIds.join(',')}`;
             }
         }
         this._applyHash();
@@ -957,7 +957,7 @@ publicWidget.registry.websiteSaleCarouselProduct = publicWidget.Widget.extend({
     /**
      * Center the selected indicator to scroll the indicators list when it
      * overflows.
-     * 
+     *
      * @private
      * @param {Event} ev
      */