Search code examples
javascripttwitter-bootstrapbootstrap-tour

How to handle multi page tours with Bootstrap-Tour and dynamic paths?


I can't for the life of me figure out how to get Bootstrap Tour to work across multiple dynamic url pages. My tour starts on the users page /<user> and I'm having them click a photo gallery and want tour to continue from that gallery page /<user>/<gallery>.

I'm using reflex because I want the user to select a gallery they have and the tour to continue on from the new page. I've tried like every possible combination of using/not using reflex, onNext, path, and redirect I can think of and what you'd think would work logically doesn't work at all so I don't even know... I thought path is used to tell the step what page to step should fire on but instead no matter what I try the script keeps trying to redirect to the path I specify and when my path contains a regex and its like trying to redirect to the regex which obviously doesn't work so its all a mess...


Solution

  • Alright so after hours of messing and trying various combinations of things I finally figured it out, the docs on the site need to be updated for sure. The example it gives for using regex with path is path: Regexp("/\/url\/[^/]+/i") which I knew was wrong from the beginning but still went with for a while trying to figure things out, and then of course when I did correct it how it should be I must not of been using the right combo of other properties.

    When all is said and done, you can use path to tell the script this rule applies to this page BUT to do so you must also pass false to redirect.

    So to accomplish what I was wanting, the first step actually doesn't need any onNext, path, or redirect property set, you can simply set reflex: true so it auto goes to the next step when your element is clicked, then the key is on your following step set path to what your page should be at and redirect: false set so it doesn't try to automatically redirect to your path which is a regex and not a valid url path.