implement dynamic shop page sidebar with category filters and mobile offcanvas drawer
This commit is contained in:
Alaguraj0361
parent
2f13dd0aa5
commit
a1b2b06a18
@ -38,22 +38,24 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Left Sidebar Column (Categories/Filters) */
|
||||
.oe_website_sale #products_grid_before,
|
||||
.oe_website_sale .col-lg-3,
|
||||
.oe_website_sale aside {
|
||||
flex: 0 0 280px !important;
|
||||
max-width: 280px !important;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
padding-right: 20px;
|
||||
}
|
||||
/* Left Sidebar Column (Categories/Filters) - Desktop Only */
|
||||
@media (min-width: 992px) {
|
||||
.oe_website_sale #products_grid_before,
|
||||
.oe_website_sale .col-lg-3,
|
||||
.oe_website_sale aside {
|
||||
flex: 0 0 280px !important;
|
||||
max-width: 280px !important;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Right Products Column */
|
||||
.oe_website_sale #products_grid,
|
||||
.oe_website_sale .col-lg-9 {
|
||||
flex: 1 !important;
|
||||
max-width: calc(100% - 280px) !important;
|
||||
/* Right Products Column */
|
||||
.oe_website_sale #products_grid,
|
||||
.oe_website_sale .col-lg-9 {
|
||||
flex: 1 !important;
|
||||
max-width: calc(100% - 280px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Filter Sidebar Styling */
|
||||
@ -216,32 +218,38 @@
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.oe_website_sale #products_grid_before,
|
||||
.oe_website_sale .col-lg-3,
|
||||
.oe_website_sale aside {
|
||||
flex: 0 0 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin-bottom: 20px;
|
||||
.oe_website_sale aside:not(.mobile-category-offcanvas),
|
||||
aside#products_grid_before {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
max-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.oe_website_sale #products_grid,
|
||||
.oe_website_sale .col-lg-9 {
|
||||
flex: 0 0 100% !important;
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure visibility of all filter elements */
|
||||
.oe_website_sale .o_wsale_products_searchbar_form,
|
||||
.oe_website_sale .o_wsale_products_categories,
|
||||
.oe_website_sale #wsale_products_categories_collapse,
|
||||
.oe_website_sale .o_wsale_products_attributes,
|
||||
.oe_website_sale .o_wsale_products_price {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
/* Ensure visibility of desktop filter elements */
|
||||
@media (min-width: 992px) {
|
||||
.oe_website_sale .o_wsale_products_searchbar_form,
|
||||
.oe_website_sale .o_wsale_products_categories,
|
||||
.oe_website_sale #wsale_products_categories_collapse,
|
||||
.oe_website_sale .o_wsale_products_attributes,
|
||||
.oe_website_sale .o_wsale_products_price {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Category Navigation */
|
||||
|
||||
@ -454,18 +454,23 @@ body,
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Layout Tweaks (991px to 768px) */
|
||||
@media (max-width: 991px) {
|
||||
/* Tablet & Mobile Layout Tweaks (Hide Desktop Sidebar, full width product grid) */
|
||||
@media (max-width: 991.98px) {
|
||||
.o_wsale_products_main_row {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
#products_grid_before {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
margin-bottom: 20px;
|
||||
#products_grid_before,
|
||||
aside#products_grid_before,
|
||||
.oe_website_sale aside:not(.mobile-category-offcanvas) {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
max-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#products_grid {
|
||||
@ -535,12 +540,35 @@ body,
|
||||
.o_sortby_dropdown {
|
||||
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) */
|
||||
@ -594,173 +622,17 @@ body,
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Category Header/Toggle */
|
||||
#products_grid_before {
|
||||
order: 3 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding: 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;
|
||||
/* Hide Desktop Sidebar on Mobile (since Mobile Offcanvas Drawer is used) */
|
||||
#products_grid_before,
|
||||
aside#products_grid_before,
|
||||
.oe_website_sale aside:not(.mobile-category-offcanvas) {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
max-height: 0 !important;
|
||||
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;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Product Grid (2 products per row) */
|
||||
@ -1054,20 +926,9 @@ body,
|
||||
box-shadow: 0 6px 20px rgba(254, 205, 79, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Global Highest Z-Index for Mobile Categories 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;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Global Full-Height Mobile Categories Drawer (Root Level for Reparenting)
|
||||
========================================================================== */
|
||||
.mobile-category-backdrop {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
@ -1075,5 +936,240 @@ body,
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,210 +3,216 @@
|
||||
<data>
|
||||
<!-- Shop Page Layout Realignment - Dynamic Food Theme -->
|
||||
<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">
|
||||
<aside id="products_grid_before" class="col-lg-3">
|
||||
<!-- Mobile Full-Height Sidebar Drawer & Backdrop -->
|
||||
<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>
|
||||
<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;">
|
||||
<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">
|
||||
<div class="drawer-header-icon">
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
<i class="fa fa-times text-dark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="offcanvas-body p-3">
|
||||
<form class="js_attributes" method="get">
|
||||
<input type="hidden" name="search" t-att-value="search"/>
|
||||
<input type="hidden" name="sort" t-att-value="sort"/>
|
||||
|
||||
<div class="food-sidebar-section mb-4">
|
||||
<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>
|
||||
<aside id="products_grid_before" class="col-lg-3 d-none d-md-block">
|
||||
<form class="js_attributes" method="get">
|
||||
<input type="hidden" name="search" t-att-value="search"/>
|
||||
<input type="hidden" name="sort" t-att-value="sort"/>
|
||||
|
||||
<!-- Categories (Dynamic from Configuration) -->
|
||||
<div class="food-sidebar-section">
|
||||
<div class="section-title">Categories</div>
|
||||
<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>
|
||||
<!-- Fetching all categories configured in Odoo -->
|
||||
<t t-set="all_cats_desktop" t-value="request.env['product.public.category'].search([])"/>
|
||||
<t t-foreach="all_cats_desktop" 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>
|
||||
</ul>
|
||||
</div>
|
||||
<t t-else="">
|
||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
|
||||
</t>
|
||||
<span t-field="c.name"/>
|
||||
</a>
|
||||
</li>
|
||||
</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>
|
||||
</aside>
|
||||
</xpath>
|
||||
|
||||
<!-- Category Drawer Interaction Script -->
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
function initCategoryDrawer() {
|
||||
var openBtn = document.getElementById('btnOpenMobileCategoryDrawer');
|
||||
var closeBtn = document.getElementById('btnCloseMobileCategoryDrawer');
|
||||
var drawer = document.getElementById('mobileCategoryOffcanvas');
|
||||
var backdrop = document.getElementById('mobileCategoryBackdrop');
|
||||
if (!drawer || !backdrop) return;
|
||||
<!-- Mobile Categories Drawer, Backdrop & Global Scripts -->
|
||||
<xpath expr="//div[@id='products_grid']" position="before">
|
||||
<!-- Mobile Full-Height Sidebar Drawer Backdrop -->
|
||||
<div class="mobile-category-backdrop d-md-none" id="mobileCategoryBackdrop" onclick="window.shivasakthiCloseCategoryDrawer && window.shivasakthiCloseCategoryDrawer(event)"></div>
|
||||
|
||||
// Move drawer and backdrop to document.body to break free from any parent stacking contexts
|
||||
if (drawer.parentElement !== document.body) {
|
||||
document.body.appendChild(drawer);
|
||||
}
|
||||
if (backdrop.parentElement !== document.body) {
|
||||
document.body.appendChild(backdrop);
|
||||
}
|
||||
|
||||
function openDrawer(e) {
|
||||
if (e) { e.preventDefault(); e.stopPropagation(); }
|
||||
drawer.classList.add('show');
|
||||
backdrop.classList.add('show');
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
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">
|
||||
<!-- Mobile Full-Height Sidebar Offcanvas Drawer -->
|
||||
<div class="mobile-category-offcanvas d-md-none" id="mobileCategoryOffcanvas" aria-label="Categories 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">
|
||||
<div class="drawer-header-icon">
|
||||
<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>
|
||||
</div>
|
||||
<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 && window.shivasakthiCloseCategoryDrawer(event)">
|
||||
<i class="fa fa-times text-dark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="offcanvas-body p-3">
|
||||
<form class="js_attributes" method="get">
|
||||
<input type="hidden" name="search" t-att-value="search"/>
|
||||
<input type="hidden" name="sort" t-att-value="sort"/>
|
||||
|
||||
<!-- Categories (Dynamic from Configuration) -->
|
||||
<div class="food-sidebar-section">
|
||||
<!-- Categories Section -->
|
||||
<div class="food-sidebar-section mb-4">
|
||||
<div class="section-title">Categories</div>
|
||||
<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>
|
||||
<ul class="category-list list-unstyled p-0 m-0">
|
||||
<li class="category-item mb-2">
|
||||
<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" 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>
|
||||
</li>
|
||||
<!-- Fetching all root categories configured in Odoo -->
|
||||
<t t-set="all_root_categories" t-value="request.env['product.public.category'].search([('parent_id', '=', False)])"/>
|
||||
<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-set="all_cats" t-value="request.env['product.public.category'].search([])"/>
|
||||
<t t-foreach="all_cats" t-as="c">
|
||||
<li class="category-item mb-2">
|
||||
<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 ''}">
|
||||
<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-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>
|
||||
<span t-field="c.name"/>
|
||||
<span class="category-name" t-field="c.name"/>
|
||||
</a>
|
||||
</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Attributes (Dynamic - Sizes, etc.) -->
|
||||
<!-- Attributes (Size, Fabric, etc.) -->
|
||||
<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"/>
|
||||
<ul class="list-unstyled">
|
||||
<ul class="list-unstyled attribute-list">
|
||||
<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 class="mb-2 d-flex align-items-center">
|
||||
<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 cursor-pointer" onchange="this.form.submit()"/>
|
||||
<span class="attrib-name fw-bold" t-field="v.name"/>
|
||||
</label>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<!-- Mobile Category Toggle Button placed at top of products grid -->
|
||||
<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">
|
||||
<button class="btn mobile-cat-bar-btn" id="btnOpenMobileCategoryDrawer" type="button" aria-label="Open Categories">
|
||||
<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" onclick="window.shivasakthiOpenCategoryDrawer && window.shivasakthiOpenCategoryDrawer(event)">
|
||||
<i class="fa fa-th-large"></i>
|
||||
<span>Categories</span>
|
||||
<t t-if="category">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user