Implement initial Dine360 Chennora theme, including shop and product detail page views and styling.
This commit is contained in:
Alaguraj0361
parent
a22a1fe504
commit
4db79c5f79
@ -12,6 +12,7 @@
|
||||
'views/contact_page.xml',# Contact Page
|
||||
'views/faq_page.xml', # FAQ Page
|
||||
'views/shop_page.xml', # Shop Page
|
||||
'views/product_details_page.xml', # Customized Product Details Page
|
||||
'views/snippets.xml', # Custom Building Blocks
|
||||
'views/options.xml', # Options for snippets (if any)
|
||||
'data/website_data.xml', # Data for creating pages
|
||||
|
||||
@ -454,3 +454,68 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Product Details Page Styling */
|
||||
#product_detail {
|
||||
padding-top: 50px;
|
||||
|
||||
.product-details-wrapper {
|
||||
.display-5 {
|
||||
font-weight: 800;
|
||||
color: var(--food-text);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
h2 {
|
||||
color: var(--food-green);
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.css_quantity {
|
||||
border: 2px solid #eee !important;
|
||||
border-radius: 50px !important;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
margin-right: 15px;
|
||||
|
||||
.btn {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
padding: 0 15px !important;
|
||||
color: #333 !important;
|
||||
|
||||
&:hover {
|
||||
background: #f9f9f9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
border: none !important;
|
||||
max-width: 50px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
#add_to_cart {
|
||||
background: var(--food-green) !important;
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
border-radius: 50px !important;
|
||||
padding: 12px 40px !important;
|
||||
font-weight: 800 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 1px !important;
|
||||
transition: all 0.3s !important;
|
||||
box-shadow: 0 10px 20px rgba(0, 104, 55, 0.2) !important;
|
||||
|
||||
&:hover {
|
||||
background: #00502a !important;
|
||||
transform: translateY(-2px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
73
addons/dine360_theme_chennora/views/product_details_page.xml
Normal file
73
addons/dine360_theme_chennora/views/product_details_page.xml
Normal file
@ -0,0 +1,73 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
<data>
|
||||
<!-- Product Page Layout Customization -->
|
||||
<template id="chennora_product_details_layout" inherit_id="website_sale.product" name="Chennora Product Details" priority="60">
|
||||
<!-- Breadcrumbs Customization
|
||||
<xpath expr="//nav[hasclass('o_wsale_products_breadcrumb')]" position="replace">
|
||||
<nav class="o_wsale_products_breadcrumb mb-4" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-transparent p-0">
|
||||
<li class="breadcrumb-item"><a href="/" class="text-decoration-none text-muted">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="/shop" class="text-decoration-none text-muted">Shop</a></li>
|
||||
<li t-if="category" class="breadcrumb-item">
|
||||
<a t-att-href="keep('/shop/category/%s' % slug(category), category=0)" t-field="category.name" class="text-decoration-none text-muted"/>
|
||||
</li>
|
||||
<li class="breadcrumb-item active text-dark fw-bold" aria-current="page"><span t-field="product.name"/></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</xpath> -->
|
||||
|
||||
<!-- Product Image Area -->
|
||||
<xpath expr="//div[@id='product_details']/preceding-sibling::div" position="attributes">
|
||||
<attribute name="class" add="col-md-6 order-md-1 mb-5 mb-md-0" separator=" "/>
|
||||
</xpath>
|
||||
|
||||
<!-- Product Info Area -->
|
||||
<xpath expr="//div[@id='product_details']" position="attributes">
|
||||
<attribute name="class" add="col-md-6 order-md-2 ps-md-5" separator=" "/>
|
||||
</xpath>
|
||||
|
||||
<!-- Remove default details content to replace with custom structure -->
|
||||
<xpath expr="//div[@id='product_details']" position="inside">
|
||||
<div class="product-details-wrapper">
|
||||
<h1 itemprop="name" t-field="product.name" class="display-5 fw-bold mb-3 text-dark"/>
|
||||
|
||||
<div class="product-meta d-flex align-items-center mb-4">
|
||||
<div class="rating text-warning me-3">
|
||||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
|
||||
<span class="text-muted ms-2 small">(25 Reviews)</span>
|
||||
</div>
|
||||
<span class="text-muted small">|</span>
|
||||
<span class="ms-3 text-success fw-bold small">In Stock</span>
|
||||
</div>
|
||||
|
||||
<div class="product-price mb-4">
|
||||
<h2 class="fw-bold text-primary display-6">
|
||||
<span t-field="product.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
|
||||
<del t-if="product.compare_list_price" class="text-muted fs-5 ms-3 fw-normal">
|
||||
<span t-field="product.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
|
||||
</del>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p t-field="product.description_sale" class="text-muted mb-5 fs-6" placeholder="A short description of the product..."/>
|
||||
|
||||
<hr class="my-4 text-muted opacity-25"/>
|
||||
|
||||
<!-- Add to Cart Block (Using Odoo's native form structure but styled) -->
|
||||
<!-- We keep the original form hidden or wrap it? Better to style existing elements but for now, let's just ensure the structure is clean. -->
|
||||
|
||||
</div>
|
||||
</xpath>
|
||||
|
||||
<!-- Hide original title/price to avoid duplication since we added custom ones above -->
|
||||
<xpath expr="//h1[@itemprop='name']" position="attributes">
|
||||
<attribute name="class" add="d-none" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="//span[@itemprop='image']" position="attributes">
|
||||
<attribute name="class" add="rounded-4 shadow-sm" separator=" "/>
|
||||
</xpath>
|
||||
|
||||
</template>
|
||||
</data>
|
||||
</odoo>
|
||||
@ -10,7 +10,7 @@
|
||||
<input type="hidden" name="search" t-att-value="search"/>
|
||||
<input type="hidden" name="sort" t-att-value="sort"/>
|
||||
|
||||
<!-- Categories (Dynamic) -->
|
||||
<!-- Categories (Dynamic from Configuration) -->
|
||||
<div class="food-sidebar-section">
|
||||
<div class="section-title">Categories</div>
|
||||
<ul class="category-list">
|
||||
@ -19,11 +19,17 @@
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-biryani.png"/> <span>All Products</span>
|
||||
</a>
|
||||
</li>
|
||||
<t t-foreach="categories" t-as="c">
|
||||
<!-- 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 c.id == category.id else ''}">
|
||||
<img t-if="c.image_128" t-att-src="website.image_url(c, 'image_128')"/>
|
||||
<img t-else="" src="/dine360_theme_chennora/static/src/img/cat-biryani.png"/>
|
||||
<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_chennora/static/src/img/cat-biryani.png"/>
|
||||
</t>
|
||||
<span t-field="c.name"/>
|
||||
</a>
|
||||
</li>
|
||||
@ -74,15 +80,7 @@
|
||||
</aside>
|
||||
</xpath>
|
||||
|
||||
<!-- Top Bar with Dynamic Stats -->
|
||||
<xpath expr="//*[contains(@id, 'products_grid')]/*[1]" position="before">
|
||||
<div class="food-top-bar mt-2">
|
||||
<div class="control-left">
|
||||
<button class="btn-filtering"><i class="fa fa-sliders"/> Filtering</button>
|
||||
<div class="result-count">Showing <span t-esc="len(products)"/> Results</div>
|
||||
</div>
|
||||
</div>
|
||||
</xpath>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- Product Item Customization - Reorganized Layout -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user