forked from alaguraj/odoo-testing-addons
shop page ui updated
This commit is contained in:
Alaguraj0361
parent
7241758204
commit
a22a1fe504
@ -11,6 +11,7 @@
|
||||
'views/about_page.xml', # About Page
|
||||
'views/contact_page.xml',# Contact Page
|
||||
'views/faq_page.xml', # FAQ Page
|
||||
'views/shop_page.xml', # Shop Page
|
||||
'views/snippets.xml', # Custom Building Blocks
|
||||
'views/options.xml', # Options for snippets (if any)
|
||||
'data/website_data.xml', # Data for creating pages
|
||||
@ -19,6 +20,7 @@
|
||||
'web.assets_frontend': [
|
||||
'dine360_theme_chennora/static/src/scss/primary_variables.scss',
|
||||
'dine360_theme_chennora/static/src/scss/theme.scss',
|
||||
'dine360_theme_chennora/static/src/scss/shop.scss',
|
||||
'dine360_theme_chennora/static/src/js/deal_switcher.js',
|
||||
'dine360_theme_chennora/static/src/js/category_slider.js',
|
||||
],
|
||||
|
||||
456
addons/dine360_theme_chennora/static/src/scss/shop.scss
Normal file
456
addons/dine360_theme_chennora/static/src/scss/shop.scss
Normal file
@ -0,0 +1,456 @@
|
||||
/* Chennora Shop Page - Exact Clone of the Classic Food Theme UI */
|
||||
|
||||
:root {
|
||||
--food-green: #006837;
|
||||
--food-yellow: #fbb03b;
|
||||
--food-text: #333333;
|
||||
--food-light-grey: #f1f1f1;
|
||||
--food-border: #e6e6e6;
|
||||
--food-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.oe_website_sale {
|
||||
background-color: #ffffff !important;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 80px;
|
||||
|
||||
/* Sidebar Navigation */
|
||||
#products_grid_before {
|
||||
background: transparent !important;
|
||||
padding-right: 30px !important;
|
||||
|
||||
.food-sidebar-section {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: var(--food-text);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 25px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
background: var(--food-green);
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Categories List */
|
||||
.category-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.category-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
margin-right: 15px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--food-green);
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Price Filter */
|
||||
.price-slider-wrapper {
|
||||
.slider-rail {
|
||||
height: 4px;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: var(--food-green);
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--food-green);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.price-label-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price-text {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-filter {
|
||||
background: var(--food-green);
|
||||
color: white !important;
|
||||
border: none;
|
||||
padding: 6px 18px;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* New Arrivals */
|
||||
.arrival-list {
|
||||
.arrival-item {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.arrival-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.arrival-info {
|
||||
.rating {
|
||||
color: var(--food-yellow);
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 0.8rem;
|
||||
|
||||
del {
|
||||
color: #aaa;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--food-green);
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Top Bar Control */
|
||||
.food-top-bar {
|
||||
background: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.control-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.btn-filtering {
|
||||
background: transparent;
|
||||
border: 1px solid #eee;
|
||||
padding: 8px 15px;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
|
||||
i {
|
||||
color: var(--food-green);
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.result-count {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
color: var(--food-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
|
||||
.sort-by-wrapper {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
|
||||
.view-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
color: #aaa;
|
||||
|
||||
&.active {
|
||||
background: #f5f5f5;
|
||||
color: var(--food-green);
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Product Cards Grid */
|
||||
#products_grid {
|
||||
.oe_product {
|
||||
padding: 15px !important;
|
||||
|
||||
.oe_product_cart {
|
||||
border: none !important;
|
||||
background: white !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: var(--food-shadow) !important;
|
||||
overflow: hidden !important;
|
||||
transition: transform 0.4s ease !important;
|
||||
position: relative !important;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-10px) !important;
|
||||
|
||||
.btn-add-to-cart-overlay {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Highlighted Cards (Yellow BG) */
|
||||
&.card-highlighted {
|
||||
background: var(--food-yellow) !important;
|
||||
|
||||
.o_wsale_product_information {
|
||||
background: var(--food-yellow) !important;
|
||||
}
|
||||
|
||||
.btn-add-to-cart-overlay {
|
||||
background: var(--food-text) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.oe_product_image {
|
||||
height: 240px !important;
|
||||
position: relative !important;
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
|
||||
img {
|
||||
object-fit: contain !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.wishlist-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #333;
|
||||
color: white !important;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.9rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: var(--food-yellow);
|
||||
color: #333;
|
||||
font-weight: 800;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.o_wsale_product_information {
|
||||
padding: 15px 20px 25px !important;
|
||||
text-align: center !important;
|
||||
background: white !important;
|
||||
|
||||
.btn-add-to-cart-overlay {
|
||||
background: var(--food-green);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.price-row {
|
||||
margin-bottom: 8px;
|
||||
|
||||
del {
|
||||
color: #aaa;
|
||||
margin-right: 8px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.o_wsale_products_item_title {
|
||||
margin-bottom: 10px !important;
|
||||
|
||||
a {
|
||||
font-size: 0.95rem !important;
|
||||
font-weight: 800 !important;
|
||||
color: var(--food-text) !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
color: var(--food-yellow);
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Pagination */
|
||||
.products_pager {
|
||||
margin-top: 60px;
|
||||
|
||||
ul.pagination {
|
||||
justify-content: center !important;
|
||||
gap: 10px;
|
||||
|
||||
li.page-item {
|
||||
.page-link {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50% !important;
|
||||
color: #666;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
background: white;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
background: var(--food-green) !important;
|
||||
color: white !important;
|
||||
border-color: var(--food-green) !important;
|
||||
box-shadow: 0 5px 15px rgba(0, 104, 55, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
124
addons/dine360_theme_chennora/views/shop_page.xml
Normal file
124
addons/dine360_theme_chennora/views/shop_page.xml
Normal file
@ -0,0 +1,124 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
<data>
|
||||
<!-- Shop Page Layout Realignment - Dynamic Food Theme -->
|
||||
<template id="chennora_shop_layout" inherit_id="website_sale.products" name="Chennora 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">
|
||||
<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) -->
|
||||
<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_chennora/static/src/img/cat-biryani.png"/> <span>All Products</span>
|
||||
</a>
|
||||
</li>
|
||||
<t t-foreach="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"/>
|
||||
<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_chennora/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>
|
||||
|
||||
<!-- 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 -->
|
||||
<template id="chennora_products_item" inherit_id="website_sale.products_item" name="Chennora 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>
|
||||
Loading…
x
Reference in New Issue
Block a user