Add Clicks2Cart theme with custom styling for header, hero, and collection sections, including new images and page structures.

This commit is contained in:
Alaguraj0361 2026-03-03 18:35:15 +05:30
parent 78714dbd26
commit 0cfe4c8b85
17 changed files with 1363 additions and 273 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 483 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 698 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 564 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 532 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 824 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 408 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 755 KiB

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 656 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 517 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 496 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 694 KiB

File diff suppressed because it is too large Load Diff

View File

@ -12,30 +12,78 @@
<xpath expr="//div[@id='wrap']" position="replace">
<div id="wrap" class="oe_structure">
<!-- Premium Hero Section -->
<!-- Premium Hero Section (Working Slider) -->
<section class="s_hero_premium py-0">
<div class="container py-5">
<div class="row min-vh-75 align-items-center">
<div class="col-lg-12">
<p class="hero-pre-title text-uppercase">EXPLORE THE</p>
<h1 class="display-1 fw-bold mb-4">New Arrivals</h1>
<p class="hero-desc">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
<div class="mt-4">
<a href="/shop" class="btn btn-shop-now font-weight-bold">Shop now</a>
<div id="clicks2cartHeroCarousel" class="carousel slide h-100" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner h-100">
<!-- Slide 1 -->
<div class="carousel-item active h-100 slide-1">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<p class="hero-pre-title text-uppercase">EXPLORE THE</p>
<h1 class="display-1 fw-bold mb-4">New Arrivals</h1>
<p class="hero-desc">Experience our hand-picked floral collections designed to bring elegance and freshness to your special moments.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
<div class="mt-4">
<a href="/shop" class="btn btn-shop-now font-weight-bold">Shop now</a>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item h-100 slide-2">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<p class="hero-pre-title text-uppercase">SPECIAL MOMENTS</p>
<h1 class="display-1 fw-bold mb-4">Wedding Bloom</h1>
<p class="hero-desc">Discover the perfect wedding floral arrangements that capture the essence of your love story with timeless beauty.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
<div class="mt-4">
<a href="/shop" class="btn btn-shop-now font-weight-bold">Explore More</a>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item h-100 slide-3">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<p class="hero-pre-title text-uppercase">FRESH EVERY DAY</p>
<h1 class="display-1 fw-bold mb-4">Luxury Gifting</h1>
<p class="hero-desc">Elevate your gifting game with our premium floral boxes, delivered fresh to your doorstep every single day.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
<div class="mt-4">
<a href="/shop" class="btn btn-shop-now font-weight-bold">Gift Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel Indicators (Visual only for now) -->
<div class="position-absolute bottom-0 end-0 p-5 mb-5 me-5 z-index-4 d-none d-lg-block">
<div class="d-flex gap-2">
<div style="width: 10px; height: 10px; border-radius: 50%; background: #000;"></div>
<div style="width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000;"></div>
<div style="width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000;"></div>
<div style="width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000;"></div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide="prev" style="width: 5%;">
<span class="carousel-control-prev-icon" aria-hidden="true" style="filter: invert(1);"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide="next" style="width: 5%;">
<span class="carousel-control-next-icon" aria-hidden="true" style="filter: invert(1);"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
@ -65,43 +113,353 @@
</section>
<!-- Shop by collection -->
<section class="s_collections py-5 bg-light">
<div class="container py-4">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold" style="font-family: 'Playfair Display';">Shop by collection</h2>
<p class="text-muted">Choose the perfect bouquet for any occasion</p>
<section class="s_collections position-relative overflow-hidden">
<!-- Large outline flower backgrounds (top-left + bottom-right) -->
<div class="s_col_bg_flower s_col_bg_flower--tl" aria-hidden="true"></div>
<div class="s_col_bg_flower s_col_bg_flower--br" aria-hidden="true"></div>
<div class="container position-relative py-5" style="z-index:2;">
<!-- Section Header -->
<div class="text-center mb-4">
<h2 class="s_col_heading">Shop by collection</h2>
<p class="s_col_subheading">&#8212; All Category of Clicks2Cart &#8212;</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/flora_col.png" class="card-img-top" alt="Flora Collection"/>
<div class="card-body text-center py-4 bg-white">
<h4 class="card-title fw-bold" style="font-family: 'Playfair Display';">Flora Selection</h4>
<p class="text-muted small mb-3">Timeless classics for every day.</p>
<a href="/shop" class="btn btn-outline-dark btn-sm rounded-pill px-4">Explore</a>
<!-- Main Content Row -->
<div class="row align-items-center g-4">
<!-- Left: Floral Image + Sale Text Overlay -->
<div class="col-lg-5">
<div class="s_col_promo position-relative">
<!-- The actual floral image (pink roses + splash + envelope) -->
<img src="https://landing.engotheme.com/html/jenstore/demo/img/collection.png"
class="s_col_promo_img img-fluid w-100"
alt="Summer Sale Collection"/>
<!-- Text overlay box centered on image -->
<div class="s_col_overlay_text">
<span class="s_col_hello">HELLO SUMMER</span>
<h3 class="s_col_sale_text">Sale 10%</h3>
<a href="/shop" class="s_col_shop_btn">Shop now</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" class="card-img-top" alt="Wedding Collection"/>
<div class="card-body text-center py-4 bg-white">
<h4 class="card-title fw-bold" style="font-family: 'Playfair Display';">Wedding Dreams</h4>
<p class="text-muted small mb-3">Elegance for your perfect day.</p>
<a href="/shop" class="btn btn-outline-dark btn-sm rounded-pill px-4">Explore</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" class="card-img-top" alt="Holiday Collection"/>
<div class="card-body text-center py-4 bg-white">
<h4 class="card-title fw-bold" style="font-family: 'Playfair Display';">Holiday Joy</h4>
<p class="text-muted small mb-3">Festive spirits in every bloom.</p>
<a href="/shop" class="btn btn-outline-dark btn-sm rounded-pill px-4">Explore</a>
<!-- Right: 2×2 Product Grid -->
<div class="col-lg-7">
<t t-set="featured_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True), ('sale_ok', '=', True), ('website_id', 'in', [False, website.id])], limit=4, order='website_sequence asc')"/>
<div class="row g-3">
<t t-foreach="featured_products" t-as="product">
<div class="col-6">
<div class="s_col_product_card">
<t t-if="product_index == 0">
<span class="s_col_badge s_col_badge--hot">HOT</span>
</t>
<t t-elif="product_index == 3">
<span class="s_col_badge s_col_badge--sale">SALE</span>
</t>
<div class="s_col_product_img">
<a t-attf-href="/shop/product/#{product.website_slug}">
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
</a>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name" t-field="product.name"/>
<div class="s_col_stars">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
</div>
<p class="s_col_product_price">
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
</p>
</div>
</div>
</div>
</t>
<!-- Fallback if no products -->
<t t-if="not featured_products">
<div class="col-6">
<div class="s_col_product_card">
<span class="s_col_badge s_col_badge--hot">HOT</span>
<div class="s_col_product_img">
<img src="/theme_clicks2cart/static/src/img/flora_col.png" alt="Flora"/>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name">Flora Bouquet</h6>
<div class="s_col_stars">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
</div>
<p class="s_col_product_price">$120.00</p>
</div>
</div>
</div>
<div class="col-6">
<div class="s_col_product_card">
<div class="s_col_product_img">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Wedding"/>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name">Wedding Roses</h6>
<div class="s_col_stars">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
</div>
<p class="s_col_product_price">$115.40</p>
</div>
</div>
</div>
<div class="col-6">
<div class="s_col_product_card">
<div class="s_col_product_img">
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" alt="Holiday"/>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name">Holiday Bloom</h6>
<div class="s_col_stars">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-half-o"/><i class="fa fa-star-o"/>
</div>
<p class="s_col_product_price">$250.60</p>
</div>
</div>
</div>
<div class="col-6">
<div class="s_col_product_card">
<span class="s_col_badge s_col_badge--sale">SALE</span>
<div class="s_col_product_img">
<img src="/theme_clicks2cart/static/src/img/hero_bg.png" alt="Sale"/>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name">Rose Bouquet</h6>
<div class="s_col_stars">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/>
</div>
<p class="s_col_product_price">$100.90</p>
</div>
</div>
</div>
</t>
</div>
</div>
</div>
</div>
</section>
<!-- Wedding Category Feature Section -->
<section class="s_category_feature pb-0">
<!-- Brush Splash Background -->
<div class="s_cat_background" aria-hidden="true"></div>
<div class="container pb-5">
<!-- Section Header -->
<div class="s_cat_header">
<h2 class="s_cat_title">Wedding</h2>
<p class="s_cat_divider">&#126; All Category of Clickstocart &#126;</p>
</div>
<!-- Product Grid (4 items) -->
<div class="row s_cat_grid">
<t t-set="wedding_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True)], limit=4, order='website_sequence asc')"/>
<t t-foreach="wedding_products" t-as="product">
<div class="col-lg-3 col-md-6 mb-4">
<div class="s_cat_card text-center">
<t t-if="product_index == 0">
<span class="s_cat_badge badge-hot">HOT</span>
</t>
<t t-elif="product_index == 2">
<span class="s_cat_badge badge-sale">SALE</span>
</t>
<div class="s_cat_img_wrap position-relative overflow-hidden">
<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"/>
</a>
<!-- Hover Cart Icon -->
<div class="s_cat_hover_btn">
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="btn_add_cart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
</div>
<!-- Product info below image -->
<div class="s_cat_info mt-3">
<h6 class="s_cat_prod_name mb-1">
<a t-attf-href="/shop/product/#{product.website_slug or product.id}" t-field="product.name" class="text-dark text-decoration-none fw-bold"/>
</h6>
<div class="s_cat_prod_price fw-bold" style="color: #e6b3a3;">
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
</div>
</div>
</div>
</div>
</t>
<!-- Fallback placeholders -->
<t t-if="not wedding_products">
<t t-foreach="[1,2,3,4]" t-as="item">
<div class="col-lg-3 col-md-6 mb-4">
<div class="s_cat_card text-center">
<t t-if="item == 1"><span class="s_cat_badge badge-hot">HOT</span></t>
<t t-if="item == 3"><span class="s_cat_badge badge-sale">SALE</span></t>
<div class="s_cat_img_wrap position-relative overflow-hidden">
<img t-attf-src="/theme_clicks2cart/static/src/img/wedding_col#{'_v2' if item == 4 else ''}.png" alt="Fallback Product"/>
<div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<div class="s_cat_info mt-3">
<h6 class="s_cat_prod_name mb-1">Wedding Flowers</h6>
<div class="s_cat_prod_price fw-bold" style="color: #e6b3a3;">$120.00</div>
</div>
</div>
</div>
</t>
</t>
</div>
</div>
<!-- Floating floral accents at bottom right -->
<div class="s_cat_floating_flower" aria-hidden="true"></div>
</section>
<!-- Holiday Section -->
<section class="s_holiday_section">
<!-- Top accent floral -->
<div class="s_holiday_bg_accent" aria-hidden="true"></div>
<div class="container">
<!-- Section Header -->
<div class="s_holiday_header">
<h2 class="s_holiday_title">Holiday</h2>
<p class="s_holiday_divider">&#8212; Lorem Ipsum is simply dummy text of the printing &#8212;</p>
</div>
<div class="row align-items-center s_holiday_grid_container">
<!-- Left: Product Grid (7 cols) -->
<div class="col-lg-7">
<div class="row s_holiday_prod_grid">
<t t-set="holiday_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True)], limit=4, offset=4, order='website_sequence asc')"/>
<t t-foreach="holiday_products" t-as="product">
<div class="col-md-6">
<div class="s_cat_card">
<t t-if="product_index == 0">
<span class="s_cat_badge badge-hot">HOT</span>
</t>
<t t-elif="product_index == 3">
<span class="s_cat_badge badge-sale">SALE</span>
</t>
<div class="s_cat_img_wrap position-relative overflow-hidden">
<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"/>
</a>
<div class="s_cat_hover_btn">
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<div class="s_cat_info">
<h6 class="s_cat_prod_name mb-1">
<a t-attf-href="/shop/product/#{product.website_slug or product.id}" t-field="product.name" class="text-dark text-decoration-none fw-bold"/>
</h6>
<div class="s_cat_prod_price fw-bold">
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
</div>
</div>
</div>
</div>
</t>
<!-- Fallback with specific Holiday Images -->
<t t-if="not holiday_products">
<div class="col-md-6 mb-4">
<div class="s_cat_card">
<span class="s_cat_badge badge-hot">HOT</span>
<div class="s_cat_img_wrap position-relative overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/holiday_prod_1.png" alt="Fun &amp; Flirty"/>
<div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<div class="s_cat_info">
<h6 class="s_cat_prod_name">Fun &amp; Flirty By Bl..</h6>
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
</div>
<div class="s_cat_prod_price fw-bold">$200.2</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="s_cat_card">
<div class="s_cat_img_wrap position-relative overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/holiday_prod_2.png" alt="Winter White"/>
<div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<div class="s_cat_info">
<h6 class="s_cat_prod_name">Winter White Bo..</h6>
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
</div>
<div class="s_cat_prod_price fw-bold">$240.2</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="s_cat_card">
<div class="s_cat_img_wrap position-relative overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/holiday_prod_3.png" alt="Tulipa Floriade"/>
<div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<div class="s_cat_info">
<h6 class="s_cat_prod_name">Tulipa Floriade -..</h6>
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/>
</div>
<div class="s_cat_prod_price fw-bold">$105.7</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="s_cat_card">
<span class="s_cat_badge badge-sale">SALE</span>
<div class="s_cat_img_wrap position-relative overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/holiday_prod_4.png" alt="Sweet Sorbet"/>
<div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<div class="s_cat_info">
<h6 class="s_cat_prod_name">Sweet Sorbet..</h6>
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
</div>
<div class="s_cat_prod_price fw-bold">$215.2</div>
</div>
</div>
</div>
</t>
</div>
</div>
<!-- Right: Large Promo Area (5 cols) -->
<div class="col-lg-5">
<div class="s_holiday_promo_wrap">
<div class="s_holiday_promo_bg"></div>
<div class="s_holiday_promo_content">
<span class="s_holiday_hello">HELLO SUMMER</span>
<h3 class="s_holiday_promo_title">Sale 10%</h3>
<a href="/shop" class="s_holiday_shop_btn">Shop now</a>
</div>
</div>
</div>
</div>
</div>
</section>