What are the steps for editing existing Web pages in Odoo 17

HARSHAD
July 9, 2024

Odoo 17’s web pages serve as a digital canvas on which businesses can build their online presence. The gateways through which visitors interact with your brand are these intricate tapestries of content, functionality, and design. The ability to alter pre-existing web pages is a valuable tool that you can use to achieve a variety of goals, such as captivating users with visually stunning product showcases, streamlining user experiences, or adding a distinctive flair to your website.

Exploring the Core of Web Pages in Odoo 17

The website module is the main component of Odoo’s web page management. It is a powerful tool that manages the appearance, features, and customization of your website. This module acts as the coordinator, combining the various components that give your web pages life.

Every page in Odoo 17 is important to the growth of your online story, and each plays a crucial role in bringing that story to life. These digital spaces—from the home page’s welcoming appearance to the product showcases, about us pages, and contact forms’ educational content—combine to form your online persona.

In addition to disseminating information, Odoo 17 web pages can collect user data via intuitive forms, promote interaction with captivating elements, and ease online transactions. These digital platforms’ adaptability enables you to produce captivating experiences that connect with your target audience.

The Seamless Online Shopping Journey: An Examination

Let’s look at a real-world example to show the transformative power of web page modification in Odoo 17: improving an e-commerce website’s home page to highlight best-selling products and alluring promotional offers.

The Odoo home page is initially blank, ready for your artistic input. But with a few calculated changes, you can turn this virtual space into an attention-grabbing display that draws users in and advances them through the sales funnel.

On the homepage, display items that are in high demand

To get things started, we’ll feature top-selling products prominently on the homepage. In addition to sparking interest, it guides visitors towards popular products. We’ll write some custom code to create a function that sorts these products based on sales volume, then we’ll integrate it into the front end for a visually appealing display.

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):
        products = request.env['product.template'].sudo().search([])
        for each in products:
            each.sales_count = 0
            each.top_selling = False
        orders = request.env['sale.order'].sudo().search([('state', 'in', ('sale', 'done'))])
        for order in orders:
            order_line = order.order_line
            for product in order_line:
                product.product_id.sales_count = product.product_id.sales_count + 1
            super(Website, self).index()
            website_product_ids = request.env['product.template'].sudo().search([('sales_count', '!=', 0)], order='sales_count desc', limit=4)
            website_product_ids.top_selling = True
            return request.render('website.homepage',
                                  {'website_product_ids': website_product_ids})

This bit of code retrieves the best-selling items from the website’s homepage and displays them there, according to how many sales they generated over a given period. template for a homepage.

You can inherit the website and add these best-selling products to the homepage. Make a template for the homepage and include a container with the ID wrap inside the div. Here’s an illustration of how to use a product cart view to show the top-selling items:

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

This sample of code loops through the most popular products, displaying each one’s name, picture, and price in a product cart view on the homepage.

These instructions will help you incorporate your best-selling products into your e-commerce website’s homepage with ease, giving visitors an interesting and inviting experience that highlights your offerings.

 

Gaining proficiency in editing pre-existing web pages in Odoo 17 enables companies to create engaging online experiences that appeal to their target market. With Odoo’s extensive website module, you can unleash your creative vision and customize every aspect of your web pages to match your business goals and brand identity. You can choose to use the code-driven backend customization approach or the intuitive front-end editing approach.

Odoo’s web page modification features give you the tools you need to succeed in the digital world, whether you’re an e-commerce retailer looking to highlight your best-selling products, a service provider looking to streamline user engagement, or an organization trying to build a strong online presence.

"Unlock the Full Potential of Your Business with Odoo ERP!"

"Get a Cost Estimate for Your ERP Project, Absolutely FREE!"

Get a Free Quote

Leave a Reply

Your email address will not be published. Required fields are marked *