Bootstrap tour on multiple pages stops on other page

Question

We want to use the bootstrap tour script (http://bootstraptour.com) on our SPA.

Since we want to navigate through multiple pages (what is possible), I placed the tours into the rootScope and I defined some functions to start the tour. My thought was that the rootScope is always available in the app so have always access to the tour.

The first steps are shown, but when I want to go further on another, the tour stops after the redirect. So the user is on the next page but with no tour...

Since we are using angular translate on the tour, we can't place the tour in a separate file to load outside angular.

This is the code for one tour, (we have 4 different tours) placed in the rootScope. For the readability, I removed some steps.

So in this code, the tour stops after step 3, but it forwards to the path from step 4

var generalTour = new Tour({
        debug: true,
        name: "GeneralTour",
        storage: window.localStorage,
        steps: [
            { //1
                element: '#generalTourHome',
                title: $filter('translate')('START_WITH_PRISMANOTE'),
                content: $filter('translate')('GENERALTOUR_WELCOME'),
                path: '/retailer/home'
            },
            { //2
                element: '#generalTourMyShopMenu',
                title: $filter('translate')('MORE_SHOPS'),
                content: $filter('translate')('HERE_YOU_WILL_FIND_YOUR_SHOPS'),
                path: '/retailer/home'
            },
            { //3
                element: '#generalTourMyShopIcon',
                title: $filter('translate')('SHOP_DATA'),
                content: $filter('translate')('CLICK_ON_SHOP_ICON'),
                path: '/retailer/home'
            },
            { //4
                element: '#generalTourFillInInformation',
                title: $filter('translate')('FILL_IN_DATA'),
                content: $filter('translate')('FILL_IN_YOUR_DATA'),                 
                path: '/retailer/shop'
            },
            { //5
                element: '#generalTourBrands',
                title: $filter('translate')('SHOP_BRANDS'),
                content: $filter('translate')('INDICATE_WHICH_BRANDS_YOU_ARE_USING'),   
                path: '/retailer/shop'              
        },
        ]
    });

$rootScope.startGeneralTour = function(){
    generalTour.init();
    generalTour.start(true);
    generalTour.restart();
}

score 0 · Answer 1 · answered Aug 14 '18 at 10:48

It seems like you are starting AND restarting the Tour on both pages. You should put a condition on the /retailer/shop page and if the tour needs to continue, don't restart it:

$rootScope.startGeneralTour = function(){

    generalTour.init();

    if( some_function__is_page( '/retailer/shop' ) && !generalTour.ended() ){
        generalTour.start(true);
    } else {
        generalTour.restart();
    }
}

You can skip checking if you are on the /retailer/shop page in that conditional if you also want to continue the tour on the /retailer/home page in cases where user didn't actually end the tour but for example he refreshed the page.

Bootstrap tour on multiple pages stops on other page

1 Answers1