| Note |
|---|
This documentation is for v1 of the HawkSearch Handlebars UI and is no longer updated. For the latest version, please see http://handlebars-ui.hawksearch.com. |
| Table of Contents |
|---|
The Hawksearch Handlebars UI script is published via the @bridgeline-digital/hawksearch-handlebars-ui npm package.
...
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hawksearch Handlebars UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
var Hawksearch = Hawksearch || {};
Hawksearch.config = {
clientId: "f51060e1c38446f0bacdf283390c37e8"
};
</script>
<script src="//cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@1.0.919/dist/hawksearch-handlebars-ui.js" defer></script>
</head>
<body>
<h1>Hawksearch Handlebars UI</h1>
<hawksearch-search-field></hawksearch-search-field>
<hawksearch-search-results></hawksearch-search-results>
</body>
</html> |
...
| Code Block | ||
|---|---|---|
| ||
interface HawksearchConfig {
clientId: string;
breakpoints?: {
tablet: number;
desktop: number;
};
css?: {
customStyles?: string | Array<string>;
defaultStyles?: boolean;
};
endpoints?: {
search: string;
tracking: string;
};
fieldMappings?: {
description?: string;
imageUrl?: string;
price?: string;
salePrice?: string;
title?: string;
type?: string;
url?: string;
};
formatting?: {
cultureIsoCode?: string;
currencyIsoCode?: string;
};
placeholderImageUrl?: string;
queryStringMappings?: {
disableSpellcheck?: string;
facet?: string;
page?: string;
pageSize?: string;
query?: string;
searchWithin?: string;
sort?: string;
};
searchUrl?: string;
templates?: HawksearchTemplates;
trackingEnabled?: boolean;
urlPrefixes?: {
assets?: string;
content?: string;
};
} |
...
Property | Required | Default Value | |
|---|---|---|---|
| Yes | The ID of your Hawksearch installation | |
| No | The URL of an image to load if the image associated with a search result fails to load | |
| No |
| The URL of the search results page |
| No |
| Allows you to specify whether user actions are tracked for analytical purposes |
...
| Code Block | ||
|---|---|---|
| ||
export interface HawksearchTemplates { autocomplete?: string; checkboxListFacet?: string; colorFacet?: string; contentZone?: string; customContent?: string; datePicker?: string; dateRangeFacet?: string; facetsList?: string; facetWrapper?: string; featuredItemsContent?: string; featuredItemsContentItem?: string; icon?: string; imageContent?: string; linkListFacet?: string; modifiedQuery?: string; numericRangeFacet?: string; pageSize?: string; pagination?: string; popularQueriesContent?: string; querySuggestions?: string; rangeSlider?: string; rangeSliderFacet?: string; recentSearchesFacet?: string; relatedSearchesFacet?: string; searchField?: string; searchResults?: string; searchResultsItem?: string; searchResultsList?: string; searchWithinFacet?: string; selectedFacets?: string; sorting?: string; tabs?: string; tooltip?: string; } |
...
This event is fired after every autocomplete query. This can be used to modify the raw request sent to response received from the Hawksearch API.
| Code Block | ||
|---|---|---|
| ||
addEventListener('hawksearch:after-autocomplete-executed', (event) => {
const autocompleteResponse = event.detail;
console.log(autocompleteResponse);
}); |
...
This event is fired after every search operation. This can be used to modify the raw request sent to response received from the Hawksearch API.
| Code Block | ||
|---|---|---|
| ||
addEventListener('hawksearch:after-search-executed', (event) => {
const searchResponse = event.detail;
console.log(searchResponse);
}); |
...