MetatroncubeSoftwareSolutions/odoo-shivasakthi
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement dynamic shop page sidebar with category filters and mobile offcanvas drawer

Browse Source
This commit is contained in:
Alaguraj0361 2026-09-07 16:41:59 +05:30
parent 2f13dd0aa5
commit a1b2b06a18
3 changed files with 499 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
addons/dine360_dashboard/static/src/css/shop_style.css
View File

@ -38,22 +38,24 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
/* Left Sidebar Column (Categories/Filters) */ /* Left Sidebar Column (Categories/Filters) - Desktop Only */
.oe_website_sale #products_grid_before, @media (min-width: 992px) {
.oe_website_sale .col-lg-3, .oe_website_sale #products_grid_before,
.oe_website_sale aside { .oe_website_sale .col-lg-3,
flex: 0 0 280px !important; .oe_website_sale aside {
max-width: 280px !important; flex: 0 0 280px !important;
display: block !important; max-width: 280px !important;
visibility: visible !important; display: block !important;
padding-right: 20px; visibility: visible !important;
} padding-right: 20px;
}
/* Right Products Column */ /* Right Products Column */
.oe_website_sale #products_grid, .oe_website_sale #products_grid,
.oe_website_sale .col-lg-9 { .oe_website_sale .col-lg-9 {
flex: 1 !important; flex: 1 !important;
max-width: calc(100% - 280px) !important; max-width: calc(100% - 280px) !important;
}
} }
/* Filter Sidebar Styling */ /* Filter Sidebar Styling */
@ -216,32 +218,38 @@
} }
/* Mobile Responsive */ /* Mobile Responsive */
@media (max-width: 991px) { @media (max-width: 991.98px) {
.oe_website_sale #products_grid_before, .oe_website_sale #products_grid_before,
.oe_website_sale .col-lg-3, .oe_website_sale aside:not(.mobile-category-offcanvas),
.oe_website_sale aside { aside#products_grid_before {
flex: 0 0 100% !important; display: none !important;
max-width: 100% !important; visibility: hidden !important;
margin-bottom: 20px; height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
} }
.oe_website_sale #products_grid, .oe_website_sale #products_grid,
.oe_website_sale .col-lg-9 { .oe_website_sale .col-lg-9 {
flex: 0 0 100% !important; flex: 0 0 100% !important;
max-width: 100% !important; max-width: 100% !important;
width: 100% !important;
} }
} }
/* Ensure visibility of all filter elements */ /* Ensure visibility of desktop filter elements */
.oe_website_sale .o_wsale_products_searchbar_form, @media (min-width: 992px) {
.oe_website_sale .o_wsale_products_categories, .oe_website_sale .o_wsale_products_searchbar_form,
.oe_website_sale #wsale_products_categories_collapse, .oe_website_sale .o_wsale_products_categories,
.oe_website_sale .o_wsale_products_attributes, .oe_website_sale #wsale_products_categories_collapse,
.oe_website_sale .o_wsale_products_price { .oe_website_sale .o_wsale_products_attributes,
display: block !important; .oe_website_sale .o_wsale_products_price {
visibility: visible !important; display: block !important;
opacity: 1 !important; visibility: visible !important;
opacity: 1 !important;
}
} }
/* Category Navigation */ /* Category Navigation */

480
addons/dine360_theme_shivasakthi/static/src/scss/shop.scss
View File

@ -454,18 +454,23 @@ body,
} }
} }
/* Tablet Layout Tweaks (991px to 768px) */ /* Tablet & Mobile Layout Tweaks (Hide Desktop Sidebar, full width product grid) */
@media (max-width: 991px) { @media (max-width: 991.98px) {
.o_wsale_products_main_row { .o_wsale_products_main_row {
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;
} }
#products_grid_before { #products_grid_before,
width: 100% !important; aside#products_grid_before,
max-width: 100% !important; .oe_website_sale aside:not(.mobile-category-offcanvas) {
flex: 0 0 100% !important; display: none !important;
margin-bottom: 20px; visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
} }
#products_grid { #products_grid {
@ -535,12 +540,35 @@ body,
.o_sortby_dropdown { .o_sortby_dropdown {
margin-left: auto !important; margin-left: auto !important;
} }
.btn-group.o_wsale_apply_grid,
.o_wsale_apply_grid {
display: none !important;
}
} }
.btn-group.o_wsale_apply_grid,
.o_wsale_apply_grid,
.o_wsale_apply_list,
.o_wsale_apply_layout,
.btn-group:has(.fa-th-large),
.btn-group:has(.fa-th-list),
.btn-group:has(.fa-th),
.btn-group:has(.fa-list),
.btn-group:has(.fa-bars),
.o_wsale_products_pager .btn-group:not(.dropdown):not(.o_sortby_dropdown),
.o_wsale_products_pager a[href*="layout=grid"],
.o_wsale_products_pager a[href*="layout=list"] {
display: none !important;
}
}
/* Global Grid/List Button Hide on Mobile */
.btn-group.o_wsale_apply_grid,
.o_wsale_apply_grid,
.o_wsale_apply_list,
.o_wsale_apply_layout,
.btn-group:has(.fa-th-large),
.btn-group:has(.fa-th-list),
.btn-group:has(.fa-th),
.btn-group:has(.fa-list),
.btn-group:has(.fa-bars) {
display: none !important;
} }
/* Mobile Categories Bar Button (Bottom-left of Search) */ /* Mobile Categories Bar Button (Bottom-left of Search) */
@ -594,173 +622,17 @@ body,
display: none !important; display: none !important;
} }
/* Category Header/Toggle */ /* Hide Desktop Sidebar on Mobile (since Mobile Offcanvas Drawer is used) */
#products_grid_before { #products_grid_before,
order: 3 !important; aside#products_grid_before,
width: 100% !important; .oe_website_sale aside:not(.mobile-category-offcanvas) {
max-width: 100% !important; display: none !important;
flex: 0 0 100% !important; visibility: hidden !important;
margin-bottom: 0 !important; height: 0 !important;
padding: 0 !important; max-height: 0 !important;
z-index: 1 !important;
position: static !important;
}
/* Backdrop for Mobile Categories Drawer */
.mobile-category-backdrop {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
background: rgba(14, 19, 23, 0.7) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
z-index: 9999998 !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
&.show {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
/* Fixed Full-Height Mobile Drawer */
.mobile-category-offcanvas {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 300px !important;
max-width: 85vw !important;
height: 100vh !important;
height: 100dvh !important;
background: #ffffff !important;
z-index: 9999999 !important;
display: flex !important;
flex-direction: column !important;
box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important;
transform: translateX(-100%) !important;
transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s ease !important;
visibility: hidden;
overflow: hidden !important; overflow: hidden !important;
margin: 0 !important;
&.show { padding: 0 !important;
transform: translateX(0) !important;
visibility: visible !important;
}
.offcanvas-header {
background: #ffffff;
border-bottom: 1px solid #f0f0f0;
padding: 16px 20px;
flex-shrink: 0;
.drawer-header-icon {
width: 32px;
height: 32px;
background: #ffb800;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
}
.offcanvas-title {
font-weight: 800 !important;
font-size: 1.05rem !important;
color: #0e1317 !important;
letter-spacing: 0.5px;
}
.btn-close-drawer {
width: 34px;
height: 34px;
background: #f4f4f4;
border: 1px solid #e5e5e5;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #ffb800;
border-color: #ffb800;
}
}
}
.offcanvas-body {
padding: 20px 16px;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
flex: 1 1 auto;
height: calc(100vh - 65px) !important;
max-height: calc(100dvh - 65px) !important;
.category-list {
list-style: none;
padding: 0;
margin: 0;
.category-item {
margin-bottom: 10px;
a {
display: flex;
align-items: center;
padding: 12px 16px;
border-radius: 10px;
text-decoration: none;
background: #fbfbfb;
border: 1px solid #eeeeee;
color: #222222;
font-weight: 700;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all 0.2s ease;
img {
width: 26px;
height: 26px;
object-fit: contain;
margin-right: 14px;
}
span {
color: #222222;
font-weight: 700;
}
&:hover {
background: #fff8e7;
border-color: #ffb800;
color: #000000;
transform: translateX(4px);
}
&.active {
background: #ffb800 !important;
border-color: #ffb800 !important;
color: #000000 !important;
font-weight: 900 !important;
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35) !important;
span {
color: #000000 !important;
font-weight: 900 !important;
}
}
}
}
}
}
} }
/* Product Grid (2 products per row) */ /* Product Grid (2 products per row) */
@ -1054,20 +926,9 @@ body,
box-shadow: 0 6px 20px rgba(254, 205, 79, 0.4) !important; box-shadow: 0 6px 20px rgba(254, 205, 79, 0.4) !important;
} }
/* Global Highest Z-Index for Mobile Categories Drawer */ /* ==========================================================================
.mobile-category-offcanvas { Global Full-Height Mobile Categories Drawer (Root Level for Reparenting)
position: fixed !important; ========================================================================== */
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 300px !important;
max-width: 85vw !important;
height: 100vh !important;
height: 100dvh !important;
background: #ffffff !important;
z-index: 9999999 !important;
}
.mobile-category-backdrop { .mobile-category-backdrop {
position: fixed !important; position: fixed !important;
top: 0 !important; top: 0 !important;
@ -1075,5 +936,240 @@ body,
width: 100vw !important; width: 100vw !important;
height: 100vh !important; height: 100vh !important;
height: 100dvh !important; height: 100dvh !important;
background: rgba(14, 19, 23, 0.7) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
z-index: 9999998 !important; z-index: 9999998 !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
&.show {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
.mobile-category-offcanvas {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 320px !important;
max-width: 85vw !important;
height: 100vh !important;
height: 100dvh !important;
background: #ffffff !important;
z-index: 9999999 !important;
display: flex !important;
flex-direction: column !important;
box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important;
transform: translateX(-100%) !important;
transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s ease !important;
visibility: hidden;
overflow: hidden !important;
&.show {
transform: translateX(0) !important;
visibility: visible !important;
}
.offcanvas-header {
background: #ffffff;
border-bottom: 1px solid #f0f0f0;
padding: 16px 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
.drawer-header-icon {
width: 32px;
height: 32px;
background: #ffb800;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
}
.offcanvas-title {
font-weight: 800 !important;
font-size: 1.05rem !important;
color: #0e1317 !important;
letter-spacing: 0.5px;
margin: 0 !important;
}
.btn-close-drawer {
width: 36px;
height: 36px;
background: #f4f4f4;
border: 1px solid #e0e0e0;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
pointer-events: auto !important;
i {
font-size: 16px;
color: #333;
pointer-events: none;
}
&:hover, &:active {
background: #ffb800;
border-color: #ffb800;
color: #000;
}
}
}
.offcanvas-body {
padding: 20px 16px;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
flex: 1 1 auto;
height: calc(100vh - 65px) !important;
max-height: calc(100dvh - 65px) !important;
.food-sidebar-section {
margin-bottom: 25px;
.section-title {
display: flex;
align-items: center;
font-size: 1.05rem;
font-weight: 800;
color: #0e1317;
text-transform: uppercase;
margin-bottom: 16px;
letter-spacing: 0.8px;
&::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background: #ffb800;
border-radius: 2px;
margin-right: 10px;
}
}
.attribute-list {
padding: 0;
margin: 0;
list-style: none;
li {
margin-bottom: 8px;
.form-check {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 6px;
transition: background 0.2s ease;
&:hover {
background: #f8f9fa;
}
.form-check-input {
width: 18px;
height: 18px;
min-width: 18px;
margin-top: 0;
cursor: pointer;
border: 2px solid #bbb;
border-radius: 4px;
&:checked {
background-color: #ffb800;
border-color: #ffb800;
}
}
.attrib-name {
font-size: 0.95rem;
color: #333333;
font-weight: 700;
}
}
}
}
}
.category-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
.category-item {
margin-bottom: 8px;
list-style: none !important;
a {
display: flex !important;
align-items: center !important;
padding: 10px 14px !important;
border-radius: 8px !important;
text-decoration: none !important;
background: #fbfbfb !important;
border: 1px solid #eeeeee !important;
color: #222222 !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
text-transform: uppercase !important;
letter-spacing: 0.3px;
transition: all 0.2s ease;
img {
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
object-fit: cover !important;
border-radius: 6px !important;
margin-right: 12px !important;
flex-shrink: 0 !important;
}
span, .category-name {
color: #222222 !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
}
&:hover {
background: #fff8e7 !important;
border-color: #ffb800 !important;
color: #000000 !important;
transform: translateX(3px);
}
&.active {
background: #ffb800 !important;
border-color: #ffb800 !important;
color: #000000 !important;
font-weight: 900 !important;
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35) !important;
span, .category-name {
color: #000000 !important;
font-weight: 900 !important;
}
}
}
}
}
}
} }

338
addons/dine360_theme_shivasakthi/views/shop_page.xml
View File

@ -3,210 +3,216 @@
<data> <data>
<!-- Shop Page Layout Realignment - Dynamic Food Theme --> <!-- Shop Page Layout Realignment - Dynamic Food Theme -->
<template id="Shivasakthi_shop_layout" inherit_id="website_sale.products" name="Shivasakthi Shop Layout" priority="50"> <template id="Shivasakthi_shop_layout" inherit_id="website_sale.products" name="Shivasakthi Shop Layout" priority="50">
<!-- Sidebar Reconstruction with Dynamic Data --> <!-- Desktop Sidebar Reconstruction with Dynamic Data -->
<xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace"> <xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace">
<aside id="products_grid_before" class="col-lg-3"> <aside id="products_grid_before" class="col-lg-3 d-none d-md-block">
<!-- Mobile Full-Height Sidebar Drawer & Backdrop --> <form class="js_attributes" method="get">
<div class="mobile-category-backdrop d-md-none" id="mobileCategoryBackdrop" style="position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; background: rgba(14, 19, 23, 0.7) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; z-index: 999998 !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none;"></div> <input type="hidden" name="search" t-att-value="search"/>
<div class="mobile-category-offcanvas d-md-none" id="mobileCategoryOffcanvas" aria-label="Categories Drawer" style="position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 300px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; background: #ffffff !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important; transform: translateX(-100%) !important; transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s ease !important; visibility: hidden; overflow: hidden !important;"> <input type="hidden" name="sort" t-att-value="sort"/>
<div class="offcanvas-header d-flex align-items-center justify-content-between border-bottom py-3 px-3">
<div class="d-flex align-items-center gap-2"> <!-- Categories (Dynamic from Configuration) -->
<div class="drawer-header-icon"> <div class="food-sidebar-section">
<i class="fa fa-cutlery text-dark"></i> <div class="section-title">Categories</div>
</div> <ul class="category-list">
<h5 class="offcanvas-title fw-bold text-dark m-0" style="font-size: 1.05rem; letter-spacing: 0.5px;">MENU CATEGORIES</h5> <li class="category-item">
</div> <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
<button type="button" class="btn-close-drawer btn btn-sm btn-light border rounded-circle d-flex align-items-center justify-content-center" id="btnCloseMobileCategoryDrawer" aria-label="Close"> <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> <span>All Products</span>
<i class="fa fa-times text-dark"></i> </a>
</button> </li>
</div> <!-- Fetching all categories configured in Odoo -->
<div class="offcanvas-body p-3"> <t t-set="all_cats_desktop" t-value="request.env['product.public.category'].search([])"/>
<form class="js_attributes" method="get"> <t t-foreach="all_cats_desktop" t-as="c">
<input type="hidden" name="search" t-att-value="search"/> <li class="category-item">
<input type="hidden" name="sort" t-att-value="sort"/> <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link #{'active' if category and c.id == category.id else ''}">
<t t-if="c.image_128">
<div class="food-sidebar-section mb-4"> <img t-att-src="website.image_url(c, 'image_128')"/>
<ul class="category-list">
<li class="category-item">
<a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
<span>All Products</span>
</a>
</li>
<t t-set="all_root_categories" t-value="categories or request.env['product.public.category'].search([('parent_id', '=', False)])"/>
<t t-if="not all_root_categories">
<t t-set="all_root_categories" t-value="request.env['product.public.category'].search([])"/>
</t>
<t t-foreach="all_root_categories" t-as="c">
<li class="category-item">
<a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link #{'active' if category and c.id == category.id else ''}">
<t t-if="c.image_128">
<img t-att-src="website.image_url(c, 'image_128')"/>
</t>
<t t-else="">
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
</t>
<span t-field="c.name"/>
</a>
</li>
</t>
</ul>
</div>
<!-- Attributes (Dynamic - Sizes, etc.) -->
<t t-foreach="attributes" t-as="a">
<div class="food-sidebar-section border-top pt-3">
<div class="section-title" t-field="a.name"/>
<ul class="list-unstyled">
<t t-foreach="a.value_ids" t-as="v">
<li class="mb-2 d-flex align-items-center gap-2">
<div class="form-check">
<input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0" onchange="this.form.submit()"/>
<span class="small fw-bold text-muted" t-field="v.name"/>
</div>
</li>
</t> </t>
</ul> <t t-else="">
</div> <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
</t>
<span t-field="c.name"/>
</a>
</li>
</t> </t>
</form> </ul>
</div>
<!-- Attributes (Dynamic - Sizes, etc.) -->
<t t-foreach="attributes" t-as="a">
<div class="food-sidebar-section">
<div class="section-title" t-field="a.name"/>
<ul class="list-unstyled">
<t t-foreach="a.value_ids" t-as="v">
<li class="mb-2 d-flex align-items-center gap-2">
<div class="form-check">
<input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0" onchange="this.form.submit()"/>
<span class="small fw-bold text-muted" t-field="v.name"/>
</div>
</li>
</t>
</ul>
</div>
</t>
</form>
<!-- New Arrivals (Using subset of current products to avoid crash) -->
<div class="food-sidebar-section">
<div class="section-title">New Arrival</div>
<div class="arrival-list">
<t t-set="new_arrivals" t-value="products[:3] if products else []"/>
<t t-foreach="new_arrivals" t-as="arrival">
<div class="arrival-item cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(arrival)">
<div class="arrival-img">
<img t-if="arrival.image_128" t-att-src="website.image_url(arrival, 'image_128')" class="img-fluid"/>
<img t-else="" src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="img-fluid"/>
</div>
<div class="arrival-info">
<div class="name fw-bold" t-field="arrival.name"/>
<div class="price">
<del t-if="arrival.compare_list_price" t-field="arrival.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
<span t-field="arrival.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
</div>
</div>
</div>
</t>
</div> </div>
</div> </div>
</aside>
</xpath>
<!-- Category Drawer Interaction Script --> <!-- Mobile Categories Drawer, Backdrop & Global Scripts -->
<script type="text/javascript"> <xpath expr="//div[@id='products_grid']" position="before">
(function() { <!-- Mobile Full-Height Sidebar Drawer Backdrop -->
function initCategoryDrawer() { <div class="mobile-category-backdrop d-md-none" id="mobileCategoryBackdrop" onclick="window.shivasakthiCloseCategoryDrawer &amp;&amp; window.shivasakthiCloseCategoryDrawer(event)"></div>
var openBtn = document.getElementById('btnOpenMobileCategoryDrawer');
var closeBtn = document.getElementById('btnCloseMobileCategoryDrawer');
var drawer = document.getElementById('mobileCategoryOffcanvas');
var backdrop = document.getElementById('mobileCategoryBackdrop');
if (!drawer || !backdrop) return;
// Move drawer and backdrop to document.body to break free from any parent stacking contexts <!-- Mobile Full-Height Sidebar Offcanvas Drawer -->
if (drawer.parentElement !== document.body) { <div class="mobile-category-offcanvas d-md-none" id="mobileCategoryOffcanvas" aria-label="Categories Drawer">
document.body.appendChild(drawer); <div class="offcanvas-header d-flex align-items-center justify-content-between border-bottom py-3 px-3">
} <div class="d-flex align-items-center gap-2">
if (backdrop.parentElement !== document.body) { <div class="drawer-header-icon">
document.body.appendChild(backdrop); <i class="fa fa-cutlery text-dark"></i>
} </div>
<h5 class="offcanvas-title fw-bold text-dark m-0" style="font-size: 1.05rem; letter-spacing: 0.5px;">MENU CATEGORIES</h5>
function openDrawer(e) { </div>
if (e) { e.preventDefault(); e.stopPropagation(); } <button type="button" class="btn-close-drawer btn btn-sm btn-light border rounded-circle d-flex align-items-center justify-content-center" id="btnCloseMobileCategoryDrawer" aria-label="Close" onclick="window.shivasakthiCloseCategoryDrawer &amp;&amp; window.shivasakthiCloseCategoryDrawer(event)">
drawer.classList.add('show'); <i class="fa fa-times text-dark"></i>
backdrop.classList.add('show'); </button>
document.body.style.overflow = 'hidden'; </div>
document.documentElement.style.overflow = 'hidden'; <div class="offcanvas-body p-3">
}
function closeDrawer(e) {
if (e) { e.preventDefault(); e.stopPropagation(); }
drawer.classList.remove('show');
backdrop.classList.remove('show');
document.body.style.overflow = '';
document.documentElement.style.overflow = '';
}
if (openBtn) {
openBtn.onclick = openDrawer;
}
if (closeBtn) {
closeBtn.onclick = closeDrawer;
}
if (backdrop) {
backdrop.onclick = closeDrawer;
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCategoryDrawer);
} else {
initCategoryDrawer();
}
window.addEventListener('load', initCategoryDrawer);
})();
</script>
<!-- Desktop Sidebar Content -->
<div class="d-none d-md-block">
<form class="js_attributes" method="get"> <form class="js_attributes" method="get">
<input type="hidden" name="search" t-att-value="search"/> <input type="hidden" name="search" t-att-value="search"/>
<input type="hidden" name="sort" t-att-value="sort"/> <input type="hidden" name="sort" t-att-value="sort"/>
<!-- Categories (Dynamic from Configuration) --> <!-- Categories Section -->
<div class="food-sidebar-section"> <div class="food-sidebar-section mb-4">
<div class="section-title">Categories</div> <div class="section-title">Categories</div>
<ul class="category-list"> <ul class="category-list list-unstyled p-0 m-0">
<li class="category-item"> <li class="category-item mb-2">
<a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}"> <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link d-flex align-items-center #{'' if category else 'active'}">
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> <span>All Products</span> <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" style="width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: cover !important; border-radius: 6px !important; margin-right: 12px !important; flex-shrink: 0 !important;"/>
<span class="category-name">All Products</span>
</a> </a>
</li> </li>
<!-- Fetching all root categories configured in Odoo --> <t t-set="all_cats" t-value="request.env['product.public.category'].search([])"/>
<t t-set="all_root_categories" t-value="request.env['product.public.category'].search([('parent_id', '=', False)])"/> <t t-foreach="all_cats" t-as="c">
<t t-foreach="all_root_categories" t-as="c"> <li class="category-item mb-2">
<li class="category-item"> <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link d-flex align-items-center #{'active' if category and c.id == category.id else ''}">
<a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link #{'active' if category and c.id == category.id else ''}">
<t t-if="c.image_128"> <t t-if="c.image_128">
<img t-att-src="website.image_url(c, 'image_128')"/> <img t-att-src="website.image_url(c, 'image_128')" style="width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: cover !important; border-radius: 6px !important; margin-right: 12px !important; flex-shrink: 0 !important;"/>
</t> </t>
<t t-else=""> <t t-else="">
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" style="width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: cover !important; border-radius: 6px !important; margin-right: 12px !important; flex-shrink: 0 !important;"/>
</t> </t>
<span t-field="c.name"/> <span class="category-name" t-field="c.name"/>
</a> </a>
</li> </li>
</t> </t>
</ul> </ul>
</div> </div>
<!-- Attributes (Dynamic - Sizes, etc.) --> <!-- Attributes (Size, Fabric, etc.) -->
<t t-foreach="attributes" t-as="a"> <t t-foreach="attributes" t-as="a">
<div class="food-sidebar-section"> <div class="food-sidebar-section border-top pt-3 mb-4">
<div class="section-title" t-field="a.name"/> <div class="section-title" t-field="a.name"/>
<ul class="list-unstyled"> <ul class="list-unstyled attribute-list">
<t t-foreach="a.value_ids" t-as="v"> <t t-foreach="a.value_ids" t-as="v">
<li class="mb-2 d-flex align-items-center gap-2"> <li class="mb-2 d-flex align-items-center">
<div class="form-check"> <label class="form-check d-flex align-items-center gap-2 m-0 cursor-pointer w-100">
<input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0" onchange="this.form.submit()"/> <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0 cursor-pointer" onchange="this.form.submit()"/>
<span class="small fw-bold text-muted" t-field="v.name"/> <span class="attrib-name fw-bold" t-field="v.name"/>
</div> </label>
</li> </li>
</t> </t>
</ul> </ul>
</div> </div>
</t> </t>
</form> </form>
<!-- New Arrivals (Using subset of current products to avoid crash) -->
<div class="food-sidebar-section">
<div class="section-title">New Arrival</div>
<div class="arrival-list">
<t t-set="new_arrivals" t-value="products[:3] if products else []"/>
<t t-foreach="new_arrivals" t-as="arrival">
<div class="arrival-item cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(arrival)">
<div class="arrival-img">
<img t-if="arrival.image_128" t-att-src="website.image_url(arrival, 'image_128')" class="img-fluid"/>
<img t-else="" src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="img-fluid"/>
</div>
<div class="arrival-info">
<div class="name fw-bold" t-field="arrival.name"/>
<div class="price">
<del t-if="arrival.compare_list_price" t-field="arrival.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
<span t-field="arrival.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
</div>
</div>
</div>
</t>
</div>
</div>
</div> </div>
</aside> </div>
<!-- Category Drawer Interaction Script -->
<script type="text/javascript">
(function() {
window.shivasakthiOpenCategoryDrawer = function(e) {
if (e) {
if (typeof e.preventDefault === 'function') e.preventDefault();
if (typeof e.stopPropagation === 'function') e.stopPropagation();
}
var drawer = document.getElementById('mobileCategoryOffcanvas');
var backdrop = document.getElementById('mobileCategoryBackdrop');
if (!drawer || !backdrop) return;
if (drawer.parentElement !== document.body) {
document.body.appendChild(drawer);
}
if (backdrop.parentElement !== document.body) {
document.body.appendChild(backdrop);
}
drawer.classList.add('show');
backdrop.classList.add('show');
document.body.classList.add('mobile-drawer-open');
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
};
window.shivasakthiCloseCategoryDrawer = function(e) {
if (e) {
if (typeof e.preventDefault === 'function') e.preventDefault();
if (typeof e.stopPropagation === 'function') e.stopPropagation();
}
var drawer = document.getElementById('mobileCategoryOffcanvas');
var backdrop = document.getElementById('mobileCategoryBackdrop');
if (drawer) drawer.classList.remove('show');
if (backdrop) backdrop.classList.remove('show');
document.body.classList.remove('mobile-drawer-open');
document.body.style.overflow = '';
document.documentElement.style.overflow = '';
};
document.addEventListener('click', function(e) {
var openTarget = e.target.closest('#btnOpenMobileCategoryDrawer, .mobile-cat-bar-btn');
var closeTarget = e.target.closest('#btnCloseMobileCategoryDrawer, .btn-close-drawer, #mobileCategoryBackdrop');
if (openTarget) {
window.shivasakthiOpenCategoryDrawer(e);
} else if (closeTarget) {
window.shivasakthiCloseCategoryDrawer(e);
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
window.shivasakthiCloseCategoryDrawer(e);
}
});
})();
</script>
</xpath> </xpath>
<!-- Mobile Category Toggle Button placed at top of products grid --> <!-- Mobile Category Toggle Button placed at top of products grid -->
<xpath expr="//div[@id='products_grid']/*[1]" position="before"> <xpath expr="//div[@id='products_grid']/*[1]" position="before">
<div class="d-flex d-md-none justify-content-between align-items-center mb-3 w-100"> <div class="d-flex d-md-none justify-content-start align-items-center mb-3 w-100 mobile-cat-btn-wrapper">
<button class="btn mobile-cat-bar-btn" id="btnOpenMobileCategoryDrawer" type="button" aria-label="Open Categories"> <button class="btn mobile-cat-bar-btn" id="btnOpenMobileCategoryDrawer" type="button" aria-label="Open Categories" onclick="window.shivasakthiOpenCategoryDrawer &amp;&amp; window.shivasakthiOpenCategoryDrawer(event)">
<i class="fa fa-th-large"></i> <i class="fa fa-th-large"></i>
<span>Categories</span> <span>Categories</span>
<t t-if="category"> <t t-if="category">