Custom Templates

Haven renders all HTML from Mustache templates. You can override the default templates with your own versions hosted on your server.

How overrides work

1. Host your template files at a public URL
2. Set templatePath to that base URL
3. List filenames in userTemplates
4. Haven checks your path first, then falls back to bundled templates

haven.config({
  templatePath: 'https://YOUR_TEMPLATE_HOST/haven-templates/',
  userTemplates: [
    'haven-directory-list-item.html',
    'haven-directory-detail.html',
  ],
});

Templates are loaded from:

https://YOUR_TEMPLATE_HOST/haven-templates/haven-directory-list-item.html

Common templates

Directory

Template	Purpose
haven-directory-list.html	List wrapper
haven-directory-list-item.html	Individual list item
haven-directory-detail.html	Detail / lightbox view
haven-directory-itinerary-item.html	Itinerary item
haven-directory-breadcrumb.html	Breadcrumb trail
haven-directory-filter.html	Filter wrapper
haven-directory-contactcard-item.html	Contact card item
haven-directory-featured-item.html	Featured item

Calendar

Template	Purpose
haven-calendar-list.html	List wrapper
haven-calendar-list-item.html	Event list item
haven-calendar-detail.html	Event detail / lightbox
haven-calendar-daily-item.html	Daily view item
haven-calendar-upcoming-item.html	Upcoming widget item
haven-calendar-ongoing-item.html	Ongoing event item
haven-calendar-filter.html	Filter wrapper

Fields

Template	Purpose
haven-field-search.html	Keyword search input
haven-field-dropdown.html	Type dropdown
haven-field-datepicker.html	Date picker
haven-field-toggle.html	Toggle filter

Template syntax

Templates use Mustache syntax with Haven-provided variables:

<article class="haven__item">
  <div class="haven__item__image">
    {{{product_thumbnail}}}
  </div>
  <div class="haven__item__content">
    <h3 class="haven__item__title">
      {{{product_title_linked}}}
    </h3>
    <div class="haven__item__excerpt">
      {{{product_excerpt}}}
    </div>
  </div>
</article>

Variable types

Syntax	Rendering
{{variable}}	HTML-escaped output
{{{variable}}}	Unescaped HTML (use for pre-rendered HTML like thumbnails and links)
{{#section}}...{{/section}}	Conditional / loop block

Common variables

Variable	Description
{{{product_title_linked}}}	Linked product title
{{{product_thumbnail}}}	Thumbnail image HTML
{{{product_excerpt}}}	Short description
{{{product_featured_image}}}	Featured image HTML
{{{product_detail_link}}}	Detail page link

Starting from defaults

Copy the bundled templates from haven-js/dist/template-parts/ as a starting point. Modify markup and classes while keeping the same Mustache variables.

Directory structure on your server

haven-templates/
├── haven-directory-list-item.html
├── haven-directory-detail.html
├── haven-calendar-list-item.html
└── haven-calendar-upcoming-item.html

Only list templates you want to override in userTemplates. All other templates use the bundled defaults.

Itinerary vs list item

The itinerary template omits product_excerpt compared to the standard list item — it is designed for compact sidebar layouts.

Troubleshooting

Issue	Solution
Template not loading	Verify URL is publicly accessible (no auth, no CORS block)
Blank items	Check Mustache variable names match expected placeholders
Missing detail view	Include detail template in userTemplates when using lightbox

See Common Issues.