addsearch-search-ui
Version:
JavaScript library to develop Search UIs for the web
199 lines (166 loc) • 5.09 kB
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta charset="UTF-8">
<title>AddSearch Search UI: Hierarchical facets demo</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/addsearch-js-client@0.8/dist/addsearch-js-client.min.js"></script>
<script src="../../dist/addsearch-search-ui.min.js"></script>
<link rel="stylesheet" href="../../dist/addsearch-search-ui.min.css" />
<link rel="stylesheet" href="styles.css" />
<script>
// Responsive menu
function toggleMobileMenu() {
var style = document.querySelector('aside').style;
style.display = style.display === 'block' ? 'none' : 'block';
}
if (window) {
window.onresize = function () {
alignAutocomplete(document.querySelector('#autocomplete-container'));
};
}
</script>
</head>
<body>
<header>
<div class="mobilemenu" onclick="toggleMobileMenu();">☰</div>
<section>
<div>
<div id="searchfield-container"></div>
</div>
</section>
</header>
<aside>
<div class="mobilemenu close" onclick="toggleMobileMenu();">✖</div>
<section>
Active filters:
<div id="active-filters-container"></div>
</section>
<section>
Hierarchical facets
<div id="hierarchical-facets-container"></div>
</section>
<section>
Normal facets:
<div id="area-facets-container"></div>
</section>
</aside>
<main>
<section>
Search results
<div id="results-container"></div>
</section>
<section>
Load more results:
<div id="loadmore-container"></div>
</section>
</main>
<script id="normal-facet-template" type="text/x-handlebars-template">
<div class="addsearch-facets">
<ul>
{{#each facets}}
<li data-facet="{{value}}">
<label>
<input type="checkbox" value="{{value}}" /><span>{{formatFacetName value}}</span> <em>({{count}})</em>
</label>
</li>
{{/each}}
</ul>
</div>
</script>
<script id="search-results-template" type="text/x-handlebars-template">
<div class="addsearch-searchresults">
{{#if resultcount}}
{{> numberOfResultsTemplate }}
{{/if}}
{{#each hits}}
<div class="item">
<span class="main-image">
<img src="{{custom_fields.img_url}}" alt="{{custom_fields.title}}" />
</span>
<span>
<h3>
{{custom_fields.title}}
</h3>
<span style="display:flex">
<span class="tag">{{custom_fields.nested_facet_lvl_0}}</span>
<span class="tag">{{custom_fields.nested_facet_lvl_1}}</span>
<span class="tag">{{custom_fields.nested_facet_lvl_2}}</span>
<span class="tag">{{custom_fields.nested_facet_lvl_3}}</span>
</span>
</span>
</div>
{{/each}}
</div>
</script>
<script>
// AddSearch JS client with an example index. Get your own SITEKEY by signing up at www.addsearch.com
var client = new AddSearchClient('3ae487bda4e2de3b198a68a22d5c09bd');
// client.addFacetField('custom_fields.category');
client.addFacetField('custom_fields.nested_facet_lvl_3');
// Search UI
var conf = {
matchAllQuery: true,
baseFilters: {
or: [
{ 'custom_fields.nested_facet_lvl_0': 'background' },
{ 'custom_fields.nested_facet_lvl_0': 'science' },
{ 'custom_fields.nested_facet_lvl_0': 'fashion' }
]
}
};
var searchui = new AddSearchUI(client, conf);
searchui.registerHandlebarsHelper('formatFacetName', function(facet) {
if (facet) {
var i = facet.lastIndexOf('>');
return facet.slice(i+2);
}
});
searchui.searchField({
containerId: 'searchfield-container',
autofocus: true,
placeholder: 'Keyword..',
button: 'Search'
});
searchui.searchResults({
containerId: 'results-container',
template: document.querySelector('#search-results-template').innerHTML
});
searchui.activeFilters({
containerId: 'active-filters-container'
});
client.addHierarchicalFacetSetting([
{
"fields": [
"custom_fields.nested_facet_lvl_0",
"custom_fields.nested_facet_lvl_1",
"custom_fields.nested_facet_lvl_2"
],
"sortOrder": "COUNT_DESC_NAME_ASC"
}
]);
// client.addFacetField('custom_fields.category');
searchui.hierarchicalFacets({
containerId: 'hierarchical-facets-container',
fields: [
'custom_fields.nested_facet_lvl_0',
'custom_fields.nested_facet_lvl_1',
'custom_fields.nested_facet_lvl_2'
]
});
searchui.facets({
containerId: 'area-facets-container',
field: 'custom_fields.nested_facet_lvl_3',
advancedSticky: true,
template: document.querySelector('#normal-facet-template').innerHTML
});
searchui.loadMore({
containerId: 'loadmore-container',
type: AddSearchUI.LOAD_MORE_TYPE.BUTTON
});
searchui.start();
</script>
</body>
</html>