Solved

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

Posted on 2016-09-08
5
59 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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
Please post code.
0
 

Author Comment

by:Johnson Thomas
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
ust html in ms/access WebBrowswer 11 41
HTML page and JavaScript 2 49
dynamic menu in asp.net c# 11 25
Achieve json result 2 24
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now