[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
This commit is contained in:
Younn Olivier
2022-07-18 18:41:28 +02:00
parent ffabf28360
commit 8ecb1e3083
2 changed files with 14 additions and 8 deletions
@@ -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;
@@ -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
*/