gamunax
commented
6 years ago
id:'tour-ota',
i18n:{
nextBtn: 'Continuar',
prevBtn: 'Atras',
doneBtn: 'Cerrar Tour'
},
steps: [
{
target: 'tourBusUnoIda',
title:'Hola!',
content: 'En esta sección, podrá seleccionar sus asientos para su viaje',
placement: 'right',
onNext: function() {
$('#tourBusUnoIda').removeClass('ubicacion-tour');
$('#busidaseleccion').addClass('ubicacion-tour');
},
onEnd: function() {
$('#botonpagarahora').removeClass('ubicacion-tour');
$('#fondo').removeClass('overlay-tour');
hopscotch.endTour([true]);
}
},
{
target: 'busidaseleccion',
title:'Reservar asientos',
content: 'Haga clic en un asiento para continuar',
placement: 'left',
showNextButton: false,
showPrevButton: false,
nextOnTargetClick: true,
onNext: function() {
$('#busidaseleccion').removeClass('ubicacion-tour');
$('#wrapperFormularioIda').addClass('ubicacion-tour');
}
},
{
target: 'formularioida',
title:'Registro de pasajeros',
content: 'Ingrese los datos del pasajero a viajar',
placement:'left',
showPrevButton: false,
yOffset: -40,
onNext: function() {
$('#wrapperFormularioIda').removeClass('ubicacion-tour');
$('#botonpagarahora').addClass('ubicacion-tour');
}
},
{
target: document.querySelector("#botonpagarahora"),
title: 'Haga clic aquí para pagar',
placement: 'top',
showPrevButton: false
}
],
onStart: function() {
$('#tourBusUnoIda').addClass('ubicacion-tour');
$('#fondo').addClass('overlay-tour');
},
onEnd: function() {
$('#botonpagarahora').removeClass('ubicacion-tour');
$('#fondo').removeClass('overlay-tour');
hopscotch.endTour([true]);
},
showPrevButton: true,
scrollTopMargin: 100
};
let state = hopscotch.getState();
hopscotch.startTour(this.tour,0);
}```
I need to run a function when the user clicks on 'done' or close button. But apparently 'onClose' and 'onEnd' callbacks are not working. Here is my tour:
var tour = { id: "hello-hopscotch", steps: [{ title: "<img src='/static/images/sparky_tipster.png' class = 'sparky-tipster'>Sparky The Tipster", content: "This ticket is now created and appointed to you. If you wish to appoint this to someone else, please change appointed to user.", target: "appointed-to", placement: "left", showCTAButton: true, ctaLabel: "Don't show again", onCTA: function() { hide_guide("Appointed Hint"); hopscotch.endTour() }, onEnd: function() { mark_done(); }, }, ] };Can anyone please guide me on which call back should be used here?