261 lines
18 KiB
XML
261 lines
18 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
<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 -->
|
|
<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>
|
|
</t>
|
|
</ul>
|
|
</div>
|
|
</t>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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;
|
|
|
|
// 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">
|
|
<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 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-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">
|
|
<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>
|
|
</aside>
|
|
</xpath>
|
|
|
|
|
|
</template>
|
|
|
|
<!-- Product Item Customization - Reorganized Layout -->
|
|
<template id="Shivasakthi_products_item" inherit_id="website_sale.products_item" name="Shivasakthi Products Item" priority="50">
|
|
<xpath expr="//form" position="replace">
|
|
<div class="oe_product_cart h-100 d-flex flex-column" t-att-data-publish="product.website_published and 'on' or 'off'" itemscope="itemscope" itemtype="http://schema.org/Product">
|
|
<div class="oe_product_cart_inner h-100 bg-white rounded-3 shadow-sm overflow-hidden d-flex flex-column cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(product)">
|
|
<div class="oe_product_image position-relative flex-shrink-0">
|
|
<!-- Dynamic Discount Badge -->
|
|
<t t-if="product.compare_list_price > product.list_price">
|
|
<t t-set="diff" t-value="product.compare_list_price - product.list_price"/>
|
|
<t t-set="discount" t-value="round((diff / product.compare_list_price) * 100)"/>
|
|
<div class="discount-badge z-index-1">-<t t-esc="discount"/>%</div>
|
|
</t>
|
|
|
|
<div class="d-block h-100 text-center">
|
|
<t t-set="image_holder" t-value="product._get_image_holder()"/>
|
|
<span t-field="product.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_512', 'itemprop': 'image'}" class="d-flex h-100 justify-content-center align-items-center img-fluid"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_wsale_product_information p-3 flex-grow-1 d-flex flex-column align-items-center justify-content-center">
|
|
<!-- Name First -->
|
|
<h6 class="o_wsale_products_item_title fw-bold mb-2 text-dark text-center" t-field="product.name" />
|
|
|
|
<!-- Price Second -->
|
|
<div class="price-row">
|
|
<del t-if="product.compare_list_price" class="text-muted small me-2">
|
|
<span t-field="product.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
|
|
</del>
|
|
<span class="fw-bold fs-5 text-dark" t-field="product.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
<!-- Replace Grid/List buttons with Categories button in Products Pager -->
|
|
<template id="Shivasakthi_products_pager_categories" inherit_id="website_sale.products_pager" name="Shivasakthi Products Pager Categories" priority="50">
|
|
<xpath expr="//t[@t-call='website_sale.sort']" position="before">
|
|
<button class="btn mobile-cat-bar-btn d-md-none" id="btnOpenMobileCategoryDrawer" type="button" aria-label="Open Categories">
|
|
<i class="fa fa-th-large"></i>
|
|
<span>Categories</span>
|
|
<t t-if="category">
|
|
<span class="cat-active-pill"><t t-esc="category.name"/></span>
|
|
</t>
|
|
</button>
|
|
</xpath>
|
|
</template>
|
|
</data>
|
|
</odoo>
|
|
|
|
|
|
|