Odoo Website ‐ Snippets Options - vec-ltd/odoo-docs GitHub Wiki

Once this snippet is dragged onto the page, an options menu will appear if you click the snippet on the page. Each snippet comes with some default options, which you can also extend.

The way Odoo chooses which snippet option components to render for your snippet, is based on a CSS selector. Note how my snippet had the class "gumbo_selector". I can force Odoo to render additional snippet options by tagging them with that CSS selector. Odoo will parse the currently selected snippet, then look for snippet options that match on the CSS selector pattern you provide.

Example:

<template id="gumbo_options_id" inherit_id="website.snippet_options">
    <xpath expr="." position="inside">
        <div data-selector=".gumbo_selector" string="Options Title">
            <we-row string="Form Label">
                <we-button >Button Label</we-button>
            </we-row>
        </div
    </xpath>
</template>

For a deeper understanding of how these templates are laid out, check out this file from Odoo core:

web_editor/static/src/xml/snippets.xml

But the point is, if I defined another template like this:

<template id="gumbo_options_id_2" inherit_id="website.snippet_options">
    <xpath expr="." position="inside">
        <div data-selector=".gumbo_selector" string="Options Title">
            <we-row string="Another Label">
                <we-button >Another Button</we-button>
            </we-row>
        </div
    </xpath>
</template>

Then basically when I use the Gumbo snippet, Odoo will merge these two buttons into the snippet options, because both will match on the "gumber_selector" css class. In other words, EVERY single matching snippet option is loaded, if the snippet template matches on the css selector.

This way you can force your own options to appear for specific OOTB snippets, or even by matching more generic css selectors, you could potentially have it appear in ALL of them.

The options available can depend on which items you click. There will always be a "Block" section (see screenshot). The template that renders this is:

    <t t-name="web_editor.customize_block_options_section">
        <we-customizeblock-options>
            <we-title>
                <span t-esc="name"/>
                <we-top-button-group>
                    <we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_link o_we_hover_success"
                                title="Duplicate Container"
                                aria-label="Duplicate Container"/>
                    <we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_link o_we_hover_danger"
                                title="Remove Block"
                                aria-label="Remove Block"/>
                </we-top-button-group>
            </we-title>
        </we-customizeblock-options>
    </t>

And this is called in this file:

web_editor/static/src/js/editor/snippets.editor.js

Which uses the getName() method defined like so:

    getName: function () {
        if (this.$target.data('name') !== undefined) {
            return this.$target.data('name');
        }
        if (this.$target.is('img')) {
            return _t("Image");
        }
        if (this.$target.is('.fa')) {
            return _t("Icon");
        }
        if (this.$target.is('.media_iframe_video')) {
            return _t("Video");
        }
        if (this.$target.parent('.row').length) {
            return _t("Column");
        }
        if (this.$target.is('#wrapwrap > main')) {
            return _t("Page Options");
        }
        return _t("Block");
    },

So it defaults to "Block", but you can also pass in a name argument (as in my example) and it will override that. Then for specific types of HTML elements it will render either "Image" or "Icon" as the sub heading for that section.

There are numerous types of options. They are all defined as "UserValueWidgets".

They emit user_value_changed events when you click on or select them.

The names are all pre-fixed with "we", presumably for "web editor".

This is a select option.

The options you have nested are types.

You must include a valid data-select tag otherwise this will not work.

For example, you can do this:

<div data-selector=".amv_company_selection_snippet_selector">
  <we-select string="Alignment">
    <we-button data-select-class="text-start s_website_form_no_submit_label">Left</we-button>
    <we-button data-select-class="text-center s_website_form_no_submit_label">Center</we-button>
    <we-button data-select-class="text-end s_website_form_no_submit_label">Right</we-button>
    <we-button data-select-class="">Inherit</we-button>
  </we-select>
</div>

And when you select each option, it will update the class of the target snippet.

Or you can do this:

<div data-selector=".amv_company_selection_snippet_selector" data-js="CompanySelectionOptions">
  <we-select string="ViewType" data-attribute-name="displayMode">
    <we-button data-select-data-attribute="dropdown">Drop Down</we-button>
    <we-button data-select-data-attribute="tiles">Image Tiles</we-button>
  </we-select>
</div>

This will set the "displayMode" data attribute on the target, to either "dropdown" or "tiles".