I have set up a page tour using a Shepherd tour. I am trying to apply click events whenever the tour reaches a specific section. However, I am not able to trigger click events automatically.
buildPageTour() {
let tour = this.tour;
const step1 = tour.addStep({
id: 'guidedDashboard1',
text: '<h5>Hello!</h5>',
buttons: [
{
text: 'Skip',
action: tour.cancel,
secondary: true
},
{
text: 'Next',
action: tour.next
}
]
});
const step2 = tour.addStep({
id: 'guidedDashboard2',
text: 'Page tour 2',
attachTo: {
element: '.orientationStepArea',
on: 'bottom'
},
buttons: [
{
text: 'Skip',
action: tour.cancel,
secondary: true
},
{
text: 'Back',
classes: 'backBt',
action: tour.back
},
{
text: 'Next',
action: tour.next
}
]
});
}
<!-- begin snippet: js hide: false console: true babel: false -->So now when the page tour reaches the 2nd section, I want to trigger a click event for my toggle menu so that the page tour appears on the correct icon.
<div class="helpMenu" data-bind="css: {expanded: showMenu()}">
<div class="wrapper">
<!-- ko if: hasPageTour() -->
<div class="item" data-bind="click: launchPageTour, clickBubble: false">
<svg class="ico"><use xlink:href="Content/icons/icons.svg#infoBaloon" /></svg>
<span class="label">Page Tour</span>
</div>
<!-- /ko -->
<!-- ko if: realTimeFeedbackEnabled() -->
<div class="item" id="vFooterShareFeedback" data-bind="click: launchRealTimeFeedbackSurvey, clickBubble: false">
<svg class="ico"><use xlink:href="Content/icons/icons.svg#notes" /></svg>
<span class="label">Share Feedback</span>
</div>
<!-- /ko -->
<div class="item" data-bind="click: openDialog, clickBubble: false">
<svg class="ico"><use xlink:href="Content/icons/icons.svg#email" /></svg>
<span class="label">Contact Support</span>
</div>
<div class="item -close" data-bind="click: hideHelpMenu, clickBubble: false">
<svg class="ico"><use xlink:href="Content/icons/icons.svg#close" /></svg>
<span class="label">CLOSE</span>
</div>
</div>
</div>