I've build a simple multi-page tour that I'm going to demo to my team soon. I've got everything pretty much working apart form the fact that the step numbers don't advance (even though I move on to the next step) across the pages of the site.
On step 3 I want the user to click on a navigation item to move the tour forward.
Similarly on Step 4 I want them to click on a button to do the same
The step number gets stuck on '3' even once i've moved to step 4 and 5... It's only once I resume on moving forward on a single page that the step numbers start advancing again.
attached is my tour code:
hopscotch.registerHelper('fillText', function(textFieldId, textStr) {
document.getElementById(textFieldId).value = textStr;
});
var tour = {
id: "Sample-Tour",
nextOnTargetClick: true,
steps: [{
title: "Navigation Control",
content: "The Navigation Control lets you expand and collapse the Navigation Menu.",
target: document.querySelector('#t_Button_navControl'),
placement: "bottom",
},
{
title: "Navigation",
content: "The Navigation menu lets you move around the application. ",
target: "t_Body_nav",
placement: "right"
},
{
title: "Navigate to Store",
content: "Lets create a new store. Navigate to the Stores page by clikcing the link to the left",
target: "#t_TreeNav_3",
placement: "right",
multipage: true,
showNextButton: false
},
{
title: "Store Button",
content: "To create a new store, click the Add Store button",
target: document.querySelector('#add_store_button'),
placement: "left",
multipage: true,
showNextButton: false
},
{
title: "New Store",
content: "Here you can enter the detials for a store the details for the store. ",
target: document.querySelector('#P7_STORE_NAME_LABEL'),
placement: "bottom",
delay: 1000,
onShow: ["fillText", "P7_STORE_NAME", "Granny's Convenience Market"]
},
{
title: "New Store",
content: "And the date the store opened. ",
target: document.querySelector('#P7_STORE_OPEN_DATE_LABEL'),
placement: "bottom",
onShow: ["fillText", "P7_STORE_OPEN_DATE", "25-Jan-2018"]
},
{
title: "New Store",
content: "The red asterisk (*) indicates required fields. ",
target: document.querySelector('#P7_STORE_ADDRESS_LABEL'),
placement: "left"
}
]
};
addClickListener = function(el, fn) {
if (el.addEventListener) {
el.addEventListener('click', fn, false);
} else {
el.attachEvent('onclick', fn);
}
},
startBtnEl = document.getElementById("startTour");
if (startBtnEl) {
addClickListener(startBtnEl, function() {
if (!hopscotch.isActive) {
hopscotch.startTour(tour);
}
});
} else {
// Assuming we're on page 2.
if (hopscotch.getState() != "Sample-Tour:1") {
// tour id is hello-hopscotch and we're on the second step. sounds right, so start the tour!
hopscotch.startTour(tour);
}
}
I've build a simple multi-page tour that I'm going to demo to my team soon. I've got everything pretty much working apart form the fact that the step numbers don't advance (even though I move on to the next step) across the pages of the site.
On step 3 I want the user to click on a navigation item to move the tour forward. Similarly on Step 4 I want them to click on a button to do the same
The step number gets stuck on '3' even once i've moved to step 4 and 5... It's only once I resume on moving forward on a single page that the step numbers start advancing again.
attached is my tour code:
hopscotch.registerHelper('fillText', function(textFieldId, textStr) { document.getElementById(textFieldId).value = textStr; }); var tour = { id: "Sample-Tour", nextOnTargetClick: true, steps: [{ title: "Navigation Control", content: "The Navigation Control lets you expand and collapse the Navigation Menu.", target: document.querySelector('#t_Button_navControl'), placement: "bottom", }, { title: "Navigation", content: "The Navigation menu lets you move around the application.
", target: "t_Body_nav", placement: "right" }, { title: "Navigate to Store", content: "Lets create a new store.
Navigate to the Stores page by clikcing the link to the left", target: "#t_TreeNav_3", placement: "right", multipage: true, showNextButton: false }, { title: "Store Button", content: "To create a new store, click the Add Store button", target: document.querySelector('#add_store_button'), placement: "left", multipage: true, showNextButton: false }, { title: "New Store", content: "Here you can enter the detials for a store the details for the store. ", target: document.querySelector('#P7_STORE_NAME_LABEL'), placement: "bottom", delay: 1000, onShow: ["fillText", "P7_STORE_NAME", "Granny's Convenience Market"] }, { title: "New Store", content: "And the date the store opened. ", target: document.querySelector('#P7_STORE_OPEN_DATE_LABEL'), placement: "bottom", onShow: ["fillText", "P7_STORE_OPEN_DATE", "25-Jan-2018"] }, { title: "New Store", content: "The red asterisk (*) indicates required fields. ", target: document.querySelector('#P7_STORE_ADDRESS_LABEL'), placement: "left" } ] }; addClickListener = function(el, fn) { if (el.addEventListener) { el.addEventListener('click', fn, false); } else { el.attachEvent('onclick', fn); } }, startBtnEl = document.getElementById("startTour"); if (startBtnEl) { addClickListener(startBtnEl, function() { if (!hopscotch.isActive) { hopscotch.startTour(tour); } }); } else { // Assuming we're on page 2. if (hopscotch.getState() != "Sample-Tour:1") { // tour id is hello-hopscotch and we're on the second step. sounds right, so start the tour! hopscotch.startTour(tour); } }