[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>

4 files changed, 122 insertions, 0 deletions

diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.js b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.js
new file mode 100644
index 00000000000..cf43100a8c9
--- /dev/null
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.js
@@ -0,0 +1,46 @@
+odoo.define('website.s_dynamic_snippet_carousel', function (require) {
+'use strict';
+
+const config = require('web.config');
+const core = require('web.core');
+const publicWidget = require('web.public.widget');
+const DynamicSnippet = require('website.s_dynamic_snippet');
+
+const DynamicSnippetCarousel = DynamicSnippet.extend({
+    selector: '.s_dynamic_snippet_carousel',
+    xmlDependencies: (DynamicSnippet.prototype.xmlDependencies || []).concat(
+        ['/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml']
+    ),
+
+    /**
+     *
+     * @override
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+        this.template_key = 'website.s_dynamic_snippet.carousel';
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Method to be overridden in child components in order to prepare QWeb
+     * options
+     * @private
+     */
+    _getQWebRenderParams: function () {
+        return Object.assign(
+            this._super.apply(this, arguments),
+            {
+                interval : parseInt(this.$target[0].dataset.carouselInterval),
+            },
+        );
+    },
+
+});
+publicWidget.registry.dynamic_snippet_carousel = DynamicSnippetCarousel;
+
+return DynamicSnippetCarousel;
+});
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
new file mode 100644
index 00000000000..dee896d1468
--- /dev/null
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
@@ -0,0 +1,13 @@
+.s_dynamic {
+  .carousel-control-prev, .carousel-control-next {
+    position: absolute;
+    text-shadow: 0px 0px 3px #343A40;
+    width: 4rem;
+  }
+  .carousel-control-prev{
+    left: -4rem
+  }
+  .carousel-control-next{
+    right: -4rem
+  }
+}
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
new file mode 100644
index 00000000000..ca6cbf4d419
--- /dev/null
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="website.s_dynamic_snippet.carousel">
+        <div t-att-id="uniqueId" class="carousel slide" t-att-data-interval="interval">
+            <!-- Content -->
+            <div class="carousel-inner row w-100 mx-auto" role="listbox">
+                <t t-set="colClass" t-value="'col-' + (12 / chunkSize).toString()"/>
+                <t t-set="slideIndexGenerator" t-value="Array.from(Array(Math.ceil(data.length/chunkSize)).keys())"/>
+                <t t-set="itemIndexGenerator" t-value="Array.from(Array(chunkSize).keys())"/>
+                <t t-foreach="slideIndexGenerator" t-as="slideIndex">
+                    <div t-attf-class="carousel-item #{slideIndex_first ? 'active' : ''}">
+                        <div class="row">
+                            <t t-foreach="itemIndexGenerator" t-as="itemIndex">
+                                <t t-if="(slideIndex * chunkSize + itemIndex) &lt; data.length">
+                                    <div t-attf-class="#{colClass}">
+                                        <t t-raw="data[slideIndex * chunkSize + itemIndex]"/>
+                                    </div>
+                                </t>
+                            </t>
+                        </div>
+                    </div>
+                </t>
+            </div>
+            <!-- Controls -->
+            <a t-attf-href="##{uniqueId}" class="carousel-control-prev" data-slide="prev" role="button" aria-label="Previous" title="Previous">
+                <span class="fa fa-chevron-left fa-2x text-white"/>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a t-attf-href="##{uniqueId}" class="carousel-control-next" data-slide="next" role="button" aria-label="Next" title="Next">
+                <span class="fa fa-chevron-right fa-2x text-white"/>
+                <span class="sr-only">Next</span>
+            </a>
+        </div>
+    </t>
+</templates>
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/options.js b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/options.js
new file mode 100644
index 00000000000..cb9a3cf566a
--- /dev/null
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/options.js
@@ -0,0 +1,28 @@
+odoo.define('website.s_dynamic_snippet_carousel_options', function (require) {
+'use strict';
+
+const options = require('web_editor.snippets.options');
+const s_dynamic_snippet_options = require('website.s_dynamic_snippet_options');
+
+const dynamicSnippetCarouselOptions = s_dynamic_snippet_options.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     *
+     * @override
+     * @private
+     */
+    _setOptionsDefaultValues: function () {
+        this._super.apply(this, arguments);
+        this._setOptionValue('carouselInterval', '5000');
+    }
+
+});
+
+options.registry.dynamic_snippet_carousel = dynamicSnippetCarouselOptions;
+
+return dynamicSnippetCarouselOptions;
+});