From 8d731cd20b00947e8d825bf543fe6227d629d67d Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Tue, 14 Sep 2021 14:57:30 +0000
Subject: [PATCH] [IMP] website_sale: new templates for
 s_dynamic_snippet_products
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adds new templates for the s_dynamic_snippet_products
and improves the current templates for a better reading of the product’s
title and a better management of space when the content have different
width.

Part of https://github.com/odoo/odoo/pull/75623
task-2602978

X-original-commit: 49bd79b0bdca76415780bdfa199195371c2692e5
Part-of: odoo/odoo#77153
---
 .../s_dynamic_snippet_carousel/000.scss       |   4 +-
 .../data/product_snippet_template_data.xml    | 233 ++++++++++++++++--
 .../s_dynamic_snippet_products/000.scss       |  42 ++++
 3 files changed, 254 insertions(+), 25 deletions(-)
 create mode 100644 addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss

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
index 72e5c4cbb48..0230074e9ef 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
@@ -8,13 +8,13 @@
       background: radial-gradient($white 50%, transparent 50%);
     }
   }
-  .dynamic_snippet_template .card-footer a, .dynamic_snippet_template .card-footer button {
+  .dynamic_snippet_template .card-footer a, .dynamic_snippet_template .card-footer button, .o_dynamic_snippet_btn_wrapper {
     z-index: 2;
   }
   .dynamic_snippet_template .card-body .card-text {
     display: -webkit-box;
     -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;  
+    -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     overflow: hidden;
   }
diff --git a/addons/website_sale/data/product_snippet_template_data.xml b/addons/website_sale/data/product_snippet_template_data.xml
index 2e7b090a130..cbc3af4848c 100644
--- a/addons/website_sale/data/product_snippet_template_data.xml
+++ b/addons/website_sale/data/product_snippet_template_data.xml
@@ -2,25 +2,27 @@
 <odoo>
     <data noupdate="1">
         <!-- Templates for Dynamic Snippet -->
-        <template id="dynamic_filter_template_product_product_add_to_cart" name="Add Product to Cart">
+        <template id="dynamic_filter_template_product_product_add_to_cart" name="Classic Card">
             <t t-foreach="records" t-as="data">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="o_carousel_product_card card h-100">
+                <div class="o_carousel_product_card card h-100 w-100">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                     <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
                     <a class="o_carousel_product_img_link" t-att-href="record.website_url">
-                        <img class="o_carousel_product_card_img_top card-img-top" loading="lazy" t-att-src="data['image_512']"
+                        <img class="o_carousel_product_card_img_top card-img-top p-2" loading="lazy" t-att-src="data['image_512']"
                             t-att-alt="record.display_name"/>
                     </a>
                     <i t-if="data.get('_latest_viewed')" class="fa fa-trash o_carousel_product_remove js_remove"></i>
                     <div class="o_carousel_product_card_body card-body border-top">
                         <a t-att-href="record.website_url" class="text-decoration-none">
-                            <div class="h6 card-title mb-0 text-truncate" t-field="record.display_name"/>
+                            <div class="h6 card-title mb-0" t-field="record.display_name"/>
                         </a>
-                        <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
-                            <t t-set="rating_avg" t-value="record.rating_avg"/>
-                            <t t-set="rating_count" t-value="record.rating_count"/>
-                        </t>
+                        <div class="mt-2">
+                            <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                                <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                <t t-set="rating_count" t-value="record.rating_count"/>
+                            </t>
+                        </div>
                     </div>
                     <div class="o_carousel_product_card_footer card-footer d-flex align-items-center">
                         <div>
@@ -37,25 +39,27 @@
         <template id="dynamic_filter_template_product_product_view_detail" name="Detailed Product">
             <t t-foreach="records" t-as="data">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="o_carousel_product_card card h-100" t-att-data-url="record.website_url">
+                <div class="o_carousel_product_card card h-100 w-100" t-att-data-url="record.website_url">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                     <a class="o_carousel_product_img_link" t-att-href="record.website_url">
                         <img class="card-img-top p-3" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                     </a>
-                    <div class="o_carousel_product_card_body card-body">
+                    <div class="o_carousel_product_card_body card-body d-flex flex-column justify-content-between">
                         <div class="card-title h5" t-field="record.display_name"/>
                         <div class="card-text" t-field="record.description_sale"/>
-                        <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
-                            <t t-set="rating_avg" t-value="record.rating_avg"/>
-                            <t t-set="rating_count" t-value="record.rating_count"/>
-                        </t>
+                        <div class="mt-2">
+                            <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                                <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                <t t-set="rating_count" t-value="record.rating_count"/>
+                            </t>
+                        </div>
                     </div>
                     <div class="o_carousel_product_card_footer card-footer d-flex align-items-center">
                         <div>
                             <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
                         </div>
                         <a class="btn btn-primary ml-auto" t-att-href="record.website_url">
-                            <i class="fa fa-fw fa-eye"/>
+                            <i class="fa fa-fw fa-search"/>
                         </a>
                     </div>
                 </div>
@@ -77,13 +81,21 @@
         <template id="dynamic_filter_template_product_product_mini_price" name="Image with price">
             <t t-foreach="records" t-as="data">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="card h-100" t-att-data-url="record.website_url">
+                <div class="card w-100 text-center o_dynamic_product_hovered p-3 border-0" t-att-data-url="record.website_url">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
-                    <a class="o_carousel_product_img_link" t-att-href="record.website_url">
-                        <img class="card-img-top p-3" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                    <a class="o_carousel_product_img_link stretched-link" t-att-href="record.website_url">
+                        <img class="card-img-top" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                     </a>
-                    <div class="card-text text-center pb-1">
-                        <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                    <div class="o_carousel_product_card_body mt-2">
+                        <div class="h6">
+                            <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                                <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                <t t-set="rating_count" t-value="record.rating_count"/>
+                            </t>
+                        </div>
+                        <div class="d-inline-block rounded-pill bg-primary px-3 py-2 mt-2 text-center h6">
+                            <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                        </div>
                     </div>
                 </div>
             </t>
@@ -92,12 +104,180 @@
         <template id="dynamic_filter_template_product_product_mini_name" name="Image with name">
             <t t-foreach="records" t-as="data">
                 <t t-set="record" t-value="data['_record']"/>
-                <div class="card h-100" t-att-data-url="record.website_url">
+                <div class="card w-100 border-0 o_dynamic_product_hovered" t-att-data-url="record.website_url">
                     <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
-                    <a class="o_carousel_product_img_link" t-att-href="record.website_url">
+                    <a class="o_carousel_product_img_link stretched-link" t-att-href="record.website_url">
                         <img class="card-img-top p-3" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                     </a>
-                    <div class="h6 card-footer mb-1 px-1 text-center text-truncate" t-field="record.display_name"/>
+                    <div class="h6 text-center mt-2 p-2" t-field="record.display_name"/>
+                </div>
+            </t>
+        </template>
+
+        <template id="dynamic_filter_template_product_product_centered" name="Centered Product">
+            <t t-foreach="records" t-as="data">
+                <t t-set="record" t-value="data['_record']"/>
+                <div class="o_carousel_product_card card w-100">
+                    <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                    <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
+                    <a class="o_carousel_product_img_link position-absolute mx-auto" t-att-href="record.website_url">
+                        <img class="card-img-top" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                    </a>
+                    <div class="o_carousel_product_card_body card-body d-flex flex-column justify-content-between">
+                        <div class="card-title h5 text-center" t-field="record.display_name"/>
+                        <div class="text-center">
+                            <div class="h5">
+                                <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                            </div>
+                            <div class="h6 mb-0">
+                                <t t-if="is_view_active('website_sale.product_comment')">
+                                    <t t-call="portal_rating.rating_widget_stars_static">
+                                        <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                        <t t-set="rating_count" t-value="record.rating_count"/>
+                                    </t>
+                                </t>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="o_carousel_product_card_footer d-flex align-items-center justify-content-center pb-4">
+                        <a class="btn btn-primary d-block" t-att-href="record.website_url">
+                            View Product
+                        </a>
+                    </div>
+                </div>
+            </t>
+        </template>
+
+        <template id="dynamic_filter_template_product_product_borderless_1" name="Borderless Product n°1">
+            <t t-foreach="records" t-as="data">
+                <t t-set="record" t-value="data['_record']"/>
+                <div class="o_carousel_product_card w-100 card border-0 p-3">
+                    <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                    <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
+                    <a class="o_carousel_product_img_link o_dynamic_product_hovered" t-att-href="record.website_url">
+                        <img class="o_carousel_product_card_img_top card-img-top" loading="lazy" t-att-src="data['image_512']"
+                            t-att-alt="record.display_name"/>
+                    </a>
+                    <div class="o_carousel_product_card_body d-flex flex-wrap flex-column justify-content-between h-100">
+                        <a t-att-href="record.website_url" class="o_carousel_product_img_link text-decoration-none">
+                            <div class="h6 card-title mt-4" t-field="record.display_name"/>
+                        </a>
+                        <div>
+                            <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                                <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                <t t-set="rating_count" t-value="record.rating_count"/>
+                            </t>
+                            <div class="mt-2">
+                                <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </t>
+        </template>
+
+        <template id="dynamic_filter_template_product_product_borderless_2" name="Borderless Product n°2">
+            <t t-foreach="records" t-as="data">
+                <t t-set="record" t-value="data['_record']"/>
+                <div class="o_carousel_product_card card w-100 border-0">
+                    <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                    <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
+                    <a class="o_carousel_product_img_link o_dynamic_product_hovered" t-att-href="record.website_url">
+                        <img class="card-img-top p-3" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                    </a>
+                    <div class="o_carousel_product_card_body px-3 mt-2 h-100 d-flex flex-column justify-content-between">
+                        <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
+                            <div class="h5 mb-0 mr-4">
+                                <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                            </div>
+                            <t t-if="is_view_active('website_sale.product_comment')">
+                                <t t-call="portal_rating.rating_widget_stars_static_compressed">
+                                    <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                    <t t-set="rating_count" t-value="record.rating_count"/>
+                                </t>
+                            </t>
+                            <div class="card-title h6 w-100 mt-2" t-field="record.display_name"/>
+                        </div>
+                        <div class="text-right o_dynamic_snippet_btn_wrapper">
+                            <button type="button" role="button" class="btn btn-primary js_add_cart" title="Add to Cart">
+                                Add to Cart <i class="fa fa-fw fa-shopping-cart"/>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </t>
+        </template>
+
+        <template id="dynamic_filter_template_product_product_banner" name="Large Banner">
+            <t t-foreach="records" t-as="data" data-number-of-elements="1" data-number-of-elements-sm="1">
+                <t t-set="record" t-value="data['_record']"/>
+                <div class="o_carousel_product_card card w-100 p-3">
+                    <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                    <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
+                    <div class="row flex-row-reverse">
+                        <div class="col-lg-6 d-flex align-items-center">
+                            <img class="img img-fluid mx-auto rounded" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                        </div>
+                        <div class="col-lg-6">
+                            <div class="o_carousel_product_card_body p-5">
+                                <div class="card-title h1" t-field="record.display_name"/>
+                                <div class="d-flex align-items-center my-4">
+                                    <div class="text-primary h4 mb-0 mr-3">
+                                        <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                                    </div>
+                                    <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                                        <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                        <t t-set="rating_count" t-value="record.rating_count"/>
+                                    </t>
+                                </div>
+                                <div class="card-text text-muted" t-field="record.description_sale"/>
+                                <div class="mt-4">
+                                    <a class="btn btn-outline-secondary mr-1 mt-1" t-att-href="record.website_url">
+                                        View Product
+                                    </a>
+                                    <button type="button" role="button" class="btn btn-primary js_add_cart mt-1" title="Add to Cart">
+                                        Add to Cart <i class="fa fa-fw fa-shopping-cart"/>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </t>
+        </template>
+
+        <template id="dynamic_filter_template_product_product_horizontal_card" name="Horizontal Card">
+            <t t-foreach="records" t-as="data" data-number-of-elements="3" data-number-of-elements-sm="1">
+                <t t-set="record" t-value="data['_record']"/>
+                <div class="o_carousel_product_card card w-100 border-0 bg-light p-3">
+                    <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                    <input type="hidden" name="product-id" t-att-data-product-id="record.id"/>
+                    <div class="row h-100">
+                        <div class="col-lg-4 position-static">
+                            <a class="stretched-link" t-att-href="record.website_url">
+                                <img class="img img-fluid mx-auto" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                            </a>
+                        </div>
+                        <div class="o_carousel_product_card_body col-lg-8 pl-3 d-flex flex-column justify-content-between">
+                            <div>
+                                <div class="card-title h6" t-field="record.display_name"/>
+                                <div class="mb-2">
+                                    <t t-if="is_view_active('website_sale.product_comment')" t-call="portal_rating.rating_widget_stars_static">
+                                        <t t-set="rating_avg" t-value="record.rating_avg"/>
+                                        <t t-set="rating_count" t-value="record.rating_count"/>
+                                    </t>
+                                </div>
+                            </div>
+                            <div class="d-flex justify-content-between align-items-center flex-wrap">
+                                <t t-call="website_sale.price_dynamic_filter_template_product_product"/>
+                                <div class="o_dynamic_snippet_btn_wrapper">
+                                    <button type="button" role="button" class="btn btn-primary js_add_cart" title="Add to Cart">
+                                        <i class="fa fa-fw fa-shopping-cart"/>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </t>
         </template>
@@ -108,5 +288,12 @@
             <del t-if="data.get('has_discounted_price')" class="text-danger ml-1 h6" style="white-space: nowrap;"
                  t-esc="data['list_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
         </template>
+
+        <!-- Assets -->
+        <record id="website_sale.s_dynamic_snippet_products_000_scss" model="ir.asset">
+            <field name="name">Dynamic snippet products 000 SCSS</field>
+            <field name="bundle">web.assets_frontend</field>
+            <field name="path">website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss</field>
+        </record>
     </data>
 </odoo>
diff --git a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss
new file mode 100644
index 00000000000..a6bbb472e6b
--- /dev/null
+++ b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.scss
@@ -0,0 +1,42 @@
+// class name are dynamically added.
+// If you don't find it with a grep, don't consider it as useless without extra check.
+
+.s_product_product_centered {
+    .card {
+        overflow: visible;
+        margin-top: 6rem;
+        padding-top: 6rem;
+    }
+
+    .o_carousel_product_img_link {
+        max-width: 75%;
+        margin-top: -12rem;
+        left: 0;
+        right: 0;
+    }
+}
+
+.s_product_product_banner {
+    img {
+        max-height: 400px;
+    }
+}
+
+.s_product_product_horizontal_card img {
+    img {
+        height: 100%;
+    }
+}
+
+@include media-breakpoint-down(md) {
+    .s_product_product_horizontal_card img {
+        height: 12rem;
+    }
+}
+
+.o_dynamic_product_hovered {
+    transition: transform 250ms ease;
+    &:hover {
+        transform: scale(.95);
+    }
+}