When building websites with Odoo, it's important to understand how data gets from your Python code to your web pages. This is where qcontext comes in; it's the tool that passes data from your controller to your QWeb templates. In Odoo 18, using qcontext helps you create more personalized and dynamic pages.
In Odoo, qcontext is used to pass extra data from a controller to a QWeb template. It lets you define custom variables that aren’t part of the default rendering context. This gives you more control over how your templates behave or what they display. Developers often use qcontext when they need to send additional information from Python code to a webpage, making templates smarter and more dynamic.
The controllers handle requests from the browser and return the right content, acting as a bridge between the backend and frontend. When you want to change how a built-in controller works like the one that powers the /shop page, you can override it. To do this, you first import the original controller class into your controller.py file, then create a new class that inherits from it. Inside this new class, you can modify specific methods to change or extend the default behavior.
When a user opens the /shop page in Odoo, the qcontext passed to the template might look something like this:
{
'search': '',
'order': '',
'category': product.public.category(),
'products': product.template(9, 41, 38, 16),
'pager': {
'page_count': 2,
'page': {'url': '/shop?', 'num': 1},
'page_next': {'url': '/shop/page/2?', 'num': 2},
},
'ppg': 20,
'layout_mode': 'grid',
'min_price': 1.98,
'max_price': 4000.0,+'response_template': 'website_sale.products',
}This dictionary contains key information that controls what the template displays, like the selected category, products to show, pagination details, and layout preferences. By injecting or modifying this data using qcontext, we can fully customize how the shop page behaves and looks for each visitor.
In this blog, we’ll show you how it works with a practical example: adding a custom message to the Shop page by extending the default /shop controller. If you’re working with website customizations, knowing how qcontext works will definitely come in handy.
Here we can see the normal Shop page. Let’s enhance the Shop page by displaying a custom alert message. Using qcontext, we can inject this message directly from the controller into the QWeb template. This enables us to show dynamic content like promotions or stock updates right on the page.
Here follows the overwriting process to inject the custom alert message into the Shop page using qcontext.
Firstly, we inherit the WebsiteSale class and override its shop method to make the necessary customizations.
@http.route([
'/shop',
'/shop/page/<int:page>',
'/shop/category/<model("product.public.category"):category>',
'/shop/category/<model("product.public.category"):category>/page/<int:page>',
], type='http', auth="public", website=True,
sitemap=WebsiteSale.sitemap_shop)
def shop(self, page=0, category=None, search='', min_price=0.0,
max_price=0.0,
ppg=False, **post):
response = super(WebsiteSaleInherit, self).shop(
page=page, category=category, search=search,
min_price=min_price, max_price=max_price,
ppg=ppg, **post
)
# Inject your custom message
if hasattr(response, 'qcontext'):
response.qcontext[
'offer_message'] = "?? Limited Time Offer: Get 25% off on all items!"
return response
Qcontext lets us send extra information, like a custom offer message, from the controller to the template. It helps add dynamic content easily, allowing templates to display updated or personalized data. Once the new message is added to qcontext, it appears seamlessly alongside the products on the website.
Here, we added the offer message as an alert into the template by inheriting the template, using the value passed through qcontext with the key 'offer_message'.
<template id="custom_shop_message" inherit_id="website_sale.products">
<xpath expr="//div[hasclass('o_wsale_products_main_row')]" position="before">
<t t-if="offer_message">
<div class="alert alert-info text-center my-3">
<strong>
<t t-esc="offer_message"/>
</strong>
</div>
</t>
</xpath>
</template>
In conclusion, qcontext plays an important role in Odoo 18 by allowing developers to send dynamic, custom data from the backend controller to the frontend templates. It helps in passing additional variables without changing the standard context, making template rendering more flexible and powerful. With qcontext, you can easily personalize pages, display dynamic messages, manage conditional views, and enhance the overall user experience without hardcoding. It serves as a simple yet powerful bridge between server-side logic and frontend design in Odoo websites.
To read more about How Q Context Works in Odoo 17, refer to our blog How Q Context Works in Odoo 17.