Tourguide.js

The following are a few examples of using Tourguide.js JSON data

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' JSON based approach. Provide a JSON array describing tour steps as [steps] property in tourguide init. 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>
          <span class="text-muted">$8</span>
        </li>
       ...

JavaScript

var steps = [
  {
    "selector": null,
    "step": 1,
    "title": "Lets look around",
    "content": "Click a button to advance to the next step of this tour.<br/> To stop this tour at any time click a button in the top-right corner.",
    "image": "https://images.unsplash.com/photo-1488375634201-b85b28653a79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80"
  },
  {
    "selector": "#cartDetails",
    "step": 2,
    "title": "Your cart",
    "content": "Example cart description text displays cart description"
  },
  {
    "selector": "#promoCode",
    "step": 3,
    "title": "Promo code",
    "content": "Example promo code text displays promo code description"
  },
  {
    "selector": "#paymentMethod",
    "step": 4,
    "title": "Payment method",
    "content": "Example payment method text displays payment method description"
  },
  {
    "selector": ".btn-primary[type=submit]",
    "step": 5,
    "title": "Continue button",
    "content": "Example continue button text displays continue button description"
  }
];
/*
 * Initialize Tourguide.js
*/
var tourguide = new Tourguide({steps: steps});
function startTour() {
	tourguide.start();
}
// Attach the touruide start evene to the button press
var tourbutton = document.getElementById("tourbutton");
tourbutton.addEventListener("click", startTour);