@openocean.tampa ah ok I understand your situation now. As youâve correctly identified, the approach I previously highlighted will unfortunately not work if youâre using reusables.
I have a workaround that should do the trick, but it will involve some additional workflows.
This demo app has a dashboard page with 2 reusable elements on it (reusable A and reusable B):
Back on the dashboard page, add a workflow action that goes to the next product tour step whenever the reusableâs âprogress_tour?â custom state is âyesâ
Add an additional step that changes the custom state back to ânoâ after the tour is progressed
Do the same thing for any other reusable elements you have and you should be able to get something like this:
Please note you will need to set the âCan click on highlighted elementsâ box to true for this to work:
Iâve left the editor where I created this mini demo available for everyone to view (link is here), so you can take a look at the underlying workflows.
Hope that helps and let me know if it works for you
Thanks for doing all this and breaking it down! I am traveling for a conference this week and wonât be able to implement until next week. Just so you donât think I am leaving you hanging like that haha. Very much appreciate all the support and will be sure to update once I get a chance!
The weird part is that the conditional seems to kick in after when I click back and function how I originally intended it to, but for some reason it doesnât the first time (which obviously is most important).
The plugin uses HTML rather than bbcode (which is whatâs applied if you click on the italics button in the rich text editor). To get italics, youâll need to put < i > tags around the text:
Are you placing the ProductTour element in the reusable elements themselves? Or on the page where the reusables are placed?
Youâll need to put the ProductTour element on the page.
If this doesnât help Iâm happy to take a look at your editor and try and figure out the problem If youâd like me to do this, can you send me a private message with a link to your editor?
Whoops, yup the < i > tags did the trick . Thanks haha.
And I actually was using the product tour in the reusable elements themselves but I think I found a workaround that solved the bug from occurring. I added a conditional to the page load workflow that triggers the custom event for the product tour that says when this element is visible.
So for my use case, only one of these reusable elements can be visible at a time and that means that only one of the product tours can be working at a time.
Strangely while the plugin highlights some elements it doesnât do the same for all elements. Finds the element location nicely, scrolls there but doesnât highlight it. Anyone had the same issue before?
Iâm not sure if I setup everything correctly but I have an issue.
There are some conditional steps on my product tour. Running the first tour works fine with the user selected condition. But the following tours (i mean if the user restarts the tour and select another condition) the tour starts from the beginning and firstly shows the previous selected condition steps and once it finished starts again with the current selected condition.
It was a bit difficult to explain but hopefully I did
When a user clicks the âRestart Tourâ button, Iâm simply starting the tour again using the âStart ProductTourâ action. I am not adding any steps in:
If you want to conditionally add steps to various points of a second instance of a tour, itâs going to be tricky Iâm afraid.
You could absolutely add in additional steps at the end of the tour by using the âAdd a stepâ for the new steps only and then using the âStart a ProductTourâ action to restart the tour. However, you wonât be able to new steps to the middle of the existing tour as there is currently no way to remove Steps from a tour.
One workaround would be to refresh the page after the tour has been completed for the first time. This will remove all steps from the tour. You could then allow the user to set new steps and effectively allow them to take the conditionally selected tour.
Apologies for the lengthy response but hope that helps.
Also, I think Iâve understood your question correctly, but if I havenât just let me know and we can try again
Iâve tried the solution you mentioned but unfortunately didnât work. Yes youâre right, when the page is refreshed the tour steps are being cleared. But its a bit annoying for the users.
My app is a financial planning app and we guide our users how to create plans according their revenue model choice. So each time the user choose different revenue model, we show them different fields. And users may want to see the other revenue model options right after guided one.
So, do you think is there any other way to clear the steps without refreshing the page?
I donât have a better workaround and I would really like to be able to offer you the ability to clear the existing tour steps.
Let me investigate how I might add this feature and Iâll get back to you by Monday evening with an update. No guarantees, but hopefully this should be possible.
Apologies for the inconvenience and appreciate the feedback.
Hi @enginalemdar, good news! I was able to add this functionality much more easily than expected
Iâve just released a new version of the plugin (version 2.4.0). It includes a new action called âRemove stepsâ.
You can use this action to clear all existing steps from a tour.
Iâve built a new page into the demo app (page here and editor here) that shows how it can be used.
Iâm loading the steps on page load as usual and triggering the tour. However, the âClear Steps and Run New Tourâ button in the side nav menu uses the new âClear stepsâ action and then adds alternative steps to the tour.
Let me know how you get on when youâre back and enjoy the conference!
. Thanks haha.
