Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Hopscotch product tours Popup Only Once Per User and not shown after page reload is it possible?

Posted on 2016-09-08
5
103 Views
Last Modified: 2016-09-23
I use Hopscotch product tours on a front page and I'd like to show it only one per user and not shown after page reload. please check  below my code and attached code.
Any help is much appreciated! Thanks!

/* globals hopscotch: false */

/* ============ */
/* EXAMPLE TOUR */
/* ============ */


var tour = {
  id: 'hello-hopscotch',
  steps: [
    {
      target: 'MiddleContent_btndocuments',
      title: 'Welcome to Hopscotch!',
      content: 'Hey there! This is an example Hopscotch tour. There will be plenty of time to read documentation and sample code, but let\'s just take some time to see how Hopscotch actually works.',
      placement: 'bottom',
      arrowOffset: 60
    },
    {
      target:'Downloads',
      title: 'Where to begin',
      content: 'At the very least, you\'ll need to include these two files in your project to get started.',
      placement: 'right',
      yOffset: -20
    },
    {
      target: 'list-lenders',
      placement: 'bottom',
      title: 'Define and start your tour',
      content: 'Once you have Hopscotch on your page, you\'re ready to start making your tour! The biggest part of your tour definition will probably be the tour steps.'
    },
    {
      target: 'support',
      placement: 'bottom',
      title: 'Starting your tour',
      content: 'After you\'ve created your tour, pass it in to the startTour() method to start it.',
    },
    {
      target: 'login',
      placement: 'bottom',
      title: 'Basic step options',
      content: 'These are the most basic step options: <b>target</b>, <b>title</b>, <b>content</b>, and <b>placement</b>. For some steps, they may be all you need.',
    },
    {
      target: 'index',
      placement: 'bottom',
      title: 'Hopscotch API methods',
      content: 'Control your tour programmatically using these methods.',
    }
  ],
  showPrevButton: true,
  scrollTopMargin: 100
},

/* ========== */
/* TOUR SETUP */
/* ========== */
addClickListener = function(el, fn) {
  if (el.addEventListener) {
    el.addEventListener('click', fn, false);
  }
  else {
    el.attachEvent('onclick', fn);
  }
},

init = function() {
  var startBtnId = 'startTourBtn',
      calloutId = 'startTourCallout',
      mgr = hopscotch.getCalloutManager(),
      state = hopscotch.getState();

  if (state && state.indexOf('hello-hopscotch:') === 0) {
    // Already started the tour at some point!
    hopscotch.startTour(tour);
  }
  else {
    // Looking at the page for the first(?) time.
    setTimeout(function() {
      mgr.createCallout({
        id: calloutId,
        target: startBtnId,
        placement: 'left',
        title: 'Take an example tour',
        content: 'Start by taking an example tour to see Hopscotch in action!',
        yOffset: -20,
        arrowOffset: 20,
        width: 240
      });
    }, 100);
  }

  addClickListener(document.getElementById(startBtnId), function() {
    if (!hopscotch.isActive) {
      mgr.removeAllCallouts();
      hopscotch.startTour(tour);
    }

  });
 
  Modernizr.addTest('localstorage', function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
});
 
};
init();
hopscotch.js
0
Comment
Question by:Johnson Thomas
  • 3
  • 2
5 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41790790
The easiest way to do this is to use a cookie

before loading hopscotch check if the cookie exists - if it does not then proceed with initialising it and set the cookie.
If the cookie is found then simply ignore the init

Consider this code adapted from MDN
if (document.cookie.replace(/(?:(?:^|.*;\s*)showHopScotch\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    // Do HopScotch init here
    init();
    document.cookie = "showHopScotch=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}

Open in new window

0
 

Author Comment

by:Johnson Thomas
ID: 41791029
Thanks for you comments

i am the beginner of jquery i try to this code but after page reload callout popup is showing again.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41791040
Please post code.
0
 

Author Comment

by:Johnson Thomas
ID: 41791050
Hi sir

In first i provided code and attached hopscotch.js also. please check below code

/* globals hopscotch: false */

/* ============ */
/* EXAMPLE TOUR */
/* ============ */



var tour = {
  id: 'hello-hopscotch',
  steps: [
    {
      target: 'MiddleContent_btndocuments',
      title: 'Welcome to Hopscotch!',
      content: 'Hey there! This is an example Hopscotch tour. There will be plenty of time to read documentation and sample code, but let\'s just take some time to see how Hopscotch actually works.',
      placement: 'bottom',
      arrowOffset: 60
    },
    {
      target:'Downloads',
      title: 'Where to begin',
      content: 'At the very least, you\'ll need to include these two files in your project to get started.',
      placement: 'right',
      yOffset: -20
    },
    {
      target: 'list-lenders',
      placement: 'bottom',
      title: 'Define and start your tour',
      content: 'Once you have Hopscotch on your page, you\'re ready to start making your tour! The biggest part of your tour definition will probably be the tour steps.'
    },
    {
      target: 'support',
      placement: 'bottom',
      title: 'Starting your tour',
      content: 'After you\'ve created your tour, pass it in to the startTour() method to start it.',
    },
    {
      target: 'login',
      placement: 'bottom',
      title: 'Basic step options',
      content: 'These are the most basic step options: <b>target</b>, <b>title</b>, <b>content</b>, and <b>placement</b>. For some steps, they may be all you need.',
    },
    {
      target: 'index',
      placement: 'bottom',
      title: 'Hopscotch API methods',
      content: 'Control your tour programmatically using these methods.',
    }
  ],
  showPrevButton: true,
  scrollTopMargin: 100
},

/* ========== */
/* TOUR SETUP */
/* ========== */
addClickListener = function(el, fn) {
  if (el.addEventListener) {
    el.addEventListener('click', fn, false);
  }
  else {
    el.attachEvent('onclick', fn);
  }
},

init = function() {
  var startBtnId = 'startTourBtn',
      calloutId = 'startTourCallout',
      mgr = hopscotch.getCalloutManager(),
      state = hopscotch.getState();

  if (state && state.indexOf('hello-hopscotch:') === 0) {
    // Already started the tour at some point!
    hopscotch.startTour(tour);
  }
  else {
    // Looking at the page for the first(?) time.
    setTimeout(function() {
      mgr.createCallout({
        id: calloutId,
        target: startBtnId,
        placement: 'left',
        title: 'Take an example tour',
        content: 'Start by taking an example tour to see Hopscotch in action!',
        yOffset: -20,
        arrowOffset: 20,
        width: 240
      });
    }, 100);
  }

  addClickListener(document.getElementById(startBtnId), function() {
    if (!hopscotch.isActive) {
      mgr.removeAllCallouts();
      hopscotch.startTour(tour);
    }

  });
 
  Modernizr.addTest('localstorage', function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
});  

};
if (document.cookie.replace(/(?:(?:^|.*;\s*)showHopScotch\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    // Do HopScotch init here
    init();
    document.cookie = "showHopScotch=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}
0
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41791127
I have put together a sample using the code from MDN - they have a more general solution in the form of an executeOnce function which you can read about here (https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#Example_5_Do_something_only_once_–_a_general_library)
The sample below shows a popup once.
Refresh the page to see it does not show again.
Click the link to reset
CSS
<style type="text/css">
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.75);
}
#popup {
	width: 50%;
	left: 25%;
	position: fixed;
	background: #fff;
	padding: 15px;
	height: 50%;
	top: 25%;
}
.close {
  background: url("images/close.png") no-repeat center center;
  display: block;
  height: 36px;
  opacity: 1;
  position: absolute;
  right: -18px;
  top: -18px;
  width: 36px;
}
</style>

Open in new window

HTML
     <p>Refresh the page to show that dialog does not show again</p>
	<p>Click <a href="#" class="reset">here</a> to reset and reload</a>
...
<div id="popup" style="display: none">
	<a href="#" class="close"></a>
	<h1>Sample Tour</h1>
	<p>Sample text to demonstrate concept</p>
</div>

Open in new window

JavaScript
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- START "jQuery Source" -->
<script>
//
// executeOnce sourced from MDN - https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#Example_5_Do_something_only_once_–_a_general_library
//
function executeOnce () {
  var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string";
  if (bImplGlob) { argc++; }
  if (argc < 3) { throw new TypeError("executeOnce - not enough arguments"); }
  var fExec = arguments[0], sKey = arguments[argc - 2];
  if (typeof fExec !== "function") { throw new TypeError("executeOnce - first argument must be a function"); }
  if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { throw new TypeError("executeOnce - invalid identifier"); }
  if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") { return false; }
  fExec.apply(argc > 3 ? arguments[1] : null, argc > 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
  document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : "");
  return true;
}

// COOKIE NAME TO USE 
var cookiename = 'showHopScotch';

// FUNCTION TO CALL ONCE
function init()
{
	var popup = $('#popup').remove();
	var overlay = $('<div/>').addClass('overlay');
	$('body').append(overlay);
	overlay.append(popup.show());
}

// INITIATE EXECUTE ONCE WITH CALLBACK (init) AND 
// COOKIE NAME
executeOnce(init, null, null, cookiename);

// SOME HELPER CALLBACKS TO CLOSE POPUP
// AND RESET PAGE
$(function() {
	$('.close').click(function(e){ 
		e.preventDefault();
		$('#popup, .overlay').remove();
	});
	
	$('.reset').click(function(e) {
		e.preventDefault();
		document.cookie = encodeURIComponent(cookiename) + '=0; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/';
		location.reload();
	});
});
</script>

Open in new window

Working sample here
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

838 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question