Category Page

A directory locked to a single category — useful for dedicated landing pages like "Food & Drink" or "Accommodations".

Shorthand API

html

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

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

  <div id="haven-app"></div>

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

          haven.config({
            templatePath: 'https://YOUR_TEMPLATE_HOST/haven-templates/',
            userTemplates: ['haven-directory-list-item.html', 'haven-directory-detail.html'],
            useMapBox: false,
            useFontAwesome: false,
          })
          .render({
            type: 'directory',
            format: 'list',
            category: 'YOUR_CATEGORY',
            options: {
              sort: 'name',
              cols: 2,
              maxWidth: 1280,
              includeLightbox: true,
              showCategoryTitle: true,
              categoryTitleTag: 'h1',
            },
          });
        }
      }, 10);
    })();
  </script>

</body>
</html>

Fluent API alternative

javascript

haven.config({ /* global */ })
  .directory.init({
    category: 'YOUR_CATEGORY',
    options: {
      sort: 'name',
      cols: 2,
      includeLightbox: true,
    },
  })
  .render();

Notes

Replace YOUR_CATEGORY with your Haven category nicename (e.g. FOODDRINK, ACCOMM).
When a category is locked, the directory only shows products in that category.
showCategoryTitle: true displays the category name as a page heading.

Category Page ​

Shorthand API ​

Fluent API alternative ​

Notes ​

Category Page

Shorthand API

Fluent API alternative

Notes