Odoo 16 Development Book

Snippets

Odoo provides easy-to-use and effective website management tools that allow users to create and customize websites. Users can simply drag and drop these snippets to use. Odoo's website editor comes with several editing building blocks that you can drag and drop onto your page and edit to your liking. Learn how to create your own building blocks. Odoo has many types of snippets, but generally, it can be divided into two types: static snippets and dynamic snippets. The static snippet is fixed and will not change until the user changes it. Dynamic snippets based on datasets are stored in the Odoo backend.

How do I create a Static snippet?

A snippet is a QWeb added to the Insert Pad bar. Create a snippet that displays the image and title of your item. You can drag and drop snippets onto your page and edit images and text. A static snippet is just a block of HTML code.

You just need to follow two basic steps to create a static snippet.

1. Create a template view for the snippet.

<?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 static snippet</h1>
                    <p>
                       Hi welcome to odoo static snippet
                     </p>
                    <a class="btn btn-primary" href="#" >snippet 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>

2. Register the snippet as static

<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>

How do I create a Dynamic snippet?

A dynamic snippet is a snippet whose content changes when the backend or data source changes. To create a dynamic snippet, you need to create an XML file to define the view, a Python controller to fetch data from the Odoo backend, and a Javascript file to display the content from the backend on your website. To create a new dynamic snippet that displays a list of products, consider the following steps:

Controller:

First, let's create a controller that fetches data from the backend. In this example, let's find the total amount sold.

from odoo import http
from odoo.http import request
class Sales(http.Controller):
   @http.route(['/total_product_sold'], type="json", auth="public")
   def sold_total(self):
       sale_obj = request.env['sale.order'].sudo().search([
           ('state', 'in', ['done', 'sale']),
       ])
       total_sold = sum(sale_obj.mapped('order_line.product_uom_qty'))
       return total_sold

XML:

First, we need to define the content of the snippet as in the static snippet.

<template id="basic_snippet" name="Dynamic Snippet">
    <section class="container dynamic_snippet_blog">
        <div class="row">
            <div class="col-md-12">
                <h1>Dynamic Snippet</h1>
                Total Products Sold: <span id="total_sold"/>
            </div>
        </div>
    </section>
 </template>

Here we created a span with id total_sold to show the total number of products sold.The value will be fetched in Javascript and will be rendered here. After defining the view, we need to add this to the website builder snippet blocks. To do that, we need to inherit the website.snippets and add our snippet inside that as in the static snippet.

<template id="external_snippets" inherit_id="website.snippets" priority="8">
    <xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]" position="after">
        <t t-snippet="basic_snippet_blog.basic_snippet"/>
    </xpath>
</template>

This time we are adding the snippet inside Dynamic section.JS:

For getting the data from the server and viewing it on the website, we will use JavaScript.

odoo.define('basic_snippet_blog.dynamic', function (require) {
   var PublicWidget = require('web.public.widget');
   var rpc = require('web.rpc');
   var Dynamic = PublicWidget.Widget.extend({
       selector: '.dynamic_snippet_blog',
       start: function () {
           var self = this;
           rpc.query({
               route: '/total_product_sold',
               params: {},
           }).then(function (result) {
               self.$('#total_sold').text(result);
           });
       },
   });
   PublicWidget.registry.dynamic_snippet_blog = Dynamic;
   return Dynamic;
});

Here we are giving the class of the section as selector, and we are fetching the value from the controller using RPC. Now we need to add the XML file to the data section and the js file in the assets section of the manifest.py file.

"data": [
   'views/view.xml',
],
'assets': {
   'web.assets_frontend': [
       '/basic_snippet_blog/static/src/js/dynamic.js',
   ],
},

After installing or updating the module, go to the website and click on the edit button. Now we can see the snippet under Dynamic Content.