Tourguide.js

Example usage of Tourguide.js' Remote URL approach

by Eugene Trounev

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LikaloLLC/[email protected]/tourguide.css">
<script src="https://cdn.jsdelivr.net/gh/LikaloLLC/[email protected]/tourguide.min.js"></script>
 <div class="container">
    <div class="py-5 text-center">
      <h2>Checkout form</h2>
      <p class="lead">Below is an example usage of Tourguide.js' Remote URL approach. Provide a src option on tourguide init to have it pull data from remote. Click [Start tour] button below to
        start the guided tour:</p>
      <p>
        <button class="btn btn-success btn-lg btn-block" id="tourbutton">
          Start tour
        </button>
      </p>
    </div>

    <div class="row">
      <div class="col-md-4 order-md-2 mb-4">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-muted">Your cart</span>
          <span class="badge badge-secondary badge-pill">3</span>
        </h4>
        <ul class="list-group mb-3" id="cartDetails">
          <li class="list-group-item d-flex justify-content-between lh-condensed">
            <div>
              <h6 class="my-0">Product name</h6>
              <small class="text-muted">Brief description</small>
            </div>
            <span class="text-muted">$12</span>
          </li>
          <li class="list-group-item d-flex justify-content-between lh-condensed">
            <div>
              <h6 class="my-0">Second product</h6>
              <small class="text-muted">Brief description</small>
            </div>
           ...

JavaScript

/*
 * Initialize Tourguide.js
*/
var tourguide = new Tourguide({
	src: "https://api.myjson.com/bins/a38lu"
});
function startTour() {
	tourguide.start();
}
// Attach the touruide start evene to the button press
var tourbutton = document.getElementById("tourbutton");
tourbutton.addEventListener("click", startTour);