[Python] How to render an OWL component using t-component in Odoo view templates?

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.

Continue reading...