Manage CSS Assets By Page (Odoo)

Question

What is the best way to incorporate css / js assets into Odoo's website where the assets are only loaded for a particular page?

In the examples and documentation they speak of dumping your assets into Odoo's website.assets_frontend and I do this however there are circumstances where I would like to use website templates found online and I really do not want to take the time to look through the css classes and identify conflicts.

If the page itself were to fail that is one thing but if it breaks all the css on my existing pages that is another.

I was thinking of using a technique like this.

t-if="request.httprequest.path.startswith('/page/path/')"

Using an if statement to determine whether or not to incorporate the css in the website assets or not.

<odoo>
    <data>
        <template id="page_style" name="Page Style" inherit_id="website.assets_frontend">
            <xpath expr="link[last()]" position="after">
                <t t-if="request.httprequest.path.startswith('/page/path/')">
                    <link href="/addon_name/path/to/css/style.css" rel="stylesheet" type="text/css"/>
                </t>
            </xpath>
        </template>
    </data> 
</odoo>

Anyways, if anyone would like to make a suggestion on how they incorporate css into Odoo's frontend assets in a contained way I would appreciate it.

George Daramouskas George Daramouskas · Accepted Answer · 2017-02-25T18:55:21

What you can do is actually insert a:

<head>
      <link href="/addon_name/path/to/css/style.css" rel="stylesheet" type="text/css"/>
</head>

to your template that you want the specific css/js to be applied to. For a specific example see addons/website_google_map/views/google_map_templates.xml

Your the contents of your head tag will be inserted inside the head tag of the final HTML that will be rendered for that template.

Since it seems to be straighforward and used by the framework itself I have resorted on using it on my own with no problems so far. As I can understand you can also create a javascript Widget that will operate on your template only that will apply a specific css. But the above solution seems cleaner to me.

Manage CSS Assets By Page (Odoo)

1 Answers