How to create a button to start "Bootstrap Tour"?

Question

I installed my next module "D8: Bootstrap Tour" on my site "Drupal 8" which uses the theme "Bootstrap 3".

https://www.drupal.org/project/bs_tour

Here is the contents of the file bs-tour.js of the module :

(function ($, _, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.bsTour = {
    attach: function (context, settings) {
      $(window).on('load', function (event) {
        try
        {
          var tourOptions = $(drupalSettings.bs_tour.tour)[0];
          var tips = tourOptions.steps;
          var keyboard = tourOptions.keyboard;
          var debug = tourOptions.debug;
          var steps = [];

          for (var i = 0; i < tips.length; i++) {
            if ($(tips[i].element).length > 0) {
              tips[i].backdropPadding.top = parseInt(tips[i].backdropPadding.top);
              tips[i].backdropPadding.right = parseInt(tips[i].backdropPadding.right);
              tips[i].backdropPadding.bottom = parseInt(tips[i].backdropPadding.bottom);
              tips[i].backdropPadding.left = parseInt(tips[i].backdropPadding.left);

              switch (tips[i].backdrop) {
                case "0":
                  tips[i].backdrop = false;
                  break;

                case "1":
                  tips[i].backdrop = true;
                  break;
              }

              steps.push(tips[i]);
            }
          }

          if (steps.length) {
            var tour = new Tour({
              debug: debug,
              keyboard: keyboard,
              template: "<div class='popover tour'>\
              <div class='arrow'></div>\
              <h3 class='popover-title'></h3>\
              <div class='popover-content'></div>\
              <div class='popover-navigation'>\
              <button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\
              <span data-role='separator'>|</span>\
              <button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
              <button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
              </div>\
              </div>",
            });

            // Add steps to the tour
            tour.addSteps(steps);

            // Initialize the tour
            tour.init();

            // Start the tour
            tour.start();

            // Add tour object to drupalSettings to allow manipulating tour from other modules.
            // Example: drupalSettings.bs_tour.currentTour.end();
            drupalSettings.bs_tour.currentTour = tour;
          }

        } catch (e) {
          // catch any fitvids errors
          window.console && console.warn('Bootstrap tour stopped with the following exception');
          window.console && console.error(e);
        }
      });
    }
  };

})(window.jQuery, window._, window.Drupal, window.drupalSettings);

The visit starts automatically during the first visit to the site. My problem is that when the user clicks on "End the visit", the only way to restart the visit is to delete cookies from the browser. This module has no button to start the visit manually.

I created a custom block in Drupal with the following code:

<button class="btn btn-success btn-sm" data-target="#start"><i class="fa fa-compass fa-lg"></i> Commencer la visite</button>

I created in the js folder of my subtopic a file tour.js :

/**
 * @file
 * Bootstrap Tour.
 */

 var tourObject = drupalSettings.bs_tour.currentTour;
 if (tourObject && tourObject._options.steps.length) {
   tourObject.start();
 }

I modified the bootstrap_subtheme_front_office.libraries.yml file of my subtopic like this:

global-styling:
  css:
    theme:
      fonts/font-awesome/css/font-awesome.css: {}
#      bootstrap/dist/css/bootstrap.css: {}
#      css/bootstrap-cosmo.css: {}
      css/style.css: {}
#      css/style-noel.css: {}
#      css/style-nouvel-an.css: {}

bootstrap-scripts:
  js:
    bootstrap/js/affix.js: {}
    bootstrap/js/alert.js: {}
    bootstrap/js/button.js: {}
    bootstrap/js/carousel.js: {}
    bootstrap/js/collapse.js: {}
#    bootstrap/js/dropdown.js: {}
    bootstrap/js/modal.js: {}
    bootstrap/js/tooltip.js: {}
    bootstrap/js/popover.js: {}
    bootstrap/js/scrollspy.js: {}
    bootstrap/js/tab.js: {}
    bootstrap/js/transition.js: {}
    js/tour.js: {}

I cleaned the cache but the button does not work. Here is the page of my site, the button is in the menu on the left.

I found the solution :

I copy the file "bs-tour.js" of the module into the folder js of my sub-theme and I inserted the following code inside :

    $('#bs-tour-restart').click(function () {
        // Restart the tour
        tour.restart();
    });

The bs-tour.js file now looks like this :

(function ($, _, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.bsTour = {
    attach: function (context, settings) {
      $(window).on('load', function (event) {
        try
        {
          var tourOptions = $(drupalSettings.bs_tour.tour)[0];
          var tips = tourOptions.steps;
          var keyboard = tourOptions.keyboard;
          var debug = tourOptions.debug;
          var steps = [];

          for (var i = 0; i < tips.length; i++) {
            if ($(tips[i].element).length > 0) {
              tips[i].backdropPadding.top = parseInt(tips[i].backdropPadding.top);
              tips[i].backdropPadding.right = parseInt(tips[i].backdropPadding.right);
              tips[i].backdropPadding.bottom = parseInt(tips[i].backdropPadding.bottom);
              tips[i].backdropPadding.left = parseInt(tips[i].backdropPadding.left);

              switch (tips[i].backdrop) {
                case "0":
                  tips[i].backdrop = false;
                  break;

                case "1":
                  tips[i].backdrop = true;
                  break;
              }

              steps.push(tips[i]);
            }
          }

          if (steps.length) {
            var tour = new Tour({
              debug: debug,
              keyboard: keyboard,
              template: "<div class='popover tour'>\
              <div class='arrow'></div>\
              <h3 class='popover-title'></h3>\
              <div class='popover-content'></div>\
              <div class='popover-navigation'>\
              <button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\
              <span data-role='separator'>|</span>\
              <button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
              <button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
              </div>\
              </div>",
            });

            // Add steps to the tour
            tour.addSteps(steps);

            // Initialize the tour
            tour.init();

            // Start the tour
            tour.start();

            $('#bs-tour-restart').click(function () {
                // Restart the tour
                tour.restart();
            });

            // Add tour object to drupalSettings to allow manipulating tour from other modules.
            // Example: drupalSettings.bs_tour.currentTour.end();
            drupalSettings.bs_tour.currentTour = tour;
          }

        } catch (e) {
          // catch any fitvids errors
          window.console && console.warn('Bootstrap tour stopped with the following exception');
          window.console && console.error(e);
        }
      });
    }
  };

})(window.jQuery, window._, window.Drupal, window.drupalSettings);

I created a custom block with the following code :

<button class="btn btn-success btn-sm" id="bs-tour-restart"><i class="fa fa-compass fa-lg"></i> Commencer la visite</button>

I do not know if it's a good practice, but the button to start a tour works ;-)

cfox · Answer 1 · 2018-01-19T17:42:59.193

0

I think you'd need to delete/expire the cookie first with some javascript, then start the tour again.

function eraseCookie(name) {   
  document.cookie = name+'=; Max-Age=-99999999;';  
}

Update: If you're getting the "not a function" error try wrapping your code in:

$(document).ready(function() { [code here] });

edited Jan 19 '18 at 17:42

answered Jan 18 '18 at 14:59

cfox

431
2
6
18

Here are the tips of the developer https://www.drupal.org/project/bs_tour/issues/2933276 is "bootstrap_subtheme_front_office.libraries.yml" correct? what should I put in my jowl? How to launch the visit with a button? thank you – 3cfe5693 Jan 18 '18 at 15:09
I haven't used this module but generally speaking your javascript code should be in a file within your theme or module, then use the theme.libraries.yml file to include it. Looks like the module has good documentation on launching the tour, your question was upon completing it how do you launch it again. You would write a javascript function to kill the cookie, then launch the tour again. – cfox Jan 18 '18 at 16:01
Have you checked the console? It's throwing an error for your start tour code: "$ is not a function" in regards to this code: $("#start-tour").click(function(){ tour.init(); tour.restart(); }); – cfox Jan 19 '18 at 15:59
Yes, I tested several code, but I do not know the JS. I just deleted the contents of my JS file. What should I put in exactly? I found several questions, but no answer https://stackoverflow.com/questions/40262379/starting-bootstrap-tour-with-a-button-after-ending-tour-once?rq=1 – 3cfe5693 Jan 19 '18 at 16:32
I found the code and it works if I replace this tour.start(); by tour.restart(); I can not reproduce the same thing on my site. I paste the code js in my js file and the html in my block but it does not work. https://jsfiddle.net/isherwood/E2p9p/ – 3cfe5693 Jan 19 '18 at 19:15
In your fiddle I replaced start with restart and that worked. Have you removed everything else in your JS file and see if that gets it to work? – cfox Jan 19 '18 at 20:24
It's good, I updated my question. Can you tell me if it's ok ? – 3cfe5693 Jan 19 '18 at 21:20
Restart the "Tour" works. I have a menu collapse, how to force the closing of the menu at the launch of "Tour"? Or how to reload the page at the launch of "Tour"? – 3cfe5693 Jan 20 '18 at 11:48
I opened another question about "Tour" https://stackoverflow.com/questions/48357072/how-to-close-the-menu-collapse-when-bootstrap-tour-starts – 3cfe5693 Jan 20 '18 at 21:37

How to create a button to start "Bootstrap Tour"?

1 Answers1