alaguraj/odoo_clicks2cart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introduce Clicks2Cart theme with custom styling and page layouts.

Browse Source
This commit is contained in:
Alaguraj0361 2026-03-11 16:16:13 +05:30
parent 4cd18000fc
commit dd7a1ccd8d
2 changed files with 103 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
addons/theme_clicks2cart/static/src/scss/theme.scss
View File

@ -351,7 +351,7 @@ header#top {
padding: 40px 50px; padding: 40px 50px;
text-align: center; text-align: center;
min-width: 280px; min-width: 280px;
backdrop-filter: blur(5px); // backdrop-filter: blur(5px);
z-index: 5; z-index: 5;
// border: 1px solid rgba(0, 0, 0, 0.05); // border: 1px solid rgba(0, 0, 0, 0.05);
@ -767,6 +767,7 @@ header#top {
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
text-align: center; text-align: center;
position: relative; // Added for badge positioning
&:hover { &:hover {
transform: none; transform: none;
@ -786,17 +787,18 @@ header#top {
.s_cat_badge { .s_cat_badge {
position: absolute; position: absolute;
top: 15px; top: 10px; // Snugger to the corner
right: 15px; right: 10px; // Snugger to the corner
background: #000; background: #000;
color: #fff; color: #fff;
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 700; font-weight: 700;
padding: 4px 10px; padding: 4px 12px;
z-index: 12; z-index: 20; // Higher z-index to stay above everything
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
border-radius: 0; border-radius: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
&.badge-hot { &.badge-hot {
background: #e74c3c; background: #e74c3c;
@ -808,14 +810,14 @@ header#top {
} }
.s_cat_img_wrap { .s_cat_img_wrap {
background-color: #f7f7f7; // background-color: #f7f7f7;
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; // margin-bottom: 20px;
aspect-ratio: 1 / 1.25; aspect-ratio: 1 / 1.25;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px; // padding: 10px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -1172,12 +1174,36 @@ footer#bottom.o_footer {
} }
.s_brand_logos { .s_brand_logos {
img { overflow: hidden;
transition: transform 0.4s ease, filter 0.4s ease; white-space: nowrap;
.s_brand_slider_track {
display: flex;
width: max-content;
animation: brandMarquee 30s linear infinite;
&:hover { &:hover {
animation-play-state: paused;
}
}
.s_brand_logo_item {
width: 200px; // Standard spacing between logos
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
opacity: 0.6;
transition: all 0.4s ease;
&:hover {
opacity: 1;
transform: scale(1.1); transform: scale(1.1);
filter: grayscale(0) !important;
span,
i {
color: #e6b3a3 !important;
}
} }
} }
@ -1185,13 +1211,15 @@ footer#bottom.o_footer {
i { i {
transition: color 0.3s ease; transition: color 0.3s ease;
} }
}
div.col-4:hover { @keyframes brandMarquee {
0% {
span, transform: translateX(0);
i {
color: #e6b3a3 !important;
} }
100% {
transform: translateX(-50%); // Because we duplicated the items exactly
} }
} }

77
addons/theme_clicks2cart/views/pages.xml
View File

@ -274,10 +274,10 @@
<div class="s_wedding_card position-relative bg-white text-center" style="padding: 10px; transition: box-shadow 0.3s ease;"> <div class="s_wedding_card position-relative bg-white text-center" style="padding: 10px; transition: box-shadow 0.3s ease;">
<!-- Badge --> <!-- Badge -->
<t t-if="product_index == 0"> <t t-if="product_index == 0">
<span class="position-absolute top-0 start-0 m-2 badge" style="background:#e74c3c; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px;">SALE</span> <span class="position-absolute top-0 end-0 m-2 badge" style="background:#e74c3c; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px; z-index: 10;">SALE</span>
</t> </t>
<t t-elif="product_index == 2"> <t t-elif="product_index == 2">
<span class="position-absolute top-0 start-0 m-2 badge" style="background:#e6b3a3; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px;">HOT</span> <span class="position-absolute top-0 end-0 m-2 badge" style="background:#e6b3a3; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px; z-index: 10;">HOT</span>
</t> </t>
<!-- Product Image --> <!-- Product Image -->
@ -312,7 +312,7 @@
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="s_wedding_card position-relative bg-white text-center" style="padding: 10px; transition: box-shadow 0.3s ease;"> <div class="s_wedding_card position-relative bg-white text-center" style="padding: 10px; transition: box-shadow 0.3s ease;">
<t t-if="item[4]"> <t t-if="item[4]">
<span class="position-absolute top-0 start-0 m-2 badge" t-attf-style="background:#{item[4] == 'SALE' and '#e74c3c' or '#e6b3a3'}; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px;" t-esc="item[4]"/> <span class="position-absolute top-0 end-0 m-2 badge" t-attf-style="background:#{item[4] == 'SALE' and '#e74c3c' or '#e6b3a3'}; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px; z-index: 10;" t-esc="item[4]"/>
</t> </t>
<div style="background: #f8f8f8; height: 230px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;"> <div style="background: #f8f8f8; height: 230px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product" style="max-height: 210px; object-fit: contain; mix-blend-mode: multiply;"/> <img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product" style="max-height: 210px; object-fit: contain; mix-blend-mode: multiply;"/>
@ -361,14 +361,13 @@
<t t-foreach="holiday_products" t-as="product"> <t t-foreach="holiday_products" t-as="product">
<div class="col-md-6"> <div class="col-md-6">
<div class="s_cat_card"> <div class="s_cat_card">
<div class="s_cat_img_wrap position-relative overflow-hidden">
<t t-if="product_index == 0"> <t t-if="product_index == 0">
<span class="s_cat_badge badge-hot">HOT</span> <span class="s_cat_badge badge-hot">HOT</span>
</t> </t>
<t t-elif="product_index == 3"> <t t-elif="product_index == 3">
<span class="s_cat_badge badge-sale">SALE</span> <span class="s_cat_badge badge-sale">SALE</span>
</t> </t>
<div class="s_cat_img_wrap position-relative overflow-hidden">
<a t-attf-href="/shop/product/#{product.website_slug or product.id}"> <a t-attf-href="/shop/product/#{product.website_slug or product.id}">
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/> <img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
</a> </a>
@ -392,8 +391,8 @@
<t t-if="not holiday_products"> <t t-if="not holiday_products">
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-4">
<div class="s_cat_card"> <div class="s_cat_card">
<span class="s_cat_badge badge-hot">HOT</span>
<div class="s_cat_img_wrap position-relative overflow-hidden"> <div class="s_cat_img_wrap position-relative overflow-hidden">
<span class="s_cat_badge badge-hot">HOT</span>
<img src="/theme_clicks2cart/static/src/img/holiday_prod_1.png" alt="Fun &amp; Flirty"/> <img src="/theme_clicks2cart/static/src/img/holiday_prod_1.png" alt="Fun &amp; Flirty"/>
<div class="s_cat_hover_btn"> <div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a> <a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
@ -444,8 +443,8 @@
</div> </div>
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-4">
<div class="s_cat_card"> <div class="s_cat_card">
<span class="s_cat_badge badge-sale">SALE</span>
<div class="s_cat_img_wrap position-relative overflow-hidden"> <div class="s_cat_img_wrap position-relative overflow-hidden">
<span class="s_cat_badge badge-sale">SALE</span>
<img src="/theme_clicks2cart/static/src/img/holiday_prod_4.png" alt="Sweet Sorbet"/> <img src="/theme_clicks2cart/static/src/img/holiday_prod_4.png" alt="Sweet Sorbet"/>
<div class="s_cat_hover_btn"> <div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a> <a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
@ -516,45 +515,77 @@
</div> </div>
</section> </section>
<!-- Brand Logos --> <!-- Brand Logos (Auto Slider) -->
<section class="s_brand_logos bg-white" style="padding-top: 60px; padding-bottom: 80px;"> <section class="s_brand_logos bg-white overflow-hidden" style="padding-top: 60px; padding-bottom: 80px;">
<div class="container"> <div class="container-fluid px-0">
<div class="row align-items-center justify-content-center text-center opacity-75"> <div class="s_brand_slider_track">
<!-- Logo 1 (holli) --> <!-- Original Logos -->
<div class="col-4 col-md-2 mb-4 mb-md-0"> <div class="s_brand_logo_item">
<div class="d-flex flex-column align-items-center justify-content-center border rounded-circle mx-auto" style="width: 80px; height: 80px; border-color: #ddd !important;"> <div class="d-flex flex-column align-items-center justify-content-center border rounded-circle mx-auto" style="width: 80px; height: 80px; border-color: #ddd !important;">
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #666;">holli</span> <span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #666;">holli</span>
</div> </div>
</div> </div>
<!-- Logo 2 (handmade with love) --> <div class="s_brand_logo_item">
<div class="col-4 col-md-2 mb-4 mb-md-0">
<div class="d-flex flex-column align-items-center justify-content-center"> <div class="d-flex flex-column align-items-center justify-content-center">
<i class="fa fa-heart mb-1 text-muted" style="font-size: 1.2rem;"></i> <i class="fa fa-heart mb-1 text-muted" style="font-size: 1.2rem;"></i>
<span style="font-family: 'Outfit'; font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; color: #333; line-height: 1.2;">HANDMADE<br/>WITH LOVE</span> <span style="font-family: 'Outfit'; font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; color: #333; line-height: 1.2;">HANDMADE<br/>WITH LOVE</span>
</div> </div>
</div> </div>
<!-- Logo 3 (fashion LIVE STYLE) --> <div class="s_brand_logo_item">
<div class="col-4 col-md-2 mb-4 mb-md-0">
<div class="d-flex flex-column align-items-center justify-content-center"> <div class="d-flex flex-column align-items-center justify-content-center">
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1rem; color: #888; line-height: 1;">fashion</span> <span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1rem; color: #888; line-height: 1;">fashion</span>
<span style="font-family: 'Playfair Display'; font-size: 0.9rem; font-weight: 800; letter-spacing: 1px; color: #222; line-height: 1;">LIVE<br/>STYLE</span> <span style="font-family: 'Playfair Display'; font-size: 0.9rem; font-weight: 800; letter-spacing: 1px; color: #222; line-height: 1;">LIVE<br/>STYLE</span>
</div> </div>
</div> </div>
<!-- Logo 4 (jes WEDDING agency) --> <div class="s_brand_logo_item">
<div class="col-4 col-md-2 mb-4 mb-md-0">
<div class="d-flex flex-column align-items-center justify-content-center border p-2 mx-auto" style="border-color: #ccc !important; max-width: 90px;"> <div class="d-flex flex-column align-items-center justify-content-center border p-2 mx-auto" style="border-color: #ccc !important; max-width: 90px;">
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #444; line-height: 1;">jes</span> <span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #444; line-height: 1;">jes</span>
<span style="font-family: 'Outfit'; font-size: 0.5rem; letter-spacing: 2px; color: #555; line-height: 1.2;">WEDDING<br/>agency</span> <span style="font-family: 'Outfit'; font-size: 0.5rem; letter-spacing: 2px; color: #555; line-height: 1.2;">WEDDING<br/>agency</span>
</div> </div>
</div> </div>
<!-- Logo 5 (X-pure) --> <div class="s_brand_logo_item">
<div class="col-4 col-md-2 mb-4 mb-md-0">
<div class="d-flex flex-column align-items-center justify-content-center"> <div class="d-flex flex-column align-items-center justify-content-center">
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.5rem; color: #666;">x-pure</span> <span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.5rem; color: #666;">x-pure</span>
</div> </div>
</div> </div>
<!-- Logo 6 (art studio by A.LIN) --> <div class="s_brand_logo_item">
<div class="col-4 col-md-2 mb-4 mb-md-0"> <div class="d-flex flex-column align-items-center justify-content-center">
<i class="fa fa-asterisk text-muted mb-1" style="font-size: 0.8rem;"></i>
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 0.9rem; color: #555; line-height: 1;">art studio</span>
<span style="font-family: 'Outfit'; font-size: 0.45rem; letter-spacing: 2px; color: #777; line-height: 1.2;">BY A.LIN</span>
</div>
</div>
<!-- Duplicated Logos for seamless sliding -->
<div class="s_brand_logo_item">
<div class="d-flex flex-column align-items-center justify-content-center border rounded-circle mx-auto" style="width: 80px; height: 80px; border-color: #ddd !important;">
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #666;">holli</span>
</div>
</div>
<div class="s_brand_logo_item">
<div class="d-flex flex-column align-items-center justify-content-center">
<i class="fa fa-heart mb-1 text-muted" style="font-size: 1.2rem;"></i>
<span style="font-family: 'Outfit'; font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; color: #333; line-height: 1.2;">HANDMADE<br/>WITH LOVE</span>
</div>
</div>
<div class="s_brand_logo_item">
<div class="d-flex flex-column align-items-center justify-content-center">
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1rem; color: #888; line-height: 1;">fashion</span>
<span style="font-family: 'Playfair Display'; font-size: 0.9rem; font-weight: 800; letter-spacing: 1px; color: #222; line-height: 1;">LIVE<br/>STYLE</span>
</div>
</div>
<div class="s_brand_logo_item">
<div class="d-flex flex-column align-items-center justify-content-center border p-2 mx-auto" style="border-color: #ccc !important; max-width: 90px;">
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #444; line-height: 1;">jes</span>
<span style="font-family: 'Outfit'; font-size: 0.5rem; letter-spacing: 2px; color: #555; line-height: 1.2;">WEDDING<br/>agency</span>
</div>
</div>
<div class="s_brand_logo_item">
<div class="d-flex flex-column align-items-center justify-content-center">
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.5rem; color: #666;">x-pure</span>
</div>
</div>
<div class="s_brand_logo_item">
<div class="d-flex flex-column align-items-center justify-content-center"> <div class="d-flex flex-column align-items-center justify-content-center">
<i class="fa fa-asterisk text-muted mb-1" style="font-size: 0.8rem;"></i> <i class="fa fa-asterisk text-muted mb-1" style="font-size: 0.8rem;"></i>
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 0.9rem; color: #555; line-height: 1;">art studio</span> <span style="font-family: 'Playfair Display'; font-style: italic; font-size: 0.9rem; color: #555; line-height: 1;">art studio</span>