Estoy usando introjs para crear un recorrido por mi aplicación. He buscado en bastantes lugares en línea y en la documentación, pero parece que no puedo encontrar en ninguna parte un método de cómo ejecutar una función al omitir o hacer clic en Listo en el recorrido. Estoy tratando de hacer que se almacene una cookie y el recorrido no se vuelva a ejecutar hasta que un usuario lo solicite o un nuevo usuario ingrese al sitio. ¡Cualquier ayuda sería genial, gracias!
$(function(){ var introguide = introJs(); introguide.setOptions({ showProgress: true, steps: [ { hidden } ] }); introguide.start(); });Este código permite almacenar la información del tour.
var introguide = introJs(); window.addEventListener('load', function () { var doneTour = localStorage.getItem('MyTour') === 'Completed'; if (doneTour) { return; } else { introguide.start() introguide.oncomplete(function () { localStorage.setItem('MyTour', 'Completed'); }); introguide.onexit(function () { localStorage.setItem('MyTour', 'Completed'); }); } });Sí, hay una manera, pero con algunas advertencias.
Primero, después de cargar intro.js, tendrá un introJs global llamado con una propiedad fn (enfoque de complemento estándar de jquery).
Al configurar una función con la función oncomplete() en introJS.fn, puede realizar algunas acciones cuando el usuario presiona el botón "Listo".
Aquí hay un ejemplo que solo muestra un mensaje de consola:
introJs.fn.oncomplete(function() { console.log("Finished"); });
Esto funciona como se esperaba. Puede poner esto en un script en cualquier momento después de incluir la biblioteca intro.js.
Sin embargo, la funcionalidad del botón 'saltar' solo llamará al controlador 'incompleto' si está en el último paso. El autor del código ve que no está completo y, por lo tanto, no ejecuta ese código, como puede ver en este extracto del código:
skipTooltipButton.onclick = function() { if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') { self._introCompleteCallback.call(self); } _exitIntro.call(self, self._targetElement); };Esto básicamente dice que debe estar en el último paso para considerar llamar a la devolución de llamada completa.
Por supuesto, puede bifurcar el código y eliminar la restricción. Le sugiero que si va a hacer eso, cree un _introSkipCallback de una manera similar a _introlCompleteCallback e invoque eso a menos que esté en el último paso donde podría invocar ambas funciones si están presentes.
Espero que esto ayude.
Use oncomplete para funciones después de hacer clic en 'Listo'
Use onexit para funciones después de hacer clic en 'Omitir'
Función de bonificación: onchange registrará cada paso, esto se puede usar para llamar funciones en un paso en particular
document.getElementById('startButton').onclick = function() { // log each step introJs().onchange(function(targetElement) { console.log(this._currentStep) if (this._currentStep === 3){ stepThreeFunc() } }).start() // clicking 'Done' .oncomplete(function(){ someFunc() }) // clicking 'Skip' .onexit(function(){ someOtherFunc() }); };