[IMP] website, website_sale: add dynamic snippets

* Implement new snippets that allow the user to choose a filter
  and a template.
  Three snippets have been created:
  - Dynamic Snippet: Displays the data in a grid format
  - Dynamic Carousel: Displays the date in a carousel
  - Dynamic Products: Let the user pick a product category and
                      displays the products in a carousel

task-2276740
PR #53175

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

3 files changed, 142 insertions, 0 deletions

diff --git a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js
new file mode 100644
index 00000000000..73b7d3abb02
--- /dev/null
+++ b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js
@@ -0,0 +1,41 @@
+odoo.define('website_sale.s_dynamic_snippet_products', function (require) {
+'use strict';
+
+const config = require('web.config');
+const core = require('web.core');
+const publicWidget = require('web.public.widget');
+const DynamicSnippetCarousel = require('website.s_dynamic_snippet_carousel');
+
+const DynamicSnippetProducts = DynamicSnippetCarousel.extend({
+    selector: '.s_dynamic_snippet_products',
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Method to be overridden in child components if additional configuration elements
+     * are required in order to fetch data.
+     * @override
+     * @private
+     */
+    _isConfigComplete: function() {
+        return this._super.apply(this, arguments) && this.$el.get(0).dataset.productCategoryId !== undefined;
+    },
+    /**
+     * Method to be overridden in child components in order to provide a search
+     * domain if needed.
+     * @override
+     * @private
+     */
+    _getSearchDomain: function () {
+        const searchDomain = this._super.apply(this, arguments);
+        searchDomain.push(['public_categ_ids', 'child_of', parseInt(this.$el.get(0).dataset.productCategoryId)]);
+        return searchDomain;
+    },
+
+});
+publicWidget.registry.dynamic_snippet_products = DynamicSnippetProducts;
+
+return DynamicSnippetProducts;
+});
diff --git a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.xml b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.xml
new file mode 100644
index 00000000000..f45bf3c51bb
--- /dev/null
+++ b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="website_sale.s_dynamic_snippet.products" inherit_id="website.s_dynamic_snippet.carousel">
+        <xpath expr="//div" position="attributes">
+            <attribute name="data-filter-id" add=""/>
+        </xpath>
+    </t>
+</templates>
diff --git a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/options.js b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/options.js
new file mode 100644
index 00000000000..7acf98a866c
--- /dev/null
+++ b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/options.js
@@ -0,0 +1,93 @@
+odoo.define('website_sale.s_dynamic_snippet_products_options', function (require) {
+'use strict';
+
+const options = require('web_editor.snippets.options');
+const s_dynamic_snippet_carousel_options = require('website.s_dynamic_snippet_carousel_options');
+
+const dynamicSnippetProductsOptions = s_dynamic_snippet_carousel_options.extend({
+
+    /**
+     *
+     * @override
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+        this.productCategories = {};
+    },
+    /**
+     *
+     * @override
+     */
+    onBuilt: function () {
+        this._super.apply(this, arguments);
+        this._rpc({
+            model: 'ir.model.data',
+            method: 'search_read',
+            kwargs: {
+                domain: [['module', '=', 'website_sale'], ['model', '=', 'website.snippet.filter']],
+                fields: ['id', 'res_id'],
+            }
+        }).then((data) => {
+            this.$target.get(0).dataset.filterId = data[0].res_id;
+            this.$target.get(0).dataset.numberOfRecords = this.dynamicFilters[data[0].res_id].limit;
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     *
+     * @override
+     * @private
+     */
+    _computeWidgetVisibility: function (widgetName, params) {
+        if (widgetName === 'filter_opt') {
+            return false;
+        }
+        return this._super.apply(this, arguments);
+    },
+    /**
+     * Fetches product categories.
+     * @private
+     * @returns {Promise}
+     */
+    _fetchProductCategories: function () {
+        return this._rpc({
+            model: 'product.public.category',
+            method: 'search_read',
+            kwargs: {
+                domain: [],
+                fields: ['id', 'name'],
+            }
+        });
+    },
+    /**
+     *
+     * @override
+     * @private
+     */
+    _renderCustomXML: function (uiFragment) {
+        return Promise.all([this._super.apply(this, arguments), this._renderProductCategorySelector(uiFragment)]);
+    },
+    /**
+     * Renders the product categories option selector content into the provided uiFragment.
+     * @private
+     * @param {HTMLElement} uiFragment
+     */
+    _renderProductCategorySelector: async function (uiFragment) {
+        const productCategories = await this._fetchProductCategories();
+        for (let index in productCategories) {
+            this.productCategories[productCategories[index].id] = productCategories[index];
+        }
+        const productCategoriesSelectorEl = uiFragment.querySelector('[data-name="product_category_opt"]');
+        return this._renderSelectUserValueWidgetButtons(productCategoriesSelectorEl, this.productCategories);
+    },
+
+});
+
+options.registry.dynamic_snippet_products = dynamicSnippetProductsOptions;
+
+return dynamicSnippetProductsOptions;
+});