Dynamic Snippets
Snippets are UI building blocks for odoo website builder. Snippets are the easiest way to
customize the odoo website. We will see how to create dynamic snippets for Odoo. We can
create content-based snippets on database values. Let's look at a simple example of how
to create a dynamic snippet in Odoo.
How to create a dynamic snippet?
Dynamic snippets are snippets where the contents are changed whenever there is a change
in the backend or the data source. To create a dynamic snippet we need to create an XML
file for defining the view, A python controller to get the data from the odoo backend,
and a Javascript file for displaying the content from the backend on the website.
Consider the following steps to create a new dynamic snippet that shows a list of
products:
- Controller:
First let us create a controller to fetch data from the backend. For this example
let's get the total 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 as span with id total_sold to show the total number of products
sold.The value will be fetched in Javascript and will render 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 view it on the website we will use the
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 js file in 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 website and click on edit button. Now
we can see the snippet under Dynamic Content.