Common Issues

Solutions for frequently encountered integration problems.

Blank #haven-app

Symptoms: The container stays empty after page load.

Causes and fixes:

1. Haven not ready — Ensure you poll haven.ready() before calling haven.config():

   var poll = setInterval(function () {
     if (window.haven && haven.ready && haven.ready()) {
       clearInterval(poll);
       // configure here
     }
   }, 10);

2. Missing .render() — The fluent chain requires a final .render() call:

   haven.config({}).directory.init({}).render(); // .render() is required

3. Invalid feed credentials — Check the browser Network tab for 401/403 responses. Verify your Kit URL or havenFeedId.

4. Wrong selector — Confirm the selector matches an element on the page.

5. JavaScript error — Open the browser console and look for errors before the Haven init code runs.

Map does not appear

Symptoms: List renders but map area is blank or missing.

Fixes:

1. Load Mapbox before Haven — Mapbox GL CSS and JS must be on the page before haven.init():

   <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet" />
   <script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
   <!-- THEN Haven Kit -->
   <script src="https://kit.havendestinations.ca/YOUR_KIT_ID.js"></script>

2. Enable map in config — Set both global and module options:

   haven.config({ useMapBox: true })
     .directory.init({ options: { includeMap: true, map: { autoload: true } } });

3. Invalid Mapbox token — Verify mapboxApiKey in standalone mode or Kit configuration.

4. Products lack coordinates — Markers only appear for products with geolocation data in Haven.

Filter icons missing

Symptoms: Search field shows broken icon or no icon.

Fixes:

1. Load Font Awesome before Haven.
2. Set useFontAwesome: true in haven.config().
3. Or remove icon HTML from filter config and set useFontAwesome: false.

Custom templates not loading

Symptoms: Default templates render instead of your custom versions.

Fixes:

1. Verify URL — Open the template URL directly in a browser. It must return HTML without authentication.

2. Check userTemplates — List exact filenames (case-sensitive):

   userTemplates: ['haven-directory-list-item.html']

3. Trailing slash on templatePath — Haven adds filenames to this base. Use:

   templatePath: 'https://yourhost.com/haven-templates/'

4. CORS — Template host must allow cross-origin requests from your site's domain.

Path routing returns 404

Symptoms: Direct URL access or page refresh shows a server 404.

Fixes:

1. Add server rewrite rules — see Path Routing.
2. Ensure RewriteBase matches your routing.path.
3. Confirm index.html exists in the routed directory.

Lightbox does not open

Symptoms: Clicking a list item does nothing.

Fixes:

1. Set includeLightbox: true in options.

2. Include a detail template in userTemplates:

   userTemplates: ['haven-directory-list-item.html', 'haven-directory-detail.html']

3. Check console for template load errors.

Styles look unstyled or broken

Symptoms: Raw HTML with no layout or spacing.

Fixes:

1. Load haven.min.css (included automatically by Kit).

2. Add theme CSS files after Haven:

   <link rel="stylesheet" href="/haven-theme--default.css" />
   <link rel="stylesheet" href="/haven-theme--directory.css" />

3. As of v2.0.1, styles are not inlined in haven.min.js.

haven.fetch is undefined

Symptoms: Error when calling haven.fetch.getProducts().

Fix: haven.fetch is only available after haven.init() completes. Wait for haven.ready():

if (haven.ready()) {
  haven.fetch.getProducts(function (response) { /* ... */ }, 'plugin');
}

API returns empty array

Symptoms: Render succeeds but no items appear.

Fixes:

1. Verify products exist in your Haven feed for the requested categories.
2. Check category nicenames match exactly (case-sensitive).
3. Try queryType: 'plugin' for embed-optimized responses.
4. Inspect the Network tab for the API response body.

Getting help

1. Check the browser console for errors and warnings.
2. Inspect Network requests to havenapi.havendestinations.ca.
3. Compare your setup against the Quick Start and Examples.
4. Contact your Haven account manager for feed and Kit issues.