This post is dedicated to the topic of snippet option creation in Odoo. We all know that a snippet in Odoo is a pretty useful tool to build site pages – just drag and drop it on a page and that’s it - page is ready. Along with the snippets there’re options available to dynamically change snippet look either it’s a custom or out-of-the-box snippet. But what if a snippet has no the option we need, then we can add this option using Odoo configuration. In this post we’ll see how to manage this.

Assume we have Odoo 14 and our snippet defined so:

<section class="s-snippet-formula">
    <div class="container">
        <div class="row idea-header">
            <div class="col-md-12">
                <span class="text-center highlight">Our offer</span>
            </div>
        </div>
    </div>
</section>

Now we want to add an option to this snippet to make it configurable. To make that happen let’s inject this xml-chunk to a snippet code e.g.:

<template id="s-snippet-formula_opt" name="Idea Snippet Options" inherit_id="website.snippet_options">
    <xpath expr="//div[@data-js='background']" position="after">
        <div data-selector=".s-snippet-formula">
            <we-collapse-area>
                <we-toggler>
                    <i class="fa fa-fw fa-magic"/>
                    Show extra info
                </we-toggler>
                <we-collapse>
                    <we-button data-select-class="">Yes</we-button>
                    <we-button data-select-class="hide_extra_info">No</we-button>
                </we-collapse>
            </we-collapse-area>
        </div>
    </xpath>
</template>

As a result we’ll see a new configuration toggler called “Show extra info” that includes 2 snippet options “Yes” and “No”:

There are a few things should be explained regarding the options XML:

1. To make this option appear, we need to inherit the template from website.snippet_options view – a default parent of any snippet option
2. Need to define a selector to bind the option to the snippet - .s_snippet_formula in out case
3. To place the option in the Options panel we define: <xpath expr="//div[@data-js='background']" position="after">. In this case our custom option will appear right after Background block.
4. The last important thing here is data-select-class attribute that defines the css-class added to snippet’s html upon our option change. Namely hide_extra_info class.

To apply the option change to the snippet look let’s add some scss that refers to hide_extra_info class: 

.s-snippet-formula {
    padding-top: 20px;
    &.hide_extra_info {
        .row.idea-header {
            display: none;
        }
    }
}

As we see from this scss code the header in snippet either shown or hidden depending on the snippet option.

In this article there’s an example of Odoo snippet option presented. As we see this process is pretty straight forward and demonstrates all power of Odoo. Have fun coding!