Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Issue with going back between multi-site steps between pages #367

Open
ghost opened this issue May 9, 2018 · 0 comments
Open

Issue with going back between multi-site steps between pages #367

ghost opened this issue May 9, 2018 · 0 comments

Comments

@ghost
Copy link

ghost commented May 9, 2018

Hi,

I'm facing an issue when going backwards in a tour when steps are set over multiple pages.

Hopscotch will advance forward as normally expected across multiple pages, I have implemented some helper functions to aid in page navigation backwards and forwards. When going back through the steps, hopscotch will instead stay on the current step, while firing the onPrev handler to navigate to a previous page.

Here is a snippet of my steps code:

                {
                    target:         'hs_menu-focus',
                    placement:      'bottom',
                    title:          'Main Menu',
                    content:        'Some Content',
                    xOffset:        'center',
                    yOffset:        50,
                    arrowOffset:    'center',
                    onShow:         ['dark-backdrop']
                },
                {
                    target:         'hs_main-menu-1',
                    placement:      'top',
                    title:          'Nav Bar',
                    content:        'Some Content',
                    xOffset:        'center',
                    arrowOffset:    'center',
                    showNextButton: false,
                    nextOnTargetClick: true,
                    onShow:         ['hover-effects'],
                    onPrev:         ['undo-hover-effects'],
                    onNext:         ['undo-hover-effects'],
                    multipage:      true
                },
                //Step shown after navigation to the new page:
                {
                    target:         '#menu-item-1353 > a',
                    placement:      'bottom',
                    title:          'Menu Link on Second Page',
                    content:        'Some Content',
                    xOffset:        'center',
                    arrowOffset:    'center',
                    onShow:         [['hover-effects'],['dark-backdrop']],
                    onPrev:         [['undo-hover-effects'],['nav-to','home']],
                    onNext:         ['undo-hover-effects']

                }

I've defined the handler to go back as ['nav-to','home'] within the onPrev option of the third step, where I'm using the passed string home to determine the page to navigate to with some switch case logic and window.location.href which shouldn't impede on Hopscotch's behaviour.

Looking at chrome session storage:

(Going forwards after step 0)

Step 1: main-tour:1
Step 2: main-tour:2
Step 3: main-tour:3 <-- This is on a second page

(Now backwards from this point -- Clicking 'back')

Step 2: main-tour:3:2 <-- This is session state after navigating to the previous page

This is the sticking point, hopscotch will display the 3rd step bubble instead of the 2nd step bubble here after firing the onPrev handler and navigating back to the previous page. I'm not sure what I'm missing, but if anyone has any ideas i'll be glad to hear them.

Thanks

PS: I've seen an issue already raised here with a similar problem, however I have followed the solution detailed in there with no luck.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

0 participants