From 8a85cb9ea48b0d25f38a8795c5e25f30cd5bb3f7 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 8 Aug 2018 18:33:35 +0200
Subject: [PATCH] [REF] website_sale, *: organize JS to use new system

* website_sale_comparison, website_sale_wishlist, website_sale_options
---
 .../static/src/js/website_sale.js             | 1114 ++++++++++-------
 .../static/src/js/website_sale_payment.js     |   21 +-
 .../static/src/js/website_sale_tracking.js    |  155 ++-
 .../static/src/js/website_sale_utils.js       |   57 +-
 .../static/src/js/website_sale_validate.js    |   65 +-
 .../static/src/js/website_sale_comparison.js  |  256 ++--
 .../static/src/js/website_sale.js             |  210 ++--
 .../static/src/js/website_sale_wishlist.js    |  288 +++--
 8 files changed, 1286 insertions(+), 880 deletions(-)

diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index dbd1b23bd5f..6f91dd8ca67 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -1,513 +1,689 @@
 odoo.define('website_sale.cart', function (require) {
-    "use strict";
+'use strict';
 
-    require('web.dom_ready');
-    var core = require('web.core');
-    var _t = core._t;
+var sAnimations = require('website.content.snippets.animation');
+var core = require('web.core');
+var _t = core._t;
 
-    var shopping_cart_link = $('ul#top_menu li a[href$="/shop/cart"]');
-    var shopping_cart_link_counter;
-    shopping_cart_link.popover({
-        trigger: 'manual',
-        animation: true,
-        html: true,
-        title: function () {
-            return _t("My Cart");
-        },
-        container: 'body',
-        placement: 'auto',
-        template: '<div class="popover mycart-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
-    }).on("mouseenter",function () {
+var timeout;
+
+sAnimations.registry.websiteSaleCartLink = sAnimations.Class.extend({
+    selector: '#top_menu a[href$="/shop/cart"]',
+    read_events: {
+        'mouseenter': '_onMouseEnter',
+        'mouseleave': '_onMouseLeave',
+    },
+
+    /**
+     * @override
+     */
+    start: function () {
+        var def = this._super.apply(this, arguments);
+        if (this.editableMode) {
+            return def;
+        }
+
+        this.$el.popover({
+            trigger: 'manual',
+            animation: true,
+            html: true,
+            title: function () {
+                return _t("My Cart");
+            },
+            container: 'body',
+            placement: 'auto',
+            template: '<div class="popover mycart-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+        });
+        return def;
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onMouseEnter: function (ev) {
         var self = this;
-        clearTimeout(shopping_cart_link_counter);
-        shopping_cart_link.not(self).popover('hide');
-        shopping_cart_link_counter = setTimeout(function(){
-            if($(self).is(':hover') && !$(".mycart-popover:visible").length)
-            {
-                $.get("/shop/cart", {'type': 'popover'})
-                    .then(function (data) {
-                        $(self).data("bs.popover").options.content =  data;
-                        $(self).popover("show");
-                        $(".popover").on("mouseleave", function () {
-                            $(self).trigger('mouseleave');
-                        });
-                    });
+        clearTimeout(timeout);
+        $(this.selector).not(ev.currentTarget).popover('hide');
+        timeout = setTimeout(function () {
+            if (!self.$el.is(':hover') || $('.mycart-popover:visible').length) {
+                return;
             }
+            $.get("/shop/cart", {
+                type: 'popover',
+            }).then(function (data) {
+                self.$el.data("bs.popover").config.content = data;
+                self.$el.popover("show");
+                $('.popover').on('mouseleave', function () {
+                    self.$el.trigger('mouseleave');
+                });
+            });
         }, 100);
-    }).on("mouseleave", function () {
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onMouseLeave: function (ev) {
         var self = this;
         setTimeout(function () {
-            if (!$(".popover:hover").length) {
-                if(!$(self).is(':hover')) {
-                   $(self).popover('hide');
-                }
+            if ($('.popover:hover').length) {
+                return;
+            }
+            if (!self.$el.is(':hover')) {
+               self.$el.popover('hide');
             }
         }, 1000);
-    });
+    },
+});
 });
 
 odoo.define('website_sale.website_sale_category', function (require) {
-    "use strict";
+'use strict';
 
-    require('web.dom_ready');
+var sAnimations = require('website.content.snippets.animation');
 
-    if(!$('#o_shop_collapse_category').length) {
-        return $.Deferred().reject("DOM doesn't contain '#o_shop_collapse_category'");
-    }
+sAnimations.registry.websiteSaleCategory = sAnimations.Class.extend({
+    selector: '#o_shop_collapse_category',
+    read_events: {
+        'click .fa-chevron-right': '_onOpenClick',
+        'click .fa-chevron-down': '_onCloseClick',
+    },
 
-    $('#o_shop_collapse_category').on('click', '.fa-chevron-right',function(){
-        $(this).parent().siblings().find('.fa-chevron-down:first').click();
-        $(this).parents('li').find('ul:first').show('normal');
-        $(this).toggleClass('fa-chevron-down fa-chevron-right');
-    });
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
 
-    $('#o_shop_collapse_category').on('click', '.fa-chevron-down',function(){
-        $(this).parent().find('ul:first').hide('normal');
-        $(this).toggleClass('fa-chevron-down fa-chevron-right');
-    });
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onOpenClick: function (ev) {
+        var $fa = $(ev.currentTarget);
+        $fa.parent().siblings().find('.fa-chevron-down:first').click();
+        $fa.parents('li').find('ul:first').show('normal');
+        $fa.toggleClass('fa-chevron-down fa-chevron-right');
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onCloseClick: function (ev) {
+        var $fa = $(ev.currentTarget);
+        $fa.parent().find('ul:first').hide('normal');
+        $fa.toggleClass('fa-chevron-down fa-chevron-right');
+    },
+});
 });
 
 odoo.define('website_sale.website_sale', function (require) {
-    "use strict";
+'use strict';
 
-    require('web.dom_ready');
-    var base = require("web_editor.base");
-    var ajax = require('web.ajax');
-    var utils = require('web.utils');
-    var core = require('web.core');
-    var config = require('web.config');
-    require("website.content.zoomodoo");
-    var _t = core._t;
+var utils = require('web.utils');
+var core = require('web.core');
+var config = require('web.config');
+var sAnimations = require('website.content.snippets.animation');
+require("website.content.zoomodoo");
 
-    if(!$('.oe_website_sale').length) {
-        return $.Deferred().reject("DOM doesn't contain '.oe_website_sale'");
-    }
+var _t = core._t;
 
-    $('.oe_website_sale').each(function () {
-        var oe_website_sale = this;
+sAnimations.registry.WebsiteSale = sAnimations.Class.extend({
+    selector: '.oe_website_sale',
+    read_events: {
+        'change input[name="add_qty"]': '_onChangeAddQuantity',
+        'mouseup .js_publish': '_onMouseupPublish',
+        'touchend .js_publish': '_onMouseupPublish',
+        'change .oe_cart input.js_quantity[data-product-id]': '_onChangeCartQuantity',
+        'click .oe_cart a.js_add_suggested_products': '_onClickSuggestedProduct',
+        'click a.js_add_cart_json': '_onClickAddCartJSON',
+        'click .a-submit': '_onClickSubmit',
+        'change form.js_attributes input, form.js_attributes select': '_onChangeAttribute',
+        'mouseup form.js_add_cart_json label': '_onMouseupAddCartLabel',
+        'touchend form.js_add_cart_json label': '_onMouseupAddCartLabel',
+        'change .css_attribute_color input': '_onChangeColorAttribute',
+        'change input.js_variant_change, select.js_variant_change, input.js_product_change, [data-attribute_value_ids]': '_onChangeVariant',
+        'click .show_coupon': '_onClickShowCoupon',
+        'submit .o_website_sale_search': '_onSubmitSaleSearch',
+        'change select[name="country_id"]': '_onChangeCountry',
+        'change #shipping_use_same': '_onChangeShippingUseSame',
+        'click .toggle_summary': '_onToggleSummary',
+    },
 
-        $(oe_website_sale).on("change", 'input[name="add_qty"]', function (event) {
-            var product_ids = [];
-            var product_dom = $(event.target).closest(".js_product").find(".js_add_cart_variants");
-            var qty = $(event.target).closest('form').find('input[name="add_qty"]').val();
-            var attribute_value_ids = product_dom.data("attribute_value_ids");
-            _.each(attribute_value_ids, function(entry) {
-                product_ids.push(entry[0]);
-            });
+    /**
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
 
-            if ($("#product_detail").length) {
-                // display the reduction from the pricelist in function of the quantity
-                ajax.jsonRpc("/shop/get_unit_price", 'call', {'product_ids': product_ids,'add_qty': parseInt(qty)})
-                .then(function (data) {
-                    var current = attribute_value_ids;
-                    for(var j=0; j < current.length; j++){
-                        current[j][2] = data[current[j][0]];
-                    }
-                    product_dom.trigger("change");
-                });
+        this._changeCartQuantity = _.debounce(this._changeCartQuantity.bind(this), 500);
+        this._changeCountry = _.debounce(this._changeCountry.bind(this), 500);
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        var def = this._super.apply(this, arguments);
+        if (this.editableMode) {
+            return def;
+        }
+
+        _.each(this.$('div.js_product'), function (product) {
+            $('input.js_product_change', product).first().trigger('change');
+        });
+
+        _.each(this.$('.js_add_cart_variants'), function (add_variant) {
+            $('input.js_variant_change, select.js_variant_change', add_variant).first().trigger('change');
+        });
+
+        this.$('select[name="country_id"]').change();
+
+        this.$('#checkbox_cgv').trigger('change');
+
+        core.bus.on('resize', this, function () {
+            if (config.device.size_class === config.device.SIZES.XL) {
+                $('.toggle_summary_div').addClass('d-none d-xl-block');
             }
         });
 
-        // change for css
-        $(oe_website_sale).on('mouseup touchend', '.js_publish', function (ev) {
-            $(ev.currentTarget).parents(".thumbnail").toggleClass("disabled");
+        // Do not activate image zoom for mobile devices, since it might prevent users from scrolling the page
+        if (!config.device.isMobile) {
+            var autoZoom = $('.ecom-zoomable').data('ecom-zoom-auto') || false,
+            factorZoom = parseFloat($('.ecom-zoomable').data('ecom-zoom-factor')) || 1.5,
+            attach = '#o-carousel-product';
+            _.each($('.ecom-zoomable img[data-zoom]'), function (el) {
+                onImageLoaded(el, function () {
+                    var $img = $(el);
+                    if (!_.str.endsWith(el.src, el.dataset.zoomImage) || // if zoom-img != img
+                        el.naturalWidth >= $(attach).width() * factorZoom || el.naturalHeight >= $(attach).height() * factorZoom) {
+                        $img.zoomOdoo({event: autoZoom ? 'mouseenter' : 'click', attach: attach});
+                    } else {
+                        $img.removeAttr('data-zoom');  // remove cursor
+                    }
+                });
+            });
+        }
+
+        function onImageLoaded(img, callback) {
+            $(img).on('load', function () { callback(); });
+            if (img.complete) {
+                $(img).off('load');
+                callback();
+            }
+        }
+
+        return def;
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _changeCartQuantity: function ($input, value, $dom_optional, line_id, productIDs) {
+        _.each($dom_optional, function (elem) {
+            $(elem).find('.js_quantity').text(value);
+            productIDs.push($(elem).find('span[data-product-id]').data('product-id'));
         });
+        $input.data('update_change', true);
 
-        var clickwatch = (function(){
-              var timer = 0;
-              return function(callback, ms){
-                clearTimeout(timer);
-                timer = setTimeout(callback, ms);
-              };
-        })();
-
-        $(oe_website_sale).on("change", ".oe_cart input.js_quantity[data-product-id]", function () {
-          var $input = $(this);
-            if ($input.data('update_change')) {
+        this._rpc({
+            route: "/shop/cart/update_json",
+            params: {
+                line_id: line_id,
+                product_id: parseInt($input.data('product-id'), 10),
+                set_qty: value
+            },
+        }).then(function (data) {
+            $input.data('update_change', false);
+            var check_value = parseInt($input.val() || 0, 10);
+            if (isNaN(check_value)) {
+                check_value = 1;
+            }
+            if (value !== check_value) {
+                $input.trigger('change');
                 return;
             }
-          var value = parseInt($input.val() || 0, 10);
-          if (isNaN(value)) {
-              value = 1;
-          }
-          var $dom = $(this).closest('tr');
-          //var default_price = parseFloat($dom.find('.text-danger > span.oe_currency_value').text());
-          var $dom_optional = $dom.nextUntil(':not(.optional_product.info)');
-          var line_id = parseInt($input.data('line-id'),10);
-          var product_ids = [parseInt($input.data('product-id'),10)];
-          clickwatch(function(){
-            $dom_optional.each(function(){
-                $(this).find('.js_quantity').text(value);
-                product_ids.push($(this).find('span[data-product-id]').data('product-id'));
-            });
-            $input.data('update_change', true);
-
-            ajax.jsonRpc("/shop/cart/update_json", 'call', {
-                'line_id': line_id,
-                'product_id': parseInt($input.data('product-id'), 10),
-                'set_qty': value
-            }).then(function (data) {
-                $input.data('update_change', false);
-                var check_value = parseInt($input.val() || 0, 10);
-                if (isNaN(check_value)) {
-                    check_value = 1;
-                }
-                if (value !== check_value) {
-                    $input.trigger('change');
-                    return;
-                }
-                var $q = $(".my_cart_quantity");
-                if (data.cart_quantity) {
-                    $q.parents('li:first').removeClass('d-none');
-                }
-                else {
-                    window.location = '/shop/cart';
-                }
-
-                $q.html(data.cart_quantity).hide().fadeIn(600);
-                $input.val(data.quantity);
-                $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).html(data.quantity);
-
-                $(".js_cart_lines").first().before(data['website_sale.cart_lines']).end().remove();
-                $(".js_cart_summary").first().before(data['website_sale.short_cart_summary']).end().remove();
-
-                if (data.warning) {
-                    var cart_alert = $('.oe_cart').parent().find('#data_warning');
-                    if (cart_alert.length === 0) {
-                        $('.oe_cart').prepend('<div class="alert alert-danger alert-dismissable" role="alert" id="data_warning">'+
-                                '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> ' + data.warning + '</div>');
-                    }
-                    else {
-                        cart_alert.html('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> ' + data.warning);
-                    }
-                    $input.val(data.quantity);
-                }
-            });
-          }, 500);
-        });
-
-        $(oe_website_sale).on("click", ".oe_cart a.js_add_suggested_products", function () {
-            $(this).prev('input').val(1).trigger('change');
-        });
-
-        // hack to add and remove from cart with json
-        $(oe_website_sale).on('click', 'a.js_add_cart_json', function (ev) {
-            ev.preventDefault();
-            var $link = $(ev.currentTarget);
-            var $input = $link.closest('.input-group').find("input");
-            var product_id = +$input.closest('*:has(input[name="product_id"])').find('input[name="product_id"]').val();
-            var min = parseFloat($input.data("min") || 0);
-            var max = parseFloat($input.data("max") || Infinity);
-            var quantity = ($link.has(".fa-minus").length ? -1 : 1) + parseFloat($input.val() || 0, 10);
-            var new_qty = quantity > min ? (quantity < max ? quantity : max) : min;
-            // if they are more of one input for this product (eg: option modal)
-            $('input[name="'+$input.attr("name")+'"]').add($input).filter(function () {
-                var $prod = $(this).closest('*:has(input[name="product_id"])');
-                return !$prod.length || +$prod.find('input[name="product_id"]').val() === product_id;
-            }).val(new_qty).change();
-            return false;
-        });
-
-        $('.oe_website_sale, #comment').off('click', '.a-submit').on('click', '.a-submit', function (event) {
-            if (!event.isDefaultPrevented() && !$(this).is(".disabled")) {
-                event.preventDefault();
-                $(this).closest('form').submit();
-            }
-            if ($(this).hasClass('a-submit-disable')){
-                $(this).addClass("disabled");
-            }
-            if ($(this).hasClass('a-submit-loading')){
-                var loading = '<span class="fa fa-cog fa-spin"/>';
-                var fa_span = $(this).find('span[class*="fa"]');
-                if (fa_span.length){
-                    fa_span.replaceWith(loading);
-                }
-                else{
-                    $(this).append(loading);
-                }
-            }
-        });
-        $('form.js_attributes input, form.js_attributes select', oe_website_sale).on('change', function (event) {
-            if (!event.isDefaultPrevented()) {
-                event.preventDefault();
-                $(this).closest("form").submit();
-            }
-        });
-
-        // change price when they are variants
-        $('form.js_add_cart_json label', oe_website_sale).on('mouseup touchend', function () {
-            var $label = $(this);
-            var $price = $label.parents("form:first").find(".oe_price .oe_currency_value");
-            if (!$price.data("price")) {
-                $price.data("price", parseFloat($price.text()));
-            }
-            var value = $price.data("price") + parseFloat($label.find(".badge span").text() || 0);
-
-            var dec = value % 1;
-            $price.html(value + (dec < 0.01 ? ".00" : (dec < 1 ? "0" : "") ));
-        });
-        // hightlight selected color
-        $('.css_attribute_color input', oe_website_sale).on('change', function () {
-            $('.css_attribute_color').removeClass("active");
-            $('.css_attribute_color:has(input:checked)').addClass("active");
-        });
-
-        function price_to_str(price) {
-            var l10n = _t.database.parameters;
-            var precision = 2;
-
-            if ($(".decimal_precision").length) {
-                precision = parseInt($(".decimal_precision").last().data('precision'));
-            }
-            var formatted = _.str.sprintf('%.' + precision + 'f', price).split('.');
-            formatted[0] = utils.insert_thousand_seps(formatted[0]);
-            return formatted.join(l10n.decimal_point);
-        }
-
-        function update_product_image(event_source, product_id) {
-            var $img;
-            if ($('#o-carousel-product').length) {
-                $img = $(event_source).closest('tr.js_product, .oe_website_sale').find('img.js_variant_img');
-                $img.attr("src", "/web/image/product.product/" + product_id + "/image");
-                $img.parent().attr('data-oe-model', 'product.product').attr('data-oe-id', product_id)
-                    .data('oe-model', 'product.product').data('oe-id', product_id);
-
-                var $thumbnail = $(event_source).closest('tr.js_product, .oe_website_sale').find('img.js_variant_img_small');
-                if ($thumbnail.length !== 0) { // if only one, thumbnails are not displayed
-                    $thumbnail.attr("src", "/web/image/product.product/" + product_id + "/image/90x90");
-                    $('.carousel').carousel(0);
-                }
+            var $q = $(".my_cart_quantity");
+            if (data.cart_quantity) {
+                $q.parents('li:first').removeClass('d-none');
             }
             else {
-                $img = $(event_source).closest('tr.js_product, .oe_website_sale').find('span[data-oe-model^="product."][data-oe-type="image"] img:first, img.product_detail_img');
-                $img.attr("src", "/web/image/product.product/" + product_id + "/image");
-                $img.parent().attr('data-oe-model', 'product.product').attr('data-oe-id', product_id)
-                    .data('oe-model', 'product.product').data('oe-id', product_id);
-            }
-            // reset zooming constructs
-            $img.filter('[data-zoom-image]').attr('data-zoom-image', $img.attr('src'));
-            if ($img.data('zoomOdoo') !== undefined) {
-                $img.data('zoomOdoo').isReady = false;
-            }
-        }
-
-        $(oe_website_sale).on('change', 'input.js_variant_change, select.js_variant_change, input.js_product_change, [data-attribute_value_ids]', function (ev) {
-            var $parent = $(ev.target).closest('.js_product');
-            var $ul = $parent.find('.js_add_cart_variants');
-            var $product_id = $parent.find('.product_id').first();
-            var $price = $parent.find(".oe_price:first .oe_currency_value");
-            var $default_price = $parent.find(".oe_default_price:first .oe_currency_value");
-            var $optional_price = $parent.find(".oe_optional:first .oe_currency_value");
-            var variant_ids = $ul.data("attribute_value_ids");
-            var values = [];
-            var unchanged_values = $parent.find('div.oe_unchanged_value_ids').data('unchanged_value_ids') || [];
-
-            $parent.find('input.js_variant_change:checked, select.js_variant_change').each(function () {
-                values.push(+$(this).val());
-            });
-            values =  values.concat(unchanged_values);
-            var list_variant_id = parseInt($parent.find('input.js_product_change:checked').val());
-
-            $parent.find("label").removeClass("text-muted css_not_available");
-
-            var product_id = false;
-            for (var k in variant_ids) {
-                if (_.isEmpty(_.difference(variant_ids[k][1], values)) ||
-                    variant_ids[k][0] === list_variant_id) {
-                    $.when(base.ready()).then(function() {
-                        $price.html(price_to_str(variant_ids[k][2]));
-                        $default_price.html(price_to_str(variant_ids[k][3]));
-                    });
-                    if (variant_ids[k][3]-variant_ids[k][2]>0.01) {
-                        $default_price.closest('.oe_website_sale').addClass("discount");
-                        $optional_price.closest('.oe_optional').show().css('text-decoration', 'line-through');
-                        $default_price.parent().removeClass('d-none');
-                    } else {
-                        $optional_price.closest('.oe_optional').hide();
-                        $default_price.parent().addClass('d-none');
-                    }
-                    product_id = variant_ids[k][0];
-                    update_product_image(this, product_id);
-                    break;
-                }
+                window.location = '/shop/cart';
             }
 
-            $parent.find("input.js_variant_change:radio, select.js_variant_change").each(function () {
-                var $input = $(this);
-                var id = +$input.val();
-                var values = [id];
+            $q.html(data.cart_quantity).hide().fadeIn(600);
+            $input.val(data.quantity);
+            $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).html(data.quantity);
 
-                $parent.find("ul:not(:has(input.js_variant_change[value='" + id + "'])) input.js_variant_change:checked, select.js_variant_change").each(function () {
-                    values.push(+$(this).val());
-                });
+            $(".js_cart_lines").first().before(data['website_sale.cart_lines']).end().remove();
+            $(".js_cart_summary").first().before(data['website_sale.short_cart_summary']).end().remove();
 
-                for (var k in variant_ids) {
-                    if (!_.difference(values, variant_ids[k][1]).length) {
-                        return;
-                    }
-                }
-                $input.closest("label").addClass("css_not_available");
-                $input.find("option[value='" + id + "']").addClass("css_not_available");
-            });
-
-            if (product_id) {
-                $parent.removeClass("css_not_available");
-                $product_id.val(product_id);
-                $parent.find("#add_to_cart").removeClass("disabled");
-            } else {
-                $parent.addClass("css_not_available");
-                $product_id.val(0);
-                $parent.find("#add_to_cart").addClass("disabled");
-            }
-        });
-
-        $('div.js_product', oe_website_sale).each(function () {
-            $('input.js_product_change', this).first().trigger('change');
-        });
-
-        $('.js_add_cart_variants', oe_website_sale).each(function () {
-            $('input.js_variant_change, select.js_variant_change', this).first().trigger('change');
-        });
-
-        $('.oe_website_sale').on('click', '.show_coupon', function(e) {
-            $(e.currentTarget).hide();
-            $('.coupon_form').removeClass('d-none');
-        });
-        $('.oe_cart').on('click', '.js_change_shipping', function() {
-          if (!$('body.editor_enable').length) { //allow to edit button text with editor
-            var $old = $('.all_shipping').find('.card.border_primary');
-            $old.find('.btn-ship').toggle();
-            $old.addClass('js_change_shipping');
-            $old.removeClass('border_primary');
-
-            var $new = $(this).parent('div.one_kanban').find('.card');
-            $new.find('.btn-ship').toggle();
-            $new.removeClass('js_change_shipping');
-            $new.addClass('border_primary');
-
-            var $form = $(this).parent('div.one_kanban').find('form.hide');
-            $.post($form.attr('action'), $form.serialize()+'&xhr=1');
-          }
-        });
-        $('.oe_cart').on('click', '.js_edit_address', function (ev) {
-            ev.preventDefault();
-            $(this).closest('div.one_kanban').find('form.d-none').attr('action', '/shop/address').submit();
-        });
-        $('.oe_cart').on('click', '.js_delete_product', function(e) {
-            e.preventDefault();
-            $(this).closest('tr').find('.js_quantity').val(0).trigger('change');
-        });
-
-        if ($('.oe_website_sale .dropdown_sorty_by').length) {
-            // this method allow to keep current get param from the action, with new search query
-            $('.oe_website_sale .o_website_sale_search').on('submit', function (event) {
-                var $this = $(this);
-                if (!event.isDefaultPrevented() && !$this.is(".disabled")) {
-                    event.preventDefault();
-                    var oldurl = $this.attr('action');
-                    oldurl += (oldurl.indexOf("?")===-1) ? "?" : "";
-                    var search = $this.find('input.search-query');
-                    window.location = oldurl + '&' + search.attr('name') + '=' + encodeURIComponent(search.val());
-                }
-            });
-        }
-
-        if ($(".checkout_autoformat").length) {
-            $(oe_website_sale).on('change', "select[name='country_id']", function () {
-                clickwatch(function() {
-                    if ($("#country_id").val()) {
-                        ajax.jsonRpc("/shop/country_infos/" + $("#country_id").val(), 'call', {mode: 'shipping'}).then(
-                            function(data) {
-                                // placeholder phone_code
-                                //$("input[name='phone']").attr('placeholder', data.phone_code !== 0 ? '+'+ data.phone_code : '');
-
-                                // populate states and display
-                                var selectStates = $("select[name='state_id']");
-                                // dont reload state at first loading (done in qweb)
-                                if (selectStates.data('init')===0 || selectStates.find('option').length===1) {
-                                    if (data.states.length) {
-                                        selectStates.html('');
-                                        _.each(data.states, function(x) {
-                                            var opt = $('<option>').text(x[1])
-                                                .attr('value', x[0])
-                                                .attr('data-code', x[2]);
-                                            selectStates.append(opt);
-                                        });
-                                        selectStates.parent('div').show();
-                                    }
-                                    else {
-                                        selectStates.val('').parent('div').hide();
-                                    }
-                                    selectStates.data('init', 0);
-                                }
-                                else {
-                                    selectStates.data('init', 0);
-                                }
-
-                                // manage fields order / visibility
-                                if (data.fields) {
-                                    if ($.inArray('zip', data.fields) > $.inArray('city', data.fields)){
-                                        $(".div_zip").before($(".div_city"));
-                                    }
-                                    else {
-                                        $(".div_zip").after($(".div_city"));
-                                    }
-                                    var all_fields = ["street", "zip", "city", "country_name"]; // "state_code"];
-                                    _.each(all_fields, function(field) {
-                                        $(".checkout_autoformat .div_" + field.split('_')[0]).toggle($.inArray(field, data.fields)>=0);
-                                    });
-                                }
-                            }
-                        );
-                    }
-                }, 500);
-            });
-        }
-        $("select[name='country_id']").change();
-    });
-    if ($('#checkbox_cgv').length) {
-        $('#checkbox_cgv').trigger('change');
-    }
-    $('#shipping_use_same').on('change', function(e) {
-        $('.ship_to_other').toggle(!$(e.currentTarget).prop('checked'));
-    });
-
-    $('.toggle_summary').on('click', function(e) {
-        $('.toggle_summary_div').toggleClass('d-none');
-        $('.toggle_summary_div').removeClass('d-none d-xl-block');
-    });
-
-    core.bus.on('resize', this, function() {
-        if (config.device.size_class === config.device.SIZES.XL) {
-            $('.toggle_summary_div').addClass('d-none d-xl-block');
-        }
-    });
-
-    function onImageLoaded(img, callback) {
-        $(img).on('load', function() { callback(); });
-        if (img.complete) {
-            $(img).off('load');
-            callback();
-        }
-    }
-
-    // Do not activate image zoom for mobile devices, since it might prevent users from scrolling the page
-    if (!config.device.isMobile) {
-        var autoZoom = $('.ecom-zoomable').data('ecom-zoom-auto') || false,
-        factorZoom = parseFloat($('.ecom-zoomable').data('ecom-zoom-factor')) || 1.5,
-        attach = '#o-carousel-product';
-        _.each($('.ecom-zoomable img[data-zoom]'), function (el) {
-            onImageLoaded(el, function() {
-                var $img = $(el);
-                if (!_.str.endsWith(el.src, el.dataset.zoomImage) || // if zoom-img != img
-                    el.naturalWidth >= $(attach).width() * factorZoom || el.naturalHeight >= $(attach).height() * factorZoom) {
-                    $img.zoomOdoo({event: autoZoom ? 'mouseenter' : 'click', attach: attach});
+            if (data.warning) {
+                var cart_alert = $('.oe_cart').parent().find('#data_warning');
+                if (cart_alert.length === 0) {
+                    $('.oe_cart').prepend('<div class="alert alert-danger alert-dismissable" role="alert" id="data_warning">'+
+                            '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> ' + data.warning + '</div>');
                 }
                 else {
-                    $img.removeAttr('data-zoom');  // remove cursor
+                    cart_alert.html('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> ' + data.warning);
                 }
-            });
+                $input.val(data.quantity);
+            }
         });
-    }
+    },
+    /**
+     * @private
+     */
+    _changeCountry: function () {
+        if (!$("#country_id").val()) {
+            return;
+        }
+        this._rpc({
+            route: "/shop/country_infos/" + $("#country_id").val(),
+            params: {
+                mode: 'shipping',
+            },
+        }).then(function (data) {
+            // placeholder phone_code
+            //$("input[name='phone']").attr('placeholder', data.phone_code !== 0 ? '+'+ data.phone_code : '');
 
+            // populate states and display
+            var selectStates = $("select[name='state_id']");
+            // dont reload state at first loading (done in qweb)
+            if (selectStates.data('init')===0 || selectStates.find('option').length===1) {
+                if (data.states.length) {
+                    selectStates.html('');
+                    _.each(data.states, function (x) {
+                        var opt = $('<option>').text(x[1])
+                            .attr('value', x[0])
+                            .attr('data-code', x[2]);
+                        selectStates.append(opt);
+                    });
+                    selectStates.parent('div').show();
+                } else {
+                    selectStates.val('').parent('div').hide();
+                }
+                selectStates.data('init', 0);
+            } else {
+                selectStates.data('init', 0);
+            }
+
+            // manage fields order / visibility
+            if (data.fields) {
+                if ($.inArray('zip', data.fields) > $.inArray('city', data.fields)){
+                    $(".div_zip").before($(".div_city"));
+                } else {
+                    $(".div_zip").after($(".div_city"));
+                }
+                var all_fields = ["street", "zip", "city", "country_name"]; // "state_code"];
+                _.each(all_fields, function (field) {
+                    $(".checkout_autoformat .div_" + field.split('_')[0]).toggle($.inArray(field, data.fields)>=0);
+                });
+            }
+        });
+    },
+    /**
+     * @private
+     */
+    _priceToStr: function (price) {
+        var l10n = _t.database.parameters;
+        var precision = 2;
+
+        if ($(".decimal_precision").length) {
+            precision = parseInt($(".decimal_precision").last().data('precision'));
+        }
+        var formatted = _.str.sprintf('%.' + precision + 'f', price).split('.');
+        formatted[0] = utils.insert_thousand_seps(formatted[0]);
+        return formatted.join(l10n.decimal_point);
+    },
+    /**
+     * @private
+     */
+    _updateProductImage: function ($productContainer, product_id) {
+        var $img;
+        if ($('#o-carousel-product').length) {
+            $img = $productContainer.find('img.js_variant_img');
+            $img.attr("src", "/web/image/product.product/" + product_id + "/image");
+            $img.parent().attr('data-oe-model', 'product.product').attr('data-oe-id', product_id)
+                .data('oe-model', 'product.product').data('oe-id', product_id);
+
+            var $thumbnail = $productContainer.find('img.js_variant_img_small');
+            if ($thumbnail.length !== 0) { // if only one, thumbnails are not displayed
+                $thumbnail.attr("src", "/web/image/product.product/" + product_id + "/image/90x90");
+                $('.carousel').carousel(0);
+            }
+        }
+        else {
+            $img = $productContainer.find('span[data-oe-model^="product."][data-oe-type="image"] img:first, img.product_detail_img');
+            $img.attr("src", "/web/image/product.product/" + product_id + "/image");
+            $img.parent().attr('data-oe-model', 'product.product').attr('data-oe-id', product_id)
+                .data('oe-model', 'product.product').data('oe-id', product_id);
+        }
+        // reset zooming constructs
+        $img.filter('[data-zoom-image]').attr('data-zoom-image', $img.attr('src'));
+        if ($img.data('zoomOdoo') !== undefined) {
+            $img.data('zoomOdoo').isReady = false;
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeAddQuantity: function (ev) {
+        var productIDs = [];
+        var $addVariant = $(ev.currentTarget).closest(".js_product").find(".js_add_cart_variants");
+        var qty = $(ev.currentTarget).closest('form').find('input[name="add_qty"]').val();
+        var attributeValueIDs = $addVariant.data("attribute_value_ids");
+        _.each(attributeValueIDs, function (entry) {
+            productIDs.push(entry[0]);
+        });
+
+        if ($("#product_detail").length) {
+            // display the reduction from the pricelist in function of the quantity
+            this._rpc({
+                route: '/shop/get_unit_price',
+                params: {
+                    product_ids: productIDs,
+                    add_qty: parseInt(qty),
+                },
+            }).then(function (data) {
+                var current = attributeValueIDs;
+                for (var j = 0 ; j < current.length ; j++) {
+                    current[j][2] = data[current[j][0]];
+                }
+                $addVariant.trigger('change');
+            });
+        }
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onMouseupPublish: function (ev) {
+        $(ev.currentTarget).parents('.thumbnail').toggleClass('disabled');
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeCartQuantity: function (ev) {
+        var $input = $(ev.currentTarget);
+        if ($input.data('update_change')) {
+            return;
+        }
+        var value = parseInt($input.val() || 0, 10);
+        if (isNaN(value)) {
+            value = 1;
+        }
+        var $dom = $input.closest('tr');
+        // var default_price = parseFloat($dom.find('.text-danger > span.oe_currency_value').text());
+        var $dom_optional = $dom.nextUntil(':not(.optional_product.info)');
+        var line_id = parseInt($input.data('line-id'), 10);
+        var productIDs = [parseInt($input.data('product-id'), 10)];
+        this._changeCartQuantity($input, value, $dom_optional, line_id, productIDs);
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickSuggestedProduct: function (ev) {
+        $(ev.currentTarget).prev('input').val(1).trigger('change');
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickAddCartJSON: function (ev) { // hack to add and remove from cart with json
+        ev.preventDefault();
+        var $link = $(ev.currentTarget);
+        var $input = $link.closest('.input-group').find("input");
+        var product_id = +$input.closest('*:has(input[name="product_id"])').find('input[name="product_id"]').val();
+        var min = parseFloat($input.data("min") || 0);
+        var max = parseFloat($input.data("max") || Infinity);
+        var quantity = ($link.has(".fa-minus").length ? -1 : 1) + parseFloat($input.val() || 0, 10);
+        var new_qty = quantity > min ? (quantity < max ? quantity : max) : min;
+        // if they are more of one input for this product (eg: option modal)
+        $('input[name="'+$input.attr("name")+'"]').add($input).filter(function () {
+            var $prod = $(this).closest('*:has(input[name="product_id"])');
+            return !$prod.length || +$prod.find('input[name="product_id"]').val() === product_id;
+        }).val(new_qty).change();
+        return false;
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickSubmit: function (ev) {
+        var $aSubmit = $(ev.currentTarget);
+        if (!ev.isDefaultPrevented() && !$aSubmit.is(".disabled")) {
+            ev.preventDefault();
+            $aSubmit.closest('form').submit();
+        }
+        if ($aSubmit.hasClass('a-submit-disable')){
+            $aSubmit.addClass("disabled");
+        }
+        if ($aSubmit.hasClass('a-submit-loading')){
+            var loading = '<span class="fa fa-cog fa-spin"/>';
+            var fa_span = $aSubmit.find('span[class*="fa"]');
+            if (fa_span.length){
+                fa_span.replaceWith(loading);
+            } else {
+                $aSubmit.append(loading);
+            }
+        }
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeAttribute: function (ev) {
+        if (!ev.isDefaultPrevented()) {
+            ev.preventDefault();
+            $(ev.currentTarget).closest("form").submit();
+        }
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onMouseupAddCartLabel: function (ev) { // change price when they are variants
+        var $label = $(ev.currentTarget);
+        var $price = $label.parents("form:first").find(".oe_price .oe_currency_value");
+        if (!$price.data("price")) {
+            $price.data("price", parseFloat($price.text()));
+        }
+        var value = $price.data("price") + parseFloat($label.find(".badge span").text() || 0);
+
+        var dec = value % 1;
+        $price.html(value + (dec < 0.01 ? ".00" : (dec < 1 ? "0" : "") ));
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeColorAttribute: function (ev) { // highlight selected color
+        $('.css_attribute_color').removeClass("active")
+                                 .filter(':has(input:checked)')
+                                 .addClass("active");
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeVariant: function (ev) {
+        var $parent = $(ev.target).closest('.js_product');
+        var $ul = $parent.find('.js_add_cart_variants');
+        var $product_id = $parent.find('.product_id').first();
+        var $price = $parent.find(".oe_price:first .oe_currency_value");
+        var $default_price = $parent.find(".oe_default_price:first .oe_currency_value");
+        var $optional_price = $parent.find(".oe_optional:first .oe_currency_value");
+        var variant_ids = $ul.data("attribute_value_ids");
+        var values = [];
+        var unchanged_values = $parent.find('div.oe_unchanged_value_ids').data('unchanged_value_ids') || [];
+
+        _.each($parent.find('input.js_variant_change:checked, select.js_variant_change'), function (el) {
+            values.push(+$(el).val());
+        });
+        values = values.concat(unchanged_values);
+        var list_variant_id = parseInt($parent.find('input.js_product_change:checked').val());
+
+        $parent.find("label").removeClass("text-muted css_not_available");
+
+        var product_id = false;
+        for (var k in variant_ids) {
+            if (_.isEmpty(_.difference(variant_ids[k][1], values)) || variant_ids[k][0] === list_variant_id) {
+                $price.html(this._priceToStr(variant_ids[k][2]));
+                $default_price.html(this._priceToStr(variant_ids[k][3]));
+                if (variant_ids[k][3]-variant_ids[k][2]>0.01) {
+                    $default_price.closest('.oe_website_sale').addClass("discount");
+                    $optional_price.closest('.oe_optional').show().css('text-decoration', 'line-through');
+                    $default_price.parent().removeClass('d-none');
+                } else {
+                    $optional_price.closest('.oe_optional').hide();
+                    $default_price.parent().addClass('d-none');
+                }
+                product_id = variant_ids[k][0];
+                this._updateProductImage($(ev.currentTarget).closest('tr.js_product, .oe_website_sale'), product_id);
+                break;
+            }
+        }
+
+        _.each($parent.find("input.js_variant_change:radio, select.js_variant_change"), function (elem) {
+            var $input = $(elem);
+            var id = +$input.val();
+            var values = [id];
+
+            _.each($parent.find("ul:not(:has(input.js_variant_change[value='" + id + "'])) input.js_variant_change:checked, select.js_variant_change"), function (elem) {
+                values.push(+$(elem).val());
+            });
+
+            for (var k in variant_ids) {
+                if (!_.difference(values, variant_ids[k][1]).length) {
+                    return;
+                }
+            }
+            $input.closest("label").addClass("css_not_available");
+            $input.find("option[value='" + id + "']").addClass("css_not_available");
+        });
+
+        if (product_id) {
+            $parent.removeClass("css_not_available");
+            $product_id.val(product_id);
+            $parent.find("#add_to_cart").removeClass("disabled");
+        } else {
+            $parent.addClass("css_not_available");
+            $product_id.val(0);
+            $parent.find("#add_to_cart").addClass("disabled");
+        }
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickShowCoupon: function (ev) {
+        $(ev.currentTarget).hide();
+        $('.coupon_form').removeClass('d-none');
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onSubmitSaleSearch: function (ev) {
+        if (!this.$('.dropdown_sorty_by').length) {
+            return;
+        }
+        var $this = $(ev.currentTarget);
+        if (!ev.isDefaultPrevented() && !$this.is(".disabled")) {
+            ev.preventDefault();
+            var oldurl = $this.attr('action');
+            oldurl += (oldurl.indexOf("?")===-1) ? "?" : "";
+            var search = $this.find('input.search-query');
+            window.location = oldurl + '&' + search.attr('name') + '=' + encodeURIComponent(search.val());
+        }
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeCountry: function (ev) {
+        if (!this.$('.checkout_autoformat').length) {
+            return;
+        }
+        this._changeCountry();
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeShippingUseSame: function (ev) {
+        $('.ship_to_other').toggle(!$(ev.currentTarget).prop('checked'));
+    },
+    /**
+     * @private
+     */
+    _onToggleSummary: function () {
+        $('.toggle_summary_div').toggleClass('d-none');
+        $('.toggle_summary_div').removeClass('d-none d-xl-block');
+    },
+});
+
+
+sAnimations.registry.websiteSaleCart = sAnimations.Class.extend({
+    selector: '.oe_website_sale .oe_cart',
+    read_events: {
+        'click .js_change_shipping': '_onClickChangeShipping',
+        'click .js_edit_address': '_onClickEditAddress',
+        'click .js_delete_product': '_onClickDeleteProduct',
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickChangeShipping: function (ev) {
+        var $old = $('.all_shipping').find('.card.border_primary');
+        $old.find('.btn-ship').toggle();
+        $old.addClass('js_change_shipping');
+        $old.removeClass('border_primary');
+
+        var $new = $(ev.currentTarget).parent('div.one_kanban').find('.card');
+        $new.find('.btn-ship').toggle();
+        $new.removeClass('js_change_shipping');
+        $new.addClass('border_primary');
+
+        var $form = $(ev.currentTarget).parent('div.one_kanban').find('form.hide');
+        $.post($form.attr('action'), $form.serialize()+'&xhr=1');
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickEditAddress: function (ev) {
+        ev.preventDefault();
+        $(ev.currentTarget).closest('div.one_kanban').find('form.d-none').attr('action', '/shop/address').submit();
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickDeleteProduct: function (ev) {
+        ev.preventDefault();
+        $(ev.currentTarget).closest('tr').find('.js_quantity').val(0).trigger('change');
+    },
+});
 });
diff --git a/addons/website_sale/static/src/js/website_sale_payment.js b/addons/website_sale/static/src/js/website_sale_payment.js
index a3c2816da1c..45373cea37a 100644
--- a/addons/website_sale/static/src/js/website_sale_payment.js
+++ b/addons/website_sale/static/src/js/website_sale_payment.js
@@ -1,14 +1,15 @@
 odoo.define('website_sale.payment', function (require) {
-"use strict";
+'use strict';
 
-$(document).ready(function () {
-    // If option is enable
-    if ($("#checkbox_cgv").length) {
-      $("#checkbox_cgv").change(function() {
-        $("button#o_payment_form_pay").prop("disabled", !this.checked);
-      });
-      $('#checkbox_cgv').trigger('change');
-    }
-});
+require('web.dom_ready');
 
+var $checkbox = $("#checkbox_cgv");
+if (!$checkbox.length) {
+    return;
+}
+
+$checkbox.on('change', function (ev) {
+    $('button#o_payment_form_pay').prop('disabled', !ev.target.checked);
+});
+$checkbox.change();
 });
diff --git a/addons/website_sale/static/src/js/website_sale_tracking.js b/addons/website_sale/static/src/js/website_sale_tracking.js
index fb7a095cce6..b2d51c1dc67 100644
--- a/addons/website_sale/static/src/js/website_sale_tracking.js
+++ b/addons/website_sale/static/src/js/website_sale_tracking.js
@@ -1,73 +1,118 @@
-odoo.define('website_sale.tracking', function(require) {
+odoo.define('website_sale.tracking', function (require) {
 
-var ajax = require('web.ajax');
+var sAnimations = require('website.content.snippets.animation');
 
-$(document).ready(function () {
+sAnimations.registry.websiteSaleTracking = sAnimations.Class.extend({
+    selector: '.oe_website_sale',
+    read_events: {
+        'click form[action="/shop/cart/update"] a.a-submit': '_onAddProductIntoCart',
+        'click a[href="/shop/checkout"]': '_onCheckoutStart',
+        'click div.oe_cart a[href^="/web?redirect"][href$="/shop/checkout"]': '_onCustomerSignin',
+        'click form[action="/shop/confirm_order"] a.a-submit': '_onOrder',
+        'click form[target="_self"] button[type=submit]': '_onOrderPayment',
+    },
 
-    // Watching a product
-    if ($("#product_detail.oe_website_sale").length) {
-        var prod_id = $("input[name='product_id']").attr('value');
-        vpv("/stats/ecom/product_view/" + prod_id);
-    }
-
-    // Add a product into the cart
-    $(".oe_website_sale form[action='/shop/cart/update'] a.a-submit").on('click', function(o) {
-        var prod_id = $("input[name='product_id']").attr('value');
-        vpv("/stats/ecom/product_add_to_cart/" + prod_id);
-    });
-
-    // Start checkout
-    $(".oe_website_sale a[href='/shop/checkout']").on('click', function(o) {
-        vpv("/stats/ecom/customer_checkout");
-    });
-
-    $(".oe_website_sale div.oe_cart a[href^='/web?redirect'][href$='/shop/checkout']").on('click', function(o) {
-        vpv("/stats/ecom/customer_signin");
-    });
-
-    $(".oe_website_sale form[action='/shop/confirm_order'] a.a-submit").on('click', function(o) {
-        if ($("#top_menu [href='/web/login']").length){
-            vpv("/stats/ecom/customer_signup");
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+        var def = this._super.apply(this, arguments);
+        if (this.editableMode) {
+            return def;
         }
-        vpv("/stats/ecom/order_checkout");
-    });
 
-    $(".oe_website_sale form[target='_self'] button[type=submit]").on('click', function(o) {
-        var method = $("#payment_method input[name=acquirer]:checked").nextAll("span:first").text();
-        vpv("/stats/ecom/order_payment/" + method);
-    });
+        // Watching a product
+        if (this.$el.is('#product_detail')) {
+            var productID = this.$('input[name="product_id"]').attr('value');
+            this._vpv('/stats/ecom/product_view/' + productID);
+        }
 
-    if ($(".oe_website_sale div.oe_website_sale_tx_status").length) {
-        track_ga('require', 'ecommerce');
+        // ...
+        if (this.$('div.oe_website_sale_tx_status').length) {
+            this._trackGA('require', 'ecommerce');
 
-        var order_id = $(".oe_website_sale div.oe_website_sale_tx_status").data("order-id");
-        vpv("/stats/ecom/order_confirmed/" + order_id);
+            var orderID = this.$('div.oe_website_sale_tx_status').data('order-id');
+            this._vpv('/stats/ecom/order_confirmed/' + orderID);
 
-        ajax.jsonRpc("/shop/tracking_last_order/").then(function(o) {
-            track_ga('ecommerce:clear');
+            this._rpc({
+                route: '/shop/tracking_last_order/',
+            }).then(function (o) {
+                self._trackGA('ecommerce:clear');
 
-            if (o.transaction && o.lines) {
-                track_ga('ecommerce:addTransaction', o.transaction);
-                _.forEach(o.lines, function(line) {
-                    track_ga('ecommerce:addItem', line);
-                });
-            }
-            track_ga('ecommerce:send');
-        });
-    }
+                if (o.transaction && o.lines) {
+                    self._trackGA('ecommerce:addTransaction', o.transaction);
+                    _.forEach(o.lines, function (line) {
+                        self._trackGA('ecommerce:addItem', line);
+                    });
+                }
+                self._trackGA('ecommerce:send');
+            });
+        }
 
-    function vpv(page){ //virtual page view
-        track_ga('send', 'pageview', {
+        return def;
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _trackGA: function () {
+        websiteGA = window.ga || function () {};
+        websiteGA.apply(this, arguments);
+    },
+    /**
+     * @private
+     */
+    _vpv: function (page) { //virtual page view
+        this._trackGA('send', 'pageview', {
           'page': page,
           'title': document.title,
         });
-    }
+    },
 
-    function track_ga() {
-        website_ga = this.ga || function(){};
-        website_ga.apply(this, arguments);
-    }
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
 
+    /**
+     * @private
+     */
+    _onAddProductIntoCart: function () {
+        var productID = this.$('input[name="product_id"]').attr('value');
+        this._vpv('/stats/ecom/product_add_to_cart/' + productID);
+    },
+    /**
+     * @private
+     */
+    _onCheckoutStart: function () {
+        this._vpv('/stats/ecom/customer_checkout');
+    },
+    /**
+     * @private
+     */
+    _onCustomerSignin: function () {
+        this._vpv('/stats/ecom/customer_signin');
+    },
+    /**
+     * @private
+     */
+    _onOrder: function () {
+        if ($('#top_menu [href="/web/login"]').length) {
+            this._vpv('/stats/ecom/customer_signup');
+        }
+        this._vpv('/stats/ecom/order_checkout');
+    },
+    /**
+     * @private
+     */
+    _onOrderPayment: function () {
+        var method = $('#payment_method input[name=acquirer]:checked').nextAll('span:first').text();
+        this._vpv('/stats/ecom/order_payment/' + method);
+    },
 });
 
 });
diff --git a/addons/website_sale/static/src/js/website_sale_utils.js b/addons/website_sale/static/src/js/website_sale_utils.js
index 7076ff9c7c9..48fdd981ca9 100644
--- a/addons/website_sale/static/src/js/website_sale_utils.js
+++ b/addons/website_sale/static/src/js/website_sale_utils.js
@@ -1,39 +1,38 @@
 odoo.define('website_sale.utils', function (require) {
-    "use strict";
+'use strict';
 
-    var animate_clone =  function(cart, $elem, offset_top, offset_left) {
-        cart.find('.o_animate_blink').addClass('o_red_highlight o_shadow_animation').delay(500).queue(function(){
-            $(this).removeClass("o_shadow_animation").dequeue();
-        }).delay(2000).queue(function(){
-            $(this).removeClass("o_red_highlight").dequeue();
-        });
-        var imgtodrag = $elem.find('img').eq(0);
-        if (imgtodrag.length) {
-            var imgclone = imgtodrag.clone()
+function animateClone($cart, $elem, offsetTop, offsetLeft) {
+    $cart.find('.o_animate_blink').addClass('o_red_highlight o_shadow_animation').delay(500).queue(function(){
+        $(this).removeClass("o_shadow_animation").dequeue();
+    }).delay(2000).queue(function(){
+        $(this).removeClass("o_red_highlight").dequeue();
+    });
+    var $imgtodrag = $elem.find('img').eq(0);
+    if ($imgtodrag.length) {
+        var $imgclone = $imgtodrag.clone()
             .offset({
-                top: imgtodrag.offset().top,
-                left: imgtodrag.offset().left
+                top: $imgtodrag.offset().top,
+                left: $imgtodrag.offset().left
             })
             .addClass('o_website_sale_animate')
-            .appendTo($('body'))
+            .appendTo(document.body)
             .animate({
-                'top': cart.offset().top + offset_top,
-                'left': cart.offset().left + offset_left,
-                'width': 75,
-                'height': 75
+                top: $cart.offset().top + offsetTop,
+                left: $cart.offset().left + offsetLeft,
+                width: 75,
+                height: 75,
             }, 1000, 'easeInOutExpo');
 
-            imgclone.animate({
-                'width': 0,
-                'height': 0
-            }, function () {
-                $(this).detach();
-            });
-        }
-    };
-
-    return {
-        animate_clone: animate_clone,
-    };
+        $imgclone.animate({
+            width: 0,
+            height: 0,
+        }, function () {
+            $(this).detach();
+        });
+    }
+}
 
+return {
+    animateClone: animateClone,
+};
 });
diff --git a/addons/website_sale/static/src/js/website_sale_validate.js b/addons/website_sale/static/src/js/website_sale_validate.js
index a75b24fd0ad..4bf71ce35b0 100644
--- a/addons/website_sale/static/src/js/website_sale_validate.js
+++ b/addons/website_sale/static/src/js/website_sale_validate.js
@@ -1,37 +1,54 @@
 odoo.define('website_sale.validate', function(require) {
-"use strict";
+'use strict';
 
-var ajax = require('web.ajax');
+var sAnimations = require('website.content.snippets.animation');
 
-$(document).ready(function () {
+sAnimations.registry.websiteSaleValidate = sAnimations.Class.extend({
+    selector: 'div.oe_website_sale_tx_status[data-order-id]',
 
-    var _poll_nbr = 0;
-
-    function payment_transaction_poll_status() {
-        var order_node = $('div.oe_website_sale_tx_status');
-        if (! order_node || order_node.data('order-id') === undefined) {
-            return;
+    /**
+     * @override
+     */
+    start: function () {
+        var def = this._super.apply(this, arguments);
+        if (this.editableMode) {
+            return def;
         }
-        var order_id = parseInt(order_node.data('order-id'));
-        return ajax.jsonRpc('/shop/payment/get_status/' + order_id, 'call', {
+
+        this._poll_nbr = 0;
+        this._paymentTransationPollStatus();
+
+        return def;
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _paymentTransationPollStatus: function () {
+        var self = this;
+        this._rpc({
+            route: '/shop/payment/get_status/' + parseInt(this.$el.data('order-id')),
         }).then(function (result) {
-            _poll_nbr += 1;
-            if(result.recall) {
-                if (_poll_nbr < 20){
-                    setTimeout(function () { payment_transaction_poll_status(); }, Math.ceil(_poll_nbr / 3) * 1000);
-                }
-                else {
+            self._poll_nbr += 1;
+            if (result.recall) {
+                if (self._poll_nbr < 20) {
+                    setTimeout(function () {
+                        self._paymentTransationPollStatus();
+                    }, Math.ceil(self._poll_nbr / 3) * 1000);
+                } else {
                     var $message = $(result.message);
-                    $message.find('span:first').prepend($(
-                        "<i title='We are waiting the confirmation of the bank or payment provider' class='fa fa-warning' style='margin-right:10px;'>"));
+                    $message.find('span:first').prepend(
+                        $("<i title='We are waiting the confirmation of the bank or payment provider' class='fa fa-warning' style='margin-right:10px;'>")
+                    );
                     result.message = $message.html();
                 }
             }
-            $('div.oe_website_sale_tx_status').html(result.message);
+            self.$el.html(result.message);
         });
-    }
-
-    payment_transaction_poll_status();
+    },
 });
-
 });
diff --git a/addons/website_sale_comparison/static/src/js/website_sale_comparison.js b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
index 3125e223239..a4d25cf2dcc 100644
--- a/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
+++ b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
@@ -1,43 +1,46 @@
 odoo.define('website_sale_comparison.comparison', function (require) {
-"use strict";
+'use strict';
 
-require('web.dom_ready');
-var ajax = require('web.ajax');
 var core = require('web.core');
-var _t = core._t;
 var utils = require('web.utils');
 var Widget = require('web.Widget');
-var website = require('web_editor.base');
+var sAnimations = require('website.content.snippets.animation');
 var website_sale_utils = require('website_sale.utils');
 
-if(!$('.oe_website_sale').length) {
-    return $.Deferred().reject("DOM doesn't contain '.oe_website_sale'");
-}
-
-var qweb = core.qweb;
-ajax.loadXML('/website_sale_comparison/static/src/xml/comparison.xml', qweb);
+var _t = core._t;
 
 var ProductComparison = Widget.extend({
-    template:"product_comparison_template",
+    xmlDependencies: ['/website_sale_comparison/static/src/xml/comparison.xml'],
+
+    template: 'product_comparison_template',
     events: {
-        'click .o_product_panel_header': 'toggle_panel',
+        'click .o_product_panel_header': '_onClickPanelHeader',
     },
-    product_data: {},
-    init: function(){
+
+    /**
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+
+        this.product_data = {};
         this.comparelist_product_ids = JSON.parse(utils.get_cookie('comparelist_product_ids') || '[]');
         this.product_compare_limit = 4;
     },
-    start:function(){
+    /**
+     * @override
+     */
+    start: function () {
         var self = this;
-        self.load_products(this.comparelist_product_ids).then(function() {
-            self.update_content(self.comparelist_product_ids, true);
+        self._loadProducts(this.comparelist_product_ids).then(function () {
+            self._updateContent(self.comparelist_product_ids, true);
             if (self.comparelist_product_ids.length) {
                 $('.o_product_feature_panel').show();
-                self.update_comparelist_view();
+                self._updateComparelistView();
             }
         });
 
-        self.popover = $('#comparelist .o_product_panel_header').popover({
+        $('#comparelist .o_product_panel_header').popover({
             trigger: 'manual',
             animation: true,
             html: true,
@@ -47,115 +50,148 @@ var ProductComparison = Widget.extend({
             container: '.o_product_feature_panel',
             placement: 'top',
             template: '<div style="width:600px;" class="popover comparator-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
-            content: function() {
+            content: function () {
                 return $('#comparelist .o_product_panel_content').html();
             }
         });
-        $('.oe_website_sale .o_add_compare, .oe_website_sale .o_add_compare_dyn').click(function (e){
-            if (self.comparelist_product_ids.length < self.product_compare_limit) {
-                var prod = $(this).data('product-product-id');
-                if (e.currentTarget.classList.contains('o_add_compare_dyn')) {
-                    prod = $(this).parent().find('.product_id').val();
-                    if (!prod) { // case List View Variants
-                        prod = $(this).parent().find('input:checked').first().val();
-                    }
-                    prod = parseInt(prod, 10);
-                }
-                if (!prod) {
-                    return;
-                }
-                self.add_new_products(prod);
-                website_sale_utils.animate_clone($('#comparelist .o_product_panel_header'), $(this).closest('form'), -50, 10);
-            } else {
-                self.$('.o_comparelist_limit_warning').show();
-                self.show_panel(true);
-            }
-        });
 
-        $('body').on('click', '.comparator-popover .o_comparelist_products .o_remove', function (e){
-            self.rm_from_comparelist(e);
+        $(document.body).on('click.product_comparaison_widget', '.comparator-popover .o_comparelist_products .o_remove', function (ev) {
+            self._removeFromComparelist(ev);
         });
-        $('body').on('click', '.o_comparelist_remove', function (e){
-            self.rm_from_comparelist(e);
+        $(document.body).on('click.product_comparaison_widget', '.o_comparelist_remove', function (ev) {
+            self._removeFromComparelist(ev);
             var new_link = '/shop/compare/?products=' + self.comparelist_product_ids.toString();
-            window.location = _.isEmpty(self.comparelist_product_ids) ? '/shop' : new_link;
+            window.location.href = _.isEmpty(self.comparelist_product_ids) ? '/shop' : new_link;
         });
 
-        $("#o_comparelist_table tr").click(function(){
-            $($(this).data('target')).children().slideToggle(100);
-            $(this).find('.fa-chevron-circle-down, .fa-chevron-circle-right').toggleClass('fa-chevron-circle-down fa-chevron-circle-right');
-        });
+        return this._super.apply(this, arguments);
     },
-    load_products:function(product_ids) {
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+        $(document.body).off('.product_comparaison_widget');
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @param {jQuery} $elem
+     */
+    handleCompareAddition: function ($elem) {
+        if (this.comparelist_product_ids.length < this.product_compare_limit) {
+            var prod = $elem.data('product-product-id');
+            if ($elem.hasClass('o_add_compare_dyn')) {
+                prod = $elem.parent().find('.product_id').val();
+                if (!prod) { // case List View Variants
+                    prod = $elem.parent().find('input:checked').first().val();
+                }
+                prod = parseInt(prod, 10);
+            }
+            if (!prod) {
+                return;
+            }
+            this._addNewProducts(prod);
+            website_sale_utils.animateClone($('#comparelist .o_product_panel_header'), $elem.closest('form'), -50, 10);
+        } else {
+            this.$('.o_comparelist_limit_warning').show();
+            $('#comparelist .o_product_panel_header').popover('show');
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _loadProducts: function (product_ids) {
         var self = this;
-        return ajax.jsonRpc('/shop/get_product_data', 'call', {
-            'product_ids': product_ids,
-            'cookies': JSON.parse(utils.get_cookie('comparelist_product_ids') || '[]'),
+        return this._rpc({
+            route: '/shop/get_product_data',
+            params: {
+                product_ids: product_ids,
+                cookies: JSON.parse(utils.get_cookie('comparelist_product_ids') || '[]'),
+            },
         }).then(function (data) {
             self.comparelist_product_ids = JSON.parse(data.cookies);
             delete data.cookies;
-            _.each(data, function(product) {
+            _.each(data, function (product) {
                 self.product_data[product.product.id] = product;
             });
         });
     },
-    toggle_panel: function() {
+    /**
+     * @private
+     */
+    _togglePanel: function () {
         $('#comparelist .o_product_panel_header').popover('toggle');
     },
-    show_panel: function(force) {
-        if ((!$('.comparator-popover').length) || force) {
-            $('#comparelist .o_product_panel_header').popover('show');
-        }
-    },
-    refresh_panel: function() {
-        if ($('.comparator-popover').length) {
-            $('#comparelist .o_product_panel_header').popover('show');
-        }
-    },
-    add_new_products:function(product_id){
+    /**
+     * @private
+     */
+    _addNewProducts: function (product_id) {
         var self = this;
         $('.o_product_feature_panel').show();
         if (!_.contains(self.comparelist_product_ids, product_id)) {
             self.comparelist_product_ids.push(product_id);
-            if(_.has(self.product_data, product_id)){
-                self.update_content([product_id], false);
+            if (_.has(self.product_data, product_id)){
+                self._updateContent([product_id], false);
             } else {
-                self.load_products([product_id]).then(function(){
-                    self.update_content([product_id], false);
+                self._loadProducts([product_id]).then(function () {
+                    self._updateContent([product_id], false);
                 });
             }
         }
-        self.update_cookie();
+        self._updateCookie();
     },
-    update_content:function(product_ids, reset) {
+    /**
+     * @private
+     */
+    _updateContent: function (product_ids, reset) {
         var self = this;
         if (reset) {
             self.$('.o_comparelist_products .o_product_row').remove();
         }
-        _.each(product_ids, function(res) {
+        _.each(product_ids, function (res) {
             var $template = self.product_data[res].render;
             self.$('.o_comparelist_products').append($template);
         });
-        this.refresh_panel();
+        if ($('.comparator-popover').length) {
+            $('#comparelist .o_product_panel_header').popover('show');
+        }
     },
-    rm_from_comparelist: function(e){
+    /**
+     * @private
+     */
+    _removeFromComparelist: function (e) {
         this.comparelist_product_ids = _.without(this.comparelist_product_ids, $(e.currentTarget).data('product_product_id'));
         $(e.currentTarget).parents('.o_product_row').remove();
-        this.update_cookie();
+        this._updateCookie();
         $('.o_comparelist_limit_warning').hide();
         // force refresh to reposition popover
-        this.update_content(this.comparelist_product_ids, true);
+        this._updateContent(this.comparelist_product_ids, true);
     },
-    update_cookie: function(){
+    /**
+     * @private
+     */
+    _updateCookie: function () {
         document.cookie = 'comparelist_product_ids=' + JSON.stringify(this.comparelist_product_ids) + '; path=/';
-        this.update_comparelist_view();
+        this._updateComparelistView();
     },
-    update_comparelist_view: function() {
+    /**
+     * @private
+     */
+    _updateComparelistView: function () {
         this.$('.o_product_circle').text(this.comparelist_product_ids.length);
         this.$('.o_comparelist_button').hide();
         if (_.isEmpty(this.comparelist_product_ids)) {
             $('.o_product_feature_panel').hide();
-            this.toggle_panel();
+            this._togglePanel();
         } else {
             this.$('.o_comparelist_products').show();
             if (this.comparelist_product_ids.length >=2) {
@@ -163,11 +199,59 @@ var ProductComparison = Widget.extend({
                 this.$('.o_comparelist_button a').attr('href', '/shop/compare/?products='+this.comparelist_product_ids.toString());
             }
         }
-    }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickPanelHeader: function () {
+        this._togglePanel();
+    },
 });
 
-website.ready().done(function() {
-    new ProductComparison().appendTo('.oe_website_sale');
-});
+sAnimations.registry.ProductComparison = sAnimations.Class.extend({
+    selector: '.oe_website_sale',
+    read_events: {
+        'click .o_add_compare, .o_add_compare_dyn': '_onClickAddCompare',
+        'click #o_comparelist_table tr': '_onClickComparelistTr',
+    },
 
+    /**
+     * @override
+     */
+    start: function () {
+        var def = this._super.apply(this, arguments);
+        if (this.editableMode) {
+            return def;
+        }
+
+        this.productComparison = new ProductComparison(this);
+        return $.when(def, this.productComparison.appendTo(this.$el));
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickAddCompare: function (ev) {
+        this.productComparison.handleCompareAddition($(ev.currentTarget));
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickComparelistTr: function (ev) {
+        var $target = $(ev.currentTarget);
+        $($target.data('target')).children().slideToggle(100);
+        $target.find('.fa-chevron-circle-down, .fa-chevron-circle-right').toggleClass('fa-chevron-circle-down fa-chevron-circle-right');
+    },
+});
 });
diff --git a/addons/website_sale_options/static/src/js/website_sale.js b/addons/website_sale_options/static/src/js/website_sale.js
index b728dadadc0..427a33f4d29 100644
--- a/addons/website_sale_options/static/src/js/website_sale.js
+++ b/addons/website_sale_options/static/src/js/website_sale.js
@@ -1,101 +1,141 @@
-odoo.define('website_sale_options.website_sale', function(require) {
-"use strict";
+odoo.define('website_sale_options.website_sale', function (require) {
+'use strict';
 
-var ajax = require('web.ajax');
-require('web.dom_ready');
-var weContext = require("web_editor.context");
+var weContext = require('web_editor.context');
+var sAnimations = require('website.content.snippets.animation');
 require('website_sale.website_sale');
 
-$('.oe_website_sale #add_to_cart, .oe_website_sale #products_grid .a-submit')
-    .off('click')
-    .removeClass('a-submit')
-    .click(_.debounce(function (event) {
-        var $form = $(this).closest('form');
+sAnimations.registry.WebsiteSale.include({
+    /**
+     * @override
+     */
+    _onClickSubmit: function (ev) {
+        if ($(ev.currentTarget).is('#add_to_cart, #products_grid .a-submit')) {
+            return;
+        }
+        this._super.apply(this, arguments);
+    },
+});
+
+sAnimations.registry.WebsiteSaleOptions = sAnimations.Class.extend({
+    selector: '.oe_website_sale',
+    read_events: {
+        'click #add_to_cart, #products_grid .a-submit': '_onClickAdd',
+    },
+
+    /**
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+
+        this._handleAdd = _.debounce(this._handleAdd.bind(this), 200, true);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _handleAdd: function ($form) {
         var quantity = parseFloat($form.find('input[name="add_qty"]').val() || 1);
         var product_id = parseInt($form.find('input[type="hidden"][name="product_id"], input[type="radio"][name="product_id"]:checked').first().val(),10);
-        event.preventDefault();
-        ajax.jsonRpc("/shop/modal", 'call', {
-                'product_id': product_id,
-                'kwargs': {
-                   'context': _.extend({'quantity': quantity}, weContext.get())
+        this._rpc({
+            route: '/shop/modal',
+            params: {
+                product_id: product_id,
+                kwargs: {
+                   context: _.extend({'quantity': quantity}, weContext.get()),
                 },
-            }).then(function (modal) {
-                var $modal = $(modal);
+            },
+        }).then(function (modal) {
+            var $modal = $(modal);
 
-                $modal.find('img:first').attr("src", "/web/image/product.product/" + product_id + "/image_medium");
+            $modal.find('img:first').attr("src", "/web/image/product.product/" + product_id + "/image_medium");
 
-                // disable opacity on the <form> if currently active (in case the product is
-                // not published), as it interferes with bs modals
-                $form.addClass('css_options');
+            // disable opacity on the <form> if currently active (in case the product is
+            // not published), as it interferes with bs modals
+            $form.addClass('css_options');
 
-                $modal.appendTo($form)
-                    .modal()
-                    .on('hidden.bs.modal', function () {
-                        $form.removeClass('css_options'); // possibly reactivate opacity (see above)
-                        $(this).remove();
-                    });
+            $modal.appendTo($form)
+                .modal()
+                .on('hidden.bs.modal', function () {
+                    $form.removeClass('css_options'); // possibly reactivate opacity (see above)
+                    $(this).remove();
+                });
 
-                $modal.on('click', '.a-submit', function (ev) {
-                    var $a = $(this);
-                    $form.ajaxSubmit({
-                        url:  '/shop/cart/update_option',
-                        data: {lang: weContext.get().lang},
-                        success: function (quantity) {
-                            if (!$a.hasClass('js_goto_shop')) {
-                                window.location.pathname = window.location.pathname.replace(/shop([\/?].*)?$/, "shop/cart");
-                            }
-                            var $q = $(".my_cart_quantity");
-                            $q.parent().parent().removeClass("d-none", !quantity);
-                            $q.html(quantity).hide().fadeIn(600);
+            $modal.on('click', '.a-submit', function (ev) {
+                var $a = $(this);
+                $form.ajaxSubmit({
+                    url:  '/shop/cart/update_option',
+                    data: {lang: weContext.get().lang},
+                    success: function (quantity) {
+                        if (!$a.hasClass('js_goto_shop')) {
+                            window.location.pathname = window.location.pathname.replace(/shop([\/?].*)?$/, "shop/cart");
                         }
-                    });
-                    $modal.modal('hide');
-                    ev.preventDefault();
-                });
-
-                $modal.on('click', '.css_attribute_color input', function (event) {
-                    $modal.find('.css_attribute_color').removeClass("active");
-                    $modal.find('.css_attribute_color:has(input:checked)').addClass("active");
-                });
-
-                $modal.on("click", "a.js_add, a.js_remove", function (event) {
-                    event.preventDefault();
-                    var $parent = $(this).parents('.js_product:first');
-                    $parent.find("a.js_add, span.js_remove").toggleClass('d-none');
-                    $parent.find("input.js_optional_same_quantity").val( $(this).hasClass("js_add") ? 1 : 0 );
-                    $parent.find(".js_remove");
-                });
-
-                $modal.on("change", "input.js_quantity", function () {
-                    var qty = parseFloat($(this).val());
-                    if (qty === 1) {
-                        $(".js_remove .js_items").addClass('d-none');
-                        $(".js_remove .js_item").removeClass('d-none');
-                    } else {
-                        $(".js_remove .js_items").removeClass('d-none').text($(".js_remove .js_items:first").text().replace(/[0-9.,]+/, qty));
-                        $(".js_remove .js_item").addClass('d-none');
+                        var $q = $(".my_cart_quantity");
+                        $q.parent().parent().removeClass("d-none", !quantity);
+                        $q.html(quantity).hide().fadeIn(600);
                     }
                 });
-
-                $modal.find('input[name="add_qty"]').val(quantity).change();
-                $('.js_add_cart_variants').each(function () {
-                    $('input.js_variant_change, select.js_variant_change', this).first().trigger('change');
-                    });
-
-                    $modal.on("change", 'input[name="add_qty"]', function (event) {
-                        var product_id = $($modal.find('span.oe_price[data-product-id]')).first().data('product-id');
-                        var product_ids = [product_id];
-                        var $products_dom = [];
-                        $("ul.js_add_cart_variants[data-attribute_value_ids]").each(function(){
-                            var $el = $(this);
-                            $products_dom.push($el);
-                            _.each($el.data("attribute_value_ids"), function (values) {
-                                product_ids.push(values[0]);
-                            });
-                        });
-                });
+                $modal.modal('hide');
+                ev.preventDefault();
             });
-        return false;
-    }, 200, true));
 
+            $modal.on('click', '.css_attribute_color input', function (ev) {
+                $modal.find('.css_attribute_color').removeClass("active");
+                $modal.find('.css_attribute_color:has(input:checked)').addClass("active");
+            });
+
+            $modal.on("click", "a.js_add, a.js_remove", function (ev) {
+                ev.preventDefault();
+                var $parent = $(this).parents('.js_product:first');
+                $parent.find("a.js_add, span.js_remove").toggleClass('d-none');
+                $parent.find("input.js_optional_same_quantity").val( $(this).hasClass("js_add") ? 1 : 0 );
+                $parent.find(".js_remove");
+            });
+
+            $modal.on("change", "input.js_quantity", function () {
+                var qty = parseFloat($(this).val());
+                if (qty === 1) {
+                    $(".js_remove .js_items").addClass('d-none');
+                    $(".js_remove .js_item").removeClass('d-none');
+                } else {
+                    $(".js_remove .js_items").removeClass('d-none').text($(".js_remove .js_items:first").text().replace(/[0-9.,]+/, qty));
+                    $(".js_remove .js_item").addClass('d-none');
+                }
+            });
+
+            $modal.find('input[name="add_qty"]').val(quantity).change();
+            $('.js_add_cart_variants').each(function () {
+                $('input.js_variant_change, select.js_variant_change', this).first().trigger('change');
+                });
+
+                $modal.on("change", 'input[name="add_qty"]', function (ev) {
+                    var product_id = $($modal.find('span.oe_price[data-product-id]')).first().data('product-id');
+                    var product_ids = [product_id];
+                    var $products_dom = [];
+                    $("ul.js_add_cart_variants[data-attribute_value_ids]").each(function () {
+                        var $el = $(this);
+                        $products_dom.push($el);
+                        _.each($el.data("attribute_value_ids"), function (values) {
+                            product_ids.push(values[0]);
+                        });
+                    });
+            });
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    _onClickAdd: function (ev) {
+        ev.preventDefault();
+        var $form = $(ev.currentTarget).closest('form');
+        this._handleAdd($form);
+    },
+});
 });
diff --git a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
index 273306aaff2..e708815d28e 100644
--- a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
+++ b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
@@ -1,163 +1,135 @@
 odoo.define('website_sale_wishlist.wishlist', function (require) {
 "use strict";
 
-require('web.dom_ready');
-var ajax = require('web.ajax');
-var Widget = require('web.Widget');
-var base = require('web_editor.base');
-var website_sale_utils = require('website_sale.utils');
+var sAnimations = require('website.content.snippets.animation');
+var wSaleUtils = require('website_sale.utils');
 
-if(!$('.oe_website_sale').length) {
-    return $.Deferred().reject("DOM doesn't contain '.oe_website_sale'");
-}
-
-var ProductWishlist = Widget.extend({
-    events: {
-        'click #my_wish': 'display_wishlist',
+sAnimations.registry.ProductWishlist = sAnimations.Class.extend({
+    selector: '.oe_website_sale',
+    read_events: {
+        'click #my_wish': '_onClickMyWish',
+        'click .o_add_wishlist, .o_add_wishlist_dyn': '_onClickAddWish',
+        'change input.js_variant_change, select.js_variant_change, ul[data-attribute_value_ids]': '_onChangeVariant',
+        'change input.js_product_change': '_onChangeProduct',
+        'click .wishlist-section .o_wish_rm': '_onClickWishRemove',
+        'click .wishlist-section .o_wish_add': '_onClickWishAdd',
     },
-    init: function(){
-        var self = this;
-        this.wishlist_product_ids = [];
-        var wish_loading = $.get('/shop/wishlist', {'count': 1}).then(function(res) {
-            self.wishlist_product_ids = JSON.parse(res);
-            self.update_wishlist_view();
-        });
-        $('.oe_website_sale .o_add_wishlist, .oe_website_sale .o_add_wishlist_dyn').click(function (e){
-            self.add_new_products($(this), e);
-        });
 
-        if ($('.wishlist-section').length) {
-            $('.wishlist-section .o_wish_rm').on('click', function (e){ self.wishlist_rm(e, false); });
-            $('.wishlist-section .o_wish_add').on('click', function (e){
-                $('.wishlist-section .o_wish_add').addClass('disabled');
-                self.wishlist_add_or_mv(e).then(function(o) {
-                    $('.wishlist-section .o_wish_add').removeClass('disabled');
-                });
-            });
+    start: function () {
+        var self = this;
+        var def = this._super.apply(this, arguments);
+        if (this.editableMode) {
+            return def;
         }
 
-        $('.oe_website_sale').on('change', 'input.js_variant_change, select.js_variant_change, ul[data-attribute_value_ids]', function(ev) {
-            var $ul = $(ev.target).closest('.js_add_cart_variants');
-            var $parent = $ul.closest('.js_product');
-            var $product_id = $parent.find('.product_id').first();
-            var $el = $parent.find("[data-action='o_wishlist']");
-            if (!_.contains(self.wishlist_product_ids, parseInt($product_id.val(), 10))) {
-                $el.prop("disabled", false).removeClass('disabled').removeAttr('disabled');
-            }
-            else {
-                $el.prop("disabled", true).addClass('disabled').attr('disabled', 'disabled');
-            }
-            $el.data('product-product-id', parseInt($product_id.val(), 10));
+        this.wishlistProductIDs = [];
 
-        });
-
-        // manage "List View of variants"
-        $('.oe_website_sale').on('change', 'input.js_product_change', function(ev) {
-            var product_id = ev.currentTarget.value;
-            var $el = $(ev.target).closest('.js_add_cart_variants').find("[data-action='o_wishlist']");
-
-            if (!_.contains(self.wishlist_product_ids, parseInt(product_id, 10))) {
-                $el.prop("disabled", false).removeClass('disabled').removeAttr('disabled');
-            }
-            else {
-                $el.prop("disabled", true).addClass('disabled').attr('disabled', 'disabled');
-            }
-            $el.data('product-product-id', product_id);
-        });
-        wish_loading.then(function() {
+        var wishDef = $.get('/shop/wishlist', {
+            count: 1,
+        }).then(function (res) {
+            self.wishlistProductIDs = JSON.parse(res);
+            self._updateWishlistView();
             if ($('input.js_product_change').length) { // manage "List View of variants"
                 $('input.js_product_change:checked').first().trigger('change');
-            }
-            else {
+            } else {
                 $('input.js_variant_change').trigger('change');
             }
         });
 
+        return $.when(def, wishDef);
     },
-    add_new_products: function($el, e){
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _addNewProducts: function ($el) {
         var self = this;
-        var product_id = parseInt($el.data('product-product-id'), 10);
-        if (!product_id && e.currentTarget.classList.contains('o_add_wishlist_dyn')) {
-            product_id = parseInt($el.parent().find('.product_id').val());
+        var productID = parseInt($el.data('product-product-id'), 10);
+        if (!productID && $el.hasClass('o_add_wishlist_dyn')) {
+            productID = parseInt($el.parent().find('.product_id').val());
         }
-        if (product_id && !_.contains(self.wishlist_product_ids, product_id)) {
-            return ajax.jsonRpc('/shop/wishlist/add', 'call', {
-                'product_id': product_id
+        if (productID && !_.contains(self.wishlistProductIDs, productID)) {
+            return this._rpc({
+                route: '/shop/wishlist/add',
+                params: {
+                    product_id: productID,
+                },
             }).then(function () {
-                self.wishlist_product_ids.push(product_id);
-                self.update_wishlist_view();
-                website_sale_utils.animate_clone($('#my_wish'), $el.closest('form'), 25, 40);
+                self.wishlistProductIDs.push(productID);
+                self._updateWishlistView();
+                wSaleUtils.animateClone($('#my_wish'), $el.closest('form'), 25, 40);
                 $el.prop("disabled", true).addClass('disabled');
             });
         }
     },
-    display_wishlist: function() {
-        if (this.wishlist_product_ids.length === 0) {
-            this.update_wishlist_view();
-            this.redirect_no_wish();
-        }
-        else {
-            window.location = '/shop/wishlist';
-        }
-    },
-    update_wishlist_view: function() {
-        if (this.wishlist_product_ids.length > 0) {
+    /**
+     * @private
+     */
+    _updateWishlistView: function () {
+        if (this.wishlistProductIDs.length > 0) {
             $('#my_wish').show();
-            $('.my_wish_quantity').text(this.wishlist_product_ids.length);
-        }
-        else {
+            $('.my_wish_quantity').text(this.wishlistProductIDs.length);
+        } else {
             $('#my_wish').hide();
         }
     },
-    wishlist_rm: function(e, deferred_redirect){
+    /**
+     * @private
+     */
+    _removeWish: function (e, deferred_redirect){
         var tr = $(e.currentTarget).parents('tr');
         var wish = tr.data('wish-id');
         var product = tr.data('product-id');
         var self = this;
 
-        ajax.jsonRpc('/shop/wishlist/remove/' + wish).done(function () {
+        this._rpc({
+            route: '/shop/wishlist/remove/' + wish,
+        }).done(function () {
             $(tr).hide();
         });
 
-        this.wishlist_product_ids = _.without(this.wishlist_product_ids, product);
-        if (this.wishlist_product_ids.length === 0) {
+        this.wishlistProductIDs = _.without(this.wishlistProductIDs, product);
+        if (this.wishlistProductIDs.length === 0) {
             deferred_redirect = deferred_redirect ? deferred_redirect : $.Deferred();
-            deferred_redirect.then(function() {
-                self.redirect_no_wish();
+            deferred_redirect.then(function () {
+                self._redirectNoWish();
             });
         }
-        this.update_wishlist_view();
+        this._updateWishlistView();
     },
-    wishlist_add_or_mv: function(e){
-        return $('#b2b_wish').is(':checked') ? this.wishlist_add(e) : this.wishlist_mv(e);
-    },
-    wishlist_add: function(e){
+    /**
+     * @private
+     */
+    _addOrMoveWish: function (e) {
         var tr = $(e.currentTarget).parents('tr');
         var product = tr.data('product-id');
-
-        // can be hidden if empty
         $('#my_cart').removeClass('d-none');
-        website_sale_utils.animate_clone($('#my_cart'), tr, 25, 40);
-        return this.add_to_cart(product, tr.find('qty').val() || 1);
-    },
-    wishlist_mv: function(e){
-        var tr = $(e.currentTarget).parents('tr');
-        var product = tr.data('product-id');
+        wSaleUtils.animateClone($('#my_cart'), tr, 25, 40);
 
-        $('#my_cart').removeClass('d-none');
-        website_sale_utils.animate_clone($('#my_cart'), tr, 25, 40);
-        var adding_deffered = this.add_to_cart(product, tr.find('qty').val() || 1);
-        this.wishlist_rm(e, adding_deffered);
-        return adding_deffered;
+        if ($('#b2b_wish').is(':checked')) {
+            return this._addToCart(product, tr.find('qty').val() || 1);
+        } else {
+            var adding_deffered = this._addToCart(product, tr.find('qty').val() || 1);
+            this._removeWish(e, adding_deffered);
+            return adding_deffered;
+        }
     },
-    add_to_cart: function(product_id, qty_id) {
-        var add_to_cart = ajax.jsonRpc("/shop/cart/update_json", 'call', {
-            'product_id': parseInt(product_id, 10),
-            'add_qty': parseInt(qty_id, 10),
-            'display': false,
-        });
-
-        add_to_cart.then(function(resp) {
+    /**
+     * @private
+     */
+    _addToCart: function (productID, qty_id) {
+        return this._rpc({
+            route: "/shop/cart/update_json",
+            params: {
+                product_id: parseInt(productID, 10),
+                add_qty: parseInt(qty_id, 10),
+                display: false,
+            },
+        }).then(function (resp) {
             if (resp.warning) {
                 if (! $('#data_warning').length) {
                     $('.wishlist-section').prepend('<div class="mt16 alert alert-danger alert-dismissable" role="alert" id="data_warning"></div>');
@@ -167,13 +139,85 @@ var ProductWishlist = Widget.extend({
             }
             $('.my_cart_quantity').html(resp.cart_quantity || '<i class="fa fa-warning" /> ');
         });
-        return add_to_cart;
     },
-    redirect_no_wish: function() {
-        window.location = '/shop/cart';
-    }
-});
+    /**
+     * @private
+     */
+    _redirectNoWish: function () {
+        window.location.href = '/shop/cart';
+    },
 
-new ProductWishlist();
 
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickMyWish: function () {
+        if (this.wishlistProductIDs.length === 0) {
+            this._updateWishlistView();
+            this._redirectNoWish();
+            return;
+        }
+        window.location = '/shop/wishlist';
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickAddWish: function (ev) {
+        this._addNewProducts($(ev.currentTarget));
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeVariant: function (ev) {
+        var $ul = $(ev.target).closest('.js_add_cart_variants');
+        var $parent = $ul.closest('.js_product');
+        var $productID = $parent.find('.product_id').first();
+        var $el = $parent.find("[data-action='o_wishlist']");
+        if (!_.contains(this.wishlistProductIDs, parseInt($productID.val(), 10))) {
+            $el.prop("disabled", false).removeClass('disabled').removeAttr('disabled');
+        } else {
+            $el.prop("disabled", true).addClass('disabled').attr('disabled', 'disabled');
+        }
+        $el.data('product-product-id', parseInt($productID.val(), 10));
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeProduct: function (ev) {
+        var productID = ev.currentTarget.value;
+        var $el = $(ev.target).closest('.js_add_cart_variants').find("[data-action='o_wishlist']");
+
+        if (!_.contains(this.wishlistProductIDs, parseInt(productID, 10))) {
+            $el.prop("disabled", false).removeClass('disabled').removeAttr('disabled');
+        } else {
+            $el.prop("disabled", true).addClass('disabled').attr('disabled', 'disabled');
+        }
+        $el.data('product-product-id', productID);
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickWishRemove: function (ev) {
+        this._removeWish(ev, false);
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickWishAdd: function (ev) {
+        var self = this;
+        this.$('.wishlist-section .o_wish_add').addClass('disabled');
+        this._addOrMoveWish(ev).then(function () {
+            self.$('.wishlist-section .o_wish_add').removeClass('disabled');
+        });
+    },
+});
 });