Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Is there any 'Done' button or tour end event? #343

Open
RamizSami opened this issue Aug 23, 2017 · 1 comment
Open

Is there any 'Done' button or tour end event? #343

RamizSami opened this issue Aug 23, 2017 · 1 comment

Comments

@RamizSami
Copy link

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?

@gamunax
Copy link

gamunax commented Mar 28, 2018

                                  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);
                              }```

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants