initial commit 2

14 files changed, 2339 insertions, 0 deletions

diff --git a/addons/website_sale/static/src/js/tours/website_sale_shop.js b/addons/website_sale/static/src/js/tours/website_sale_shop.js
new file mode 100644
index 00000000..6edb36dd
--- /dev/null
+++ b/addons/website_sale/static/src/js/tours/website_sale_shop.js
@@ -0,0 +1,75 @@
+odoo.define("website_sale.tour_shop", function (require) {
+    "use strict";
+
+    var core = require("web.core");
+    var _t = core._t;
+
+    // return the steps, used for backend and frontend
+
+    return [{
+        trigger: "#new-content-menu > a",
+        content: _t("Let's create your first product."),
+        extra_trigger: ".js_sale",
+        position: "bottom",
+    }, {
+        trigger: "a[data-action=new_product]",
+        content: _t("Select <b>New Product</b> to create it and manage its properties to boost your sales."),
+        position: "bottom",
+    }, {
+        trigger: ".modal-dialog #editor_new_product input[type=text]",
+        content: _t("Enter a name for your new product"),
+        position: "right",
+    }, {
+        trigger: ".modal-footer button.btn-primary.btn-continue",
+        content: _t("Click on <em>Continue</em> to create the product."),
+        position: "right",
+    }, {
+        trigger: ".product_price .oe_currency_value:visible",
+        extra_trigger: ".editor_enable",
+        content: _t("Edit the price of this product by clicking on the amount."),
+        position: "bottom",
+        run: "text 1.99",
+    }, {
+        trigger: "#wrap img.product_detail_img",
+        extra_trigger: ".product_price .o_dirty .oe_currency_value:not(:containsExact(1.00))",
+        content: _t("Double click here to set an image describing your product."),
+        position: "top",
+        run: function (actions) {
+            actions.dblclick();
+        },
+    }, {
+        trigger: ".o_select_media_dialog .o_upload_media_button",
+        content: _t("Upload a file from your local library."),
+        position: "bottom",
+        run: function (actions) {
+            actions.auto(".modal-footer .btn-secondary");
+        },
+    }, {
+        trigger: "button.o_we_add_snippet_btn",
+        auto: true,
+    }, {
+        trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail",
+        extra_trigger: "body:not(.modal-open)",
+        content: _t("Drag this website block and drop it in your page."),
+        position: "bottom",
+        run: "drag_and_drop",
+    }, {
+        trigger: "button[data-action=save]",
+        content: _t("Once you click on <b>Save</b>, your product is updated."),
+        position: "bottom",
+    }, {
+        trigger: ".js_publish_management .js_publish_btn .css_publish",
+        extra_trigger: "body:not(.editor_enable)",
+        content: _t("Click on this button so your customers can see it."),
+        position: "bottom",
+    }, {
+        trigger: ".o_main_navbar .o_menu_toggle, #oe_applications .dropdown-toggle",
+        content: _t("Let's now take a look at your administration dashboard to get your eCommerce website ready in no time."),
+        position: "bottom",
+    }, { // backend
+        trigger: '.o_apps > a[data-menu-xmlid="website.menu_website_configuration"], #oe_main_menu_navbar a[data-menu-xmlid="website.menu_website_configuration"]',
+        content: _t("Open your website app here."),
+        extra_trigger: ".o_apps,#oe_applications",
+        position: "bottom",
+    }];
+});
diff --git a/addons/website_sale/static/src/js/tours/website_sale_shop_backend.js b/addons/website_sale/static/src/js/tours/website_sale_shop_backend.js
new file mode 100644
index 00000000..ab605852
--- /dev/null
+++ b/addons/website_sale/static/src/js/tours/website_sale_shop_backend.js
@@ -0,0 +1,8 @@
+odoo.define("website_sale.tour_shop_backend", function (require) {
+"use strict";
+
+var tour = require("web_tour.tour");
+var steps = require("website_sale.tour_shop");
+tour.register("shop", {url: "/shop"}, steps);
+
+});
diff --git a/addons/website_sale/static/src/js/tours/website_sale_shop_frontend.js b/addons/website_sale/static/src/js/tours/website_sale_shop_frontend.js
new file mode 100644
index 00000000..afefddef
--- /dev/null
+++ b/addons/website_sale/static/src/js/tours/website_sale_shop_frontend.js
@@ -0,0 +1,11 @@
+odoo.define("website_sale.tour_shop_frontend", function (require) {
+"use strict";
+
+var tour = require("web_tour.tour");
+var steps = require("website_sale.tour_shop");
+tour.register("shop", {
+    url: "/shop",
+    sequence: 130,
+}, steps);
+
+});
diff --git a/addons/website_sale/static/src/js/variant_mixin.js b/addons/website_sale/static/src/js/variant_mixin.js
new file mode 100644
index 00000000..0e92564b
--- /dev/null
+++ b/addons/website_sale/static/src/js/variant_mixin.js
@@ -0,0 +1,23 @@
+odoo.define('website_sale.VariantMixin', function (require) {
+'use strict';
+
+var VariantMixin = require('sale.VariantMixin');
+
+/**
+ * Website behavior is slightly different from backend so we append
+ * "_website" to URLs to lead to a different route
+ *
+ * @private
+ * @param {string} uri The uri to adapt
+ */
+VariantMixin._getUri = function (uri) {
+    if (this.isWebsite){
+        return uri + '_website';
+    } else {
+        return uri;
+    }
+};
+
+return VariantMixin;
+
+});
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
new file mode 100644
index 00000000..b60d15f2
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -0,0 +1,698 @@
+odoo.define('website_sale.add_product', function (require) {
+'use strict';
+
+var core = require('web.core');
+var wUtils = require('website.utils');
+var WebsiteNewMenu = require('website.newMenu');
+
+var _t = core._t;
+
+WebsiteNewMenu.include({
+    actions: _.extend({}, WebsiteNewMenu.prototype.actions || {}, {
+        new_product: '_createNewProduct',
+    }),
+
+    //--------------------------------------------------------------------------
+    // Actions
+    //--------------------------------------------------------------------------
+
+    /**
+     * Asks the user information about a new product to create, then creates it
+     * and redirects the user to this new product.
+     *
+     * @private
+     * @returns {Promise} Unresolved if there is a redirection
+     */
+    _createNewProduct: function () {
+        var self = this;
+        return wUtils.prompt({
+            id: "editor_new_product",
+            window_title: _t("New Product"),
+            input: _t("Name"),
+        }).then(function (result) {
+            if (!result.val) {
+                return;
+            }
+            return self._rpc({
+                route: '/shop/add_product',
+                params: {
+                    name: result.val,
+                },
+            }).then(function (url) {
+                window.location.href = url;
+                return new Promise(function () {});
+            });
+        });
+    },
+});
+});
+
+//==============================================================================
+
+odoo.define('website_sale.editor', function (require) {
+'use strict';
+
+var options = require('web_editor.snippets.options');
+var publicWidget = require('web.public.widget');
+const {Class: EditorMenuBar} = require('web_editor.editor');
+const {qweb} = require('web.core');
+
+EditorMenuBar.include({
+    custom_events: Object.assign(EditorMenuBar.prototype.custom_events, {
+        get_ribbons: '_onGetRibbons',
+        get_ribbon_classes: '_onGetRibbonClasses',
+        delete_ribbon: '_onDeleteRibbon',
+        set_ribbon: '_onSetRibbon',
+        set_product_ribbon: '_onSetProductRibbon',
+    }),
+
+    /**
+     * @override
+     */
+    async willStart() {
+        const _super = this._super.bind(this);
+        let ribbons = [];
+        if (this._isProductListPage()) {
+            ribbons = await this._rpc({
+                model: 'product.ribbon',
+                method: 'search_read',
+                fields: ['id', 'html', 'bg_color', 'text_color', 'html_class'],
+            });
+        }
+        this.ribbons = Object.fromEntries(ribbons.map(ribbon => [ribbon.id, ribbon]));
+        this.originalRibbons = Object.assign({}, this.ribbons);
+        this.productTemplatesRibbons = [];
+        this.deletedRibbonClasses = '';
+        return _super(...arguments);
+    },
+    /**
+     * @override
+     */
+    async save() {
+        const _super = this._super.bind(this);
+        await this._saveRibbons();
+        return _super(...arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Saves the ribbons in the database.
+     *
+     * @private
+     */
+    async _saveRibbons() {
+        if (!this._isProductListPage()) {
+            return;
+        }
+        const originalIds = Object.keys(this.originalRibbons).map(id => parseInt(id));
+        const currentIds = Object.keys(this.ribbons).map(id => parseInt(id));
+
+        const ribbons = Object.values(this.ribbons);
+        const created = ribbons.filter(ribbon => !originalIds.includes(ribbon.id));
+        const deletedIds = originalIds.filter(id => !currentIds.includes(id));
+        const modified = ribbons.filter(ribbon => {
+            if (created.includes(ribbon)) {
+                return false;
+            }
+            const original = this.originalRibbons[ribbon.id];
+            return Object.entries(ribbon).some(([key, value]) => value !== original[key]);
+        });
+
+        const proms = [];
+        let createdRibbonIds;
+        if (created.length > 0) {
+            proms.push(this._rpc({
+                method: 'create',
+                model: 'product.ribbon',
+                args: [created.map(ribbon => {
+                    ribbon = Object.assign({}, ribbon);
+                    delete ribbon.id;
+                    return ribbon;
+                })],
+            }).then(ids => createdRibbonIds = ids));
+        }
+
+        modified.forEach(ribbon => proms.push(this._rpc({
+            method: 'write',
+            model: 'product.ribbon',
+            args: [[ribbon.id], ribbon],
+        })));
+
+        if (deletedIds.length > 0) {
+            proms.push(this._rpc({
+                method: 'unlink',
+                model: 'product.ribbon',
+                args: [deletedIds],
+            }));
+        }
+
+        await Promise.all(proms);
+        const localToServer = Object.assign(
+            this.ribbons,
+            Object.fromEntries(created.map((ribbon, index) => [ribbon.id, {id: createdRibbonIds[index]}])),
+            {'false': {id: false}},
+        );
+
+        // Building the final template to ribbon-id map
+        const finalTemplateRibbons = this.productTemplatesRibbons.reduce((acc, {templateId, ribbonId}) => {
+            acc[templateId] = ribbonId;
+            return acc;
+        }, {});
+        // Inverting the relationship so that we have all templates that have the same ribbon to reduce RPCs
+        const ribbonTemplates = Object.entries(finalTemplateRibbons).reduce((acc, [templateId, ribbonId]) => {
+            if (!acc[ribbonId]) {
+                acc[ribbonId] = [];
+            }
+            acc[ribbonId].push(parseInt(templateId));
+            return acc;
+        }, {});
+        const setProductTemplateRibbons = Object.entries(ribbonTemplates)
+            // If the ribbonId that the template had no longer exists, remove the ribbon (id = false)
+            .map(([ribbonId, templateIds]) => {
+                const id = currentIds.includes(parseInt(ribbonId)) ? ribbonId : false;
+                return [id, templateIds];
+            }).map(([ribbonId, templateIds]) => this._rpc({
+                method: 'write',
+                model: 'product.template',
+                args: [templateIds, {'website_ribbon_id': localToServer[ribbonId].id}],
+            }));
+        return Promise.all(setProductTemplateRibbons);
+    },
+    /**
+     * Checks whether the current page is the product list.
+     *
+     * @private
+     */
+    _isProductListPage() {
+        return $('#products_grid').length !== 0;
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Returns a copy of this.ribbons through a callback.
+     *
+     * @private
+     */
+    _onGetRibbons(ev) {
+        ev.data.callback(Object.assign({}, this.ribbons));
+    },
+    /**
+     * Returns all ribbon classes, current and deleted, so they can be removed.
+     *
+     * @private
+     */
+    _onGetRibbonClasses(ev) {
+        const classes = Object.values(this.ribbons).reduce((classes, ribbon) => {
+            return classes + ` ${ribbon.html_class}`;
+        }, '') + this.deletedRibbonClasses;
+        ev.data.callback(classes);
+    },
+    /**
+     * Deletes a ribbon.
+     *
+     * @private
+     */
+    _onDeleteRibbon(ev) {
+        this.deletedRibbonClasses += ` ${this.ribbons[ev.data.id].html_class}`;
+        delete this.ribbons[ev.data.id];
+    },
+    /**
+     * Sets a ribbon;
+     *
+     * @private
+     */
+    _onSetRibbon(ev) {
+        const {ribbon} = ev.data;
+        const previousRibbon = this.ribbons[ribbon.id];
+        if (previousRibbon) {
+            this.deletedRibbonClasses += ` ${previousRibbon.html_class}`;
+        }
+        this.ribbons[ribbon.id] = ribbon;
+    },
+    /**
+     * Sets which ribbon is used by a product template.
+     *
+     * @private
+     */
+    _onSetProductRibbon(ev) {
+        const {templateId, ribbonId} = ev.data;
+        this.productTemplatesRibbons.push({templateId, ribbonId});
+    },
+});
+
+publicWidget.registry.websiteSaleCurrency = publicWidget.Widget.extend({
+    selector: '.oe_website_sale',
+    disabledInEditableMode: false,
+    edit_events: {
+        'click .oe_currency_value:o_editable': '_onCurrencyValueClick',
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onCurrencyValueClick: function (ev) {
+        $(ev.currentTarget).selectContent();
+    },
+});
+
+function reload() {
+    if (window.location.href.match(/\?enable_editor/)) {
+        window.location.reload();
+    } else {
+        window.location.href = window.location.href.replace(/\?(enable_editor=1&)?|#.*|$/, '?enable_editor=1&');
+    }
+}
+
+options.registry.WebsiteSaleGridLayout = options.Class.extend({
+
+    /**
+     * @override
+     */
+    start: function () {
+        this.ppg = parseInt(this.$target.closest('[data-ppg]').data('ppg'));
+        this.ppr = parseInt(this.$target.closest('[data-ppr]').data('ppr'));
+        return this._super.apply(this, arguments);
+    },
+    /**
+     * @override
+     */
+    onFocus: function () {
+        var listLayoutEnabled = this.$target.closest('#products_grid').hasClass('o_wsale_layout_list');
+        this.$el.filter('.o_wsale_ppr_submenu').toggleClass('d-none', listLayoutEnabled);
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @see this.selectClass for params
+     */
+    setPpg: function (previewMode, widgetValue, params) {
+        const ppg = parseInt(widgetValue);
+        if (!ppg || ppg < 1) {
+            return false;
+        }
+        this.ppg = ppg;
+        return this._rpc({
+            route: '/shop/change_ppg',
+            params: {
+                'ppg': ppg,
+            },
+        }).then(() => reload());
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    setPpr: function (previewMode, widgetValue, params) {
+        this.ppr = parseInt(widgetValue);
+        this._rpc({
+            route: '/shop/change_ppr',
+            params: {
+                'ppr': this.ppr,
+            },
+        }).then(reload);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState: function (methodName, params) {
+        switch (methodName) {
+            case 'setPpg': {
+                return this.ppg;
+            }
+            case 'setPpr': {
+                return this.ppr;
+            }
+        }
+        return this._super(...arguments);
+    },
+});
+
+options.registry.WebsiteSaleProductsItem = options.Class.extend({
+    xmlDependencies: (options.Class.prototype.xmlDependencies || []).concat(['/website_sale/static/src/xml/website_sale_utils.xml']),
+    events: _.extend({}, options.Class.prototype.events || {}, {
+        'mouseenter .o_wsale_soptions_menu_sizes table': '_onTableMouseEnter',
+        'mouseleave .o_wsale_soptions_menu_sizes table': '_onTableMouseLeave',
+        'mouseover .o_wsale_soptions_menu_sizes td': '_onTableItemMouseEnter',
+        'click .o_wsale_soptions_menu_sizes td': '_onTableItemClick',
+    }),
+
+    /**
+     * @override
+     */
+    willStart: async function () {
+        const _super = this._super.bind(this);
+        this.ppr = this.$target.closest('[data-ppr]').data('ppr');
+        this.productTemplateID = parseInt(this.$target.find('[data-oe-model="product.template"]').data('oe-id'));
+        this.ribbons = await new Promise(resolve => this.trigger_up('get_ribbons', {callback: resolve}));
+        return _super(...arguments);
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        this._resetRibbonDummy();
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    onFocus: function () {
+        var listLayoutEnabled = this.$target.closest('#products_grid').hasClass('o_wsale_layout_list');
+        this.$el.find('.o_wsale_soptions_menu_sizes')
+            .toggleClass('d-none', listLayoutEnabled);
+        // Ribbons may have been edited or deleted in another products' option, need to make sure they're up to date
+        this.rerender = true;
+    },
+    /**
+     * @override
+     */
+    onBlur: function () {
+        // Since changes will not be saved unless they are validated, reset the
+        // previewed ribbon onBlur to communicate that to the user
+        this._resetRibbonDummy();
+        this._toggleEditingUI(false);
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    selectStyle(previewMode, widgetValue, params) {
+        const proms = [this._super(...arguments)];
+        if (params.cssProperty === 'background-color' && params.colorNames.includes(widgetValue)) {
+            // Reset text-color when choosing a background-color class, so it uses the automatic text-color of the class.
+            proms.push(this.selectStyle(previewMode, '', {applyTo: '.o_wsale_ribbon_dummy', cssProperty: 'color'}));
+        }
+        return Promise.all(proms);
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    async setRibbon(previewMode, widgetValue, params) {
+        if (previewMode === 'reset') {
+            widgetValue = this.prevRibbonId;
+        } else {
+            this.prevRibbonId = this.$target[0].dataset.ribbonId;
+        }
+        this.$target[0].dataset.ribbonId = widgetValue;
+        this.trigger_up('set_product_ribbon', {
+            templateId: this.productTemplateID,
+            ribbonId: widgetValue || false,
+        });
+        const ribbon = this.ribbons[widgetValue] || {html: '', bg_color: '', text_color: '', html_class: ''};
+        const $ribbons = $(`[data-ribbon-id="${widgetValue}"] .o_ribbon:not(.o_wsale_ribbon_dummy)`);
+        $ribbons.html(ribbon.html);
+        let htmlClasses;
+        this.trigger_up('get_ribbon_classes', {callback: classes => htmlClasses = classes});
+        $ribbons.removeClass(htmlClasses);
+
+        $ribbons.addClass(ribbon.html_class || '');
+        $ribbons.css('color', ribbon.text_color);
+        $ribbons.css('background-color', ribbon.bg_color || '');
+
+        if (!this.ribbons[widgetValue]) {
+            $(`[data-ribbon-id="${widgetValue}"]`).each((index, product) => delete product.dataset.ribbonId);
+        }
+        this._resetRibbonDummy();
+        this._toggleEditingUI(false);
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    editRibbon(previewMode, widgetValue, params) {
+        this.saveMethod = 'modify';
+        this._toggleEditingUI(true);
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    createRibbon(previewMode, widgetValue, params) {
+        this.saveMethod = 'create';
+        this.$ribbon.html('Ribbon text');
+        this.$ribbon.addClass('bg-primary o_ribbon_left');
+        this._toggleEditingUI(true);
+        this.isCreating = true;
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    async deleteRibbon(previewMode, widgetValue, params) {
+        if (this.isCreating) {
+            // Ribbon doesn't exist yet, simply discard.
+            this.isCreating = false;
+            this._resetRibbonDummy();
+            return this._toggleEditingUI(false);
+        }
+        const {ribbonId} = this.$target[0].dataset;
+        this.trigger_up('delete_ribbon', {id: ribbonId});
+        this.ribbons = await new Promise(resolve => this.trigger_up('get_ribbons', {callback: resolve}));
+        this.rerender = true;
+        await this.setRibbon(false, ribbonId);
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    async saveRibbon(previewMode, widgetValue, params) {
+        const text = this.$ribbon.html().trim();
+        if (!text) {
+            return;
+        }
+        const ribbon = {
+            'html': text,
+            'bg_color': this.$ribbon[0].style.backgroundColor,
+            'text_color': this.$ribbon[0].style.color,
+            'html_class': this.$ribbon.attr('class').split(' ')
+                .filter(c => !['d-none', 'o_wsale_ribbon_dummy', 'o_ribbon'].includes(c))
+                .join(' '),
+        };
+        ribbon.id = this.saveMethod === 'modify' ? parseInt(this.$target[0].dataset.ribbonId) : Date.now();
+        this.trigger_up('set_ribbon', {ribbon: ribbon});
+        this.ribbons = await new Promise(resolve => this.trigger_up('get_ribbons', {callback: resolve}));
+        this.rerender = true;
+        await this.setRibbon(false, ribbon.id);
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    setRibbonHtml(previewMode, widgetValue, params) {
+        this.$ribbon.html(widgetValue);
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    setRibbonMode(previewMode, widgetValue, params) {
+        this.$ribbon[0].className = this.$ribbon[0].className.replace(/o_(ribbon|tag)_(left|right)/, `o_${widgetValue}_$2`);
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    setRibbonPosition(previewMode, widgetValue, params) {
+        this.$ribbon[0].className = this.$ribbon[0].className.replace(/o_(ribbon|tag)_(left|right)/, `o_$1_${widgetValue}`);
+    },
+    /**
+     * @see this.selectClass for params
+     */
+    changeSequence: function (previewMode, widgetValue, params) {
+        this._rpc({
+            route: '/shop/change_sequence',
+            params: {
+                id: this.productTemplateID,
+                sequence: widgetValue,
+            },
+        }).then(reload);
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    updateUI: async function () {
+        await this._super.apply(this, arguments);
+
+        var sizeX = parseInt(this.$target.attr('colspan') || 1);
+        var sizeY = parseInt(this.$target.attr('rowspan') || 1);
+
+        var $size = this.$el.find('.o_wsale_soptions_menu_sizes');
+        $size.find('tr:nth-child(-n + ' + sizeY + ') td:nth-child(-n + ' + sizeX + ')')
+             .addClass('selected');
+
+        // Adapt size array preview to fit ppr
+        $size.find('tr td:nth-child(n + ' + parseInt(this.ppr + 1) + ')').hide();
+        if (this.rerender) {
+            this.rerender = false;
+            return this._rerenderXML();
+        }
+    },
+    /**
+     * @override
+     */
+    updateUIVisibility: async function () {
+        // Main updateUIVisibility will remove the d-none class because there are visible widgets
+        // inside of it. TODO: update this once updateUIVisibility can be used to compute visibility
+        // of arbitrary DOM elements and not just widgets.
+        const isEditing = this.$el.find('[data-name="ribbon_options"]').hasClass('d-none');
+        await this._super(...arguments);
+        this._toggleEditingUI(isEditing);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _renderCustomXML(uiFragment) {
+        const $select = $(uiFragment.querySelector('.o_wsale_ribbon_select'));
+        this.ribbons = await new Promise(resolve => this.trigger_up('get_ribbons', {callback: resolve}));
+        if (!this.$ribbon) {
+            this._resetRibbonDummy();
+        }
+        const classes = this.$ribbon[0].className;
+        this.$ribbon[0].className = '';
+        const defaultTextColor = window.getComputedStyle(this.$ribbon[0]).color;
+        this.$ribbon[0].className = classes;
+        Object.values(this.ribbons).forEach(ribbon => {
+            const colorClasses = ribbon.html_class
+                .split(' ')
+                .filter(className => !/^o_(ribbon|tag)_(left|right)$/.test(className))
+                .join(' ');
+            $select.append(qweb.render('website_sale.ribbonSelectItem', {
+                ribbon,
+                colorClasses,
+                isTag: /o_tag_(left|right)/.test(ribbon.html_class),
+                isLeft: /o_(tag|ribbon)_left/.test(ribbon.html_class),
+                textColor: ribbon.text_color || colorClasses ? 'currentColor' : defaultTextColor,
+            }));
+        });
+    },
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        const classList = this.$ribbon[0].classList;
+        switch (methodName) {
+            case 'setRibbon':
+                return this.$target.attr('data-ribbon-id') || '';
+            case 'setRibbonHtml':
+                return this.$ribbon.html();
+            case 'setRibbonMode': {
+                if (classList.contains('o_ribbon_left') || classList.contains('o_ribbon_right')) {
+                    return 'ribbon';
+                }
+                return 'tag';
+            }
+            case 'setRibbonPosition': {
+                if (classList.contains('o_tag_left') || classList.contains('o_ribbon_left')) {
+                    return 'left';
+                }
+                return 'right';
+            }
+        }
+        return this._super(methodName, params);
+    },
+    /**
+     * Toggles the UI mode between select and create/edit mode.
+     *
+     * @private
+     * @param {Boolean} state true to activate editing UI, false to deactivate.
+     */
+    _toggleEditingUI(state) {
+        this.$el.find('[data-name="ribbon_options"]').toggleClass('d-none', state);
+        this.$el.find('[data-name="ribbon_customize_opt"]').toggleClass('d-none', !state);
+        this.$('.o_ribbon:not(.o_wsale_ribbon_dummy)').toggleClass('d-none', state);
+        this.$ribbon.toggleClass('d-none', !state);
+    },
+    /**
+     * Creates a copy of current ribbon to manipulate for edition/creation.
+     *
+     * @private
+     */
+    _resetRibbonDummy() {
+        if (this.$ribbon) {
+            this.$ribbon.remove();
+        }
+        const $original = this.$('.o_ribbon');
+        this.$ribbon = $original.clone().addClass('d-none o_wsale_ribbon_dummy').appendTo($original.parent());
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onTableMouseEnter: function (ev) {
+        $(ev.currentTarget).addClass('oe_hover');
+    },
+    /**
+     * @private
+     */
+    _onTableMouseLeave: function (ev) {
+        $(ev.currentTarget).removeClass('oe_hover');
+    },
+    /**
+     * @private
+     */
+    _onTableItemMouseEnter: function (ev) {
+        var $td = $(ev.currentTarget);
+        var $table = $td.closest("table");
+        var x = $td.index() + 1;
+        var y = $td.parent().index() + 1;
+
+        var tr = [];
+        for (var yi = 0; yi < y; yi++) {
+            tr.push("tr:eq(" + yi + ")");
+        }
+        var $selectTr = $table.find(tr.join(","));
+        var td = [];
+        for (var xi = 0; xi < x; xi++) {
+            td.push("td:eq(" + xi + ")");
+        }
+        var $selectTd = $selectTr.find(td.join(","));
+
+        $table.find("td").removeClass("select");
+        $selectTd.addClass("select");
+    },
+    /**
+     * @private
+     */
+    _onTableItemClick: function (ev) {
+        var $td = $(ev.currentTarget);
+        var x = $td.index() + 1;
+        var y = $td.parent().index() + 1;
+        this._rpc({
+            route: '/shop/change_size',
+            params: {
+                id: this.productTemplateID,
+                x: x,
+                y: y,
+            },
+        }).then(reload);
+    },
+});
+});
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
new file mode 100644
index 00000000..89bce50f
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -0,0 +1,827 @@
+odoo.define('website_sale.cart', function (require) {
+'use strict';
+
+var publicWidget = require('web.public.widget');
+var core = require('web.core');
+var _t = core._t;
+
+var timeout;
+
+publicWidget.registry.websiteSaleCartLink = publicWidget.Widget.extend({
+    selector: '#top_menu a[href$="/shop/cart"]',
+    events: {
+        'mouseenter': '_onMouseEnter',
+        'mouseleave': '_onMouseLeave',
+        'click': '_onClick',
+    },
+
+    /**
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+        this._popoverRPC = null;
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        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 this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onMouseEnter: function (ev) {
+        var self = this;
+        clearTimeout(timeout);
+        $(this.selector).not(ev.currentTarget).popover('hide');
+        timeout = setTimeout(function () {
+            if (!self.$el.is(':hover') || $('.mycart-popover:visible').length) {
+                return;
+            }
+            self._popoverRPC = $.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');
+                });
+            });
+        }, 300);
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onMouseLeave: function (ev) {
+        var self = this;
+        setTimeout(function () {
+            if ($('.popover:hover').length) {
+                return;
+            }
+            if (!self.$el.is(':hover')) {
+               self.$el.popover('hide');
+            }
+        }, 1000);
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClick: function (ev) {
+        // When clicking on the cart link, prevent any popover to show up (by
+        // clearing the related setTimeout) and, if a popover rpc is ongoing,
+        // wait for it to be completed before going to the link's href. Indeed,
+        // going to that page may perform the same computation the popover rpc
+        // is already doing.
+        clearTimeout(timeout);
+        if (this._popoverRPC && this._popoverRPC.state() === 'pending') {
+            ev.preventDefault();
+            var href = ev.currentTarget.href;
+            this._popoverRPC.then(function () {
+                window.location.href = href;
+            });
+        }
+    },
+});
+});
+
+odoo.define('website_sale.website_sale_category', function (require) {
+'use strict';
+
+var publicWidget = require('web.public.widget');
+
+publicWidget.registry.websiteSaleCategory = publicWidget.Widget.extend({
+    selector: '#o_shop_collapse_category',
+    events: {
+        'click .fa-chevron-right': '_onOpenClick',
+        'click .fa-chevron-down': '_onCloseClick',
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @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';
+
+var core = require('web.core');
+var config = require('web.config');
+var publicWidget = require('web.public.widget');
+var VariantMixin = require('sale.VariantMixin');
+var wSaleUtils = require('website_sale.utils');
+const wUtils = require('website.utils');
+require("web.zoomodoo");
+
+
+publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
+    selector: '.oe_website_sale',
+    events: _.extend({}, VariantMixin.events || {}, {
+        'change form .js_product:first 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',
+        'click .show_coupon': '_onClickShowCoupon',
+        'submit .o_wsale_products_searchbar_form': '_onSubmitSaleSearch',
+        'change select[name="country_id"]': '_onChangeCountry',
+        'change #shipping_use_same': '_onChangeShippingUseSame',
+        'click .toggle_summary': '_onToggleSummary',
+        'click #add_to_cart, #buy_now, #products_grid .o_wsale_product_btn .a-submit': 'async _onClickAdd',
+        'click input.js_product_change': 'onChangeVariant',
+        'change .js_main_product [data-attribute_exclusions]': 'onChangeVariant',
+        'change oe_optional_products_modal [data-attribute_exclusions]': 'onChangeVariant',
+    }),
+
+    /**
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+
+        this._changeCartQuantity = _.debounce(this._changeCartQuantity.bind(this), 500);
+        this._changeCountry = _.debounce(this._changeCountry.bind(this), 500);
+
+        this.isWebsite = true;
+
+        delete this.events['change .main_product:not(.in_cart) input.js_quantity'];
+        delete this.events['change [data-attribute_exclusions]'];
+    },
+    /**
+     * @override
+     */
+    start() {
+        const def = this._super(...arguments);
+
+        this._applyHashFromSearch();
+
+        _.each(this.$('div.js_product'), function (product) {
+            $('input.js_product_change', product).first().trigger('change');
+        });
+
+        // This has to be triggered to compute the "out of stock" feature and the hash variant changes
+        this.triggerVariantChange(this.$el);
+
+        this.$('select[name="country_id"]').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');
+            }
+        });
+
+        this._startZoom();
+
+        window.addEventListener('hashchange', () => {
+            this._applyHash();
+            this.triggerVariantChange(this.$el);
+        });
+
+        return def;
+    },
+    /**
+     * The selector is different when using list view of variants.
+     *
+     * @override
+     */
+    getSelectedVariantValues: function ($container) {
+        var combination = $container.find('input.js_product_change:checked')
+            .data('combination');
+
+        if (combination) {
+            return combination;
+        }
+        return VariantMixin.getSelectedVariantValues.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    _applyHash: function () {
+        var hash = window.location.hash.substring(1);
+        if (hash) {
+            var params = $.deparam(hash);
+            if (params['attr']) {
+                var attributeIds = params['attr'].split(',');
+                var $inputs = this.$('input.js_variant_change, select.js_variant_change option');
+                _.each(attributeIds, function (id) {
+                    var $toSelect = $inputs.filter('[data-value_id="' + id + '"]');
+                    if ($toSelect.is('input[type="radio"]')) {
+                        $toSelect.prop('checked', true);
+                    } else if ($toSelect.is('option')) {
+                        $toSelect.prop('selected', true);
+                    }
+                });
+                this._changeColorAttribute();
+            }
+        }
+    },
+
+    /**
+     * Sets the url hash from the selected product options.
+     *
+     * @private
+     */
+    _setUrlHash: function ($parent) {
+        var $attributes = $parent.find('input.js_variant_change:checked, select.js_variant_change option:selected');
+        var attributeIds = _.map($attributes, function (elem) {
+            return $(elem).data('value_id');
+        });
+        history.replaceState(undefined, undefined, '#attr=' + attributeIds.join(','));
+    },
+    /**
+     * Set the checked color active.
+     *
+     * @private
+     */
+    _changeColorAttribute: function () {
+        $('.css_attribute_color').removeClass("active")
+                                 .filter(':has(input:checked)')
+                                 .addClass("active");
+    },
+    /**
+     * @private
+     */
+    _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);
+
+        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;
+            }
+            if (!data.cart_quantity) {
+                return window.location = '/shop/cart';
+            }
+            wSaleUtils.updateCartNavBar(data);
+            $input.val(data.quantity);
+            $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).html(data.quantity);
+
+            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);
+            }
+        });
+    },
+    /**
+     * @private
+     */
+    _changeCountry: function () {
+        if (!$("#country_id").val()) {
+            return;
+        }
+        this._rpc({
+            route: "/shop/country_infos/" + $("#country_id").val(),
+            params: {
+                mode: $("#country_id").attr('mode'),
+            },
+        }).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 || data.state_required) {
+                    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);
+                });
+            }
+
+            if ($("label[for='zip']").length) {
+                $("label[for='zip']").toggleClass('label-optional', !data.zip_required);
+                $("label[for='zip']").get(0).toggleAttribute('required', !!data.zip_required);
+            }
+            if ($("label[for='zip']").length) {
+                $("label[for='state_id']").toggleClass('label-optional', !data.state_required);
+                $("label[for='state_id']").get(0).toggleAttribute('required', !!data.state_required);
+            }
+        });
+    },
+    /**
+     * This is overridden to handle the "List View of Variants" of the web shop.
+     * That feature allows directly selecting the variant from a list instead of selecting the
+     * attribute values.
+     *
+     * Since the layout is completely different, we need to fetch the product_id directly
+     * from the selected variant.
+     *
+     * @override
+     */
+    _getProductId: function ($parent) {
+        if ($parent.find('input.js_product_change').length !== 0) {
+            return parseInt($parent.find('input.js_product_change:checked').val());
+        }
+        else {
+            return VariantMixin._getProductId.apply(this, arguments);
+        }
+    },
+    /**
+     * @private
+     */
+    _startZoom: function () {
+        // 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,
+            attach = '#o-carousel-product';
+            _.each($('.ecom-zoomable img[data-zoom]'), function (el) {
+                onImageLoaded(el, function () {
+                    var $img = $(el);
+                    $img.zoomOdoo({event: autoZoom ? 'mouseenter' : 'click', attach: attach});
+                    $img.attr('data-zoom', 1);
+                });
+            });
+        }
+
+        function onImageLoaded(img, callback) {
+            // On Chrome the load event already happened at this point so we
+            // have to rely on complete. On Firefox it seems that the event is
+            // always triggered after this so we can rely on it.
+            //
+            // However on the "complete" case we still want to keep listening to
+            // the event because if the image is changed later (eg. product
+            // configurator) a new load event will be triggered (both browsers).
+            $(img).on('load', function () {
+                callback();
+            });
+            if (img.complete) {
+                callback();
+            }
+        }
+    },
+    /**
+     * On website, we display a carousel instead of only one image
+     *
+     * @override
+     * @private
+     */
+    _updateProductImage: function ($productContainer, displayImage, productId, productTemplateId, newCarousel, isCombinationPossible) {
+        var $carousel = $productContainer.find('#o-carousel-product');
+        // When using the web editor, don't reload this or the images won't
+        // be able to be edited depending on if this is done loading before
+        // or after the editor is ready.
+        if (window.location.search.indexOf('enable_editor') === -1) {
+            var $newCarousel = $(newCarousel);
+            $carousel.after($newCarousel);
+            $carousel.remove();
+            $carousel = $newCarousel;
+            $carousel.carousel(0);
+            this._startZoom();
+            // fix issue with carousel height
+            this.trigger_up('widgets_start_request', {$target: $carousel});
+        }
+        $carousel.toggleClass('css_not_available', !isCombinationPossible);
+    },
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickAdd: function (ev) {
+        ev.preventDefault();
+        this.isBuyNow = $(ev.currentTarget).attr('id') === 'buy_now';
+        return this._handleAdd($(ev.currentTarget).closest('form'));
+    },
+    /**
+     * Initializes the optional products modal
+     * and add handlers to the modal events (confirm, back, ...)
+     *
+     * @private
+     * @param {$.Element} $form the related webshop form
+     */
+    _handleAdd: function ($form) {
+        var self = this;
+        this.$form = $form;
+
+        var productSelector = [
+            'input[type="hidden"][name="product_id"]',
+            'input[type="radio"][name="product_id"]:checked'
+        ];
+
+        var productReady = this.selectOrCreateProduct(
+            $form,
+            parseInt($form.find(productSelector.join(', ')).first().val(), 10),
+            $form.find('.product_template_id').val(),
+            false
+        );
+
+        return productReady.then(function (productId) {
+            $form.find(productSelector.join(', ')).val(productId);
+
+            self.rootProduct = {
+                product_id: productId,
+                quantity: parseFloat($form.find('input[name="add_qty"]').val() || 1),
+                product_custom_attribute_values: self.getCustomVariantValues($form.find('.js_product')),
+                variant_values: self.getSelectedVariantValues($form.find('.js_product')),
+                no_variant_attribute_values: self.getNoVariantAttributeValues($form.find('.js_product'))
+            };
+
+            return self._onProductReady();
+        });
+    },
+
+    _onProductReady: function () {
+        return this._submitForm();
+    },
+
+    /**
+     * Add custom variant values and attribute values that do not generate variants
+     * in the form data and trigger submit.
+     *
+     * @private
+     * @returns {Promise} never resolved
+     */
+    _submitForm: function () {
+        let params = this.rootProduct;
+        params.add_qty = params.quantity;
+
+        params.product_custom_attribute_values = JSON.stringify(params.product_custom_attribute_values);
+        params.no_variant_attribute_values = JSON.stringify(params.no_variant_attribute_values);
+        
+        if (this.isBuyNow) {
+            params.express = true;
+        }
+
+        return wUtils.sendRequest('/shop/cart/update', params);
+    },
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickAddCartJSON: function (ev){
+        this.onClickAddCartJSON(ev);
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeAddQuantity: function (ev) {
+        this.onChangeAddQuantity(ev);
+    },
+    /**
+     * @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
+     */
+    _onClickSubmit: function (ev, forceSubmit) {
+        if ($(ev.currentTarget).is('#add_to_cart, #products_grid .a-submit') && !forceSubmit) {
+            return;
+        }
+        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
+     */
+    _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'));
+    },
+    /**
+     * Toggles the add to cart button depending on the possibility of the
+     * current combination.
+     *
+     * @override
+     */
+    _toggleDisable: function ($parent, isCombinationPossible) {
+        VariantMixin._toggleDisable.apply(this, arguments);
+        $parent.find("#add_to_cart").toggleClass('disabled', !isCombinationPossible);
+        $parent.find("#buy_now").toggleClass('disabled', !isCombinationPossible);
+    },
+    /**
+     * Write the properties of the form elements in the DOM to prevent the
+     * current selection from being lost when activating the web editor.
+     *
+     * @override
+     */
+    onChangeVariant: function (ev) {
+        var $component = $(ev.currentTarget).closest('.js_product');
+        $component.find('input').each(function () {
+            var $el = $(this);
+            $el.attr('checked', $el.is(':checked'));
+        });
+        $component.find('select option').each(function () {
+            var $el = $(this);
+            $el.attr('selected', $el.is(':selected'));
+        });
+
+        this._setUrlHash($component);
+
+        return VariantMixin.onChangeVariant.apply(this, arguments);
+    },
+    /**
+     * @private
+     */
+    _onToggleSummary: function () {
+        $('.toggle_summary_div').toggleClass('d-none');
+        $('.toggle_summary_div').removeClass('d-xl-block');
+    },
+    /**
+     * @private
+     */
+    _applyHashFromSearch() {
+        const params = $.deparam(window.location.search.slice(1));
+        if (params.attrib) {
+            const dataValueIds = [];
+            for (const attrib of [].concat(params.attrib)) {
+                const attribSplit = attrib.split('-');
+                const attribValueSelector = `.js_variant_change[name="ptal-${attribSplit[0]}"][value="${attribSplit[1]}"]`;
+                const attribValue = this.el.querySelector(attribValueSelector);
+                if (attribValue !== null) {
+                    dataValueIds.push(attribValue.dataset.value_id);
+                }
+            }
+            if (dataValueIds.length) {
+                history.replaceState(undefined, undefined, `#attr=${dataValueIds.join(',')}`);
+            }
+        }
+        this._applyHash();
+    },
+});
+
+publicWidget.registry.WebsiteSaleLayout = publicWidget.Widget.extend({
+    selector: '.oe_website_sale',
+    disabledInEditableMode: false,
+    events: {
+        'change .o_wsale_apply_layout': '_onApplyShopLayoutChange',
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onApplyShopLayoutChange: function (ev) {
+        var switchToList = $(ev.currentTarget).find('.o_wsale_apply_list input').is(':checked');
+        if (!this.editableMode) {
+            this._rpc({
+                route: '/shop/save_shop_layout_mode',
+                params: {
+                    'layout_mode': switchToList ? 'list' : 'grid',
+                },
+            });
+        }
+        var $grid = this.$('#products_grid');
+        // Disable transition on all list elements, then switch to the new
+        // layout then reenable all transitions after having forced a redraw
+        // TODO should probably be improved to allow disabling transitions
+        // altogether with a class/option.
+        $grid.find('*').css('transition', 'none');
+        $grid.toggleClass('o_wsale_layout_list', switchToList);
+        void $grid[0].offsetWidth;
+        $grid.find('*').css('transition', '');
+    },
+});
+
+publicWidget.registry.websiteSaleCart = publicWidget.Widget.extend({
+    selector: '.oe_website_sale .oe_cart',
+    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.border-primary');
+        $old.find('.btn-ship').toggle();
+        $old.addClass('js_change_shipping');
+        $old.removeClass('border 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 border-primary');
+
+        var $form = $(ev.currentTarget).parent('div.one_kanban').find('form.d-none');
+        $.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_backend.js b/addons/website_sale/static/src/js/website_sale_backend.js
new file mode 100644
index 00000000..7f8d92d8
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale_backend.js
@@ -0,0 +1,127 @@
+odoo.define('website_sale.backend', function (require) {
+"use strict";
+
+var WebsiteBackend = require('website.backend.dashboard');
+var COLORS = ['#875a7b', '#21b799', '#E4A900', '#D5653E', '#5B899E', '#E46F78', '#8F8F8F'];
+
+WebsiteBackend.include({
+    jsLibs: [
+        '/web/static/lib/Chart/Chart.js',
+    ],
+
+    events: _.defaults({
+        'click tr.o_product_template': 'on_product_template',
+        'click .js_utm_selector': '_onClickUtmButton',
+    }, WebsiteBackend.prototype.events),
+
+    init: function (parent, context) {
+        this._super(parent, context);
+
+        this.graphs.push({'name': 'sales', 'group': 'sale_salesman'});
+    },
+
+    /**
+     * @override method from website backendDashboard
+     * @private
+     */
+    render_graphs: function() {
+        this._super();
+        this.utmGraphData = this.dashboards_data.sales.utm_graph;
+        this.utmGraphData && this._renderUtmGraph();
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Method used to generate Pie chart, depending on user selected UTM option(campaign, medium, source)
+     *
+     * @private
+     */
+    _renderUtmGraph: function() {
+        var self = this;
+        this.$(".utm_button_name").html(this.btnName); // change drop-down button name
+        var utmDataType = this.utmType || 'campaign_id';
+        var graphData = this.utmGraphData[utmDataType];
+        if (graphData.length) {
+            this.$(".o_utm_no_data_img").hide();
+            this.$(".o_utm_data_graph").empty().show();
+            var $canvas = $('<canvas/>');
+            this.$(".o_utm_data_graph").append($canvas);
+            var context = $canvas[0].getContext('2d');
+            console.log(graphData);
+
+            var data = [];
+            var labels = [];
+            graphData.forEach(function(pt) {
+                data.push(pt.amount_total);
+                labels.push(pt.utm_type);
+            });
+            var config = {
+                type: 'pie',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        data: data,
+                        backgroundColor: COLORS,
+                    }]
+                },
+                options: {
+                    tooltips: {
+                        callbacks: {
+                            label: function(tooltipItem, data) {
+                                var label = data.labels[tooltipItem.index] || '';
+                                if (label) {
+                                    label += ': ';
+                                }
+                                var amount = data.datasets[0].data[tooltipItem.index];
+                                amount = self.render_monetary_field(amount, self.data.currency);
+                                label += amount;
+                                return label;
+                            }
+                        }
+                    },
+                    legend: {display: false}
+                }
+            };
+            new Chart(context, config);
+        } else {
+            this.$(".o_utm_no_data_img").show();
+            this.$(".o_utm_data_graph").hide();
+        }
+    },
+
+    //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
+
+        /**
+         * Onchange on UTM dropdown button, this method is called.
+         *
+         * @private
+         */
+    _onClickUtmButton: function(ev) {
+        this.utmType = $(ev.currentTarget).attr('name');
+        this.btnName = $(ev.currentTarget).text();
+        this._renderUtmGraph();
+    },
+
+    on_product_template: function (ev) {
+        ev.preventDefault();
+
+        var product_tmpl_id = $(ev.currentTarget).data('productId');
+        this.do_action({
+            type: 'ir.actions.act_window',
+            res_model: 'product.template',
+            res_id: product_tmpl_id,
+            views: [[false, 'form']],
+            target: 'current',
+        }, {
+            on_reverse_breadcrumb: this.on_reverse_breadcrumb,
+        });
+    },
+});
+return WebsiteBackend;
+
+});
diff --git a/addons/website_sale/static/src/js/website_sale_form_editor.js b/addons/website_sale/static/src/js/website_sale_form_editor.js
new file mode 100644
index 00000000..021fcf60
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale_form_editor.js
@@ -0,0 +1,28 @@
+odoo.define('website_sale.form', function (require) {
+'use strict';
+
+var FormEditorRegistry = require('website_form.form_editor_registry');
+
+FormEditorRegistry.add('create_customer', {
+    formFields: [{
+        type: 'char',
+        modelRequired: true,
+        name: 'name',
+        string: 'Your Name',
+    }, {
+        type: 'email',
+        required: true,
+        name: 'email',
+        string: 'Your Email',
+    }, {
+        type: 'tel',
+        name: 'phone',
+        string: 'Phone Number',
+    }, {
+        type: 'char',
+        name: 'company_name',
+        string: 'Company Name',
+    }],
+});
+
+});
diff --git a/addons/website_sale/static/src/js/website_sale_payment.js b/addons/website_sale/static/src/js/website_sale_payment.js
new file mode 100644
index 00000000..4d6abd98
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale_payment.js
@@ -0,0 +1,48 @@
+odoo.define('website_sale.payment', function (require) {
+'use strict';
+
+var publicWidget = require('web.public.widget');
+
+publicWidget.registry.WebsiteSalePayment = publicWidget.Widget.extend({
+    selector: '#wrapwrap:has(#checkbox_cgv)',
+    events: {
+        'change #checkbox_cgv': '_onCGVCheckboxClick',
+    },
+
+    /**
+     * @override
+     */
+    start: function () {
+        this.$checkbox = this.$('#checkbox_cgv');
+        this.$payButton = $('button#o_payment_form_pay');
+        this.$checkbox.trigger('change');
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _adaptPayButton: function () {
+        var disabledReasons = this.$payButton.data('disabled_reasons') || {};
+        disabledReasons.cgv = !this.$checkbox.prop('checked');
+        this.$payButton.data('disabled_reasons', disabledReasons);
+
+        this.$payButton.prop('disabled', _.contains(disabledReasons, true));
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onCGVCheckboxClick: function () {
+        this._adaptPayButton();
+    },
+});
+});
diff --git a/addons/website_sale/static/src/js/website_sale_recently_viewed.js b/addons/website_sale/static/src/js/website_sale_recently_viewed.js
new file mode 100644
index 00000000..ea9fedec
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale_recently_viewed.js
@@ -0,0 +1,243 @@
+odoo.define('website_sale.recently_viewed', function (require) {
+
+var concurrency = require('web.concurrency');
+var config = require('web.config');
+var core = require('web.core');
+var publicWidget = require('web.public.widget');
+var utils = require('web.utils');
+var wSaleUtils = require('website_sale.utils');
+
+var qweb = core.qweb;
+
+publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend({
+    selector: '.s_wsale_products_recently_viewed',
+    xmlDependencies: ['/website_sale/static/src/xml/website_sale_recently_viewed.xml'],
+    disabledInEditableMode: false,
+    read_events: {
+        'click .js_add_cart': '_onAddToCart',
+        'click .js_remove': '_onRemove',
+    },
+
+    /**
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+        this._dp = new concurrency.DropPrevious();
+        this.uniqueId = _.uniqueId('o_carousel_recently_viewed_products_');
+        this._onResizeChange = _.debounce(this._addCarousel, 100);
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        this._dp.add(this._fetch()).then(this._render.bind(this));
+        $(window).resize(() => {
+            this._onResizeChange();
+        });
+        return this._super.apply(this, arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super(...arguments);
+        this.$el.addClass('d-none');
+        this.$el.find('.slider').html('');
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _fetch: function () {
+        return this._rpc({
+            route: '/shop/products/recently_viewed',
+        }).then(res => {
+            var products = res['products'];
+
+            // In edit mode, if the current visitor has no recently viewed
+            // products, use demo data.
+            if (this.editableMode && (!products || !products.length)) {
+                return {
+                    'products': [{
+                        id: 0,
+                        website_url: '#',
+                        display_name: 'Product 1',
+                        price: '$ <span class="oe_currency_value">750.00</span>',
+                    }, {
+                        id: 0,
+                        website_url: '#',
+                        display_name: 'Product 2',
+                        price: '$ <span class="oe_currency_value">750.00</span>',
+                    }, {
+                        id: 0,
+                        website_url: '#',
+                        display_name: 'Product 3',
+                        price: '$ <span class="oe_currency_value">750.00</span>',
+                    }, {
+                        id: 0,
+                        website_url: '#',
+                        display_name: 'Product 4',
+                        price: '$ <span class="oe_currency_value">750.00</span>',
+                    }],
+                };
+            }
+
+            return res;
+        });
+    },
+    /**
+     * @private
+     */
+    _render: function (res) {
+        var products = res['products'];
+        var mobileProducts = [], webProducts = [], productsTemp = [];
+        _.each(products, function (product) {
+            if (productsTemp.length === 4) {
+                webProducts.push(productsTemp);
+                productsTemp = [];
+            }
+            productsTemp.push(product);
+            mobileProducts.push([product]);
+        });
+        if (productsTemp.length) {
+            webProducts.push(productsTemp);
+        }
+
+        this.mobileCarousel = $(qweb.render('website_sale.productsRecentlyViewed', {
+            uniqueId: this.uniqueId,
+            productFrame: 1,
+            productsGroups: mobileProducts,
+        }));
+        this.webCarousel = $(qweb.render('website_sale.productsRecentlyViewed', {
+            uniqueId: this.uniqueId,
+            productFrame: 4,
+            productsGroups: webProducts,
+        }));
+        this._addCarousel();
+        this.$el.toggleClass('d-none', !(products && products.length));
+    },
+    /**
+     * Add the right carousel depending on screen size.
+     * @private
+     */
+    _addCarousel: function () {
+        var carousel = config.device.size_class <= config.device.SIZES.SM ? this.mobileCarousel : this.webCarousel;
+        this.$('.slider').html(carousel).css('display', ''); // Removing display is kept for compatibility (it was hidden before)
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Add product to cart and reload the carousel.
+     * @private
+     * @param {Event} ev
+     */
+    _onAddToCart: function (ev) {
+        var self = this;
+        var $card = $(ev.currentTarget).closest('.card');
+        this._rpc({
+            route: "/shop/cart/update_json",
+            params: {
+                product_id: $card.find('input[data-product-id]').data('product-id'),
+                add_qty: 1
+            },
+        }).then(function (data) {
+            wSaleUtils.updateCartNavBar(data);
+            var $navButton = $('header .o_wsale_my_cart').first();
+            var fetch = self._fetch();
+            var animation = wSaleUtils.animateClone($navButton, $(ev.currentTarget).parents('.o_carousel_product_card'), 25, 40);
+            Promise.all([fetch, animation]).then(function (values) {
+                self._render(values[0]);
+            });
+        });
+    },
+
+    /**
+     * Remove product from recently viewed products.
+     * @private
+     * @param {Event} ev
+     */
+    _onRemove: function (ev) {
+        var self = this;
+        var $card = $(ev.currentTarget).closest('.card');
+        this._rpc({
+            route: "/shop/products/recently_viewed_delete",
+            params: {
+                product_id: $card.find('input[data-product-id]').data('product-id'),
+            },
+        }).then(function (data) {
+            self._render(data);
+        });
+    },
+});
+
+publicWidget.registry.productsRecentlyViewedUpdate = publicWidget.Widget.extend({
+    selector: '#product_detail',
+    events: {
+        'change input.product_id[name="product_id"]': '_onProductChange',
+    },
+    debounceValue: 8000,
+
+    /**
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+        this._onProductChange = _.debounce(this._onProductChange, this.debounceValue);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Debounced method that wait some time before marking the product as viewed.
+     * @private
+     * @param {HTMLInputElement} $input
+     */
+    _updateProductView: function ($input) {
+        var productId = parseInt($input.val());
+        var cookieName = 'seen_product_id_' + productId;
+        if (! parseInt(this.el.dataset.viewTrack, 10)) {
+            return; // Is not tracked
+        }
+        if (utils.get_cookie(cookieName)) {
+            return; // Already tracked in the last 30min
+        }
+        if ($(this.el).find('.js_product.css_not_available').length) {
+            return; // Variant not possible
+        }
+        this._rpc({
+            route: '/shop/products/recently_viewed_update',
+            params: {
+                product_id: productId,
+            }
+        }).then(function (res) {
+            if (res && res.visitor_uuid) {
+                utils.set_cookie('visitor_uuid', res.visitor_uuid);
+            }
+            utils.set_cookie(cookieName, productId, 30 * 60);
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Call debounced method when product change to reset timer.
+     * @private
+     * @param {Event} ev
+     */
+    _onProductChange: function (ev) {
+        this._updateProductView($(ev.currentTarget));
+    },
+});
+});
diff --git a/addons/website_sale/static/src/js/website_sale_tracking.js b/addons/website_sale/static/src/js/website_sale_tracking.js
new file mode 100644
index 00000000..92850707
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale_tracking.js
@@ -0,0 +1,113 @@
+odoo.define('website_sale.tracking', function (require) {
+
+var publicWidget = require('web.public.widget');
+
+publicWidget.registry.websiteSaleTracking = publicWidget.Widget.extend({
+    selector: '.oe_website_sale',
+    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',
+    },
+
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+
+        // 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 (this.$('div.oe_website_sale_tx_status').length) {
+            this._trackGA('require', 'ecommerce');
+
+            var orderID = this.$('div.oe_website_sale_tx_status').data('order-id');
+            this._vpv('/stats/ecom/order_confirmed/' + orderID);
+
+            this._rpc({
+                route: '/shop/tracking_last_order/',
+            }).then(function (o) {
+                self._trackGA('ecommerce:clear');
+
+                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');
+            });
+        }
+
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _trackGA: function () {
+        var websiteGA = window.ga || function () {};
+        websiteGA.apply(this, arguments);
+    },
+    /**
+     * @private
+     */
+    _vpv: function (page) { //virtual page view
+        this._trackGA('send', 'pageview', {
+          'page': page,
+          'title': document.title,
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // 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
new file mode 100644
index 00000000..52c3e448
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale_utils.js
@@ -0,0 +1,59 @@
+odoo.define('website_sale.utils', function (require) {
+'use strict';
+
+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();
+    });
+    return new Promise(function (resolve, reject) {
+        var $imgtodrag = $elem.find('img').eq(0);
+        if ($imgtodrag.length) {
+            var $imgclone = $imgtodrag.clone()
+                .offset({
+                    top: $imgtodrag.offset().top,
+                    left: $imgtodrag.offset().left
+                })
+                .addClass('o_website_sale_animate')
+                .appendTo(document.body)
+                .animate({
+                    top: $cart.offset().top + offsetTop,
+                    left: $cart.offset().left + offsetLeft,
+                    width: 75,
+                    height: 75,
+                }, 1000, 'easeInOutExpo');
+
+            $imgclone.animate({
+                width: 0,
+                height: 0,
+            }, function () {
+                resolve();
+                $(this).detach();
+            });
+        } else {
+            resolve();
+        }
+    });
+}
+
+/**
+ * Updates both navbar cart
+ * @param {Object} data
+ */
+function updateCartNavBar(data) {
+    var $qtyNavBar = $(".my_cart_quantity");
+    _.each($qtyNavBar, function (qty) {
+        var $qty = $(qty);
+        $qty.parents('li:first').removeClass('d-none');
+        $qty.html(data.cart_quantity).hide().fadeIn(600);
+    });
+    $(".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();
+}
+
+return {
+    animateClone: animateClone,
+    updateCartNavBar: updateCartNavBar,
+};
+});
diff --git a/addons/website_sale/static/src/js/website_sale_validate.js b/addons/website_sale/static/src/js/website_sale_validate.js
new file mode 100644
index 00000000..aaf48a20
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale_validate.js
@@ -0,0 +1,51 @@
+odoo.define('website_sale.validate', function (require) {
+'use strict';
+
+var publicWidget = require('web.public.widget');
+var core = require('web.core');
+var _t = core._t;
+
+publicWidget.registry.websiteSaleValidate = publicWidget.Widget.extend({
+    selector: 'div.oe_website_sale_tx_status[data-order-id]',
+
+    /**
+     * @override
+     */
+    start: function () {
+        var def = this._super.apply(this, arguments);
+        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) {
+            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);
+                    var $warning =  $("<i class='fa fa-warning' style='margin-right:10px;'>");
+                    $warning.attr("title", _t("We are waiting for confirmation from the bank or the payment provider"));
+                    $message.find('span:first').prepend($warning);
+                    result.message = $message.html();
+                }
+            }
+            self.$el.html(result.message);
+        });
+    },
+});
+});
diff --git a/addons/website_sale/static/src/js/website_sale_video_field_preview.js b/addons/website_sale/static/src/js/website_sale_video_field_preview.js
new file mode 100644
index 00000000..bd40b3b9
--- /dev/null
+++ b/addons/website_sale/static/src/js/website_sale_video_field_preview.js
@@ -0,0 +1,28 @@
+odoo.define('website_sale.video_field_preview', function (require) {
+"use strict";
+
+
+var AbstractField = require('web.AbstractField');
+var core = require('web.core');
+var fieldRegistry = require('web.field_registry');
+
+var QWeb = core.qweb;
+
+/**
+ * Displays preview of the video showcasing product.
+ */
+var FieldVideoPreview = AbstractField.extend({
+    className: 'd-block o_field_video_preview',
+
+    _render: function () {
+        this.$el.html(QWeb.render('productVideo', {
+            embedCode: this.value,
+        }));
+    },
+});
+
+fieldRegistry.add('video_preview', FieldVideoPreview);
+
+return FieldVideoPreview;
+
+});