MetatroncubeSoftwareSolutions/odoo-shivasakthi
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement custom product details page layout with styling enhancements and image disclaimer notes

Browse Source
This commit is contained in:
Alaguraj0361 2026-09-02 22:42:26 +05:30
parent ceb9ea818e
commit 2ad5bb6a8f
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
addons/dine360_theme_shivasakthi/views/product_details_page.xml
View File

@ -4,9 +4,15 @@
<!-- Product Page Layout Customization --> <!-- Product Page Layout Customization -->
<template id="Shivasakthi_product_details_layout" inherit_id="website_sale.product" name="Shivasakthi Product Details" priority="60"> <template id="Shivasakthi_product_details_layout" inherit_id="website_sale.product" name="Shivasakthi Product Details" priority="60">
<!-- 1. Style the image column --> <!-- 1. Style the image column and add image note -->
<xpath expr="//div[@id='product_details']/preceding-sibling::div" position="attributes"> <xpath expr="//div[@id='product_details']/preceding-sibling::div" position="attributes">
<attribute name="class" add="rounded-4 shadow-sm overflow-hidden" separator=" "/> <attribute name="class" add="rounded-4 shadow-sm" separator=" "/>
</xpath>
<xpath expr="//div[@id='product_details']/preceding-sibling::div" position="inside">
<div class="product-image-disclaimer-note mt-2 text-center text-muted small fst-italic px-3 py-2 bg-light rounded border border-secondary-subtle">
<i class="fa fa-info-circle me-1 text-primary"/>
<span style="font-size: 12px;"><strong>Note:</strong> Food images are for illustration purposes only and may differ from the actual dishes served.</span>
</div>
</xpath> </xpath>
<!-- 2. Hide Duplicate Original Elements and Terms block via CSS (Safer than XPath) --> <!-- 2. Hide Duplicate Original Elements and Terms block via CSS (Safer than XPath) -->
@ -23,18 +29,9 @@
</style> </style>
</xpath> </xpath>
<!-- 4. Prepend our Premium Styled content at the very top of product_details container --> <!-- 3. Prepend our Premium Styled content at the very top of product_details container -->
<!-- We use 'inside' and a wrapper with 'order-first' to ensure it stays at the top -->
<xpath expr="//div[@id='product_details']" position="inside"> <xpath expr="//div[@id='product_details']" position="inside">
<div class="product-details-wrapper Shivasakthi-premium-content" style="order: -1; position: relative; z-index: 10;"> <div class="product-details-wrapper Shivasakthi-premium-content" style="order: -1; position: relative; z-index: 10;">
<!-- Breadcrumbs -->
<!-- <div class="o_wsale_products_breadcrumb mb-3">
<ul class="breadcrumb bg-transparent p-0 small">
<li class="breadcrumb-item"><a href="/shop" class="text-secondary text-decoration-none">All Products</a></li>
<li class="breadcrumb-item active fw-bold" style="color: #ffb800;"><span t-field="product.name"/></li>
</ul>
</div> -->
<h1 itemprop="name" t-field="product.name" class="display-5 fw-bold mb-3 text-dark"/> <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="product-meta d-flex align-items-center mb-4">
@ -50,7 +47,16 @@
</h2> </h2>
</div> </div>
<p t-field="product.description_sale" class="text-muted mb-4 fs-6" placeholder="A short description of the product..."/> <p t-field="product.description_sale" class="text-muted mb-3 fs-6" placeholder="A short description of the product..."/>
<!-- Food Illustration Disclaimer Note -->
<div class="product-food-disclaimer-note my-3 p-2 px-3 rounded-3 bg-light border border-secondary-subtle text-muted small d-flex align-items-start gap-2 shadow-sm">
<i class="fa fa-info-circle text-warning flex-shrink-0 mt-1" style="font-size: 15px;"/>
<span style="font-size: 12px; line-height: 1.5; color: #555;">
<strong>Note:</strong> Food images are for illustration purposes only and may differ from the actual dishes served.
</span>
</div>
<hr class="my-4 text-muted opacity-25"/> <hr class="my-4 text-muted opacity-25"/>
</div> </div>
</xpath> </xpath>