How to Create a Dynamic Snippet in Odoo 17

Dynamic snippets in Odoo 17 are modular components that allow for the dynamic display of content on web pages. These snippets can be tailored to showcase various types of information, such as product listings, testimonials, or promotional banners.

1. How to Create a Dynamic Snippet in Odoo 17 Enterprise

2. Introduction Enterpr ise Dynamic snippets in Odoo 17 are modular components that allow for the dynamic display of content on web pages. These snippets can be tailored to showcase various types of information, such as product listings, testimonials, or promotional banners. To craft a dynamic snippet, several components need to be developed: an XML file to define the snippet's view, a Python controller to retrieve data from the backend, and a JavaScript file to display backend data on the website.

3. Enterprise Step 1 : Initially, the controller is defined to retrieve data from the backend. products = [] public_categories = [] for category in public_categ_id: products_search_read = request.env[ 'product.template' ].with_user( 1 ).search_read( [( 'is_published' , '=' , True ), ( 'public_categ_ids.id' , '=' , category[ 'id' ])], [ 'name' , 'image_1920' , 'public_categ_ids' , 'website_id' , 'sales_count' , 'list_price' ], order= 'sales_count' ) for product in products_search_read: if product[ 'sales_count' ] != : products.append(product) public_categories.append(category) unique_categories = [dict(categories) for categories in {tuple(sorted(record.items())) for record in public_categories}] products = sorted(products, key= lambda i: i[ 'sales_count' ], reverse= True ) unique_id = "pc-%d" % int(time.time() * 1000 ) return products, unique_categories, current_website, unique_id import time from odoo import http from odoo.http import request class DynamicSnippets (http.Controller) : """This class is for the getting values for dynamic product snippets """ @http.route('/top_selling_products', type='json', auth='public') def top_selling (self) : """Function for getting the current website,top sold products and its categories. Return products-most sold products unique_categories-categories of all products current_website-the current website for checking products or """ current_website = request.env[ 'website' ].sudo().get_current_website().id public_categ_id = request.env[ 'product.public.category' ].sudo().search_read([], [ 'name' , 'website_id' ])

4. Enterprise Step 2 : Next, we must generate an XML file in static/src/xml. Give an outline content of the snippet . In this step, we've introduced a "total_sold" span element to display the total number of sold products. <template id= "products_category_wise_template" name= "Best Seller" > <!-- Template Best seller product dynamic snippet--> <section class =" best_seller_product_snippet "> < div class =" ref - arrival - content "> < p class =" ref - section_head ref - centerhead__underline ref - head -- primary " style =" color : #0d5272;">Best Seller </p> </div> <div id= "top_products_carousel" /> </section> </template>

5. Enterprise Step 3 : Once the snippet's view is defined, it's essential to integrate the snippet into the website builder's snippet blocks. <?xml version= "1.0" encoding= "UTF-8" ?> <odoo> <template id= "basic_snippet" inherit_id= "website.snippets" name= "Best seller Snippet" > <xpath expr= "//div[@id='snippet_effect']//t[@t-snippet][last()]" position= "after" > <t t-snippet= "module_name.products_category_wise_template" /> </xpath> </template> </odoo>

6. Enterprise Step 4 : Next, to show the data on the website, we'll use JavaScript. /** @odoo-module */ import PublicWidget from "@web/legacy/js/public/public_widget" ; import { jsonrpc } from "@web/core/network/rpc_service" ; import { renderToElement } from "@web/core/utils/render" ; export function _chunk(array, size) { const result = []; for (let i = ; i < array.length; i += size) { result.push(array.slice(i, i + size)); } return result; } var TopSellingProducts = PublicWidget.Widget.extend({ selector: '.best_seller_product_snippet' , willStart: async function () { const data = await jsonrpc( '/top_selling_products' , {}) const [products, categories, website_id, unique_id] = data Object.assign(this, { products, categories, website_id, unique_id }) }, start: function () { const refEl = this.$el.find( "#top_products_carousel" ) const { products, categories, current_website_id, products_list} = this const chunkData = chunk(products, 4 ) refEl.html(renderToElement( module_name.products_category_wise' , { products, categories, current_website_id, products_list, chunkData })) } }); PublicWidget.registry.products_category_wise_snippet = TopSellingProducts; return TopSellingProducts;

7. Enterprise Step 5 : In this step, we select sections using a class and retrieve data from the controller through jsonrpc call. ' data' : [ 'views/snippet.xml' ], 'assets' : { 'web.assets_frontend' : [ 'module_name/static/src/js/best_seller_snippet.js', 'module_name/static/src/xml/best_seller_snippet_templates.xml', ], },

8. Enterprise Step 4 : After installing or upgrading the module, navigate to the website and click on "Edit." You'll notice the snippet listed under "Dynamic Content," allowing us to easily drag and drop it onto the desired section of our webpage.

9. For More Info. Check our company website for related blogs and Odoo book. Check our YouTube channel for functional and technical videos in Odoo. Enterprise www.cybrosys.com