From 0a79d9a90fc6c53d8d37257c07df5dd9ec068ffa Mon Sep 17 00:00:00 2001
From: fja-odoo <fja@odoo.com>
Date: Fri, 3 May 2019 16:27:28 +0000
Subject: [PATCH] [IMP] website_sale: change product url to include variants

Hash containing variants unique id added to the url.
In the shop when the product page is loaded, the variants are now
selected using this hash.
The product.product website_url is no longer the template's url, it is
now using the hash and will redirect you to the right product.

task-1958091
---
 addons/website_sale/models/product.py         |  8 ++++
 .../static/src/js/website_sale.js             | 48 +++++++++++++++++--
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/addons/website_sale/models/product.py b/addons/website_sale/models/product.py
index d78a2851025..3927b081295 100644
--- a/addons/website_sale/models/product.py
+++ b/addons/website_sale/models/product.py
@@ -430,6 +430,14 @@ class Product(models.Model):
 
     product_variant_image_ids = fields.One2many('product.image', 'product_variant_id', string="Extra Variant Images")
 
+    website_url = fields.Char('Website URL', compute='_compute_product_website_url', help='The full URL to access the document through the website.')
+
+    @api.depends('product_tmpl_id.website_url', 'attribute_value_ids')
+    def _compute_product_website_url(self):
+        for product in self:
+            attributes = ','.join(str(x) for x in product.attribute_value_ids.ids)
+            product.website_url = "%s#attr=%s" % (product.product_tmpl_id.website_url, attributes)
+
     @api.multi
     def website_publish_button(self):
         self.ensure_one()
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 17d868dff3c..78161683b78 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -169,11 +169,29 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
     start: function () {
         var def = this._super.apply(this, arguments);
 
+        var hash = window.location.hash.substring(1);
+        if (hash) {
+            var params = $.deparam(hash);
+            if (params['attr']) {
+                var attributeIds = params['attr'].split(',');
+                var $inputs = this.$('input.js_variant_change, select.js_variant_change option');
+                _.each(attributeIds, function (id) {
+                    var $toSelect = $inputs.filter('[data-value_id="' + id + '"]');
+                    if ($toSelect.is('input[type="radio"]')) {
+                        $toSelect.prop('checked', true);
+                    } else if ($toSelect.is('option')) {
+                        $toSelect.prop('selected', true);
+                    }
+                });
+                this._changeColorAttribute();
+            }
+        }
+
         _.each(this.$('div.js_product'), function (product) {
             $('input.js_product_change', product).first().trigger('change');
         });
 
-        // This has to be triggered to compute the "out of stock" feature
+        // This has to be triggered to compute the "out of stock" feature and the hash variant changes
         this.triggerVariantChange(this.$el);
 
         this.$('select[name="country_id"]').change();
@@ -209,6 +227,28 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * Sets the url hash from the selected product options.
+     *
+     * @private
+     */
+    _setUrlHash: function ($parent) {
+        var $attributes = $parent.find('input.js_variant_change:checked, select.js_variant_change option:selected');
+        var attributeIds = _.map($attributes, function (elem) {
+            return $(elem).data('value_id');
+        });
+        history.replaceState(undefined, undefined, '#attr=' + attributeIds.join(','));
+    },
+    /**
+     * Set the checked color active.
+     *
+     * @private
+     */
+    _changeColorAttribute: function () {
+        $('.css_attribute_color').removeClass("active")
+                                 .filter(':has(input:checked)')
+                                 .addClass("active");
+    },
     /**
      * @private
      */
@@ -607,9 +647,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
      * @param {Event} ev
      */
     _onChangeColorAttribute: function (ev) { // highlight selected color
-        $('.css_attribute_color').removeClass("active")
-                                 .filter(':has(input:checked)')
-                                 .addClass("active");
+        this._changeColorAttribute();
     },
     /**
      * @private
@@ -678,6 +716,8 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
             $el.attr('selected', $el.is(':selected'));
         });
 
+        this._setUrlHash($component);
+
         return VariantMixin.onChangeVariant.apply(this, arguments);
     },
     /**