Add initial Chennora theme module with custom website layout, footer, and category slider.

This commit is contained in:
Alaguraj0361 2026-02-04 10:16:26 +05:30
parent 47cc9f113d
commit 21da2e5160
4 changed files with 161 additions and 106 deletions

View File

@ -17,6 +17,7 @@
'dine360_theme_chennora/static/src/scss/primary_variables.scss',
'dine360_theme_chennora/static/src/scss/theme.scss',
'dine360_theme_chennora/static/src/js/deal_switcher.js',
'dine360_theme_chennora/static/src/js/category_slider.js',
],
},
'images': [

View File

@ -0,0 +1,89 @@
/** @odoo-module **/
import publicWidget from "@web/legacy/js/public/public_widget";
publicWidget.registry.CategoryCarousel = publicWidget.Widget.extend({
selector: '.s_category_slider',
start: function () {
this.$track = this.$('.category-track');
this.$items = this.$('.category-item');
if (!this.$track.length || !this.$items.length) {
return;
}
this.currentIndex = 0;
this.totalOriginal = this.$items.length;
// Clone all items and append for seamless loop
// We ensure we have enough content to scroll endlessly
const itemsToClone = this.$items.clone();
this.$track.append(itemsToClone);
// Update items list
this.$newItems = this.$('.category-item');
// 3 seconds interval
this._startAutoSlide();
// Pause on hover
this.$el.on('mouseenter', () => this._stopAutoSlide());
this.$el.on('mouseleave', () => this._startAutoSlide());
// Handle window resize to reset alignment
$(window).on('resize', () => {
this._slide(true);
});
return this._super.apply(this, arguments);
},
_startAutoSlide: function () {
if (this.interval) clearInterval(this.interval);
this.interval = setInterval(this._slide.bind(this), 3000); // 3 seconds
},
_stopAutoSlide: function () {
if (this.interval) clearInterval(this.interval);
},
_slide: function (resize = false) {
if (resize) {
// Just reset position on resize to avoid misalignment
const itemWidth = this.$newItems.first().outerWidth(true);
this.$track.css({
'transition': 'none',
'transform': `translateX(-${this.currentIndex * itemWidth}px)`
});
return;
}
// Get current item width (responsive)
const itemWidth = this.$newItems.first().outerWidth(true);
this.currentIndex++;
this.$track.css({
'transition': 'transform 0.5s ease-in-out',
'transform': `translateX(-${this.currentIndex * itemWidth}px)`
});
// Loop check
// If we have moved past the original set
if (this.currentIndex >= this.totalOriginal) {
setTimeout(() => {
// Snap back to 0 (visually identical position)
// We use 0 because 0 is the start of Original Set
// When currentIndex == totalOriginal, we are at the start of Cloned Set
// Cloned Set is identical to Original Set.
this.$track.css({
'transition': 'none',
'transform': 'translateX(0)'
});
this.currentIndex = 0;
}, 500); // Wait for transition to finish
}
}
});
export default publicWidget.registry.CategoryCarousel;

View File

@ -88,19 +88,19 @@
<xpath expr="//header" position="before">
<!-- Back to Dashboard Top Bar -->
<div class="o_header_top_bar bg-dark text-white py-2" style="z-index: 1050; position: relative;">
<!-- <div class="o_header_top_bar bg-dark text-white py-2" style="z-index: 1050; position: relative;">
<div class="container d-flex justify-content-between align-items-center">
<a href="/" class="text-white text-decoration-none fw-bold text-uppercase d-flex align-items-center" style="font-size: 12px; letter-spacing: 1px; transition: opacity 0.3s;">
<i class="fa fa-th-large me-2" style="color: #FECD4F;"></i>
<span>Back to Dashboard</span>
</a>
</a> -->
<!-- Optional: Right side link (e.g. account) could go here -->
<div class="text-white-50 small">
<!-- <div class="text-white-50 small">
<i class="fa fa-user-circle me-1"></i> <t t-esc="user_id.name"/>
</div>
</div>
</div>
</div> -->
<t t-set="cta_btn_text" t-value="False"/>
<t t-set="cta_btn_href">/contactus</t>

View File

@ -272,111 +272,76 @@
</section>
<!-- Category Slider Section -->
<section class="s_category_slider o_colored_level pb64" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: rgb(244, 241, 234);">
<section class="s_category_slider o_colored_level" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: rgb(244, 241, 234);">
<div class="container-fluid overflow-hidden">
<div id="categoryCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<div class="row g-4 justify-content-center">
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="House Biryani"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">House Biryani</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-beverages.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Cold Beverages"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Cold Beverages</h6>
<small class="text-muted">3+ Varieties</small>
</a>
</div>
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-curries.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Curries"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Curries</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-desserts.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Desserts"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Desserts</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-dosa.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Dosa Varieties"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Dosa Varieties</h6>
<small class="text-muted">10+ Varieties</small>
</a>
</div>
<div class="category-track d-flex flex-nowrap">
<!-- Item 1: House Biryani -->
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
<a href="/shop" class="d-block text-decoration-none p-2">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="House Biryani"/>
</div>
</div>
<!-- Slide 2 (Looping the same for infinite feel if no others provided) -->
<div class="carousel-item">
<div class="row g-4 justify-content-center">
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-curries.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Curries"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Curries</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-dosa.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Dosa Varieties"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Dosa Varieties</h6>
<small class="text-muted">10+ Varieties</small>
</a>
</div>
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="House Biryani"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">House Biryani</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-beverages.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Cold Beverages"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Cold Beverages</h6>
<small class="text-muted">3+ Varieties</small>
</a>
</div>
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
<a href="/shop" class="d-block text-decoration-none">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-desserts.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Desserts"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Desserts</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
</div>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">House Biryani</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
<!-- Item 2: Cold Beverages -->
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
<a href="/shop" class="d-block text-decoration-none p-2">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-beverages.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Cold Beverages"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Cold Beverages</h6>
<small class="text-muted">3+ Varieties</small>
</a>
</div>
<!-- Item 3: Curries -->
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
<a href="/shop" class="d-block text-decoration-none p-2">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-curries.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Curries"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Curries</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
<!-- Item 4: Desserts -->
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
<a href="/shop" class="d-block text-decoration-none p-2">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-desserts.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Desserts"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Desserts</h6>
<small class="text-muted">5+ Varieties</small>
</a>
</div>
<!-- Item 5: Dosa Varieties -->
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
<a href="/shop" class="d-block text-decoration-none p-2">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-dosa.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Dosa Varieties"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Dosa Varieties</h6>
<small class="text-muted">10+ Varieties</small>
</a>
</div>
<!-- Item 6: Repeat Curries for filler -->
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
<a href="/shop" class="d-block text-decoration-none p-2">
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
<img src="/dine360_theme_chennora/static/src/img/cat-curries.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Curries"/>
</div>
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Curries &amp; More</h6>
<small class="text-muted">Check Menu</small>
</a>
</div>
</div>
</div>
</section>