Bootstrap tour 'end tour' when clicked stops the tour for good

Question

I have a tour currently running on my site, but it doesn't seem to actually keep track of if the user has clicked End Tour. Meaning that if they click it once, it ends the tour, but then when they revisit the page, the tour will automatically start again as though it's the first time they've landed on that page.

var tour = new Tour({
    backdrop:true,
    onEnd:function(t){
        var last = t._options.steps.length;
        if(t._current==last-1){
            $.post( "home/tourCompleted", function( data ) {});
            //$('#tourTracking').attr("step",0);
            //$("#tourTracking").addClass("hidden");
        }else{
            if(t._current==0){
                $.post( "home/setCurrentStepTour/0", function( data ) {});
                //$('#tourTracking').attr("step",0);
            }else{
                $.post( "home/setCurrentStepTour/"+t._current, function( data ) {});
                //$('#tourTracking').attr("step",t._current);
            }
        }

        if($.browser.device){
            $("#dropdownToolbar").removeClass("open4tour open");
        }

        $("html,body").css('overflow', 'auto');
        document.body.removeEventListener('touchstart',null);

    },
    onShown: function(tour) {
        var stepElement = getTourElement(tour);
        $(stepElement).after($('.tour-step-background'));
        $(stepElement).after($('.tour-backdrop'));
    }
});

function getTourElement(tour){
    return tour._options.steps[tour._current].element
}

var bookcount = <?php echo count($lstscbook)?>;

if (bookcount == 0){
    $('.tour-tour-0').addClass('noBookTour');
    tour.addSteps([
        {...}
    ]);
}else{ ... }

<?if(isset($redir4tour) && $redir4tour==TRUE){?>

    var redir4tour=true;
<?}else{?>
    var redir4tour=false;
<?}?>

if(redir4tour)window.history.pushState({},"", "<?=base_url()?>");

if(($('#tourTracking').attr("step")==0 && !(<?php echo (isset($tour['completed']) ? $tour['completed'] : "false" )?>)) || redir4tour){
    document.body.addEventListener('touchstart', function(e){ return true; });
    $("html,body").css('overflow', 'hidden');
    window.scrollTo(0, 0);
    tour.init();
    tour.restart(); //using restart -> https://github.com/sorich87/bootstrap-tour/issues/140
}

$("a#tourTracking").click(function(e){
    document.body.addEventListener('touchstart', function(e){ return true; });
    $("html,body").css('overflow', 'hidden');
    window.scrollTo(0, 0);
    var step = $('#tourTracking').attr("step");
    if($.browser.device && (step==2 || step==14 || step==19 || step==20 || step==21)){//steps in toolbar responsive. have to open toolbar before set step!
        $("#dropdownToolbar").addClass("open4tour");
        $("#responsiveToolbar").click();
    }

    window.localStorage.clear();
    tour.setCurrentStep(step);
    tour.init();
    tour.restart(); //using restart -> https://github.com/sorich87/bootstrap-tour/issues/140
});

score 1 · Answer 1 · answered Sep 09 '15 at 16:29

1

I believe this uses window.localStorage by default for persistence. Are you clearing this with window.localStorage.clear(); at the end?

answered Sep 09 '15 at 16:29

user1964234

129
9

Yeah, we have a window.localStorage.clear at the bottom, 5 lines up from it. – Mark Fenske Sep 15 '15 at 02:58
Does your tour persistence issue resolve if you remove this? – user1964234 Sep 17 '15 at 16:48

score 0 · Answer 2 · answered Sep 21 '18 at 01:59

0

You can set the option: storage: false to disable this behavior

answered Sep 21 '18 at 01:59

Romias

13,783
7
56
85

score 0 · Answer 3 · answered Sep 21 '18 at 20:46

0

I had to add this line right after the initialization of "var tour = new Tour({"

name: 'tourNew' + Date.now().toString(),

Try that and see if it works for you as well.

answered Sep 21 '18 at 20:46

Austin

156
2
6

Bootstrap tour 'end tour' when clicked stops the tour for good

3 Answers3