Developing Static Website Snippets in Odoo 18

Odoo’s website builder provides a robust platform for building dynamic, user-friendly websites directly within the Odoo ecosystem. One of the most powerful tools it offers is the snippet system, which allows you to create reusable website components that users can drag and drop into their pages. These static website snippets streamline development, simplify customization, and give users the flexibility to easily enhance their websites. This post will guide you through creating custom static website snippets in Odoo 18, covering all necessary steps from setup to final testing.

1. Prerequisites

Before diving in, ensure you have the following:

• Odoo 18 installed (locally or on a server).
• Basic understanding of XML and JavaScript, as snippets involve template creation and interactive elements.
• Odoo Development Environment: You should be comfortable navigating Odoo’s directory structure, creating custom modules, and understanding Odoo’s templating engine.

2. Setting Up a New Module

To organize your custom snippets, it’s best to create a new Odoo module. Here’s how:

1. Create Module Directory: Inside your Odoo addons directory, create a new folder named website_custom_snippets.

2. Create Manifest File: In the module directory, create a __manifest__.py file with the following content:

   {
       'name': 'Custom Website Snippets',
       'description': 'Module for custom static website snippets in Odoo 18',
       'category': 'Website',
       'version': '1.0',
       'depends': ['website'],
       'data': [
           'views/snippets.xml',
       ],
   }
   

3. Initialize the Module: Create an empty __init__.py file in the same directory to mark it as a module.

3. Defining the Snippet Template

Next, create the XML template for your snippet. This template tells Odoo how to render the snippet and will define the HTML structure.

1. Inside website_custom_snippets, create a folder named views.

2. In views, create an XML file called snippets.xml and add the following content:

   <odoo>
       <template id="snippet_static_banner" name="Static Banner Snippet" inherit_id="website.snippets">
           <xpath expr="//div[@id='wrap']" position="inside">
               <div class="o_snippet_custom_banner" contentEditable="false" data-name="Static Banner" data-snippet="o_snippet_custom_banner">
                   <h2>Welcome to Odoo 18</h2>
                   <p>Your custom banner text goes here.</p>
                   <a href="#" class="btn btn-primary">Learn More</a>
               </div>
           </xpath>
       </template>
   </odoo>
   

In this example, we’re defining a simple banner with a title, description, and button. The data-snippet and data-name attributes help Odoo recognize and display the snippet in the website builder.

4. Adding Styling to Your Snippet

To ensure your snippet integrates seamlessly with the website’s style, create a CSS file for custom styling.

1. Inside views, create a folder called static.
2. In static, create a css directory and a file named custom_snippets.css.

3. Add CSS styles for the banner snippet:

   .o_snippet_custom_banner {
       padding: 30px;
       text-align: center;
       background-color: #f4f4f4;
       border: 1px solid #ddd;
   }
   
   .o_snippet_custom_banner h2 {
       font-size: 2em;
       color: #333;
   }
   
   .o_snippet_custom_banner p {
       font-size: 1.2em;
       color: #666;
   }
   
   .o_snippet_custom_banner .btn {
       margin-top: 20px;
   }
   

4. In snippets.xml, link the CSS file by adding a <link> tag in the template section:

   <link rel="stylesheet" type="text/css" href="/website_custom_snippets/static/css/custom_snippets.css"/>
   

5. Making the Snippet Editable

While this snippet is static, you can make it editable to allow users to customize text and links directly from the website builder.

To do this, use data-editor attributes in your HTML template:

<div class="o_snippet_custom_banner" contentEditable="false" data-name="Static Banner" data-snippet="o_snippet_custom_banner">
   <h2 data-editor="text">Welcome to Odoo 18</h2>
   <p data-editor="text">Your custom banner text goes here.</p>
   <a href="#" class="btn btn-primary" data-editor="link">Learn More</a>
</div>

The data-editor="text" and data-editor="link" attributes allow Odoo to recognize these elements as editable fields, enabling users to modify the text and links directly in the website builder interface.

6. Registering the Snippet with Odoo

To make the snippet appear in the website editor, add an XML file to register it in the snippet registry.

1. In views, create a new file named snippet_registry.xml.

2. Add the following content:

   <odoo>
       <template id="assets_frontend" inherit_id="website.assets_frontend" name="Website Custom Snippet Assets">
           <xpath expr="." position="inside">
               <link rel="stylesheet" type="text/css" href="/website_custom_snippets/static/css/custom_snippets.css"/>
           </xpath>
       </template>
   
       <template id="website.snippet_list" inherit_id="website.snippet_list">
           <xpath expr="//div[@id='snippet_structure']/div" position="inside">
               <div class="o_snippet_thumbnail" data-snippet="o_snippet_custom_banner" data-name="Static Banner Snippet">
                   <img src="/website_custom_snippets/static/img/banner_thumbnail.png"/>
                   <span>Static Banner</span>
               </div>
           </xpath>
       </template>
   </odoo>
   

In this file:

• We inherit website.assets_frontend to include the CSS file.
• We add the snippet to the snippet_structure so it appears as a drag-and-drop option in the website editor.

7. Testing the Snippet

1. Restart Odoo: Restart the Odoo server to apply changes.
2. Update the App List: In the Odoo backend, go to Apps, click on the "Update Apps List," and install the Custom Website Snippets module.
3. Use the Snippet: Open the website editor, navigate to the Snippet section, and drag your new "Static Banner" snippet onto a page.

8. Conclusion and Further Customization

Developing static snippets in Odoo 18 is a powerful way to extend the website builder’s functionality. By creating your own custom snippets, you can design reusable components that match your branding and layout needs. Additionally, you can experiment with more advanced JavaScript functionality for interactive snippets, or add more complex styling and conditional logic as your requirements grow. This modular approach makes it easy to build unique, tailored web experiences within the Odoo ecosystem.

With these steps, you’ve created a basic snippet in Odoo 18. Feel free to explore other customization options, and happy coding!