How to render an OWL component using t-component in templates?

Question

I am trying to render an OWL component in Odoo using t-component within my view template. However, the component is not loading, and nothing appears on the page.

Here's what I've done:

1.My OWL Component:

/** @odoo-module **/

import { Component } from "@odoo/owl";

export class ProductImageGallery extends Component {
    setup() {
        console.log("ProductImageGallery component is working");
    }
}
ProductImageGallery.template = "multi_image_master.ProductImageGalleryTemplate";

2.My Component Template:

<template id="ProductImageGalleryTemplate" name="Product Image Gallery">
    <div>
        <h3>Product Image Gallery</h3>
        <p>Gallery of images for this product will appear here.</p>
    </div>
</template>

views/xml file

This is supposed to render the component using t-component:

<template id="ProductPageTemplate" name="Product Page">
    <t t-call="website.layout">
        <div id="product-page-content" class="container">
            <t t-component="multi_image_master.ProductImageGallery"/>
            <p>Hello Bharathi</p>
        </div>
    </t>
</template>

Controller: The page is loaded via this controller.

from odoo import http
from odoo.http import request

class ControllerProductPage(http.Controller):
    @http.route('/shop', type='http', auth='public', website=True, csrf=False)
    def renderProductPage(self, **kwargs):
        return request.render('multi_image_master.ProductPageTemplate', {})

manifest file

   {
    "name": "Product Multi-Image Manager",
    "version": "0.1",
    "category": "Product",
    "depends": ["website"],
    "data": [
        "views/product_template.xml"
    ],
    "assets": {
        "web.assets_backend": [
            "multi_image_master/static/src/js/product_image_gallery.js",
            "multi_image_master/static/src/xml/product_image_gallery.xml"
        ]
    },
    "installable": True,
    "application": True,
    "license": "LGPL-3"
}

Issue: When I load the /shop route, the page renders the static content but does not render the component (t-component="multi_image_master.ProductImageGallery"). Also, the console.log() in the setup method of the component does not execute, indicating that the component is not being loaded.

Question: How can I correctly render an OWL component using t-component in an Odoo view template? Am I missing something in the setup or registration? Any guidance would be appreciated.

Answer 1

It seems you are mixing up the concepts of server-side rendering and client-side rendering in Odoo. Here's how they differ and why your approach using t-component and OWL might not work in this context:

Server-side Rendering: Templates rendered using request.render in an Odoo controller are processed on the server and sent to the browser as plain HTML. In such cases, using t-call to include sub-templates is the correct approach.

---

Solution:

1. Define Your Template:

   <template id="ProductPageTemplate" name="Product Page">
       <t t-call="website.layout">
           <div id="product-page-content" class="container">
               <!-- Call your sub-template here -->
               <t t-call="multi_image_master.ProductImageGalleryTemplate"/>
               <p>Hello Bharathi</p>
           </div>
       </t>
   </template>
   

2. Define Your Controller:

   from odoo import http
   from odoo.http import request
   
   class ControllerProductPage(http.Controller):
       @http.route('/shop', type='http', auth='public', website=True, csrf=False)
       def renderProductPage(self, **kwargs):
           # Render the main template
           return request.render('multi_image_master.ProductPageTemplate', {})
   

3. Update Your Manifest File: Ensure both templates are listed under the data section in your module’s manifest file (__manifest__.py):

   {
       "name": "Multi Image Master",
       "data": [
           "views/product_template.xml"  # Add your template file here
       ],
   }
   

---

• Use t-call for Sub-templates: t-call is the correct method to include another template within your main template in server-side rendering.

---