Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2016-09-08
5
Medium Priority
?
194 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
[X]
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
  • 3
  • 2
5 Comments
 
LVL 59

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 59

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 59

Accepted Solution

by:
Julian Hansen earned 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to dynamically set the form action using jQuery.

610 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