initial commit 2

6 files changed, 637 insertions, 0 deletions

diff --git a/addons/website_sale_comparison/static/description/icon.png b/addons/website_sale_comparison/static/description/icon.png
new file mode 100644
index 00000000..47b5b88d
--- /dev/null
+++ b/addons/website_sale_comparison/static/description/icon.png
diff --git a/addons/website_sale_comparison/static/description/icon.svg b/addons/website_sale_comparison/static/description/icon.svg
new file mode 100644
index 00000000..ce3a5421
--- /dev/null
+++ b/addons/website_sale_comparison/static/description/icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70"><defs><path id="a" d="M4 0h61c4 0 5 1 5 5v60c0 4-1 5-5 5H4c-3 0-4-1-4-5V5c0-4 1-5 4-5z"/><linearGradient id="c" x1="100%" x2="0%" y1="0%" y2="100%"><stop offset="0%" stop-color="#DA956B"/><stop offset="100%" stop-color="#CC7039"/></linearGradient><path id="d" d="M23 27.281L27 43l1 4h19c1 0 1 2 0 2H26l-6-24h-2v1c0 .667-.333 1-1 1s-1-.333-1-1v-2c.066-.667.4-1 1-1h4c.517 0 .85.333 1 1l1 3.281zM45.5 55a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm-19 0a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM50 37.299v2.449c0 .11-.038.206-.115.287a.363.363 0 0 1-.272.121H32.977v2.45c0 .11-.038.206-.114.287a.363.363 0 0 1-.272.121.442.442 0 0 1-.29-.128l-3.857-4.082a.393.393 0 0 1-.11-.28.41.41 0 0 1 .11-.294l3.868-4.083a.366.366 0 0 1 .279-.114c.104 0 .195.04.272.12.076.082.114.177.114.288v2.45h16.636c.105 0 .196.04.272.12.077.081.115.177.115.288zm0-7.199a.41.41 0 0 1-.109.294l-3.869 4.082a.366.366 0 0 1-.278.115.363.363 0 0 1-.272-.121.403.403 0 0 1-.115-.287v-2.45H28.722a.363.363 0 0 1-.272-.12.403.403 0 0 1-.115-.288v-2.45c0-.11.038-.206.115-.286a.363.363 0 0 1 .272-.122h16.635v-2.449a.41.41 0 0 1 .11-.293.366.366 0 0 1 .277-.115c.097 0 .194.042.29.127l3.857 4.07A.41.41 0 0 1 50 30.1z"/><path id="e" d="M23 25.281L27 41l1 3h19c1 0 1 3 0 3H26l-6-24h-2v1c0 .667-.333 1-1 1s-1-.333-1-1v-2c.066-.667.4-1 1-1h4c.517 0 .85.333 1 1l1 3.281zM45.5 53a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm-19 0a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM50 34.689v2.45c0 .11-.038.205-.115.286a.363.363 0 0 1-.272.121H32.977v2.45c0 .11-.038.206-.114.287a.363.363 0 0 1-.272.121.442.442 0 0 1-.29-.127l-3.857-4.083a.393.393 0 0 1-.11-.28.41.41 0 0 1 .11-.294l3.868-4.082a.366.366 0 0 1 .279-.115c.104 0 .195.04.272.121.076.08.114.176.114.287v2.45h16.636c.105 0 .196.04.272.12.077.082.115.177.115.288zm0-7.198a.41.41 0 0 1-.109.293l-3.869 4.083a.366.366 0 0 1-.278.114.363.363 0 0 1-.272-.12.403.403 0 0 1-.115-.288v-2.45H28.722a.363.363 0 0 1-.272-.12.403.403 0 0 1-.115-.288v-2.449c0-.11.038-.206.115-.287a.363.363 0 0 1 .272-.121h16.635v-2.45a.41.41 0 0 1 .11-.293.366.366 0 0 1 .277-.115c.097 0 .194.043.29.128l3.857 4.07a.41.41 0 0 1 .109.293z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path fill="url(#c)" d="M0 0H70V70H0z"/><path fill="#FFF" fill-opacity=".383" d="M4 1h61c2.667 0 4.333.667 5 2V0H0v3c.667-1.333 2-2 4-2z"/><path fill="#393939" d="M32.073 69H4c-2 0-4-1-4-4V38.16l16.339-16.914L21 21l3.218 10.05 4.433-4.928h14.216l2.738-2.955 4.233 4.435-5.877 6.823c3.956-.137 5.915-.137 5.877 0-.013.046-.013 1.01 0 2.894L43.961 45H47l.709.999-3.337 3.855 2.886 2.366L32.073 69z" opacity=".324"/><path fill="#000" fill-opacity=".383" d="M4 69h61c2.667 0 4.333-1 5-3v4H0v-4c.667 2 2 3 4 3z"/><use fill="#000" fill-rule="nonzero" opacity=".3" xlink:href="#d"/><use fill="#FFF" fill-rule="nonzero" xlink:href="#e"/></g></g></svg>
\ No newline at end of file
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
new file mode 100644
index 00000000..8e8a4436
--- /dev/null
+++ b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
@@ -0,0 +1,294 @@
+odoo.define('website_sale_comparison.comparison', function (require) {
+'use strict';
+
+var concurrency = require('web.concurrency');
+var core = require('web.core');
+var publicWidget = require('web.public.widget');
+var utils = require('web.utils');
+var VariantMixin = require('sale.VariantMixin');
+var website_sale_utils = require('website_sale.utils');
+
+var qweb = core.qweb;
+var _t = core._t;
+
+// VariantMixin events are overridden on purpose here
+// to avoid registering them more than once since they are already registered
+// in website_sale.js
+var ProductComparison = publicWidget.Widget.extend(VariantMixin, {
+    xmlDependencies: ['/website_sale_comparison/static/src/xml/comparison.xml'],
+
+    template: 'product_comparison_template',
+    events: {
+        'click .o_product_panel_header': '_onClickPanelHeader',
+    },
+
+    /**
+     * @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;
+        this.guard = new concurrency.Mutex();
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+
+        self._loadProducts(this.comparelist_product_ids).then(function () {
+            self._updateContent('hide');
+        });
+        self._updateComparelistView();
+
+        $('#comparelist .o_product_panel_header').popover({
+            trigger: 'manual',
+            animation: true,
+            html: true,
+            title: function () {
+                return _t("Compare Products");
+            },
+            container: '.o_product_feature_panel',
+            placement: 'top',
+            template: qweb.render('popover'),
+            content: function () {
+                return $('#comparelist .o_product_panel_content').html();
+            }
+        });
+        // We trigger a resize to launch the event that checks if this element hides
+        // a button when the page is loaded.
+        $(window).trigger('resize');
+
+        $(document.body).on('click.product_comparaison_widget', '.comparator-popover .o_comparelist_products .o_remove', function (ev) {
+            ev.preventDefault();
+            self._removeFromComparelist(ev);
+        });
+        $(document.body).on('click.product_comparaison_widget', '.o_comparelist_remove', function (ev) {
+            self._removeFromComparelist(ev);
+            self.guard.exec(function() {
+                var new_link = '/shop/compare/?products=' + self.comparelist_product_ids.toString();
+                window.location.href = _.isEmpty(self.comparelist_product_ids) ? '/shop' : new_link;
+            });
+        });
+
+        return this._super.apply(this, arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+        $(document.body).off('.product_comparaison_widget');
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @param {jQuery} $elem
+     */
+    handleCompareAddition: function ($elem) {
+        var self = this;
+        if (this.comparelist_product_ids.length < this.product_compare_limit) {
+            var productId = $elem.data('product-product-id');
+            if ($elem.hasClass('o_add_compare_dyn')) {
+                productId = $elem.parent().find('.product_id').val();
+                if (!productId) { // case List View Variants
+                    productId = $elem.parent().find('input:checked').first().val();
+                }
+            }
+
+            this.selectOrCreateProduct(
+                $elem.closest('form'),
+                productId,
+                $elem.closest('form').find('.product_template_id').val(),
+                false
+            ).then(function (productId) {
+                productId = parseInt(productId, 10) || parseInt($elem.data('product-product-id'), 10);
+                if (!productId) {
+                    return;
+                }
+                self._addNewProducts(productId).then(function () {
+                    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 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) {
+                self.product_data[product.product.id] = product;
+            });
+            if (product_ids.length > Object.keys(data).length) {
+                /* If some products have been archived
+                they are not displayed but the count & cookie
+                need to be updated.
+                */
+                self._updateCookie();
+            }
+        });
+    },
+    /**
+     * @private
+     */
+    _togglePanel: function () {
+        $('#comparelist .o_product_panel_header').popover('toggle');
+    },
+    /**
+     * @private
+     */
+    _addNewProducts: function (product_id) {
+        return this.guard.exec(this._addNewProductsImpl.bind(this, product_id));
+    },
+    _addNewProductsImpl: function (product_id) {
+        var self = this;
+        $('.o_product_feature_panel').addClass('d-md-block');
+        if (!_.contains(self.comparelist_product_ids, product_id)) {
+            self.comparelist_product_ids.push(product_id);
+            if (_.has(self.product_data, product_id)){
+                self._updateContent();
+            } else {
+                return self._loadProducts([product_id]).then(function () {
+                    self._updateContent();
+                    self._updateCookie();
+                });
+            }
+        }
+        self._updateCookie();
+    },
+    /**
+     * @private
+     */
+    _updateContent: function (force) {
+        var self = this;
+        this.$('.o_comparelist_products .o_product_row').remove();
+        _.each(this.comparelist_product_ids, function (res) {
+            var $template = self.product_data[res].render;
+            self.$('.o_comparelist_products').append($template);
+        });
+        if (force !== 'hide' && (this.comparelist_product_ids.length > 1 || force === 'show')) {
+            $('#comparelist .o_product_panel_header').popover('show');
+        }
+        else {
+            $('#comparelist .o_product_panel_header').popover('hide');
+        }
+    },
+    /**
+     * @private
+     */
+    _removeFromComparelist: function (e) {
+        this.guard.exec(this._removeFromComparelistImpl.bind(this, e));
+    },
+    _removeFromComparelistImpl: function (e) {
+        var target = $(e.target.closest('.o_comparelist_remove, .o_remove'));
+        this.comparelist_product_ids = _.without(this.comparelist_product_ids, target.data('product_product_id'));
+        target.parents('.o_product_row').remove();
+        this._updateCookie();
+        $('.o_comparelist_limit_warning').hide();
+        this._updateContent('show');
+    },
+    /**
+     * @private
+     */
+    _updateCookie: function () {
+        document.cookie = 'comparelist_product_ids=' + JSON.stringify(this.comparelist_product_ids) + '; path=/';
+        this._updateComparelistView();
+    },
+    /**
+     * @private
+     */
+    _updateComparelistView: function () {
+        this.$('.o_product_circle').text(this.comparelist_product_ids.length);
+        this.$('.o_comparelist_button').removeClass('d-md-block');
+        if (_.isEmpty(this.comparelist_product_ids)) {
+            $('.o_product_feature_panel').removeClass('d-md-block');
+        } else {
+            $('.o_product_feature_panel').addClass('d-md-block');
+            this.$('.o_comparelist_products').addClass('d-md-block');
+            if (this.comparelist_product_ids.length >=2) {
+                this.$('.o_comparelist_button').addClass('d-md-block');
+                this.$('.o_comparelist_button a').attr('href', '/shop/compare/?products='+this.comparelist_product_ids.toString());
+            }
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickPanelHeader: function () {
+        this._togglePanel();
+    },
+});
+
+publicWidget.registry.ProductComparison = publicWidget.Widget.extend({
+    selector: '.oe_website_sale',
+    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);
+        this.productComparison = new ProductComparison(this);
+        return Promise.all([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');
+    },
+});
+return ProductComparison;
+});
diff --git a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss
new file mode 100644
index 00000000..204d9d1b
--- /dev/null
+++ b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss
@@ -0,0 +1,65 @@
+.o_product_feature_panel {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index:10;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom: 0px;
+    padding: 10px 20px;
+    text-align: center;
+    border: 2px solid theme-color('primary');
+    border-bottom: 0px;
+    background-color: white;
+    opacity: 0.95;
+
+    .o_product_panel {
+        position: relative;
+        .o_product_panel_header {
+            margin: 0 10px 0 10px;
+            cursor: pointer;
+            .o_product_icon {
+                margin-right: 5px;
+            }
+            .o_product_text {
+                text-transform: uppercase;
+                vertical-align: middle;
+                font-size: 16px;
+            }
+            .o_product_circle {
+                vertical-align: 6px;
+                padding: 0 3px;
+                line-height: 14px;
+            }
+        }
+        .o_product_panel_content {
+            display: none !important;
+        }
+    }
+}
+
+.oe_website_sale {
+    .product_summary > *{
+        display: block;
+        margin: 15px 0 15px 0;
+    }
+    .table-comparator {
+        .o_product_comparison_collpase {
+            margin-right: 8px;
+        }
+    }
+
+    div.css_not_available .o_add_compare_dyn {
+        display: none;
+    }
+
+    .o_comparelist_remove {
+        @include o-position-absolute($top: 0, $right: 0.5rem);
+    }
+
+    .o_ws_compare_image {
+        vertical-align: middle;
+    }
+}
+
diff --git a/addons/website_sale_comparison/static/src/xml/comparison.xml b/addons/website_sale_comparison/static/src/xml/comparison.xml
new file mode 100644
index 00000000..47085955
--- /dev/null
+++ b/addons/website_sale_comparison/static/src/xml/comparison.xml
@@ -0,0 +1,35 @@
+<templates id="compare_products" xml:space="preserve">
+
+    <t t-name="product_comparison_template">
+        <div class="o_product_feature_panel d-none css_editable_mode_hidden o_bottom_fixed_element">
+            <span class="o_product_panel" id="comparelist">
+                <span class="o_product_panel_header">
+                    <span class="o_product_icon"><i class="fa fa-exchange" role="img" aria-label="Product" title="Product"></i></span>
+                    <span class="o_product_text">Compare</span>
+                    <span class="o_product_circle o_animate_blink badge badge-primary">0</span>
+                </span>
+                <span class="o_product_panel_content">
+                    <div class="o_comparelist_products">
+                        <div class="o_comparelist_limit_warning" style="display:none">
+                            <div class="o_shortlog alert alert-warning" role="alert">
+                                <span><i class="fa fa-warning text-danger" role="img" aria-label="Warning" title="Warning"></i> You can compare max 4 products.</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="o_comparelist_button" style='display:none'>
+                        <a role="button" class="btn btn-primary btn-block" href="#"><i class="fa fa-exchange mr4"/>Compare</a>
+                    </div>
+                </span>
+            </span>
+        </div>
+    </t>
+
+    <t t-name="popover">
+        <div style="width:600px;" class="popover comparator-popover" role="tooltip">
+            <div class="arrow"/>
+            <h3 class="popover-header"/>
+            <div class="popover-body"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/website_sale_comparison/static/tests/tours/website_sale_comparison.js b/addons/website_sale_comparison/static/tests/tours/website_sale_comparison.js
new file mode 100644
index 00000000..9e31b218
--- /dev/null
+++ b/addons/website_sale_comparison/static/tests/tours/website_sale_comparison.js
@@ -0,0 +1,242 @@
+odoo.define('website_sale_comparison.tour_comparison', function (require) {
+    'use strict';
+
+    var tour = require('web_tour.tour');
+    var rpc = require('web.rpc');
+
+    tour.register('product_comparison', {
+        test: true,
+        url: "/shop",
+    }, [
+    // test from shop page
+    {
+        content: "add first product 'Three-Seat Sofa' in a comparison list",
+        trigger: '.oe_product_cart:contains("Three-Seat Sofa") .o_add_compare',
+    },
+    {
+        content: "check compare button contains one product",
+        trigger: '.o_product_circle:contains(1)',
+        run: function () {},
+    },
+    {
+        content: "check popover is closed when only one product",
+        trigger: 'body:not(:has(.comparator-popover))',
+        run: function () {},
+    },
+    {
+        content: "add second product 'Conference Chair' in a comparison list",
+        trigger: '.oe_product_cart:contains("Conference Chair") .o_add_compare',
+    },
+    {
+        content: "check popover is now open and compare button contains two products",
+        extra_trigger: '.comparator-popover',
+        trigger: ' .o_product_circle:contains(2)',
+        run: function () {},
+    },
+    {
+        content: "check products name are correct in the comparelist",
+        extra_trigger: '.o_product_row:contains("Three-Seat Sofa")',
+        trigger: '.o_product_row:contains("Conference Chair")',
+        run: function () {},
+    },
+    // test form product page
+    {
+        content: "go to product page of customizable desk(with variants)",
+        trigger: '.oe_product_cart a:contains("Customizable Desk")',
+    },
+    {
+        content: "check compare button is still there and contains 2 products",
+        extra_trigger: '#product_details',
+        trigger: '.o_product_circle:contains(2)',
+        run: function () {},
+    },
+    {
+        content: "check popover is closed after changing page",
+        trigger: 'body:not(:has(.comparator-popover))',
+        run: function () {},
+    },
+    {
+        content: "add first variant to comparelist",
+        trigger: '.o_add_compare_dyn',
+    },
+    {
+        content: "check the comparelist is now open and contains 3rd product with correct variant",
+        extra_trigger: '.comparator-popover',
+        trigger: '.o_product_row:contains("Customizable Desk (CONFIG) (Steel, White)")',
+        run: function () {},
+    },
+    {
+        content: "select 2nd variant(Black Color)",
+        trigger: '.variant_attribute[data-attribute_name="Color"] input[data-value_name="Black"]',
+        run: function (actions) {
+          $('img[class*="product_detail_img"]').attr('data-image-to-change', 1);
+          actions.click();
+        },
+    },
+    {
+        content: "click on compare button to add in comparison list when variant changed",
+        extra_trigger: 'img[class*="product_detail_img"]:not([data-image-to-change])',
+        trigger: '.o_add_compare_dyn',
+    },
+    {
+        content: "comparelist contains 4th product with correct variant",
+        extra_trigger: '.o_product_circle:contains(4)',
+        trigger: '.o_product_row:contains("Customizable Desk (CONFIG) (Steel, Black)")',
+        run: function () {},
+    },
+    {
+        content: "check limit is not reached",
+        trigger: ':not(.o_comparelist_limit_warning)',
+        run: function () {},
+    },
+    {
+        content: "select 3nd variant(Custom)",
+        trigger: '.variant_attribute[data-attribute_name="Legs"] input[data-value_name="Custom"]',
+    },
+    {
+        content: "click on compare button to add in comparison list when variant changed",
+        extra_trigger: 'body:not(:has(.carousel-indicators))', // there is 1 image on the custom variant
+        trigger: '.o_add_compare_dyn',
+    },
+    {
+        content: "check limit is reached",
+        trigger: '.o_comparelist_limit_warning',
+        run: function () {},
+    },
+    {
+        content: "click on compare button",
+        trigger: '.o_comparelist_button a',
+    },
+    // test on compare page
+    {
+        content: "check 1st product contains correct variant",
+        trigger: '.o_product_comparison_table:contains("Conference Chair (CONFIG) (Steel)")',
+        run: function () {},
+    },
+    {
+        content: "check 2nd product contains correct variant",
+        trigger: '.o_product_comparison_table:contains("Customizable Desk (CONFIG) (Steel, White)")',
+        run: function () {},
+    },
+    {
+        content: "check 3rd product is correctly added",
+        trigger: '.o_product_comparison_table:contains("Customizable Desk (CONFIG) (Steel, Black)")',
+        run: function () {},
+    },
+    {
+        content: "check 4th product is correctly added",
+        trigger: '.o_product_comparison_table:contains("Three-Seat Sofa")',
+        run: function () {},
+    },
+    {
+        content: "remove Customizable Desk (CONFIG) (Steel, Black) from compare table",
+        trigger: '#o_comparelist_table .o_comparelist_remove:eq(2)',
+    },
+    {
+        content: "check customizable table with black variant is removed",
+        trigger: '#o_comparelist_table:not(:contains("Customizable Desk (CONFIG) (Steel, Black)"))',
+        run: function () {},
+    },
+    {
+        content: "open compare menu",
+        extra_trigger: 'body:has(.o_product_row:contains("Three-Seat Sofa") .o_remove)',
+        trigger: '.o_product_panel_header',
+    },
+    {
+        content: "remove product",
+        trigger: '.o_product_row:contains("Three-Seat Sofa") .o_remove',
+    },
+    {
+        content: "click on compare button to reload",
+        trigger: '.o_comparelist_button a',
+    },
+    {
+        content: "check product 'Three-Seat Sofa' is removed",
+        trigger: '#o_comparelist_table:not(:contains("Three-Seat Sofa"))',
+        run: function () {},
+    },
+    {
+        content: "add product 'Conference Chair' to cart",
+        trigger: '.product_summary:contains("Conference Chair") .a-submit:contains("Add to Cart")',
+    },
+    {
+        content: "check product correctly added to cart",
+        trigger: '#cart_products:contains("Conference Chair") .js_quantity[value="1"]',
+        run: function () {},
+    },
+    // test advanced configuration and alternative product
+    {
+        content: "create product with newly created attribute and its values and set alternative product",
+        trigger: 'body',
+        run: function () {
+            rpc.query({
+                model: 'product.attribute',
+                method: 'create',
+                args: [{
+                    'name': 'color',
+                    'display_type': 'color',
+                    'create_variant': 'dynamic',
+                }],
+            }).then(function (attributeId) {
+                rpc.query({
+                    model: 'product.template',
+                    method: 'create',
+                    args: [{
+                        'name': 'Basic Chair',
+                        'is_published': true,
+                        'attribute_line_ids': [[0, 0, {
+                            'attribute_id': attributeId,
+                            'value_ids': [
+                                [0, 0, {'name': 'red', 'attribute_id': attributeId, 'sequence': 1}],
+                                [0, 0, {'name': 'blue', 'attribute_id': attributeId, 'sequence': 2}],
+                            ],
+                        }]],
+                    }],
+                }).then(function (productId) {
+                    rpc.query({
+                        model: 'product.template',
+                        method: 'create',
+                        args: [{
+                            'name': 'Classic Chair',
+                            'is_published': true,
+                            'attribute_line_ids': [[0, 0, {
+                                'attribute_id': attributeId,
+                                'value_ids': [
+                                    [0, 0, {'name': 'green', 'attribute_id': attributeId, 'sequence': 3}],
+                                    [0, 0, {'name': 'yellow', 'attribute_id': attributeId, 'sequence': 4}],
+                                ],
+                            }]],
+                            'alternative_product_ids': [[6, 0, [productId]]],
+                        }],
+                    }).then(function () {
+                        window.location.href = '/shop?search=Classic Chair';
+                    });
+                });
+            });
+        },
+    },
+    {
+        content: "click on product",
+        trigger: '.oe_product_cart a:contains("Classic Chair")',
+    },
+    {
+        content: "click on compare button",
+        trigger: '.btn.btn-primary:not(.btn-block):contains("Compare")',
+    },
+    {
+        content: "check product 'Classic Chair' with first variant (green) is on compare page",
+        trigger: '.o_product_comparison_table:contains("Classic Chair (green)")',
+        run: function () {},
+    },
+    {
+        content: "check alternative product 'Basic Chair' with first variant (red) is on compare page",
+        trigger: '.o_product_comparison_table:contains("Basic Chair (red)")',
+        run: function () {},
+    },
+    {
+        content: "check there is the correct attribute",
+        trigger: '.o_ws_category_0:contains("color"):contains("red")',
+        run: function () {},
+    },
+    ]);
+});