266 lines
18 KiB
XML
266 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">
|
|
<!-- Desktop Sidebar Reconstruction with Dynamic Data -->
|
|
<xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace">
|
|
<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>
|
|
<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>
|
|
</aside>
|
|
</xpath>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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 Section -->
|
|
<div class="food-sidebar-section mb-4">
|
|
<div class="section-title">Categories</div>
|
|
<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>
|
|
<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')" 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" 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 class="category-name" t-field="c.name"/>
|
|
</a>
|
|
</li>
|
|
</t>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Attributes (Size, Fabric, etc.) -->
|
|
<t t-foreach="attributes" t-as="a">
|
|
<div class="food-sidebar-section border-top pt-3 mb-4">
|
|
<div class="section-title" t-field="a.name"/>
|
|
<ul class="list-unstyled attribute-list">
|
|
<t t-foreach="a.value_ids" t-as="v">
|
|
<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>
|
|
</div>
|
|
</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-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">
|
|
<span class="cat-active-pill"><t t-esc="category.name"/></span>
|
|
</t>
|
|
</button>
|
|
</div>
|
|
</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>
|
|
</data>
|
|
</odoo>
|
|
|
|
|
|
|