From 536db5c64fc0199b76c4c10348d29f8d4af3a836 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Tue, 12 Oct 2021 14:27:38 +0000
Subject: [PATCH] [IMP] website_sale: new products-list designs

This commit makes use of CSS variables to define new design and options
for the /shop page.

In detail, options now toggle classes that contains CSS variables
definition. These variable are used to style the "default template" that
is designed in SCSS only once.

This approach allow us to add more designs without increase the SCSS
(actually reducing it) and without creating complex xpath difficult
to customize.

task#2667024

Part-of: odoo/odoo#79651
---
 .../static/src/scss/website_sale.scss         | 347 +++++++-----------
 .../website_sale/views/snippets/snippets.xml  |  48 +++
 addons/website_sale/views/templates.xml       |  84 +++--
 3 files changed, 244 insertions(+), 235 deletions(-)

diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 404c4853f30..5dc5aa77674 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -5,16 +5,51 @@ $o-wsale-products-layout-grid-gutter-width: $grid-gutter-width / 2 !default;
 $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale-products-layout-grid-gutter-width);
 
 @mixin wsale-break-table-to-list() {
-    .o_wsale_products_grid_table_wrapper > table,
-    .o_wsale_products_grid_table_wrapper > table > tbody,
-    .o_wsale_products_grid_table_wrapper > table > tbody > tr,
-    .o_wsale_products_grid_table_wrapper > table > tbody > tr > td {
-        display: block;
-        width: 100%;
+    .o_wsale_products_grid_table_wrapper {
+        table, tbody, tr, td {
+            display: block;
+            width: 100%;
+        }
     }
 }
 
 .oe_website_sale {
+    // ==== Products list designs
+    .o_wsale_design_cards {
+        --o-wsale-card-border-width: 1px;
+        --o-wsale-card-border-radius: #{$card-border-radius};
+        --o-wsale-card-info-padding: #{map-get($spacers, 2)};
+        --o-wsale-card-bg: #{$card-bg};
+
+        $-br-top: calc(#{$card-border-radius} - 1px);
+        --o-wsale-card-thumb-border-radius: #{$-br-top} #{$-br-top} 0 0;
+    }
+    .o_wsale_design_thumbs {
+        --o-wsale-card-border-width: 0;
+        --o-wsale-card-info-padding: #{map-get($spacers, 3)} 0;
+        --o-wsale-card-thumb-border-radius: #{$o-wsale-products-layout-grid-gutter-width * .5};
+        --o-wsale-card-thumb-shadow: 0 13px 27px -5px #{scale-color(theme-color('primary'), $alpha: -90%)},
+                                     0 8px 16px -8px rgba(0, 0, 0, .28);
+    }
+    .o_wsale_design_grid {
+        --o-wsale-grid-border: 1px solid #{$card-border-color};
+        --o-wsale-card-border-width: 0;
+    }
+
+    // ==== Products list thumb options
+    .o_wsale_context_thumb_4_3 {
+        --o-wsale-card-thumb-aspect-ratio: 4/3;
+    }
+    .o_wsale_context_thumb_4_5 {
+        --o-wsale-card-thumb-aspect-ratio: 4/5;
+    }
+    .o_wsale_context_thumb_2_3 {
+        --o-wsale-card-thumb-aspect-ratio: 2/3;
+    }
+    .o_wsale_context_thumb_cover {
+        --o-wsale-card-thumb-fill-mode: cover;
+    }
+
     ul ul {
         margin-left: 1.5rem;
     }
@@ -95,9 +130,6 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         padding-bottom: 0.75rem;
     }
     #products_grid_before {
-        @include media-breakpoint-up(lg) {
-            border-right: 1px solid gray('400');
-        }
         #wsale_products_categories_collapse {
             label {
                 &:hover {
@@ -173,81 +205,48 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
 
 // Base style for a product card with image/description
 .oe_product_cart {
+    flex-direction: var(--o-wsale-card-flex-direction, column);
+    border: $card-border-width solid $card-border-color;
+    border-width: var(--o-wsale-card-border-width, 0 0 1px);
+    border-radius: var(--o-wsale-card-border-radius, 0);
+    padding: var(--o-wsale-card-padding, 0);
+    background-color: var(--o-wsale-card-bg);
+
     .oe_product_image {
-        height: 0;
-        text-align: center;
+        min-width: var(--o-wsale-card-thumb-size);
+        width: var(--o-wsale-card-thumb-size);
 
-        img {
-            height: 100%;
-            width: 100%;
-            object-fit: scale-down;
+        .oe_product_image_link {
+            padding-top: calc(100% / (var(--o-wsale-card-thumb-aspect-ratio, 1)));
+
+            .oe_product_image_img_wrapper {
+                @include o-position-absolute(0, 0, 0, 0);
+
+                img {
+                    box-shadow: var(--o-wsale-card-thumb-shadow);
+                    border-radius: var(--o-wsale-card-thumb-border-radius);
+                    object-fit: var(--o-wsale-card-thumb-fill-mode, contain);
+                }
+            }
         }
     }
+
     .o_wsale_product_information {
-        position: relative;
-        flex: 0 0 auto;
-        transition: .3s ease;
+        padding: var(--o-wsale-card-info-padding, #{map-get($spacers, 2)} 0);
     }
-    .oe_subdescription {
-        max-height: 0;
+
+    [data-oe-field="description_sale"][data-oe-type] {
+        min-height: calc(#{$font-size-sm * 1.1} * 2);
         overflow: hidden;
-        font-size: $font-size-sm;
-        margin-bottom: map-get($spacers, 1);
-        opacity: 0;
-        transform: scale(1, 0);
-        transition: all ease 0.3s;
-    }
-    .o_wsale_product_btn {
-        @include o-position-absolute(auto, auto, 100%, 0);
-        padding-bottom: map-get($spacers, 1);
-        z-index: 2;
-
-        .btn {
-            width: 46px;
-            padding: 0.375rem 0.75rem; // prevent default Bootstrap padding from being modified by theme variables
-            line-height: 32px;
-            border-radius: 50%;
-            transform: scale(0);
-            opacity: 0;
-            transition: transform ease 200ms 0s, opacity ease 50ms;
-        }
-
-        &:empty {
-            display: none !important;
-        }
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 1.1;
     }
 
-    &:hover {
-        .o_wsale_product_information {
-            background-color: white !important;
-        }
-        .oe_subdescription {
-            max-height: $line-height-base * 1em; // Max 1 line
-            @include media-breakpoint-up(lg) {
-                max-height: $line-height-base * 2em; // Max 2 lines
-            }
-            @include media-breakpoint-up(xl) {
-                max-height: $line-height-base * 3em; // Max 3 lines
-            }
-        }
-        .oe_subdescription,
-        .o_wsale_product_btn .btn {
-            transform: scale(1);
-            opacity: 1;
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        &, &:hover {
-            .oe_subdescription {
-                max-height: $line-height-base * 3em; // Max 3 lines
-            }
-        }
-        .oe_subdescription,
-        .o_wsale_product_btn .btn {
-            transform: scale(1);
-            opacity: 1;
-        }
+    .o_wsale_product_btn:empty {
+        display: none !important;
     }
 
     .o_ribbon_left, .o_ribbon_right {
@@ -260,19 +259,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
     }
 }
 
-// Options relative to where the product card is put
-.oe_product {
-    // Image full option
-    &.oe_image_full {
-        .oe_product_image {
-            @include border-bottom-radius($card-inner-border-radius);
-        }
-        .o_wsale_product_information {
-            @include o-position-absolute(auto, 0, 0, 0); // The wrapper is always relatively positioned
-        }
-    }
-}
-
+// ==== THE GRID
 #products_grid {
     .o_wsale_products_searchbar_form {
         @include media-breakpoint-up(md) {
@@ -280,50 +267,15 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         }
     }
 
-    .o_wsale_products_grid_table_wrapper > .table {
+    .o_wsale_products_grid_table_wrapper .table {
         table-layout: fixed;
 
-        > tbody {
-            > tr > td {
-                margin-top: $o-wsale-products-layout-grid-gutter-width; // For list and mobile design
-                padding: 0;
+        td {
+            padding: $o-wsale-products-layout-grid-gutter-width * .5;
+            border: var(--o-wsale-grid-border, 0);
 
-                @if $o-wsale-products-layout-grid-gutter-width <= 0 {
-                    border: $card-border-width solid $card-border-color;
-                }
-            }
-
-            > tr:first-child > td:first-child {
-                margin-top: 0; // For list and mobile design
-            }
-        }
-
-        .o_wsale_product_grid_wrapper {
-            position: relative;
-
-            @for $x from 1 through 4 {
-                @for $y from 1 through 4 {
-                    &.o_wsale_product_grid_wrapper_#{$x}_#{$y} {
-                        padding-top: 100% * $o-wsale-products-layout-grid-ratio * $y / $x;
-                    }
-                }
-            }
-
-            > * {
-                $-pos: ($o-wsale-products-layout-grid-gutter-width / 2);
-                @include o-position-absolute($-pos, $-pos, $-pos, $-pos);
-
-                &.card {
-                    border: none;
-
-                    @if $o-wsale-products-layout-grid-gutter-width > 0 {
-                        border-bottom: 1px solid gray('400');
-                    }
-
-                    &, .card-body {
-                        border-radius: 0;
-                    }
-                }
+            @if $o-wsale-products-layout-grid-gutter-width <= 0 {
+                border: $card-border-width solid $card-border-color;
             }
         }
     }
@@ -338,95 +290,68 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         // outer border spacing as part of the design.
         margin: (-$o-wsale-products-layout-grid-gutter-width / 2);
     }
+}
 
-    @include media-breakpoint-down(sm) {
+#products_grid:not(.o_wsale_layout_list) {
+    @include media-breakpoint-down(md) {
         @include wsale-break-table-to-list();
+    }
 
-        .table .o_wsale_product_grid_wrapper {
-            padding-top: 100% !important;
+    @include media-breakpoint-up(lg) {
+        td.oe_product {
+            height: 1px; // Will adapt to its content
+            padding-bottom: $o-wsale-products-layout-grid-gutter-width * .5;
+
+            .o_wsale_product_btn {
+                @include o-position-absolute(auto, auto, calc(100% + #{map-get($spacers, 2)}), map-get($spacers, 2));
+                z-index: 2;
+            }
+
+            &:not(:hover) .o_wsale_product_btn {
+                opacity: 0;
+            }
+        }
+
+        // Sliglty increase padding for larger blocks
+        @for $x from 2 through 4 {
+            [class*="o_wsale_product_grid_wrapper_#{$x}_"] {
+                --o-wsale-card-info-padding: #{map-get($spacers, 3)} 0 #{map-get($spacers, 2)};
+            }
+
+            .o_wsale_design_cards [class*="o_wsale_product_grid_wrapper_#{$x}_"] {
+                --o-wsale-card-info-padding: #{map-get($spacers, 3)} #{map-get($spacers, 3)} #{map-get($spacers, 2)};
+            }
+        }
+    }
+}
+
+#products_grid.o_wsale_layout_list {
+    @include wsale-break-table-to-list();
+
+    .oe_product {
+        --o-wsale-card-border-radius: 0;
+        --o-wsale-card-flex-direction: row;
+        --o-wsale-card-info-padding: 0 #{map-get($spacers, 3)};
+
+        // The more an image is portait, the more its size decreases
+        --o-wsale-card-thumb-size: calc(100px * var(--o-wsale-card-thumb-aspect-ratio, 1));
+
+        @include media-breakpoint-up(lg) {
+            --o-wsale-card-thumb-size: calc(160px * var(--o-wsale-card-thumb-aspect-ratio, 1));
+
+            h6, .h6 {
+                font-size: $font-size-base * 1.3;
+            }
         }
     }
 
-    &.o_wsale_layout_list {
-        @include media-breakpoint-up(sm) {
-            @include wsale-break-table-to-list();
+    .oe_product {
+        --o-wsale-card-padding: #{0 0 $o-wsale-products-layout-grid-gutter-width};
+    }
 
-            .o_wsale_products_grid_table_wrapper {
-                margin: 0;
-            }
-
-            .table .o_wsale_product_grid_wrapper {
-                padding-top: 0 !important;
-
-                > * {
-                    @include o-position-absolute(0, 0, 0, 0);
-                    position: relative;
-                }
-            }
-
-            .oe_product_cart {
-                $-wsale-list-layout-height: 12rem;
-
-                flex-flow: row nowrap;
-                min-height: $-wsale-list-layout-height;
-
-                .oe_product_image {
-                    flex: 0 0 auto;
-                    width: $-wsale-list-layout-height;
-                    max-width: 35%;
-                    min-width: 100px;
-                    height: auto;
-                    padding: $spacer/2 !important;
-                }
-                .o_wsale_product_information {
-                    position: static;
-                    display: flex;
-                    flex: 1 1 auto;
-                    text-align: left !important;
-                }
-                .o_wsale_product_information_text {
-                    flex: 1 1 auto;
-                    margin-left: $spacer*2;
-                    margin-right: $spacer;
-
-                    .o_wsale_products_item_title {
-                        font-size: $h5-font-size;
-                        padding-bottom: $spacer/3;
-                        border-bottom: 1px solid gray('300');
-                    }
-                    .oe_subdescription {
-                        font-size: 0.9rem;
-                        margin-top: $spacer/2;
-                    }
-                }
-                .o_wsale_product_btn {
-                    flex: 0 0 auto;
-                    position: static;
-                    display: flex;
-                    align-items: flex-end;
-                    padding: map-get($spacers, 2);
-
-                    .btn + .btn {
-                        margin-left: map-get($spacers, 2);
-                    }
-                }
-
-                .oe_subdescription {
-                    max-height: none !important;
-                }
-                .oe_subdescription,
-                .o_wsale_product_btn .btn {
-                    transform: scale(1) !important;
-                    opacity: 1;
-                }
-
-                &:hover {
-                    .o_wsale_product_information {
-                        background-color: $white !important;
-                    }
-                }
-            }
-        }
+    .o_wsale_design_cards .oe_product {
+        --o-wsale-card-padding: #{$o-wsale-products-layout-grid-gutter-width * .5};
+        --o-wsale-card-info-padding: #{map-get($spacers, 2)} #{map-get($spacers, 3)};
     }
 }
 
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 39853b28d01..b7a525dafd2 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -23,6 +23,54 @@
                     <we-button t-att-data-set-default-sort="query_and_label[0]"><t t-esc="query_and_label[1]"/></we-button>
                 </t>
             </we-select>
+            <we-select string="Design">
+                <we-button data-select-class=""
+                           data-customize-website-views="">
+                           Default
+                </we-button>
+                <we-button data-select-class="o_wsale_design_cards"
+                           data-customize-website-views="website_sale.products_design_card">
+                           Cards
+                </we-button>
+                <we-button data-select-class="o_wsale_design_thumbs"
+                           data-customize-website-views="website_sale.products_design_thumbs">
+                           Thumbnails
+                </we-button>
+                <we-button data-select-class="o_wsale_design_grid"
+                           data-customize-website-views="website_sale.products_design_grid">
+                           Grid
+                </we-button>
+            </we-select>
+            <we-select string="Images Height">
+                <we-button data-select-class="o_wsale_context_thumb_4_3"
+                           data-customize-website-views="website_sale.products_thumb_4_3">
+                           Landscape (4/3)
+                </we-button>
+                <we-button data-select-class=""
+                           data-customize-website-views="">
+                           Default (1/1)
+                </we-button>
+                <we-button data-select-class="o_wsale_context_thumb_4_5"
+                           data-customize-website-views="website_sale.products_thumb_4_5">
+                           Portrait (4/5)
+                </we-button>
+                <we-button data-select-class="o_wsale_context_thumb_2_3"
+                           data-customize-website-views="website_sale.products_thumb_2_3">
+                           Vertical (2/3)
+                </we-button>
+            </we-select>
+            <we-button-group string=" ⌙ Fill" data-variable="thumb_size">
+                <we-button data-select-class=""
+                           data-img="/website/static/src/img/snippets_options/content_width_normal.svg"
+                           data-customize-website-views="">
+                </we-button>
+                <we-button data-select-class="o_wsale_context_thumb_cover"
+                           data-name="thumb_cover"
+                           data-variable="thumb_cover"
+                           data-img="/website/static/src/img/snippets_options/content_width_full.svg"
+                           data-customize-website-views="website_sale.products_thumb_cover">
+                </we-button>
+            </we-button-group>
         </div>
 
         <div data-js="WebsiteSaleProductsItem"
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 83a823cd030..faba6ab6b9e 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -160,33 +160,37 @@
 
         <t t-set="combination_info" t-value="product._get_combination_info(only_template=True, add_qty=add_qty or 1, pricelist=pricelist)"/>
 
-        <form action="/shop/cart/update" method="post" class="card oe_product_cart"
+        <form action="/shop/cart/update" method="post" class="oe_product_cart h-100 d-flex"
             t-att-data-publish="product.website_published and 'on' or 'off'"
             itemscope="itemscope" itemtype="http://schema.org/Product">
-            <a class="o_product_link css_editable_mode_hidden" t-att-href="product_href"/>
-            <div class="card-body p-1 oe_product_image">
+            <!-- <a class="o_product_link css_editable_mode_hidden" t-att-href="product_href"/> -->
+            <div class="oe_product_image position-relative h-100 flex-grow-0">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
-                <a t-att-href="product_href" class="d-block h-100" itemprop="url">
+                <a t-att-href="product_href" class="oe_product_image_link d-block h-100 position-relative" itemprop="url" contenteditable="false">
                     <t t-set="image_holder" t-value="product._get_image_holder()"/>
                     <span t-field="image_holder.image_1920"
-                        t-options="{'widget': 'image', 'preview_image': 'image_1024' if product_image_big else 'image_256', 'itemprop': 'image'}"
-                        class="d-flex h-100 justify-content-center align-items-center"/>
+                        t-options="{'widget': 'image', 'preview_image': 'image_1024', 'itemprop': 'image', 'class': 'h-100 w-100'}"
+                        class="oe_product_image_img_wrapper d-flex h-100 justify-content-center align-items-center position-absolute"/>
                 </a>
             </div>
-            <div class="card-body p-0 o_wsale_product_information">
-                <div class="p-2 o_wsale_product_information_text">
-                    <h6 class="o_wsale_products_item_title mb-1">
+            <div class="o_wsale_product_information position-relative d-flex flex-column flex-grow-1 flex-shrink-1">
+                <div class="o_wsale_product_information_text flex-grow-1">
+                    <h6 class="o_wsale_products_item_title mb-2">
                         <a class="text-primary text-decoration-none" itemprop="name" t-att-href="product_href" t-att-content="product.name" t-field="product.name" />
                         <a role="button" t-if="not product.website_published" t-att-href="product_href" class="btn btn-sm btn-danger" title="This product is unpublished.">Unpublished</a>
                     </h6>
-                    <div class="product_price mb-1" itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
-                        <span class="h5" t-if="combination_info['price']" t-esc="combination_info['price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
-                        <del t-attf-class="text-danger ml-1 h6 {{'' if combination_info['has_discounted_price'] else 'd-none'}}" style="white-space: nowrap;" t-esc="combination_info['list_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" />
+                </div>
+                <div class="o_wsale_product_sub d-flex justify-content-between align-items-end pb-1">
+                    <div class="o_wsale_product_btn"/>
+                    <div class="product_price" itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
+                        <del t-attf-class="text-muted mr-1 h6 mb-0 {{'' if combination_info['has_discounted_price'] else 'd-none'}}" style="white-space: nowrap;">
+                            <em class="small" t-esc="combination_info['list_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" />
+                        </del>
+                        <span class="h6 mb-0" t-if="combination_info['price']" t-esc="combination_info['price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                         <span itemprop="price" style="display:none;" t-esc="combination_info['price']" />
                         <span itemprop="priceCurrency" style="display:none;" t-esc="website.currency_id.name" />
                     </div>
                 </div>
-                <div class="o_wsale_product_btn pl-2"/>
             </div>
             <t t-set="bg_color" t-value="td_product['ribbon']['bg_color'] or ''"/>
             <t t-set="text_color" t-value="td_product['ribbon']['text_color']"/>
@@ -196,8 +200,8 @@
     </template>
 
     <template id="products_description" inherit_id="website_sale.products_item" active="False" customize_show="True" name="Product Description">
-        <xpath expr="//*[hasclass('product_price')]" position="after">
-            <div class="oe_subdescription" contenteditable="false">
+        <xpath expr="//*[hasclass('o_wsale_products_item_title')]" position="after">
+            <div class="oe_subdescription mb-2 text-muted small" contenteditable="false">
                 <div itemprop="description" t-field="product.description_sale"/>
             </div>
         </xpath>
@@ -296,10 +300,8 @@
                                                         t-att-rowspan="td_product['y'] != 1 and td_product['y']"
                                                         t-attf-class="oe_product"
                                                         t-att-data-ribbon-id="td_product['ribbon'].id">
-                                                        <div t-attf-class="o_wsale_product_grid_wrapper o_wsale_product_grid_wrapper_#{td_product['x']}_#{td_product['y']}">
-                                                            <t t-call="website_sale.products_item">
-                                                                <t t-set="product_image_big" t-value="td_product['x'] + td_product['y'] &gt; 2"/>
-                                                            </t>
+                                                        <div t-attf-class="o_wsale_product_grid_wrapper position-relative h-100 o_wsale_product_grid_wrapper_#{td_product['x']}_#{td_product['y']}">
+                                                            <t t-call="website_sale.products_item"/>
                                                         </div>
                                                     </td>
                                                 </t>
@@ -333,10 +335,44 @@
         </t>
     </template>
 
-    <!-- (Option) Products: Enable image full for all products : Images Full -->
-    <template id="products_images_full" name="Images Full" inherit_id="website_sale.products" active="False" customize_show="True">
-        <xpath expr="//t[@t-foreach='tr_product']//td" position="attributes">
-            <attribute name="t-attf-class" add="oe_image_full" separator=" "/>
+    <!-- (Option) Products: Enable "Card" or "Thumbnails" designs -->
+    <template id="products_design_card" name="Card Design" inherit_id="website_sale.products" active="False">
+        <xpath expr="//table" position="attributes">
+            <attribute name="class" add="o_wsale_design_cards" separator=" "/>
+        </xpath>
+    </template>
+    <template id="products_design_thumbs" name="Thumbnails Design" inherit_id="website_sale.products" active="False">
+        <xpath expr="//table" position="attributes">
+            <attribute name="class" add="o_wsale_design_thumbs" separator=" "/>
+        </xpath>
+    </template>
+    <template id="products_design_grid" name="Grid Design" inherit_id="website_sale.products" active="False">
+        <xpath expr="//table" position="attributes">
+            <attribute name="class" add="o_wsale_design_grid" separator=" "/>
+        </xpath>
+    </template>
+
+    <!-- (Options) Products: Define products' default image ratio -->
+    <template id="products_thumb_4_3" name="thumb_4_3" inherit_id="website_sale.products" active="False">
+        <xpath expr="//table" position="attributes">
+            <attribute name="class" add="o_wsale_context_thumb_4_3" separator=" "/>
+        </xpath>
+    </template>
+    <template id="products_thumb_4_5" name="thumb_4_5" inherit_id="website_sale.products" active="False">
+        <xpath expr="//table" position="attributes">
+            <attribute name="class" add="o_wsale_context_thumb_4_5" separator=" "/>
+        </xpath>
+    </template>
+    <template id="products_thumb_2_3" name="thumb_2_3" inherit_id="website_sale.products" active="False">
+        <xpath expr="//table" position="attributes">
+            <attribute name="class" add="o_wsale_context_thumb_2_3" separator=" "/>
+        </xpath>
+    </template>
+
+    <!-- (Option) Products: Define products' images filling mode -->
+    <template id="products_thumb_cover" name="thumb_cover" inherit_id="website_sale.products" active="True">
+        <xpath expr="//table" position="attributes">
+            <attribute name="class" add="o_wsale_context_thumb_cover" separator=" "/>
         </xpath>
     </template>
 
@@ -370,7 +406,7 @@
 
     <template id="add_grid_or_list_option" inherit_id="website_sale.products" active="True" customize_show="True" name="Grid or List button">
         <xpath expr="//div[hasclass('products_header')]" position="inside">
-            <div class="btn-group btn-group-toggle ml-3 mb-2 d-none d-sm-inline-flex o_wsale_apply_layout" data-toggle="buttons">
+            <div class="btn-group btn-group-toggle ml-3 mb-2 d-inline-flex o_wsale_apply_layout" data-toggle="buttons">
                 <label t-attf-class="btn btn-light border-0 #{'active' if layout_mode != 'list' else None} fa fa-th-large o_wsale_apply_grid" title="Grid">
                     <input type="radio" name="wsale_products_layout" t-att-checked="'checked' if layout_mode != 'list' else None"/>
                 </label>