How to Modify Existing Web Pages in Odoo 18

How to Modify Existing Web Pages in
Odoo 18
Enterprise

Enterprise
Introduction
In this slide, we’ll discuss on how to modify existing web pages
in Odoo 18. Web pages in Odoo 18 can also gather user data
through user-friendly forms, encourage interaction through
engaging features. However, through strategic modifications, we
can transform this virtual real estate into a captivating showcase
that captures visitors attention and propels them further into
the sales funnel.

Enterprise
Before adding the custom code in controller, we can add custom
field in product_template model.
from odoo import fields, models
class ProductTemplate(models.Model):
_inherit = 'product.template'
top_selling = fields.Boolean(string='Top selling')
Next, to add this in the view, we can inherit the product_template
model and add the field.

Enterprise
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<record id="product_template_form_view"
model="ir.ui.view">
<field
name="name">product.template.inherit.view.form</field>
<field name="model">product.template</field>
<field name="inherit_id"
ref="product.product_template_form_view"/>
<field name="arch" type="xml">
<xpath expr="//field[@name='taxes_id']"
position="after">
<field name="top_selling"/>
</xpath>
</field>
</record>
</odoo>

Enterprise
Next, to add top selling products of the e-commerce website on the
Home Page, we can use the code snippet to fetch the top-selling
products based on their sales count within a specified date range and
renders them on the homepage of the website. homepage template. We
can add this code in the controller of the custom module.
from odoo import http
from odoo.http import request
from odoo.addons.website.controllers.main import Home
class Website(Home):
@http.route('/', auth="public", website=True,
sitemap=True)
def index(self, **kw):
"""Initialize products' sales count and top-
selling flag"""
products =
request.env['product.template'].sudo().search([])

Enterprise
for product in products:
product.sales_count = 0
product.top_selling = False
orders = request.env['sale.order'].sudo().search([
('state', 'in', ('sale', 'done'))])
for order in orders:
for line in order.order_line:
line.product_id.sales_count +=
line.product_uom_qty
website_product_ids = [product for product in
products if product.sales_count != 0]
sorted_products = sorted(website_product_ids,
key=lambda p: p.sales_count, reverse=True)
# Mark the top 4 products as top-selling
for product in sorted_products[3:7]:
product.top_selling = True

Enterprise
# Render the homepage template with the sorted
products
return request.render(
'website.homepage',
{'website_product_ids': sorted_products[3:7]})
To incorporate these top-selling products into the homepage, we can
inherit the website. Create a homepage template and add a container
within the div with the ID wrap.
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<template id="homepage_inherit_product_display"
inherit_id="website.homepage" name="Products"
active="True">
<data inherit_id="website.homepage">
<xpath expr="//div[@id='wrap']"
position="inside">
<input type="hidden" name="csrf_token" t-
att-value="request.csrf_token()"/>

Enterprise
<div class="container mt32 mb64">
<section>
<div class="product_details">
<center>
<h3>MOST SELLING
PRODUCTS</h3>
</center>
</div>
<br/>
<div class="oe_product_cart_new row"
style="overflow: hidden;">
<t t-
foreach="website_product_ids"
t-as="website_product_id">
<div class="col-md-3 col-sm-3
col-xs-12" style="padding:6px 6px 6px 6px;">
<form
action="/shop/cart/update" method="post" class="card
oe_product_cart" data-publish="on">
<br/>
<center>

Enterprise
<div style="width:100%;
height:155px;overflow: hidden;">
<a
t-attf-href="/shop/product/#{ slug(website_product_id) }">
<img
t-attf-src="/web/image?
model=product.template&field=image_1920&id=#{websit
e_product_id.id}" class="img img-fluid"
style="padding: 0px; margin:
0px; width:auto; height:100%;"/>
</a>
</div>
</center>
<br/>
<div class="card-body p-0 text-center
o_wsale_product_information">
<div class="p-2
o_wsale_product_information_text">
<h6 class="o_wsale_products_item_title">

Enterprise
<a data-oe-model="product.template" data-oe-
id="website_product_id.id"
data-oe-field="website_product_id.name"
data-oe-type="char"
data-oe-
expression="product.name"
itemprop="name"
data-oe-field-xpath="/t[1]/form[1]/div[2]/div[1]/h6[1]/a[1]
" t-attf-
href="/shop/product/#{ slug(website_product_id) }"
content="website_product_id.name">
<t t-
esc="website_product_id.name"/>
</a>
</h6>
<h6 class="o_wsale_products_item_title">
<span t-
esc="website_product_id.currency_id.symbol"
style="color:black"/>
<t t-esc="website_product_id.list_price"/>
</h6>
</div>

Enterprise
<div class="o_wsale_product_btn"
data-oe-model="ir.ui.view"
data-oe-id="1561" data-oe-
field="arch" data-oe-
xpath="/t[1]/form[1]/div[2]/div[2]"/>
</div>
<span class="o_ribbon " style=""/>
</form>
</div>
</t>
</div>
</section>
</div>
</xpath>
</data>
</template>
</odoo>

Enterprise
This code snippet iterates over the top-selling products and displays
their name, image, and price within a product cart view on the
homepage.

For More Info.
Check our company website for related blogs
and Odoo book.
Check our YouTube channel for
functional and technical videos in Odoo.
Enterprise
www.cybrosys.com

How to Modify Existing Web Pages in Odoo 18

More Related Content

Similar to How to Modify Existing Web Pages in Odoo 18 (20)

More from Celine George (20)

Recently uploaded (20)

How to Modify Existing Web Pages in Odoo 18