[IMP] website_sale: set product variants from search filter

In the shop when the product page is loaded, the variants are now selected
from search attributes if filter is applied.

Since we have a hash containing variants unique id in product url, we can
apply variants from search filter attributes in url instead of default ones.

+ fix filter style

Now:
When you filter in /shop the product on color black, and click on the product
desk (first variant in white), you are now redirected to the product with color
black selected

This commit closes #47117 and is related to #22982

task-2369420

closes odoo/odoo#61317

X-original-commit: 5064bfa85dcf35410ed0e0053b675debf6883484
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

addons/website_sale/static/src/js/website_sale.js

@@ -195,11 +195,10 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
     /**
      * @override
      */
-    start: function () {
-        var self = this;
-        var def = this._super.apply(this, arguments);
+    start() {
+        const def = this._super(...arguments);
 
-        this._applyHash();
+        this._applyHashFromSearch();
 
         _.each(this.$('div.js_product'), function (product) {
             $('input.js_product_change', product).first().trigger('change');
@@ -218,9 +217,9 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
 
         this._startZoom();
 
-        window.addEventListener('hashchange', function (e) {
-            self._applyHash();
-            self.triggerVariantChange($(self.el));
+        window.addEventListener('hashchange', () => {
+            this._applyHash();
+            this.triggerVariantChange(this.$el);
         });
 
         return def;
@@ -718,6 +717,27 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
         $('.toggle_summary_div').toggleClass('d-none');
         $('.toggle_summary_div').removeClass('d-xl-block');
     },
+    /**
+     * @private
+     */
+    _applyHashFromSearch() {
+        const params = $.deparam(window.location.search.slice(1));
+        if (params.attrib) {
+            const dataValueIds = [];
+            for (const attrib of [].concat(params.attrib)) {
+                const attribSplit = attrib.split('-');
+                const attribValueSelector = `.js_variant_change[name="ptal-${attribSplit[0]}"][value="${attribSplit[1]}"]`;
+                const attribValue = this.el.querySelector(attribValueSelector);
+                if (attribValue !== null) {
+                    dataValueIds.push(attribValue.dataset.value_id);
+                }
+            }
+            if (dataValueIds.length) {
+                history.replaceState(undefined, undefined, `#attr=${dataValueIds.join(',')}`);
+            }
+        }
+        this._applyHash();
+    },
 });
 
 publicWidget.registry.WebsiteSaleLayout = publicWidget.Widget.extend({

addons/website_sale/views/templates.xml

@@ -552,7 +552,7 @@
                                     <ul class="nav nav-pills flex-column">
                                         <t t-foreach="a.value_ids" t-as="v">
                                             <li class="nav-item">
-                                                <label style="margin: 0 20px;" t-attf-class="nav-link#{' active' if v.id in attrib_set else ''}">
+                                                <label style="padding: 0.25rem 0rem; margin: 0" t-attf-class="nav-link#{' active' if v.id in attrib_set else ''}">
                                                     <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id,v.id)" t-att-checked="'checked' if v.id in attrib_set else None" />
                                                     <span style="font-weight: normal" t-field="v.name" />
                                                 </label>