Bootstrap Tour in Odoo

Mercedes Scenna

In Odoo you can take advantage of all Bootstrap features, and the Bootstrap tours written in PhantomJS come in handy to create your own introduction tours in your website. If you have an intranet, a shop, a portal, or simply a CMS, you can use this tours to show the users how to find their way around.
Since Odoo already uses these tours for their own, you will not need to add any external linking. If your website is not in Odoo, you will need to add this snippet to your head:

The Bootstrap Tour is also very useful in any Web Application or Website, not only in Odoo. You can check their Demo, it has some pretty cool features.

Even though you need a basic Javascript knowledge to write the tours, Bootstrap and Odoo pretty much do the rest.

So, let’s get to it. The base for the Tours are:
* Javascript file where you will write each message box,
* A python file that calls your javascript file as a tour,
* An xml file for loading the script as an asset.

If you create the tour as a separate module, you will have to create an init and openerp python files as well, like any other one. So, your directory will look something like this:

These will be the basic directory for your tour, you can add any xml file to create for example a menu item to trigger the tour. The less file is not mandatory either: it can be a css, or you can also leave the less folder out, in case you want to leave the styles of the tour with the bootstrap default.

Variables at the top will vary according to your site’s characteristics. What you can miss is the ‘use strict’ function, and the variable calling the _t templates. You will register your tour with the line openerp.Tour.register . The path will tell where your tour starts, the mode can be test or tour, it will change the way odoo process and loads them, and most importantly the steps.

As all the assets loaded for the frontend, we will inherit the assets_frontend template in the website module.

Keep in mind that test are for users with admin login, your test should be shown in the Odoo edit bar at the top. In this case, we are creating one for users, we add a menu item where you find it adequate and we trigger it in this way:

You will add this item in the template that suits your website. Now when the user clicks, the tour will be triggered.

Wie es aussieht...

This is how it will turn out in the frontend. You see the data-title is added to a popover-title, the content to the body of the popover and the buttons to a footer.

Playing around with this classes will give you a different layout for them.

About
Mercedes Scenna

The sassy frontend skilled/ She does not only coding but also conceptualizing and drawing/ Traveling and photography is her passion.

Dynamic FAQ for Odoo

developed by Bloopark

Mercedes Scenna

Read Next

about us

We are a specialized Odoo Agency and Odoo Partner, based in Magdeburg / Germany. Our team consists of: Project Managers, Odoo Developers, Designers and Online Marketing Staff. We develop ERP solutions for small and medium-sized companies on a high technical and visual level. The goal: to make business processes efficient, reproducible and controllable.