A Beginners Guide to building Snippets in Odoo

Florian Fischer

Building your first Snippet

Starting development with Odoo can be somewhat daunting. If we’re being honest, the documentation could be a little more exaustive. This is why, after going through the process myself, I decided to write this little article on how to create reusable content blocks for your website.

Why, you may ask should one even want to do this if there are plenty of structures avaible in Odoo. The answer is simple we all like the individual looks of our websites but we all hate doing double work. That’s why building snippets for your Odoo will make you happier in the long term.

How do we get started?

First of all you should consider reading this helpful article of the Odoo documentation about how to create a theme in Odoo. The section about how to build a snippet will start you off quite nicely.

As a first step we want to create a new module in the addon folder of the chosen Odoo project. For this we use the built in scaffold command. If you call it “Dummy Theme” or follow the naming conventions of your team is up to you. You should now see a folder structure like this:

|-- __init__.py
|-- __openerp__.py
|-- static
|   `-- style
|       `-- custom.less
`-- views
    |-- options.xml
    |-- pages.xml
    `-- snippets.xml

We can delete the options.xml and pages.xml since we’re not going to use them. Don’t forget to delete the references in the __opernerp__.py as well.

Adding structure to your snippet

Now we want to open our view with the usual “openerp” and “data” tags. You may laugh, but the first time it actually took me 10 minutes to figure out. After that we add the following code which is basically the “head” of our snippet. Here you can reference your JavaScripts and CSS files.

<template id="assets_frontend" inherit_id="website.assets_frontend" name="Your Snippet">
    <xpath expr="." position="inside">
        <link rel="stylesheet" href="/your_snippet/static/style/css/main.css" t-ignore="true"/>


Starting on the content

It’s time to start filling in the content so our snippet actually does something. To do that we open a new template and xpath tag:

<template id="you_snippet_id" inherit_id="website.snippets" name="Clean Theme snippets">
    <xpath expr="//div[@id='snippet_structure']" position="inside">

There is not much magic to this code. As you can see our snippet inherits all the cool stuff from the Odoo “website.snippets” and the Xpath expression simply tells us that it’s a descendant node of snippet_structure (and not content or features). I found it important to wrap the whole content into a separate “div” for the snippet to work properly.

Into those divs we now insert the following code which actually makes our snippet appear in the structures section to choose from:

<div class="oe_snippet_thumbnail">
    <img class="oe_snippet_thumbnail_img" src="/your_module/static/style/img/your_thumbnail.png" />
    <span class="oe_snippet_thumbnail_title">Your Snippet</span>

Using a png file for your thumbnail is no must but it works quite nicely and the file size is small enough for fast rendering. Of course you will need to create a folder for your thumbnails. After this we can start on displaying something in our snippet. How you do that is up to you, but I quite like using the Bootstrap structure:

<section class="oe_snippet_body”>
    <div class="container">
        <div class="row">
            <p>Your content goes here</p>

It is important to give your main section the "oe_snippet_body" class so Odoo knows that this is the part that is actually being dragged on your new website. Basically we are now finished. You can start styling your snippet and do all kinds of fancy stuff with it. Odoo is using Less as the default preprocessor but this is of course totally up to you. At Bloopark we like to use Sass but of course you can also still write your plain old CSS.

  • Jens Holzeon 11/28/2014 20:36:31

    Great article Florian. A short videos at the end of this post which shows the power of the odoo website builder and snippets would be really nice.