Development Book V18: Snippets

Odoo 18 continues to enhance its website building experience with a powerful, user-friendly editor that enables drag-and-drop customization using snippets. These are modular website components (like banners, testimonials, and feature sections) that can be dropped into pages and configured without writing code.

Snippets make it easy for both developers and non-developers to build visually appealing and functional websites with minimal effort.

Odoo still categorizes snippets into:

• Static Snippets: Predefined content blocks that remain unchanged unless manually edited.
• Dynamic Snippets: Data-driven blocks that fetch and display information from the backend (e.g., blog posts, products, etc.).

How to Create a Static Snippet in Odoo 18

Creating a custom static snippet in Odoo 18 involves defining a snippet template and registering it within the snippet list.

Step 1: Define the Snippet Template

You can create a basic snippet using QWeb templating. Below is an example of a simple snippet that adds a title and a paragraph inside a section block.

                       <?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="basic_snippet" name="Basic Snippet">
        <section class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Welcome to My Custom Snippet<<h1>
                    <p>This is a simple static snippet for demonstration purposes in Odoo 18.</p>
                </div>
            </div>
        </section>
    </template>
    </odoo>

Step 2: Register the Snippet in the Snippet Panel

To make the snippet appear in the website editor under the “Custom” section, inherit the website.snippets template and use an XPath to insert your snippet.

<odoo>
    <template id="custom_snippet_block" inherit_id="website.snippets" priority="8">
        <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
            <t t-snippet="your_module_name.basic_snippet" />
        </xpath>
    </template>
</odoo>

If you want to:

• Add an icon or custom name to your snippet in the editor, define metadata using data-* attributes.
• Restrict snippet visibility to specific page types (like shop or blog), use snippet options and templates targeting specific layouts.
• Use Owl Components inside snippets: Odoo 18 allows embedding dynamic Owl-powered widgets inside snippets with more ease, especially for dynamic snippets.

Static assets

Managing static assets in Odoo can be quite challenging due to its large codebase and wide range of applications. Each Odoo module serves different purposes and offers unique user interfaces, which makes asset management more complex compared to simpler applications. For example, the asset needs for a website, Point of Sale (POS), web client, or mobile app can vary significantly. Some assets may also be large in size but are rarely used. In such cases, using lazy loading is a practical solution to avoid loading unnecessary files upfront. Loading too many unused assets can negatively affect performance, so it’s best to load them only when they’re actually needed. To handle this efficiently, it’s recommended to organize assets into separate bundles for each part of Odoo’s codebase.

Managing Static Assets

Modern websites typically include numerous JavaScript and CSS files. When a page loads in the browser, these static files generate multiple requests to the server. An excessive number of requests can slow down the website’s performance. To overcome this, many websites combine several files to reduce the number of requests and serve static assets more efficiently. While there are various tools available for managing these assets, Odoo uses its own method to handle static file management.

Asset types

Odoo categorizes its assets into three types: templates, which are XML files; stylesheets, which are CSS or SCSS files; and scripts, which are JavaScript files.

1.Script (JavaScript files)

Odoo supports three types of JavaScript files, all of which are bundled and delivered to the browser. These include plain JavaScript files, native JavaScript modules, and Odoo-specific modules. For any newly developed JavaScript, it is recommended to use the native JavaScript module system. Odoo modules represent a custom JavaScript system where files are processed, minified, and combined when asset debug mode is disabled. The final output is saved as an attachment and is typically loaded into static files using the <script> tag.

2. Style (CSS or SCSS files)

Styling in Odoo can be done using either CSS or SCSS files. These style files are processed in a similar way to JavaScript files—they are minified and combined unless the system is in asset debug mode. SCSS files are first compiled into CSS. The final output is saved as an attachment and is usually loaded into static files through the tag.

3.Templates (XML files)

In Odoo, a template is a static XML file. Similar to JavaScript and style files, templates are treated as read-only and are eventually combined in small segments when required. When Odoo loads in the browser, it makes a request to /web/webclient/qweb/controller to retrieve these templates. Odoo’s primary template engine is QWeb, an XML-based engine mainly used to render HTML pages and fragments. Template directives are defined using XML attributes prefixed with t-. These include conditional statements like t-if that control the rendering of components and other elements within the template.

It’s important to note that the browser sends these requests only when the page is loaded. This happens because the page source contains a list that references all the associated assets. Additionally, a checksum is appended to the asset URLs. This approach allows cache headers to be safely configured over time, ensuring efficient and reliable caching.