0
Welcome Guest! Login
0 items Join Now

hopscotch

  • hopscotch

    Posted 5 years 8 months ago
    • Hi.
      Can you tell us more about the integration of hopscotch on your home page for the "Tour"? (For example, does the button "Take a tour" has a link .js file showing the steps of the tower? ...) Thanks
  • Re: hopscotch

    Posted 5 years 8 months ago
    • We pretty much followed the hopscotch documentation for the whole tutorial. We then created some custom javascript for the Take a tour button that basically let the Tour start OR resume from where you left. We also added some logic for the tooltip of the Take a tour to remember whether you closed it or not, so it doesn't get too annoying.

      You can see all the js code from our hopscotch_init.js , most of the file consists in the definition of the Tour steps, but at the bottom you can find the TourInstance which is our implementation of hopcotch.
      var TourInstance = {
          init: function(){
              var takeTour     = $('#take-tour'),
                  calloutMgr   = hopscotch.getCalloutManager(),
                  state        = hopscotch.getState(),
                  numericState = state ? parseInt(state.split(':')[1], 10) : null,
                  step         = null,
                  multipages   = [4, 5, 8, 9, 10, 11, 12, 13, 14]; // steps
      
              if (takeTour){
                  takeTour.on('click', function(e){
                      if (e) e.preventDefault();
                      calloutMgr.removeCallout('get-started');
      
                      if (!hopscotch.isActive){
                          if (numericState == null || numericState < 4){
                              window.scrollTo(0, 0);
                              setTimeout(function(){ hopscotch.startTour(Tour.getSteps()); }, 600);
                          } else {
                              hopscotch.startTour(Tour.getSteps());
                          }
                      }
                  });
      
                  if (!hopscotch.isActive && !(sticky.get('hide_rtv3_tour_bubble') || false)){
                      calloutMgr.createCallout({
                          id: 'get-started',
                          target: 'take-tour',
                          placement: 'bottom',
                          xOffset: 20,
                          title: 'Discover the new RTv3 features!',
                          content: 'Click the "Take a Tour" button to start a tour on the new RocketTheme site features.',
                          onClose: function(){
                              sticky.set('hide_rtv3_tour_bubble', true);
                          }
                      });
                      $(calloutMgr.getCallout('get-started').element).addClass('hidden-phone');
                  }
              }
      
              if (array(multipages).contains(numericState)) step = numericState;
              if (step !== null) hopscotch.startTour(Tour.getSteps(), step);
          }
      };

      Hope it answers all your questions :)
    • / Djamil Legato / Lead Developer /
  • Re: hopscotch

    Posted 5 years 8 months ago
    • Thank you very much. Just to check, you have posted three files: hopscotch.js, hopscotch.css and hopscotch_init.js to the site root as joomla index.php or somewhere else?
  • Re: hopscotch

    Posted 5 years 8 months ago
    • The hopscotch.js and hopscotch.css are in our assets folder, but those are the ones you can find in the hopscotch package.
    • / Djamil Legato / Lead Developer /

Time to create page: 0.072 seconds