Laura Laura - 3 months ago 10
Javascript Question

Multiple tours with intro.js

We'd like to have one general multi-page tour and also page specific tours available for a web app. The multipage one is functioning, and the page specific one also triggers, but calls both tour data objects. Is there a way to have multiple tours on the same page?

function initTours(){

// Start intro tour
document.getElementById('startIntro').onclick = function() {
introJs().setOption('doneLabel', 'Next page').start('.intro-farm').oncomplete(function() {
window.location.href = 'nav_season.php?multipage=true';
});
};

var tourStep = $('.content .intro-farm').attr('data-step');
var nextLink = $('#nextTourLink').attr('href');
if (RegExp('multipage', 'gi').test(window.location.search)) {
introJs().setOption('doneLabel', 'Next page').goToStep(tourStep).start('.intro-farm').oncomplete(function() {
window.location.href = nextLink+'?multipage=true';
});
}

//Page specific
if ($('.page-tour').length > 0){
//Page specific tour
$('.pageHelp').on('click',function() {
introJs().start('.page-tour');
});
} else {
$('.pageHelp').on('click',function(){
$('#messageModal .row').html("<p>We don't have help tips for this page, but if you are stuck, please don't hesitate to <a href='#'>contact us</a>.</p>")
$('#messageModal').foundation('reveal', 'open');
});
}
}

Answer

Sure you can have multiple tours in a same page but then you should check the url of page and make a condition and preventing calling the first tour again.

For example suppose your page is boo.php, then for the first tour you should check whether window.location.pathname is equals to boo.php or not, and then show the first tour to the user and after redirecting to the next page (e.g. boo.php?anotherPage=true) check the url of page again and show the next tour to him.