Full Directory
A complete directory page with breadcrumb, keyword/type filters, map, lightbox detail, and responsive grid.
HTML
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Directory</title>
<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>
<script src="https://kit.fontawesome.com/YOUR_FA_KIT.js" crossorigin="anonymous"></script>
<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-container">
<div id="haven-breadcrumb-directory"></div>
<div id="haven-filter-directory"></div>
<div id="haven-app"></div>
</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: true,
useFontAwesome: true,
breakpoints: {
mobile: 480,
tablet: 800,
desktop: 1024,
'desktop-large': 1200,
'desktop-xlarge': 1360,
},
})
.directory.init({
routing: {
path: '/directory/',
type: 'hash',
titleSep: ' | ',
doPathChange: true,
},
selector: '#haven-app',
options: {
id: 'haven-list',
sort: 'name',
titleTag: 'h3',
css: 'haven__directory',
cols: 1,
maxWidth: 1280,
includeMap: true,
includeLightbox: true,
images: {
thumbnail: { ar: '3:2', w: 600, h: 400, fit: 'crop' },
featured: { ar: '3:2', w: 1280, h: 400, fit: 'max' },
},
responsive: {
600: { cols: 2 },
1024: { cols: 3 },
},
categories: {
include: ['YOUR_CAT_1', 'YOUR_CAT_2', 'YOUR_CAT_3'],
},
breadcrumb: {
enabled: true,
selector: '#haven-breadcrumb-directory',
rootLabel: 'Directory',
},
lightbox: { expandDirection: 'bottom' },
map: {
autoload: true,
geoLocateControl: true,
mapBoxOptions: {
style: 'mapbox://styles/mapbox/light-v11',
zoom: 10,
center: [YOUR_LNG, YOUR_LAT],
},
markerOptions: {
style: {
default: {
color: '#00004d',
hoverColor: '#0c6a36',
},
},
},
},
filter: {
selector: '#haven-filter-directory',
fields: {
keyword: {
type: 'search',
id: 'haven-keyword-filter',
name: 'k',
placeholder: 'Filter by Keyword',
minChars: 3,
icon: '<i class="fa fa-search"></i>',
},
types: {
type: 'dropdown',
id: 'haven-type-filter',
name: 'types',
dropdownText: { placeholder: 'Filter by Type' },
},
},
},
},
})
.render();
}
}, 10);
})();
</script>
</body>
</html>Placeholders
| Placeholder | Replace with |
|---|---|
YOUR_KIT_ID | Your Haven Kit ID |
YOUR_FA_KIT | Your Font Awesome kit ID |
YOUR_TEMPLATE_HOST | URL hosting custom templates |
YOUR_CAT_1, etc. | Your Haven category nicenames |
YOUR_LNG, YOUR_LAT | Map center coordinates |
Variations
- For path routing instead of hash, change
type: 'path'and add server rewrite rules — see Path Routing. - For a single category, see Category Page.