Using OWL Components on Odoo's Portal and Website: A Developer's Guide

Step 0:  Creating the Owl component

First, create the template and js file:

/your_module/static/src/portal_component/your_component.xml.

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="your_module.YourComponent"> ~ template name
        Hello, World!
    </t>
</templates>

/your_module/static/src/portal_component/your_component.js.

import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry"

export class YourComponent extends Component {
   	​static template = "your_module.YourComponent"; ~ declaring template 
	​static props = {};
}

registry.category("public_components").add("your_module.YourComponent", YourComponent); ~ Adding it to the 'public_components'registry

Step 1:  Adding component in the assets bundle

The 'web.assets_frontend' bundle is the assets bundle that is used by the portal and website

/your_module/manifest.py

{
    # ...
    'assets': {
        'web.assets_frontend': [
            'your_module/static/src/portal_component/**/*',
        ],
    }
}

Step 2:  Adding <owl-component> tag

Now we need add an <owl-component> directly to the portal’s home page with an xpath in /your_module/

/your_module/views/templates.xml.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="your_module.portal_my_home" inherit_id="portal.portal_my_home">
	​<xpath expr="//*[hasclass('o_portal_my_home')]" position="before">	​	​	​<owl-component name="your_module.YourComponent"/> ~ TAG
	​</xpath>
</template>
</odoo>

/your_module/manifest.py

{
    # ...
    'data': [
        'views/templates.xml',
    ]
}

Component Added: