Odoo snippets are the building blocks that are used in in website module for adding new content in a page. There are two types of snippets - static and dynamic snippets. Static snippets are easier to develop since it doesn't need to connect to the database using controller and javascript to fetch the data. In this tutorial, we will be creating static snippets.
Create New Static Snippet
Under views folder "/theme_yourhome/views", create a new folder snippets and add a new file property-agents.xml and add code below.
<?xml version="1.0" encoding="UTF-8" ?> <odoo> <template id="property_agents" name="Property Agents"> <section class="property-agents border-none company-visible"> <div class="container"> <div class="text-center py-5"> <h2 class="h1">Property Agents</h2> <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for <br/>previewing layouts and visual mockups.</p> </div>
To make our custom snippets properly organized, we will create our new group of snippets called YourHome. This will help us separate default Odoo snippets with our own snippets. Under the same folder in "theme_yourhome/views", create a new file snippets.xml and add code below.
In the code above, we have inherited website.snippets and add a new group by adding <div id="snippet_structure" class="o_panel">. Notice that we have added an icon for this snippets using t-thumbnail. For the image, please download in this link Open . The keyword is used when searching snippets.
Since we have added new file and edited a python file, we need to restart Odoo and update the theme. Go to home page and reload the page. Click edit on the top right corner and you should see the new snippets group YourHome and inside is Property Agents snippet.
Create Snippet Options
If you click and drag Property Agents snippet into our page, you can edit the text and images and notice on the right that there are different settings. These are called snippet options.
We will create a two options here, one for adding borders to the images and one for hiding the company name. Under the same file "theme_yourhome/views/snippets/snippets.xml", add below code after template custom_snippets.
For this options to work, we need to add new styles. Under "theme_yourhome/static/scss" folder, create a new file "property-agents.scss" and add the code below.
Restart Odoo and update the theme. Go to home page and reload. Edit the page and click and drag property agents snippet to the page. If you click the snippet, you will notice two options added Image Border and Company Name.
Create Mega Menu Snippets
In the last tutorial in adding mega menu, we have added it only in our xml file. This will have issue once you accidentally replaced the it with other mega menu because you don't have any option to add it again.
In order to make our mega menu added on the list, create a new file under "theme_yourhome/views/snippets" and name it "rent_mega_menu.xml". Since adding theme module in Odoo does not automatically adding a group access, we need to create a record directly in modul ir.ui.view using the code below.
Restart Odoo and update theme. Go to home page and reload. Click edit and in menu bar, click any mega menu. On the options, go under Mega Menu template and you should see Rent Menu. Select Rent Menu and click save.
Now you can use this template for new mega menu. Try to add a new mega menu under Pages -> Edit Menu -> Add Mega Menu Item and click Save.
After saving, notice that the default mega menu will be added. In order to change this, click edit and click the submenu. Go to Mega Menu option and select template Rent Menu. Click save and now you have tow mega menu.
Congratulations! we now have created new snippets with options and new snippets for mega submenu. For more details, please check video below.
Read next article
Create Dynamic Snippets in Odoo