From a22a1fe5045f2b118594ee7f22b8f447c3be2134 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Sat, 7 Feb 2026 17:59:57 +0530
Subject: [PATCH] shop page ui updated

---
 addons/dine360_theme_chennora/__manifest__.py |   2 +
 .../static/src/scss/shop.scss                 | 456 ++++++++++++++++++
 .../views/shop_page.xml                       | 124 +++++
 3 files changed, 582 insertions(+)
 create mode 100644 addons/dine360_theme_chennora/static/src/scss/shop.scss
 create mode 100644 addons/dine360_theme_chennora/views/shop_page.xml

diff --git a/addons/dine360_theme_chennora/__manifest__.py b/addons/dine360_theme_chennora/__manifest__.py
index a96ccfb..fa61b8c 100644
--- a/addons/dine360_theme_chennora/__manifest__.py
+++ b/addons/dine360_theme_chennora/__manifest__.py
@@ -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',
         ],
diff --git a/addons/dine360_theme_chennora/static/src/scss/shop.scss b/addons/dine360_theme_chennora/static/src/scss/shop.scss
new file mode 100644
index 0000000..b7b4864
--- /dev/null
+++ b/addons/dine360_theme_chennora/static/src/scss/shop.scss
@@ -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);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/dine360_theme_chennora/views/shop_page.xml b/addons/dine360_theme_chennora/views/shop_page.xml
new file mode 100644
index 0000000..f8b22be
--- /dev/null
+++ b/addons/dine360_theme_chennora/views/shop_page.xml
@@ -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 &gt; 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>