[MOV] website: add s_product_list snippet from themes repo

Part of https://github.com/odoo/odoo/pull/42937
task-2088157

8 files changed, 157 insertions, 1 deletions

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index d07088fb2c6..b70e143a8cc 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -68,6 +68,7 @@
         'views/snippets/s_blockquote.xml',
         'views/snippets/s_badge.xml',
         'views/snippets/s_color_blocks_2.xml',
+        'views/snippets/s_product_list.xml',
         'views/snippets/s_mega_menu_multi_menus.xml',
         'views/snippets/s_mega_menu_menu_image_menu.xml',
         'views/website_views.xml',
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index e54419c3cd0..ae7a883ed99 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -405,6 +405,42 @@
             <field name="type">url</field>
             <field name="url">/website/static/src/img/snippets_demo/s_media_list_3.jpg</field>
         </record>
+        <record id="website.s_product_list_default_image_1" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_product_list_default_image_1.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
+        </record>
+        <record id="website.s_product_list_default_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_product_list_default_image_2.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
+        </record>
+        <record id="website.s_product_list_default_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_product_list_default_image_3.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
+        </record>
+        <record id="website.s_product_list_default_image_4" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_product_list_default_image_4.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
+        </record>
+        <record id="website.s_product_list_default_image_5" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_product_list_default_image_5.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
+        </record>
+        <record id="website.s_product_list_default_image_6" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_product_list_default_image_6.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_product_list_1.jpg</field>
+        </record>
         <record id="website.s_quotes_carousel_demo_image_1" model="ir.attachment">
             <field name="public" eval="True"/>
             <field name="name">s_quotes_carousel_image_01.jpg</field>
diff --git a/addons/website/static/src/img/snippets_demo/s_product_list_1.jpg b/addons/website/static/src/img/snippets_demo/s_product_list_1.jpg
new file mode 100644
index 00000000000..7dd29701958
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_product_list_1.jpg
diff --git a/addons/website/static/src/img/snippets_thumbs/s_product_list.png b/addons/website/static/src/img/snippets_thumbs/s_product_list.png
new file mode 100644
index 00000000000..0d59406e4f4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_product_list.png
diff --git a/addons/website/static/src/snippets/s_product_list/000.scss b/addons/website/static/src/snippets/s_product_list/000.scss
new file mode 100644
index 00000000000..c952d5bfbe5
--- /dev/null
+++ b/addons/website/static/src/snippets/s_product_list/000.scss
@@ -0,0 +1,46 @@
+
+.s_product_list {
+    padding: 15px;
+
+    > div > .row > div {
+        margin-bottom: 20px; // without this style the columns go directly to the top of the bellow ones.
+
+        height: 200px;
+        text-align: center;
+
+        a {
+            display: block;
+        }
+
+        img {
+            margin: auto;
+            max-height: 130px;
+            @include s-product-list-img-hook;
+        }
+
+        .s_product_list_item_link {
+            @include o-position-absolute($left: 10%, $bottom: 0, $right: 10%);
+
+            > .btn {
+                width: 100%;
+                padding: 5px !important;
+                font-size: 16px;
+                text-transform: uppercase;
+
+                @media only screen and (max-width : 1280px) { // FIXME
+                    font-size: 12px;
+                }
+
+                .fa {
+                    font-size: 18px;
+                    padding-right: 5px;
+
+                    @media only screen and (max-width : 1024px) { // FIXME
+                        display: block;
+                        font-size: 25px;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_product_list/000_variables.scss b/addons/website/static/src/snippets/s_product_list/000_variables.scss
new file mode 100644
index 00000000000..8ce4e819854
--- /dev/null
+++ b/addons/website/static/src/snippets/s_product_list/000_variables.scss
@@ -0,0 +1 @@
+@mixin s-product-list-img-hook {}
diff --git a/addons/website/views/snippets/s_product_list.xml b/addons/website/views/snippets/s_product_list.xml
new file mode 100644
index 00000000000..a171367f919
--- /dev/null
+++ b/addons/website/views/snippets/s_product_list.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Products List" id="s_product_list">
+    <section class="s_product_list" >
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_1" alt="#" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_2" alt="#" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_3" alt="#" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_4" alt="#" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_5" alt="#" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_6" alt="#" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-secondary">View item</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="_assets_snippet_s_product_list_css_000_variables" inherit_id="website._assets_primary_variables">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_product_list/000_variables.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_product_list_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_product_list/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index e04b20c7205..032519a20e1 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -52,7 +52,7 @@
                     <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/snippets_thumbs/s_faq.png"/>
                     <t t-snippet="website.s_features_grid" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features_grid.png"/>
                     <t t-snippet="website.s_product_catalog" t-thumbnail="/website/static/src/img/snippets_thumbs/s_product_catalog.png"/>
-                    <!-- Product list -->
+                    <t t-snippet="website.s_product_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_product_list.png"/>
                     <t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.png"/>
                     <t t-snippet="website.s_timeline" t-thumbnail="/website/static/src/img/snippets_thumbs/s_timeline.png"/>
                     <t t-snippet="website.s_process_steps" t-thumbnail="/website/static/src/img/snippets_thumbs/s_process_step.png"/>