Static Snippets
Odoo provides a user-friendly and effective website management tool that allows users to
create and customize their websites. The user can easily use these snippets with the
simple drag-and-drop function. Odoo's Website Editor offers several editing building
blocks that you can drag and drop to your page and edit to your needs. It will explain
the way to build your own construction blocks. There are many types of snippets in Odoo,
but in general, we can divide them into two types: static snippets and dynamic snippets.
The static snippets are fixed and will not change until the user changes them. The
dynamic snippets based on the records are stored in the Odoo backend.
Odoo offers its users a wide variety of snippets. Additionally, any user can create their
own custom snippet in Odoo. Let's look at a simple example of how to create a static
snippet in Odoo.
How to create a snippet?
A snippet is a QWeb that adds to the insert block bar. We will create a snippet that
shows the image and title of the product item. You can drag and drop the snippet on the
page and edit the image and text. The static snippet is nothing but a block of HTML
code. Consider the following steps to create a new static snippet:
- Add a QWeb template for the snippet in views/snippets.xml, as follows:
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<template id="snippet_product_cover" name="Product Cover">
<section class="pt-3 pb-3">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 pt16 pb16">
<h1>Odoo Mug</h1>
<p>
Odoo is a suite of open source business apps that cover all your company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc.
</p>
<a class="btn btn-primary" href="#" > Mug Details </a>
</div>
<div class="col-lg-6 pt16 pb16">
<img
src="/module_name/static/src/img/cover.jpeg"
class="mx-auto img-thumbnail w-50 img img-fluid shadow"/>
</div>
</div>
</div>
</section>
</template>
</odoo>
we created a QWeb template with our HTML for the product block. In this HTML, we have
just used a Bootstrap column structure, but you can use any HTML code. Note that the
HTML code you add in the snippet's QWeb template will be added to the page when you
drag and drop. Generally, it's an honest idea to use section elements and Bootstrap
for snippets, because, for them, the Odoo editor provides editing, background, and
size controls out of the box.
List the template in the snippet list like this:
<template id="bproduct_snippets_options" inherit_id="website.snippets">
<xpath expr="//div[@id='snippet_structure']/div[hasclass('o_panel_body')]" position="inside">
<t t-snippet="module_name.snippet_product_cover"
t-thumbnail="/module_name/static/src/img/s_product_thumb.png"/>
</xpath>
</template>
we registered our snippet in the snippet list. You will need to inherit
website.snippets to register a snippet. In the website editor GUI, snippets are
divided into different sections based on their usage. In our example, we have
registered our snippet in the Structure section via XPath. To list your snippet, you
need to use a tag with the t-snippet attribute. The t-snippet attribute will
have the XML ID of the QWeb template, which is
module_name.snippet_product_cover in our example. You will also need to use the
t-thumbnail attribute, which is used to show a small snippet image in the website
editor. We have listed our snippet under the structure block. Once you update the
module, you will be able to drag and drop the snippet.
Add the cover image and snippet thumbnail image in the
/module_name/static/src/img directory.
There will be no need for extra JavaScript in such cases. Odoo's editor offers lots
of options and controls out of the box, and they are more than enough for static
snippets. You will find all existing snippets and options at
website/views/snippets.xml.
The snippet options also support the data-exclude, data-drop-near, and data-drop-in
attributes, which determine where the snippet may be placed when dragging them out
of the snippet bar. These are jQuery selectors, and during this, we did not use them
because we allow you to place the snippet wherever the content may go.
Restart the server and update your module to apply the changes. When you open the website
page in edit mode, you will be able to see our snippet in the snippets blocks panel.