How to Modify Existing Web Pages in Odoo 18

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.

1. How to Modify Existing Web Pages in Odoo 18 Enterprise

2. 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.

3. 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.

4. 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>

5. 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([])

6. Enterprise for product in products: product.sales_count = 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 != ] 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

7. 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()" />

8. 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>

9. 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&amp;field=image_1920&amp;id=#{website_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" >

10. 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>

11. 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>

12. 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.

13. 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