Hopscotch multipage tour does not work

Question

I am trying to implement hopscotch tour for my application which is in react.Multipage tour in hopscotch does not work properly.The documentation says that it works with sessionStorage and cookies and may be that is creating a problem.If these are the steps in page 1 before navigating

var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

and this in second page

    if (hopscotch.getState() === "hello-hopscotch:1") {
      hopscotch.startTour(
     id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "Configuration page",
          content: "Here is where I put my content.",
          target: "#configuration",
          placement: "bottom"
        }
      ]

 );
    }

What exactly should be the steps in first page and second page to make the tour navigate from one page to other page.

This does not work , after navigating into second page it still repeats the same step and sometimes it does not display any step. Can I get a detailed implentation of multipage touring using hopscotch for my react application.

Answer 1

As far as I see it, and I am also guessing here a little bit since I do not see the complete code, you do not define the tour object properly and then additionally do not start the tour properly on page2, and possibly also on page1. There (at least from pure js perspective) is also a syntax error which might explain why the code did not work.

The code on page1 should be:

var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

// Start the tour!
    hopscotch.startTour(tour);

What we do here, is we define "tour", and then we start it. Please note that multipage: true in step just before the step that should be on the next page will change behavior of how "state" works, and how it is advanced. You can always check states using hopscotch.getState()

The code on page2 should be:

var tour = {
id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "Configuration page",
          content: "Here is where I put my content.",
          target: "#configuration",
          placement: "bottom"
        }
      ]

 }; //note that you incorrectly had ); here before

if (hopscotch.getState() === "hello-hopscotch:1") {
      hopscotch.startTour(tour);
}

This should work for you.