Navigating complex web applications can be challenging for users. One way to make the experience smoother and more intuitive is by using breadcrumbs, which help users understand their current location within a site and easily move back to previous pages. In Odoo 18's customer portal, breadcrumbs can be a valuable tool to improve usability and streamline navigation.
This guide covers how to integrate breadcrumbs into your Odoo 18 customer portal, making it easier for users to find their way around and enhancing the overall navigation experience.
Creating the XML Template
The first step in adding breadcrumbs to your Odoo 18 customer portal is creating an XML template. This template will define the structure and appearance of the breadcrumbs within your portal pages. Here's a detailed guide on how to create and customize your breadcrumb XML template:
<template id="portal_pos_order" name="My POS Order">
<t t-call="portal.portal_layout">
<t t-if="pos_order_portal" t-call="portal.portal_table">
<thead>
<tr class="active">
<th>Order Reference</th>
<th class="text-end">Session</th>
<th class="text-end">Date</th>
<th class="text-end">State</th>
</tr>
</thead>
<t t-foreach="pos_order_portal" t-as="contract">
<tr>
<td>
<a t-attf-href="/pos_portal/#{contract.id}">
<t t-out="contract.name"/>
</a>
</td>
<td class="text-end">
<span t-field="contract.session_id"/>
</td>
<td class="text-end">
<span t-field="contract.date_order"/>
</td>
<td class="text-end">
<span t-field="contract.state"/>
</td>
</tr>
</t>
</t>
</t>
</template>
The table structure that will be used to show the records in the custom menu is specified in this template.
Implementing the Python Controller
The page name must be passed through a controller in order to configure the breadcrumbs for every page. We can render the template with the required context and obtain the pertinent data in the controller. Here's an illustration of how to define the controller:
@http.route(['/pos_portal'], type='http', auth='public',
website=True)
def portal_my_pos_order(self):
pos_order_ids = request.env['pos.order'].sudo().search([('partner_id.id', '=', request.env.user.commercial_partner_id.id)])
return request.render('blog.portal_pos_order',
{'pos_order_portal': pos_order_ids,
'page_name': 'pos_order'})
The service records for the current user are retrieved in this controller and sent to the template. Additionally, we use the page_name argument to set the page name to "pos_order".
Create a template for breadcrumbs specifying the page name.
The last step is to inherit the portal.portal_breadcrumbs template and construct a template for the breadcrumbs. Each page's breadcrumbs will be defined by this template according to the page name that was sent through the controller. This is an illustration of how to accomplish it:
<template id="portal_breadcrumbs_pos" name="Portal layout : POS order menu entries" inherit_id="portal.portal_breadcrumbs">
<xpath expr="//ol[hasclass('o_portal_submenu')]" position="inside">
<li t-if="page_name == 'pos_order'"
class="breadcrumb-item active">
<span>POS Order</span>
</li>
</xpath>
</template>
Breadcrumbs will now appear on the page, as shown below.
By carefully customizing the appearance of your breadcrumbs, you can create a navigation experience that is not only functional but also visually appealing and consistent with your Odoo 18 customer portals.
In this blog, we learned how to add breadcrumbs to the Odoo 18 customer portal. Breadcrumbs are a useful navigation feature that makes using the customer portal easier and enhances the user experience. By following the detailed instructions provided in this article, you can improve the navigation flow of your Odoo 18 customer portal and make its user interface more intuitive. In this blog, we learned how to add breadcrumbs to the Odoo 18 customer portal. Breadcrumbs are a useful navigation feature that makes using the customer portal easier and enhances the user experience. By following the detailed instructions provided in this article, you can improve the navigation flow of your Odoo 18 customer portal and make its user interface more intuitive.
To read more about How to Add Breadcrumbs in Customer Portal in Odoo 17 ERP, refer to our blog How to Add Breadcrumbs in Customer Portal in Odoo 17 ERP.