@bridgeline-digital/hawksearch-handlebars-ui 6.0.0-beta.0 → 6.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/changelog.md +120 -106
- package/docs/index.html +3 -3
- package/docs/modules/Components.html +2 -2
- package/package.json +1 -1
- package/readme.md +1 -1
package/changelog.md
CHANGED
|
@@ -1,106 +1,120 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
1.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
1
|
+
# 6.0.0
|
|
2
|
+
|
|
3
|
+
## Enhancements
|
|
4
|
+
|
|
5
|
+
1. Build output now generated by Vite instead of Webpack
|
|
6
|
+
2. External assets such as default CSS and icons are now bundled directly in JavaScript file to minimize the number of HTTP requests
|
|
7
|
+
3. Build output now contains cjs, es, and umd formats along with typing to allow custom implementations to reference this as a libary
|
|
8
|
+
4. Changed TypeDoc theme to support latest version of Typedoc and allow bundling in npm package
|
|
9
|
+
5. Added support for storing custom templates in `script` as an alternative to `template` elements for greater flexibility and avoiding some edge case browser issues
|
|
10
|
+
|
|
11
|
+
## Bug Fixes
|
|
12
|
+
|
|
13
|
+
1. Prevented "empty" range facets from displaying when facet configuration is incorrect
|
|
14
|
+
|
|
15
|
+
# 5.0.1
|
|
16
|
+
|
|
17
|
+
1. Fixed bug in API endpoint construction when overriding the default `endpointUrl` for Autocomplete
|
|
18
|
+
|
|
19
|
+
# 5.0.0
|
|
20
|
+
|
|
21
|
+
## Enhancements
|
|
22
|
+
|
|
23
|
+
1. Added VariantSelectorComponent
|
|
24
|
+
2. Implemented VariantSelectorComponent in default templates for search results, featured items, recommendations, and autocomplete
|
|
25
|
+
|
|
26
|
+
## Bug Fixes
|
|
27
|
+
|
|
28
|
+
1. Updated the `attributes` collection on recommendation items to split single string values by `|^|` into string arrays
|
|
29
|
+
2. Added logic to catch HTTP errors in service layer
|
|
30
|
+
|
|
31
|
+
## Breaking Changes
|
|
32
|
+
|
|
33
|
+
1. Modified JSON structure for field mapping configuration
|
|
34
|
+
2. The `attributes` collection on recommendation items now consists of the data in `customDict` from the API response rather than preserving `customDict` as a nested property
|
|
35
|
+
|
|
36
|
+
# 4.0.4
|
|
37
|
+
|
|
38
|
+
1. Modified RecommendationsService to transform response properties into arrays to be consistent with search results and autocomplete
|
|
39
|
+
2. Modified `attributes` property on `RecommendationsItem` to include only the properties from `customDict` on the API response. The other properties from the response are standard so repeating them under `attributes` does not make sense.
|
|
40
|
+
3. Fixed bug with autocomplete top categories links not working when not on search results page
|
|
41
|
+
4. Fixed parameter name in order tracking event data
|
|
42
|
+
|
|
43
|
+
# 4.0.3
|
|
44
|
+
|
|
45
|
+
1. Fixed URL parsing logic to avoid prepending domain when API returns a value starting with `//`
|
|
46
|
+
|
|
47
|
+
# 4.0.2
|
|
48
|
+
|
|
49
|
+
1. Updated `number` and `currency` Handlebars helpers to handle string values from API and made decimals parameter optional
|
|
50
|
+
|
|
51
|
+
# 4.0.1
|
|
52
|
+
|
|
53
|
+
1. Modified SearchService so that `hawksearch:after-search-completed` event fires before SEO elements are set
|
|
54
|
+
|
|
55
|
+
# 4.0.0
|
|
56
|
+
|
|
57
|
+
## Enhancements
|
|
58
|
+
|
|
59
|
+
1. Added `HawkSearch.config.autocomplete.recommendationsEnabled` property with a default value of `false` to toggle autocomplete recommendations (instant engage)
|
|
60
|
+
2. Added new RatingComponent to be displayed on SearchResultsItemComponent, RecommendationsItemComponent, and FeaturedItemsContentItemComponent.
|
|
61
|
+
3. Added product ratings and prices to autocomplete
|
|
62
|
+
4. Added suggested queries (did you mean?) to autocomplete
|
|
63
|
+
|
|
64
|
+
## Bug Fixes
|
|
65
|
+
|
|
66
|
+
1. Converting `price` and `salePrice` values of 0 to `undefined`
|
|
67
|
+
2. Fixed price rendering logic in default templates of SearchResultsItemComponent, RecommendationsItemComponent, and FeaturedItemsContentItemComponent
|
|
68
|
+
|
|
69
|
+
## Breaking Changes
|
|
70
|
+
|
|
71
|
+
1. Refactored HawkSearchConfig structure to group properties by search, autocomplete, and recommendations. Some property names have changed slightly.
|
|
72
|
+
2. Modified endpoints configuration to expect only domain rather than full API URL
|
|
73
|
+
|
|
74
|
+
# 3.0.0
|
|
75
|
+
|
|
76
|
+
## Enhancements
|
|
77
|
+
|
|
78
|
+
1. Added support for A/B testing in Recommendations component
|
|
79
|
+
2. Added support for default autocomplete without entering a query
|
|
80
|
+
3. Modified autocomplete to display when refocusing on search field
|
|
81
|
+
4. Added optional `item-id` attribute to Recommendations component
|
|
82
|
+
5. Added instance-level configuration overrides through `config` attribute or `configOverride` property
|
|
83
|
+
|
|
84
|
+
## Bug Fixes
|
|
85
|
+
|
|
86
|
+
1. Fixed script file name and configuration link in documentation
|
|
87
|
+
2. Fixed bug requiring double-click to expand facet that is collapsed by default
|
|
88
|
+
|
|
89
|
+
## Breaking Changes
|
|
90
|
+
|
|
91
|
+
1. Removed unused option to define custom component template as child content of tag to provide future possibility of using slots or declarative Shadow DOM
|
|
92
|
+
|
|
93
|
+
# 2.0.0
|
|
94
|
+
|
|
95
|
+
## Enhancements
|
|
96
|
+
|
|
97
|
+
1. Added Landing Pages components
|
|
98
|
+
2. Added Recommendations components
|
|
99
|
+
3. Added component-level configuration to support functionality toggles and easy string replacements
|
|
100
|
+
4. Added `hawksearch:before-${componentName}-rendered` event hooks to support passing custom data to Handlebars templates
|
|
101
|
+
5. Added configuration setting to toggle facet exclude value functionality. This is now disabled by default.
|
|
102
|
+
6. Added ability to load CSS styles without requiring an external stylesheet
|
|
103
|
+
7. Added customizable index to search results, autocomplete, and recommendations requests
|
|
104
|
+
8. Added ability to set product as default search results item type
|
|
105
|
+
9. Added alternate `[[value]]` syntax to work the same as the default Handlerbars `{{value}}` syntax to avoid conflicts when customizing templates within BigCommerce
|
|
106
|
+
10. Added support for nested object properties in field mappings
|
|
107
|
+
11. Added rendering of canonical URL including search refinements
|
|
108
|
+
12. Added configurable facet exclusion prefix
|
|
109
|
+
13. Implemented TypeDoc code-generated documentation to ensure it remains up-to-date and available for each version
|
|
110
|
+
|
|
111
|
+
## Bug Fixes
|
|
112
|
+
|
|
113
|
+
1. Fixed Autocomplete template name
|
|
114
|
+
2. Added logic to handle scrolling facets by setting a max-height in default template
|
|
115
|
+
|
|
116
|
+
## Breaking Changes
|
|
117
|
+
|
|
118
|
+
1. Changed entry file from `hawksearch-handlebars-ui.js` to `index.js`
|
|
119
|
+
2. Renamed `Hawksearch` global object to `HawkSearch`
|
|
120
|
+
3. Changes to `HawkSearch.config` model to support Enhancements
|
package/docs/index.html
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<div class="col-content">
|
|
13
13
|
<div class="tsd-page-title">
|
|
14
14
|
<h2>@bridgeline-digital/hawksearch-handlebars-ui</h2></div>
|
|
15
|
-
<div class="tsd-panel tsd-typography"><a id="md:hawksearch-handlebars-ui-v600-
|
|
15
|
+
<div class="tsd-panel tsd-typography"><a id="md:hawksearch-handlebars-ui-v600-beta2" class="tsd-anchor"></a><h1><a href="#md:hawksearch-handlebars-ui-v600-beta2">HawkSearch Handlebars UI v6.0.0-beta.2</a></h1><p>The HawkSearch Handlebars UI package allows you to add a highly-customizable search results page to your website powered by <a href="https://www.hawksearch.com/">HawkSearch</a>.</p>
|
|
16
16
|
<a id="md:installation" class="tsd-anchor"></a><h2><a href="#md:installation">Installation</a></h2><a id="md:npm-package" class="tsd-anchor"></a><h3><a href="#md:npm-package">npm Package</a></h3><ol>
|
|
17
17
|
<li>If your website does not already have a package.json file in the root, run <code>npm init</code> to generate one.</li>
|
|
18
18
|
<li>Run <code>npm install --save @bridgeline-digital/hawksearch-handlebars-ui</code> to install the latest version.</li>
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<p>To configure your website to use the CDN, simply update your HTML to import the script file, set your [Configuration)(models/Configuration.html), and add the appropriate elements to your page. Below is a basic sample implementation:</p>
|
|
25
25
|
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-2"> </span><span class="hl-3">lang</span><span class="hl-2">=</span><span class="hl-4">"en"</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"module"</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"//cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.min.js"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/javascript"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">addEventListener</span><span class="hl-5">(</span><span class="hl-7">'hawksearch:loaded'</span><span class="hl-5">, () </span><span class="hl-8">=></span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">HawkSearch</span><span class="hl-5">.</span><span class="hl-6">init</span><span class="hl-5">({</span><br/><span class="hl-5"> </span><span class="hl-9">clientId:</span><span class="hl-5"> </span><span class="hl-7">'YOUR_CLIENTID_HERE'</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">h1</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">h1</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-landing-page</span><span class="hl-0">></</span><span class="hl-1">hawksearch-landing-page</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-recommendations</span><span class="hl-2"> </span><span class="hl-3">widget-id</span><span class="hl-2">=</span><span class="hl-4">"WIDGET_ID_HERE"</span><span class="hl-0">></</span><span class="hl-1">hawksearch-recommendations</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-0"></</span><span class="hl-1">html</span><span class="hl-0">></span>
|
|
26
26
|
</code><button>Copy</button></pre>
|
|
27
|
-
<p><em>Note: It is highly recommended to target a specific version, especially if there are customizations, to avoid potentially breaking changes in the future. For example, instead of including the script at <a href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js">https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js</a>, you can use <a href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@6.0.0-beta.
|
|
27
|
+
<p><em>Note: It is highly recommended to target a specific version, especially if there are customizations, to avoid potentially breaking changes in the future. For example, instead of including the script at <a href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js">https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js</a>, you can use <a href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@6.0.0-beta.2/dist/index.js">https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@6.0.0-beta.2/dist/index.js</a>.</em></p>
|
|
28
28
|
<a id="md:custom-build" class="tsd-anchor"></a><h3><a href="#md:custom-build">Custom Build</a></h3><p>If you plan to make considerable customizations, it may be preferable to compile a custom script building on top of the HawkSearch Handlebars UI library. To do this, it is recommended to use <a href="https://vitejs.dev/">Vite</a> by performing the following steps:</p>
|
|
29
29
|
<ol>
|
|
30
30
|
<li>Run <code>npm create vite@latest</code> in your console<ol>
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
<ul>
|
|
122
122
|
<li>
|
|
123
123
|
<ul>
|
|
124
|
-
<li><a href="#md:hawksearch-handlebars-ui-v600-
|
|
124
|
+
<li><a href="#md:hawksearch-handlebars-ui-v600-beta2"><span>Hawk<wbr/>Search <wbr/>Handlebars UI v6.0.0-<wbr/>beta.2</span></a></li>
|
|
125
125
|
<li>
|
|
126
126
|
<ul>
|
|
127
127
|
<li><a href="#md:installation"><span>Installation</span></a></li>
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
</ul>
|
|
25
25
|
<p><em>Note: To avoid conflicts with BigCommerce and other systems that Handlebars for server-side rendering, this library also supports an alternate <code>[[value]]</code> syntax to work the same as the default Handlerbars <code>{{value}}</code> syntax.</em></p>
|
|
26
26
|
<a id="md:passing-an-html-string" class="tsd-anchor"></a><h3><a href="#md:passing-an-html-string">Passing an HTML string</a></h3><p>In your HTML file, define the template content directly in the configuration options:</p>
|
|
27
|
-
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"
|
|
27
|
+
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"module"</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.min.js"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/javascript"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">addEventListener</span><span class="hl-5">(</span><span class="hl-7">'hawksearch:loaded'</span><span class="hl-5">, () </span><span class="hl-8">=></span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">HawkSearch</span><span class="hl-5">.</span><span class="hl-6">init</span><span class="hl-5">({</span><br/><span class="hl-5"> </span><span class="hl-9">clientId:</span><span class="hl-5"> </span><span class="hl-7">"YOUR_CLIENTID_HERE"</span><span class="hl-5">,</span><br/><span class="hl-5"> </span><span class="hl-9">components:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-7">'page-size'</span><span class="hl-9">:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">template:</span><span class="hl-5"> </span><span class="hl-7">`</span><br/><span class="hl-7"> <div class='page-size'></span><br/><span class="hl-7"> <select hawksearch-page-size></span><br/><span class="hl-7"> {{#each options}}</span><br/><span class="hl-7"> <option value='{{pageSize}}' {{attribute 'selected' selected}}>{{title}}</option></span><br/><span class="hl-7"> {{/each}}</span><br/><span class="hl-7"> </select></span><br/><span class="hl-7"> </div>`</span><br/><span class="hl-5"> }</span><br/><span class="hl-5"> }</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">h1</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">h1</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-0"></</span><span class="hl-1">html</span><span class="hl-0">></span>
|
|
28
28
|
</code><button>Copy</button></pre>
|
|
29
29
|
<a id="md:creating-a-script-or-template-element" class="tsd-anchor"></a><h3><a href="#md:creating-a-script-or-template-element">Creating a script or template element</a></h3><p>In your HTML file, add the custom markup to either a <code>script</code> element with <code>type</code> attribute set to <code>text/x-handlebars-template</code> or a <code>template</code> element and pass the ID in the configuration options:</p>
|
|
30
|
-
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"
|
|
30
|
+
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"module"</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.min.js"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/javascript"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">addEventListener</span><span class="hl-5">(</span><span class="hl-7">'hawksearch:loaded'</span><span class="hl-5">, () </span><span class="hl-8">=></span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">HawkSearch</span><span class="hl-5">.</span><span class="hl-6">init</span><span class="hl-5">({</span><br/><span class="hl-5"> </span><span class="hl-9">clientId:</span><span class="hl-5"> </span><span class="hl-7">"YOUR_CLIENTID_HERE"</span><span class="hl-5">,</span><br/><span class="hl-5"> </span><span class="hl-9">components:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-7">'page-size'</span><span class="hl-9">:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">template:</span><span class="hl-5"> </span><span class="hl-7">'page-size-template'</span><br/><span class="hl-5"> }</span><br/><span class="hl-5"> }</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">h1</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">h1</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">id</span><span class="hl-5">=</span><span class="hl-4">"page-size-template"</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/x-handlebars-template"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-0"><</span><span class="hl-1">div</span><span class="hl-5"> </span><span class="hl-3">class</span><span class="hl-5">=</span><span class="hl-4">'page-size'</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-0"><</span><span class="hl-1">select</span><span class="hl-5"> </span><span class="hl-3">hawksearch-page-size</span><span class="hl-0">></span><br/><span class="hl-5"> {{#each options}}</span><br/><span class="hl-5"> </span><span class="hl-0"><</span><span class="hl-1">option</span><span class="hl-5"> </span><span class="hl-3">value</span><span class="hl-5">=</span><span class="hl-4">'{{pageSize}}'</span><span class="hl-5"> </span><span class="hl-3">{{attribute</span><span class="hl-5"> </span><span class="hl-12">'selected'</span><span class="hl-5"> </span><span class="hl-3">selected}}</span><span class="hl-0">></span><span class="hl-5">{{title}}</span><span class="hl-0"></</span><span class="hl-1">option</span><span class="hl-0">></span><br/><span class="hl-5"> {{/each}}</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">select</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">div</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-0"></</span><span class="hl-1">html</span><span class="hl-0">></span>
|
|
31
31
|
</code><button>Copy</button></pre>
|
|
32
32
|
<p><em>Note: <code>script</code> elements are preferred over <code>template</code> elements as they prevent some browser parsing behavior which can conflict with Handlebars directives in some edge cases.</em></p>
|
|
33
33
|
<p><em>Note: This approach tends to be easier to manage than the previous option as it is more compatible with popular HTML editors and templates can potentially be loaded from separate files using Server-side Includes (SSI).</em></p>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bridgeline-digital/hawksearch-handlebars-ui",
|
|
3
|
-
"version": "6.0.0-beta.
|
|
3
|
+
"version": "6.0.0-beta.2",
|
|
4
4
|
"description": "The HawkSearch Handlebars UI package allows you to add a highly-customizable search results page to your website powered by HawkSearch.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"hawksearch"
|
package/readme.md
CHANGED
|
@@ -35,4 +35,4 @@ To display a landing page or recommendations instead of search results, simply r
|
|
|
35
35
|
|
|
36
36
|
## Documentation
|
|
37
37
|
|
|
38
|
-
Documentation is available at http://handlebars-ui.hawksearch.com/6.0.0-beta.
|
|
38
|
+
Documentation is available at http://handlebars-ui.hawksearch.com/6.0.0-beta.2/.
|