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: 

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
...
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>
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:

addon_tour
|_views
  |_assets.xml
|_static
  |_src
    |_js
       |_tour_welcome.js
    |_less
      |_main.less
|_tests
|_ __init__.py
|_ __openerp__.py

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.

(function () {

  'use strict';


  var _t = openerp._t;

  var website = openerp.website;

  website.ready().done(function() {

  openerp.Tour.register({

      id:   'manager_tour_intro',

      name: "Intro Tour for Managers",

      path: '/bahn/manager/order/547GJU56JG',

      mode: 'tour',

      steps: [

          {

              title:     _t("Welcome to the shop"),

              content:   _t("You successfully registered in our site. This guide will help you get around and show you some features."),

              popover:   { next: _t("Continue") },

          },

...

          {

              title:     "Thanks!",

              content:   _t("This tutorial is finished. To discover more features, continue with the next Tutorial."),

              popover:   { next: _t("Next Tutorial"), end: _t("Close Tutorial") },

          },

      ]

  });

});


}());

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.

import openerp.tests
@openerp.tests.common.at_install(False)
@openerp.tests.common.post_install(True)
class TestUi(openerp.tests.HttpCase):
   def tour_01_general(self):
       self.phantom_js(
           "/",
           "openerp.Tour.run('manager_tour_intro', 'test')"
           "openerp.Tour.tours.manager_tour_intro", 
login=”admin” password=”admin”)


<?xml version="1.0" encoding="utf-8"?>
<openerp>
 <data>
   <!-- Assets -->
   <template id="tour_assets_frontend" inherit_id="website.assets_frontend" name="website_contract_manager" priority="9999">
     <xpath expr="." position="inside">
       <script type="text/javascript" src="/pr_lr_website_tour/static/src/js/main.js"></script>
     </xpath>
   </template>
 </data>
</openerp>

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: 

<a onClick=”openerp.Tours.run(‘tour_id’)” href=”#” class=”btn btn-link”></a>

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

Odoo image and text block

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.