• Welcome to Odoo Professional Consulting Agency
How To Create a Snippet In Odoo ?

How To Create a Snippet In Odoo ?

Snippet is a programming term for a little area of re-usable source code. Odoo provides its base snippets but if you want to add your custom snippet then here is the way to do it.

  • First of all create a module by scaffold command in your custom_addons folder 

  • Give name snippet [For reference type in terminal: ./odoo-bin scaffold snippet custom_addons)

Now you should see a folder structure in your custom_addons folder like this.

custom_addons/snippet

    |----controllers

    |----demo

    |----models

    |----security

    |----views

    |--__init__.py

    |--__manifest.py__

Go to views Directory and create new file named snippet.xml and here we starting with content what we want to see in our snippet when we place it by drag and drop.

Take ‘Template’ tag in ‘Odoo’ tag and write code as below,

                        
<odoo>
   <template id="snippet_testimonial" name="Features">
      <section class="snippet_testimonial">
         <div class="container">
            <div class="row">
               <p>Place Your Snippet Content Here</p>
            </div>
         </div>
      </section>
   </template>
</odoo>
                    

<odoo> <template id="snippet_testimonial" name="Features"> <section class="snippet_testimonial"> <div class="container"> <div class="row"> <p>Place Your Snippet Content Here</p> </div> </div> </section> </template> </odoo>


As shown above give snippet id whatever you want to give and name which you want to see in front-end snippet panel.

Then start designing your snippet here but you need .scss or .css file to stylize your snippet.
Create Directory named 'static' in module and inside it another directory named 'scss' with file named 'main.scss'.

Now go back in your snippet.xml file and call here that .scss file as below.

 

                        
<template id="assets_frontend" inherit_id="website.assets_frontend" name="Your Snippet">
   <xpath expr="." position="inside">
      <link rel="stylesheet" href="/snippet/static/scss/main.scss" t-ignore="true"/>
   </xpath>
</template>

                    

<template id="assets_frontend" inherit_id="website.assets_frontend" name="Your Snippet"> <xpath expr="." position="inside"> <link rel="stylesheet" href="/snippet/static/scss/main.scss" t-ignore="true"/> </xpath> </template>

In this main.scss file you can write your style properties for snippet.Till now you created snippet design so we will place it in snippet section of front-end.

For it we have to give xpath of base snippet module as below.

                        
<template id="you_snippet_id" inherit_id="website.snippets" name="new snippets">
   <xpath expr="//div[@id='snippet_structure']/div[@class='o_panel_body']" position="inside">
      <t t-snippet="snippet.snippet_testimonial"
         t-thumbnail="/snippet/static/img/logo.png"/>
   </xpath>
</template>
                    

<template id="you_snippet_id" inherit_id="website.snippets" name="new snippets"> <xpath expr="//div[@id='snippet_structure']/div[@class='o_panel_body']" position="inside"> <t t-snippet="snippet.snippet_testimonial" t-thumbnail="/snippet/static/img/logo.png"/> </xpath> </template>

Take another template tag and give inherit_id as a 'website.snippet' & xpath as above.

Take 't' tag and give t-snippet value as template id which you created snippet design means in pur case it is 'snippet_testimonial'.

Set an icon for your snippet. Take any icon size image in your directory 'src' and give path to 't-thumbnail' value of 't' tag.

Finally your xml file will look like

                        
<odoo>
   <template id="snippet_testimonial" name="Features">
      <section class="snippet_testimonial">
         <div class="container">
            <div class="row">
               <p>Place Your Snippet Content Here</p>
            </div>
         </div>
      </section>
   </template>
   <template id="assets_frontend" inherit_id="website.assets_frontend" name="Your Snippet">
      <xpath expr="." position="inside">
         <link rel="stylesheet" href="/snippet/static/scss/main.scss" t-ignore="true"/>
      </xpath>
   </template>
   <template id="you_snippet_id" inherit_id="website.snippets" name="new snippets">
      <xpath expr="//div[@id='snippet_structure']/div[@class='o_panel_body']" position="inside">
         <t t-snippet="snippet.snippet_testimonial"
            t-thumbnail="/snippet/static/img/logo.png"/>
      </xpath>
   </template>
</odoo>
                    

<odoo> <template id="snippet_testimonial" name="Features"> <section class="snippet_testimonial"> <div class="container"> <div class="row"> <p>Place Your Snippet Content Here</p> </div> </div> </section> </template> <template id="assets_frontend" inherit_id="website.assets_frontend" name="Your Snippet"> <xpath expr="." position="inside"> <link rel="stylesheet" href="/snippet/static/scss/main.scss" t-ignore="true"/> </xpath> </template> <template id="you_snippet_id" inherit_id="website.snippets" name="new snippets"> <xpath expr="//div[@id='snippet_structure']/div[@class='o_panel_body']" position="inside"> <t t-snippet="snippet.snippet_testimonial" t-thumbnail="/snippet/static/img/logo.png"/> </xpath> </template> </odoo>

Now you are done and save your file

Restart your server

You will find your snippet in front-end of the website

Odoo • A picture with a caption
There are no comments for now.

Protected by reCAPTCHA, Privacy Policy & Terms of Service apply.
How To Make Purchase Order From Sale Order In Odoo?