Tour is not defined - Githubissues

thurdev commented 3 years ago

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>assets/icon_laranja.png">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>loader.css">
    <script src="https://kit.fontawesome.com/3cc432bb58.js" crossorigin="anonymous"></script>
    <title>Pleez - Admin Panel</title>
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Expires" content="-1">
  </head>
  <link rel="stylesheet" href="./assets/js/bootstraptour/build/css/bootstrap-tour-standalone.min.css">
  <body>
    <noscript>
      <strong>We're sorry but Vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="loading-bg">
      <div class="loading-logo">
        <img src="<%= BASE_URL %>logo.png" alt="Logo" style="width: 80px;">
      </div>
      <div class="loading">
        <div class="effect-1 effects"></div>
        <div class="effect-2 effects"></div>
        <div class="effect-3 effects"></div>
      </div>
    </div>
    <div id="app">

    </div>
    <!-- built files will be auto injected -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src='https://js.stripe.com/v3/'></script>
    <script src="./assets/js/bootstraptour/build/js/bootstrap-tour-standalone.min.js"></script>
    <script>
      var tour = new Tour({
        steps: [
        {
          element: "#etiquetas",
          title: "Title of my step",
          content: "Content of my step"
        }
      ]});

      // Initialize the tour
      tour.init();

      // Start the tour
      tour.start();
    </script>
  </body>
</html>

thurdev commented 3 years ago

Just updating, i removed the " . " from "./assets/" and now the lib is imported, but still doesn't work, i can like console.log(Tour) but nothing happen with tour.init() and tour.start()

stefaneidelloth commented 1 year ago

First I had issues dynamically loading bootstrap-tour. The solution for me was to use a load event handler that ensures that new Tour is called after the script has been loaded.

Second, only the first loading worked. After resetting the cache and reloading the page, I expected the tour to start again. However, it did not. In order to restart the tour I had to use the option

storage: false, // also see http://bootstraptour.com/api/

Maybe that option helps you, too.

That said... bootstrap-tour seems to be abandoned. Therefore, maybe use an alternative like intro.js if their license is fine for you.

sorich87 / bootstrap-tour

Tour is not defined #753