Chapter 10 - Odoo 15 Development Book

Dynamic Routes

In Odoo, controllers are used to configure the front-end module. These front-end modules are integrated with the back-end modules. For example, if a person wants to bring sales order details to the website, they cannot use the 'Models' function in Odoo. However, they can get sale order details from the backend with the controllers. Controllers use modules such as Website Sales, Website Blog, and Website Forum to expand their functionality. Using the controllers, the link between any URL and web pages can be easily defined.

In website development, pages need to be created using dynamic URLs. For example, in the Website Shop, each product has a unique detailed view of the product that links to a different URL.

How to Create the Dynamic Routes?

Consider having a ‘store’ module and adding a product page for each product.

Follow these steps to create a detailed page for a selected product in a shop.

Create a new controller
Create a new template for the details page
Add a link or button in the existing view to redirect the details page.

Step 1:

Create a new controller for the product details page in your ‘store’ module controller (main.py) as follows:

@http.route('/store/<model("store.product"):product>', type='http', auth="user", website=True)
def product_details(self, product):
    values = {
        'product': product,
    }
    return request.render('store.product_details', values)

We have created a dynamic route for the product detail page. On this route, we added <model ("store.product"): product>. It accepts integer URLs as /store/10. When accessing this URL, Odoo considers this integer as the ID of the store.product model, and Odoo will fetch the corresponding data and pass to the function as an argument. Therefore, when accessing /store/10 from the browser, the product parameter in the product_details() function will have a record set of the store.product model with ID 10. We passed this product record set and rendered a new template called store.product_details.

Domain filtering is supported in routing. For example, if you want to restrict certain products on a conditional basis, you can do by adding into the domain route. Let us examine how to restrict the access to a product with ID 5:

store/<model('store.product', '[('id', '!=', 5)]'):product>"

Odoo werkzeug is used to handle HTTP requests. Odoo supports all the features of werkzeug routing. As a result, you can use routing similar to:

/store/<int:page> # Accepts only integer values.
/store/<any(about, help):category_name> # Accepts the selected values.
/store/<product> # Accepts the string values.
/store/<category>/<int:product> # Accepts multiple values in a route.

Step 2:

Create a new template for the detailed view of your product

(product_details.xml):

<template id="product_details" name="Product Detail">
    <t t-call="website.layout">
        <div class="container">
            <div class="oe_structure"/>
            <div class="row">
                <div class="col-12">
                    <div class="col-6">
                        <span t-field="product.image"
                              t-options="{'widget': 'image'}"/>
                    </div>
                    <div class="col-6">
                        <div class="prod_details">
                            <h1 t-field="product.name"/>
                            <span class="prod_price"
                                  t-field="product.lst_price"
                                  t-options="{'widget': 'price'}"/>
                            <ul class="prod_desc_list">
                                <li><t t-esc="product.brand"/></li>
                                <li><t t-esc="product.category"/></li>
                                <li><t t-esc="product.origin"/></li>
                                <li><t t-esc="product.code"/></li>
                            </ul>
                            <span t-field="product.description"/>
                            <div class="prod_buttons">
                                <button class="btn btn-primary"
                                        t-options="{'widget': 'button'}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>
</template>

We have created a new QWeb template called product_details for rendering a product details page. This is a simple product description page. On this page we have added some dynamic <div> and <span> tags. So, we can use the contents of the product details page with the passed ID.

Step 3:

Add a link or button to the current view of the store. Clicking on the button will redirect you to a detailed view of the product.

<a t-attf-href="/store/#{product.id}" class="btn btn-primary">
    Goto Product <i class="fa fa-eye"/>
</a>

Then you will see the Goto Product button in your store. Clicking on it will open the related product details.