[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
This commit is contained in:
stefanorigano (SRI)
committed by
Yannick Tivisse
Yannick Tivisse
parent
d063d99e15
commit
536db5c64f
@@ -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)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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'] > 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>
|
||||
|
||||
Reference in New Issue
Block a user