Multi-page tour - Githubissues

thomasdarde commented 5 years ago

Hello, we use onNext: function() { document.location.href = '/backoffice/content/resellers/new?continue_tour=reseller-creation-step3'; }

to change page during a tour, with your (great !) fork it stops the tour, any way to bypass this ?

ibastevan commented 5 years ago

Do you need to try onNext: function(tour) { } ? the word tour usually goes in the function() brackets

thomasdarde commented 5 years ago

No it's not working . (we had this before it was lost when copy pasting)

ibastevan commented 5 years ago

It should work if you add it to the global tour options var tour = new Tour({ onNext: function (tour, stepnumber) { document.location.href = '/backoffice/content/resellers/new?continue_tour=reseller-creation-step3'; }, });

Although i'm not sure how you add it to specific step, i'm sure someone here will help with a better answer

ibastevan commented 5 years ago

Seems to work for me on the step options itself. you just need to make sure you have it set like this on the step: onNext: function (tour, stepnumber) { document.location.href = '/backoffice/content/resellers/new?continue_tour=reseller-creation-step3'; }

thomasdarde commented 5 years ago

Still not ok here, I'm using Safari, maybe that's why

ibastevan commented 5 years ago

Do you have any console errors? Can you show me your step options?

thomasdarde commented 5 years ago

no error in console;

ibastevan commented 5 years ago

Also you need to make sure you have given your tour a unique name in the global options. var tour = new Tour({ name: "myTour",

thomasdarde commented 5 years ago

the tour has a unique name

ibastevan commented 5 years ago

Are your pages tabs or ajax loaded content or something because your document.location.hrefs look like tabs not pages. If your going to a new page from a step, there shouldn't be any more steps in the array. On your new page you would need to setup a new Tour with a new array of steps.

thomasdarde commented 5 years ago

Ok, so if this is the way it works then I understand. I did Get away by passing a param and resume the tour if needed on the next page.

ibastevan commented 5 years ago

That's how i presume it works however don't quote me on it as I could be wrong. It just doesn't seem to be the way i am familiar with. If you are stepping between tabs within a page, or ajax loaded content, you can always try simulating button clicks such as
onNext: function (tour, stepnumber) { $('a[href*="step1"]').click(); } Give the repository owner (@IGreatlyDislikeJavascript) some time to respond to your query.

ibastevan commented 5 years ago

Or perhaps you found an error in your code as i see your links don't match up. In your third step you have resellers/new? whereas your other steps just show resellers? in the links.

thomasdarde commented 5 years ago

Just if someone else is searching for the same question : their is no error in my code , it's working as expected. bootstrap-toursit seams to not support multi page tours, and a small bit of code is needed to resume the tour on another page.

IGreatlyDislikeJavascript commented 5 years ago

Hi @thomasdarde , I'm a little unclear what the "small bit of code" is that you need to add. Just like you I use multi-page tours on pages loaded from a single root page with GET params (/index.php?page=something), and the only 2 requirements are to (a) ensure the tour & steps are set up correctly and (b) call tour.start on page load to start / continue the tour.

tour.start() will automatically resume the tour from the last tour step, assuming the tour name is the same etc. So as you're loading a URL with GET param /backoffice/content/resellers?continue_tour=reseller-creation-step3, I assume whatever is on the page loaded at /backoffice/content/resellers will initialize the tour and start it? That will work with nothing else required.

thomasdarde commented 5 years ago

That's more clear , so I need to "manually" call tour.start if a tour is in progress (the plugin does not automatically detect a tour is in progress and resumes it)

ibastevan commented 5 years ago

A Little Appreciation Goes A Long Way thank-you

IGreatlyDislikeJavascript commented 5 years ago

@thomasdarde

That's more clear , so I need to "manually" call tour.start if a tour is in progress (the plugin does not automatically detect a tour is in progress and resumes it)

Yes, exactly! I've just realized what you were asking :)

In short, you have to "manually" call tour.start because this is the only way Tourist can be certain you definitely want the tour to start. I won't write out the lengthy logic for this here, but when I worked through the scenarios it turned out there were many more cases for a "manual" start controlled by page code calling tour.start() than there were for an automatic start. An automatic start caused more UX challenges, and of course the two are mutually exclusive.

However if you did want to auto-start every time you initialize Tourist, and therefore rely on the onPreviouslyEnded() and other functions, simply add a call to tour.start() into the end of the function Tour(options) constructor code (around line 890).

If you wanted to be a bit more fancy, you can also use the _setState() function to write to browser localstorage to help with state persistence.

diesl commented 4 years ago

Today I stumbled about this issue and I wonder that nobody else complained about it?

In short, you have to "manually" call tour.start because this is the only way Tourist can be certain you definitely want the tour to start

It worked quite well with Bootstrap Tour, I do not see the problem about checking the current_step variables in LocalStorage, which for me is a quite certain sign for contination?

An automatic start caused more UX challenges

Which ones do you mean?

So effectively I have to program this previously existing behaviour myself now. Personally I think this should be handled by the library.

However, I think at least it should be documented that Tourist does not take care about Tour restarts across multiple pages.

IGreatlyDislikeJavascript / bootstrap-tourist

Multi-page tour #30