In the first step, we added a new XML file, snipptes.xml, and added a JS file in the assets. Snippets are just QWeb templates without website.layout.
In the second step, we created the book_snippet template for the book. In general, it's a good idea to use section elements and Bootstrap classes, because for them, Odoo's editor offers edit, background, and resize controls out of the box. In our snippet body, we have just added a title and a table with the header. We want to display the latest books, in our case. The list of latest books is not fixed, and the list gets changed every time new books are published. Consequently, we want to insert the book details into the table on the fly. In the next few steps, we will add JavaScript to fetch the list of the latest books and add these to the table.
In the third step, we have inherited the website.snippet template to add our snippet and its options. The first xpath adds our book_snippet in the feature snippet section. To add the snippet, you need to use the t-snippet attribute. You also need to add the t-thumbnail attribute, which will be the URL of the thumbnail image for the snippet. The position attribute is used determines in which section the snippet will shows up. Our choice was //div[@id='snippet_feature']/div[@class='o_panel_body'], which places it in the features section. With the snippet_structure, snippet_content, and snippet_effect IDs, you can place your snippet in the other respective sections.
In the second xpath, we have added options for the snippet. Two options are added in this xpath through step 4. The first option is for selecting the number of books to be displayed in the table. Snippet options come in various types. In this example, we have used the custom option with data-js="book_count". When you use the data-js option, you need to register it in options.registry with the value of the attribute. When the user changes the option, it will call the function in the registered option and you need to then set options values on the element. These values are used by the rendering function (the Odoo animation framework) when the page is reloaded.
You can check this in step 6, where we have added options like options.registry.book_count. In the function body, we get a snippet element in the this.$target, and the rest of the things in the function body are written with the basic JQuery syntax.
We have also added one more snippet option in step 4, which is used to change the table style. For this option, we have used the data-toggle-class attribute. When the user clicks on the option with the attribute data-toggle-class, Odoo will toggle a class given in the attribute value. No JavaScript code is needed for this type of option. One more type of option called data-select-class, is available in Odoo, which enables only one class at a time. We haven't used this in our example, but you can test it.
If you noticed, the data-selector attribute contains a JQuery selector for determining which element of the option is to be shown. In the example, the first option list is shown when the whole container is selected, while the second one, about the table style, is shown when the table is selected.
In steps 6 and 7, we have added book_snippet in the Animation.registry, which will fetch the book data from the database and append table rows in the snippet body. It uses the snippet animation framework to execute code every time the snippet is loaded. We use this to query the current list of books to be presented to the user. The key property here is the selector that's defined, which instructs the framework to run our class when there's an element matching the selector. Internally, we used the data-rows option, which is added from options.registry.book_count to determine how many rows need to be displayed.
The example given in our recipe is used for creating dynamic snippets. If you don't have a requirement for the dynamic snippet and you just want to add static content, then you can directly add everything in the snippet. There is no need for adding JavaScript for static snippets.