search

LinkedInAttic / hopscotch

A framework to make it easy for developers to add product tours to their pages.
Apache License 2.0
4.2k stars 666 forks source link

How to create multiple tours on one page? #372

Open myshaadi opened 5 years ago

myshaadi commented 5 years ago

Hi,

I am working on an app where I am using Hopscotch for the main tour when a user first enters the page. However, I am trying to find a way to implement a second tour on the same page, this time when the user does a certain action like click on a button.

I can't seem to find anything online for this... is it possible?

Thanks

sneakyfildy commented 5 years ago

http://linkedin.github.io/hopscotch Pls read the first article. It describes, how defined tour can be started. Just run hopscotch.startTour(secondDefinedTour) anytime and that's all. Having secondDefinedTour defined of course

FallenRo commented 5 years ago

I have the same problem as myshaadi. When I attempt to a second tour inside the onEnd() function of the first tour nothing happens. I've googled this but I found no relevant results other than this ticket.

@sneakyfildy as far as I can see, there is nothing in the documentation about linking two tours together, in the same page.. or maybe I am missing something?

Can anybody help?

Thanks!

sneakyfildy commented 5 years ago

The nature of your trouble is that hopscotch fires "onEnd" callback actually "while" doing "end" sequence, so it is not possible to start a new tour w/o hacks (via default "startTour" method). What you need to do is simply take out "startTour" call from synchronous execution flow by using setTimeout

https://jsfiddle.net/cmk0ozaL/9/

inspect "onTour1End_working" function and "onTour1End_not_working" one.

N.B. first usage of "setTimeout" has no technical reason, just to be able to put the call in the beginning of a script. Ignore it.

FallenRo commented 5 years ago

That worked! Thank you very much for replying this fast!

sneakyfildy commented 5 years ago

I guess you should close the ticket