Itinerary Sidebar

A curated list of specific products rendered as a compact itinerary — ideal for a sidebar beside blog or CMS content.

Pattern

Fetch products by ID with haven.fetch.getProducts()
Pass the response as data to .directory.init()
Use format: 'itinerary'

HTML

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Itinerary</title>

  <script src="https://kit.havendestinations.ca/YOUR_KIT_ID.js"></script>
  <link rel="stylesheet" href="/haven-theme--default.css" />
</head>
<body>

  <div class="page-layout">
    <main class="page-content">
      <!-- Your CMS / blog content here -->
      <h1>Day Trip Itinerary</h1>
      <p>Explore these recommended stops...</p>
    </main>

    <aside class="itinerary-sidebar">
      <div id="haven-app"></div>
    </aside>
  </div>

  <style>
    .page-layout {
      display: flex;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .page-content { flex: 1; }
    .itinerary-sidebar {
      width: 320px;
      flex-shrink: 0;
    }
  </style>

  <script>
    (function () {
      var poll = setInterval(function () {
        if (window.haven && haven.ready && haven.ready()) {
          clearInterval(poll);

          haven.fetch.getProducts(function (response) {
            haven.config({
              templatePath: 'https://YOUR_TEMPLATE_HOST/haven-templates/',
              userTemplates: [
                'haven-directory-itinerary-item.html',
                'haven-directory-detail.html',
              ],
              useMapBox: false,
              useFontAwesome: false,
            })
            .directory.init({
              format: 'itinerary',
              data: response,
              routing: {
                path: '/directory/',
                type: 'hash',
                doPathChange: false,
                hashDocument: '/directory/',
              },
              selector: '#haven-app',
              options: {
                sort: 'ids',
                cols: 1,
                maxWidth: 320,
                includeLightbox: true,
                lightbox: { expandDirection: 'bottom' },
              },
            })
            .render();
          }, 'plugin', { ids: [1234, 5678, 9012, 3456] });
        }
      }, 10);
    })();
  </script>

</body>
</html>

Key settings

Setting	Value	Why
`format: 'itinerary'`	Itinerary layout	Compact sidebar items
`data: response`	Pre-fetched products	Curated by ID, not full directory
`sort: 'ids'`	Preserve fetch order	Maintains your curated sequence
`doPathChange: false`	No URL updates	Sidebar should not change page URL
`hashDocument`	Directory path	Hash routing works if user opens detail

Placeholders

Replace [1234, 5678, 9012, 3456] with your Haven product IDs.

Itinerary Sidebar ​

Pattern ​

HTML ​

Key settings ​

Placeholders ​

Pattern

HTML

Key settings

Placeholders