@searchstax-inc/searchstudio-ux-js 1.0.6 → 1.0.10
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 +5 -1
- package/README.md +163 -162
- package/dist/@searchstax-inc/searchstudio-ux-js.cjs +102 -100
- package/dist/@searchstax-inc/searchstudio-ux-js.iife.js +104 -102
- package/dist/@searchstax-inc/searchstudio-ux-js.mjs +615 -599
- package/dist/hostedsearch-template.html +963 -0
- package/dist/styles/mainTheme.css +1 -8
- package/dist/styles/scss/widgets/searchResults/style.scss +2 -10
- package/dist/templates.js +231 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -9,4 +9,8 @@ All notable changes to the "searchstudio-ux-js" project will be documented in th
|
|
|
9
9
|
- Added support for highlighting controlled via studio UI
|
|
10
10
|
- Results per page are now configured through studio UI
|
|
11
11
|
### Bug Fixes
|
|
12
|
-
- Tracking calls now use unmodified title of the result
|
|
12
|
+
- Tracking calls now use unmodified title of the result
|
|
13
|
+
|
|
14
|
+
## [1.0.10] - 2024-12-05
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
- fix & and + symbols causing issues in facet values
|
package/README.md
CHANGED
|
@@ -2,9 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Library to build Site Search page
|
|
4
4
|
|
|
5
|
-
## changelog
|
|
6
|
-
changelog is documented at CHANGELOG.md
|
|
7
|
-
|
|
8
5
|
## Installation
|
|
9
6
|
npm install following package
|
|
10
7
|
`npm install --save @searchstax-inc/searchstudio-ux-js`
|
|
@@ -192,10 +189,10 @@ example of input widget initialization with various options
|
|
|
192
189
|
templates: {
|
|
193
190
|
mainTemplate: {
|
|
194
191
|
template: `
|
|
195
|
-
<div class="searchstax-search-input-container">
|
|
192
|
+
<div class="searchstax-search-input-container" data-test-id="searchstax-search-input-container">
|
|
196
193
|
<div class="searchstax-search-input-wrapper">
|
|
197
|
-
<input type="text" id="searchstax-search-input" class="searchstax-search-input" placeholder="SEARCH FOR..." aria-label="Search" />
|
|
198
|
-
<button class="searchstax-spinner-icon" id="searchstax-search-input-action-button" aria-label="search" role="button"></button>
|
|
194
|
+
<input type="text" id="searchstax-search-input" class="searchstax-search-input" placeholder="SEARCH FOR..." aria-label="Search" data-test-id="searchstax-search-input" />
|
|
195
|
+
<button class="searchstax-spinner-icon" id="searchstax-search-input-action-button" aria-label="search" role="button" data-test-id="searchstax-search-input-action-button"></button>
|
|
199
196
|
</div>
|
|
200
197
|
</div>
|
|
201
198
|
`,
|
|
@@ -227,77 +224,79 @@ example of result widget initialization with various options
|
|
|
227
224
|
templates: {
|
|
228
225
|
mainTemplate: {
|
|
229
226
|
template: `
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
227
|
+
<div class="searchstax-search-results-container" id="searchstax-search-results-container" data-test-id="searchstax-search-results-container">
|
|
228
|
+
<div class="searchstax-search-results" id="searchstax-search-results"></div>
|
|
229
|
+
</div>
|
|
233
230
|
`,
|
|
234
231
|
searchResultsContainerId: "searchstax-search-results",
|
|
235
232
|
},
|
|
236
233
|
searchResultTemplate: {
|
|
237
234
|
template: `
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
</div>
|
|
248
|
-
{{/ribbon}}
|
|
249
|
-
|
|
250
|
-
{{#thumbnail}}
|
|
251
|
-
<img src="{{thumbnail}}" alt="" class="searchstax-thumbnail">
|
|
252
|
-
{{/thumbnail}}
|
|
253
|
-
<div class="searchstax-search-result-title-container">
|
|
254
|
-
<h5 class="searchstax-search-result-title">{{{title}}}</h5>
|
|
255
|
-
</div>
|
|
256
|
-
|
|
257
|
-
{{#paths}}
|
|
258
|
-
<p class="searchstax-search-result-common">
|
|
259
|
-
{{paths}}
|
|
260
|
-
</p>
|
|
261
|
-
{{/paths}}
|
|
262
|
-
|
|
263
|
-
{{#description}}
|
|
264
|
-
<p class="searchstax-search-result-description searchstax-search-result-common">
|
|
265
|
-
{{{description}}}
|
|
266
|
-
</p>
|
|
267
|
-
{{/description}}
|
|
268
|
-
|
|
269
|
-
{{#unmappedFields}}
|
|
270
|
-
{{#isImage}}
|
|
271
|
-
<div class="searchstax-search-result-image-container">
|
|
272
|
-
<img src="{{value}}" alt="" class="searchstax-result-image">
|
|
273
|
-
</div>
|
|
274
|
-
{{/isImage}}
|
|
275
|
-
{{^isImage}}
|
|
276
|
-
<p class="searchstax-search-result-common">
|
|
277
|
-
{{{value}}}
|
|
278
|
-
</p>
|
|
279
|
-
{{/isImage}}
|
|
280
|
-
{{/unmappedFields}}
|
|
281
|
-
</a>
|
|
235
|
+
<a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" data-test-id="searchstax-result-item-link" class="searchstax-result-item-link searchstax-result-item-link-wrapping" tabindex="0">
|
|
236
|
+
<div class="searchstax-search-result searchstax-search-result-wrapping {{#thumbnail}} has-thumbnail {{/thumbnail}}">
|
|
237
|
+
{{#promoted}}
|
|
238
|
+
<div class="searchstax-search-result-promoted" data-test-id="searchstax-search-result-promoted"></div>
|
|
239
|
+
{{/promoted}}
|
|
240
|
+
|
|
241
|
+
{{#ribbon}}
|
|
242
|
+
<div class="searchstax-search-result-ribbon" data-test-id="searchstax-search-result-ribbon">
|
|
243
|
+
{{{ribbon}}}
|
|
282
244
|
</div>
|
|
245
|
+
{{/ribbon}}
|
|
246
|
+
|
|
247
|
+
{{#thumbnail}}
|
|
248
|
+
<img alt="" src="{{thumbnail}}" alt="image" class="searchstax-thumbnail" data-test-id="searchstax-thumbnail">
|
|
249
|
+
{{/thumbnail}}
|
|
250
|
+
<div class="searchstax-search-result-title-container" data-test-id="searchstax-search-result-title-container">
|
|
251
|
+
<h3 class="searchstax-search-result-title">{{{title}}}</h3>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
{{#paths}}
|
|
255
|
+
<p class="searchstax-search-result-common" data-test-id="searchstax-search-result-common">
|
|
256
|
+
{{{paths}}}
|
|
257
|
+
</p>
|
|
258
|
+
{{/paths}}
|
|
259
|
+
|
|
260
|
+
{{#description}}
|
|
261
|
+
<p class="searchstax-search-result-description searchstax-search-result-common" data-test-id="searchstax-search-result-description">
|
|
262
|
+
{{{description}}}
|
|
263
|
+
</p>
|
|
264
|
+
{{/description}}
|
|
265
|
+
|
|
266
|
+
{{#unmappedFields}}
|
|
267
|
+
{{#isImage}}
|
|
268
|
+
<div class="searchstax-search-result-image-container">
|
|
269
|
+
<img alt="" src="{{value}}" alt="image" class="searchstax-result-image" data-test-id="searchstax-result-image">
|
|
270
|
+
</div>
|
|
271
|
+
{{/isImage}}
|
|
272
|
+
{{^isImage}}
|
|
273
|
+
<p class="searchstax-search-result-common">
|
|
274
|
+
{{{value}}}
|
|
275
|
+
</p>
|
|
276
|
+
{{/isImage}}
|
|
277
|
+
{{/unmappedFields}}
|
|
278
|
+
</div>
|
|
279
|
+
</a>
|
|
283
280
|
`,
|
|
284
281
|
searchResultUniqueIdAttribute: "data-searchstax-unique-result-id"
|
|
285
282
|
},
|
|
286
283
|
noSearchResultTemplate: {
|
|
287
284
|
template: `
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
285
|
+
{{#searchExecuted}}
|
|
286
|
+
<div class="searchstax-no-results-wrap" data-test-id="searchstax-no-results-wrap">
|
|
287
|
+
<div class="searchstax-no-results" data-test-id="searchstax-no-results">
|
|
288
|
+
Showing <strong>no results</strong> for <strong>"{{ searchTerm }}"</strong>
|
|
289
|
+
<br>
|
|
290
|
+
{{#spellingSuggestion}}
|
|
291
|
+
<span> Did you mean <a href="#" aria-label="Did you mean: {{originalQuery}}" class="searchstax-suggestion-term" onclick="searchCallback('{{ spellingSuggestion }}')">{{ spellingSuggestion }}</a>?</span>
|
|
292
|
+
{{/spellingSuggestion}}
|
|
293
|
+
</div>
|
|
294
|
+
<ul class="searchstax-no-results-list" data-test-id="searchstax-no-results-list">
|
|
295
|
+
<li>Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need.</li>
|
|
296
|
+
<li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
|
|
297
|
+
</ul>
|
|
298
|
+
</div>
|
|
299
|
+
{{/searchExecuted}}
|
|
301
300
|
`
|
|
302
301
|
}
|
|
303
302
|
},
|
|
@@ -318,77 +317,79 @@ example of result widget initialization with infinite scroll enabled. This will
|
|
|
318
317
|
templates: {
|
|
319
318
|
mainTemplate: {
|
|
320
319
|
template: `
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
320
|
+
<div class="searchstax-search-results-container" id="searchstax-search-results-container" data-test-id="searchstax-search-results-container">
|
|
321
|
+
<div class="searchstax-search-results" id="searchstax-search-results"></div>
|
|
322
|
+
</div>
|
|
324
323
|
`,
|
|
325
324
|
searchResultsContainerId: "searchstax-search-results",
|
|
326
325
|
},
|
|
327
326
|
searchResultTemplate: {
|
|
328
327
|
template: `
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
</div>
|
|
339
|
-
{{/ribbon}}
|
|
340
|
-
|
|
341
|
-
{{#thumbnail}}
|
|
342
|
-
<img src="{{thumbnail}}" alt="" class="searchstax-thumbnail">
|
|
343
|
-
{{/thumbnail}}
|
|
344
|
-
<div class="searchstax-search-result-title-container">
|
|
345
|
-
<h5 class="searchstax-search-result-title">{{{title}}}</h5>
|
|
346
|
-
</div>
|
|
347
|
-
|
|
348
|
-
{{#paths}}
|
|
349
|
-
<p class="searchstax-search-result-common">
|
|
350
|
-
{{paths}}
|
|
351
|
-
</p>
|
|
352
|
-
{{/paths}}
|
|
353
|
-
|
|
354
|
-
{{#description}}
|
|
355
|
-
<p class="searchstax-search-result-description searchstax-search-result-common">
|
|
356
|
-
{{{description}}}
|
|
357
|
-
</p>
|
|
358
|
-
{{/description}}
|
|
359
|
-
|
|
360
|
-
{{#unmappedFields}}
|
|
361
|
-
{{#isImage}}
|
|
362
|
-
<div class="searchstax-search-result-image-container">
|
|
363
|
-
<img src="{{value}}" alt="" class="searchstax-result-image">
|
|
364
|
-
</div>
|
|
365
|
-
{{/isImage}}
|
|
366
|
-
{{^isImage}}
|
|
367
|
-
<p class="searchstax-search-result-common">
|
|
368
|
-
{{{value}}}
|
|
369
|
-
</p>
|
|
370
|
-
{{/isImage}}
|
|
371
|
-
{{/unmappedFields}}
|
|
372
|
-
</a>
|
|
328
|
+
<a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" data-test-id="searchstax-result-item-link" class="searchstax-result-item-link searchstax-result-item-link-wrapping" tabindex="0">
|
|
329
|
+
<div class="searchstax-search-result searchstax-search-result-wrapping {{#thumbnail}} has-thumbnail {{/thumbnail}}">
|
|
330
|
+
{{#promoted}}
|
|
331
|
+
<div class="searchstax-search-result-promoted" data-test-id="searchstax-search-result-promoted"></div>
|
|
332
|
+
{{/promoted}}
|
|
333
|
+
|
|
334
|
+
{{#ribbon}}
|
|
335
|
+
<div class="searchstax-search-result-ribbon" data-test-id="searchstax-search-result-ribbon">
|
|
336
|
+
{{{ribbon}}}
|
|
373
337
|
</div>
|
|
338
|
+
{{/ribbon}}
|
|
339
|
+
|
|
340
|
+
{{#thumbnail}}
|
|
341
|
+
<img alt="" src="{{thumbnail}}" alt="image" class="searchstax-thumbnail" data-test-id="searchstax-thumbnail">
|
|
342
|
+
{{/thumbnail}}
|
|
343
|
+
<div class="searchstax-search-result-title-container" data-test-id="searchstax-search-result-title-container">
|
|
344
|
+
<h3 class="searchstax-search-result-title">{{{title}}}</h3>
|
|
345
|
+
</div>
|
|
346
|
+
|
|
347
|
+
{{#paths}}
|
|
348
|
+
<p class="searchstax-search-result-common" data-test-id="searchstax-search-result-common">
|
|
349
|
+
{{{paths}}}
|
|
350
|
+
</p>
|
|
351
|
+
{{/paths}}
|
|
352
|
+
|
|
353
|
+
{{#description}}
|
|
354
|
+
<p class="searchstax-search-result-description searchstax-search-result-common" data-test-id="searchstax-search-result-description">
|
|
355
|
+
{{{description}}}
|
|
356
|
+
</p>
|
|
357
|
+
{{/description}}
|
|
358
|
+
|
|
359
|
+
{{#unmappedFields}}
|
|
360
|
+
{{#isImage}}
|
|
361
|
+
<div class="searchstax-search-result-image-container">
|
|
362
|
+
<img alt="" src="{{value}}" alt="image" class="searchstax-result-image" data-test-id="searchstax-result-image">
|
|
363
|
+
</div>
|
|
364
|
+
{{/isImage}}
|
|
365
|
+
{{^isImage}}
|
|
366
|
+
<p class="searchstax-search-result-common">
|
|
367
|
+
{{{value}}}
|
|
368
|
+
</p>
|
|
369
|
+
{{/isImage}}
|
|
370
|
+
{{/unmappedFields}}
|
|
371
|
+
</div>
|
|
372
|
+
</a>
|
|
374
373
|
`,
|
|
375
374
|
searchResultUniqueIdAttribute: "data-searchstax-unique-result-id"
|
|
376
375
|
},
|
|
377
376
|
noSearchResultTemplate: {
|
|
378
377
|
template: `
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
378
|
+
{{#searchExecuted}}
|
|
379
|
+
<div class="searchstax-no-results-wrap" data-test-id="searchstax-no-results-wrap">
|
|
380
|
+
<div class="searchstax-no-results" data-test-id="searchstax-no-results">
|
|
381
|
+
Showing <strong>no results</strong> for <strong>"{{ searchTerm }}"</strong>
|
|
382
|
+
<br>
|
|
383
|
+
{{#spellingSuggestion}}
|
|
384
|
+
<span> Did you mean <a href="#" aria-label="Did you mean: {{originalQuery}}" class="searchstax-suggestion-term" onclick="searchCallback('{{ spellingSuggestion }}')">{{ spellingSuggestion }}</a>?</span>
|
|
385
|
+
{{/spellingSuggestion}}
|
|
386
|
+
</div>
|
|
387
|
+
<ul class="searchstax-no-results-list" data-test-id="searchstax-no-results-list">
|
|
388
|
+
<li>Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need.</li>
|
|
389
|
+
<li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
|
|
390
|
+
</ul>
|
|
391
|
+
</div>
|
|
392
|
+
{{/searchExecuted}}
|
|
392
393
|
`
|
|
393
394
|
}
|
|
394
395
|
},
|
|
@@ -423,13 +424,13 @@ example of pagination widget initialization with various options
|
|
|
423
424
|
mainTemplate: {
|
|
424
425
|
template: `
|
|
425
426
|
{{#results.length}}
|
|
426
|
-
<div class="searchstax-pagination-container">
|
|
427
|
+
<div class="searchstax-pagination-container" data-test-id="searchstax-pagination-container">
|
|
427
428
|
<div class="searchstax-pagination-content">
|
|
428
|
-
<a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" tabindex="0" aria-label="Previous Page">< Previous</a>
|
|
429
|
-
<div class="searchstax-pagination-details">
|
|
429
|
+
<a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" data-test-id="searchstax-pagination-previous" tabindex="0" aria-label="Previous Page">< Previous</a>
|
|
430
|
+
<div class="searchstax-pagination-details" data-test-id="searchstax-pagination-details">
|
|
430
431
|
{{startResultIndex}} - {{endResultIndex}} of {{totalResults}}
|
|
431
432
|
</div>
|
|
432
|
-
<a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next" tabindex="0" aria-label="Next Page">Next ></a>
|
|
433
|
+
<a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" data-test-id="searchstax-pagination-next" id="searchstax-pagination-next" tabindex="0" aria-label="Next Page">Next ></a>
|
|
433
434
|
</div>
|
|
434
435
|
</div>
|
|
435
436
|
{{/results.length}}
|
|
@@ -440,13 +441,13 @@ example of pagination widget initialization with various options
|
|
|
440
441
|
infiniteScrollTemplate: {
|
|
441
442
|
template: `
|
|
442
443
|
{{#results.length}}
|
|
443
|
-
<div class="searchstax-pagination-container">
|
|
444
|
+
<div class="searchstax-pagination-container" data-test-id="searchstax-pagination-container">
|
|
444
445
|
<div class="searchstax-pagination-content">
|
|
445
|
-
<a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" tabindex="0" aria-label="Previous Page">< Previous</a>
|
|
446
|
-
<div class="searchstax-pagination-details">
|
|
446
|
+
<a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" data-test-id="searchstax-pagination-previous" tabindex="0" aria-label="Previous Page">< Previous</a>
|
|
447
|
+
<div class="searchstax-pagination-details" data-test-id="searchstax-pagination-details">
|
|
447
448
|
{{startResultIndex}} - {{endResultIndex}} of {{totalResults}}
|
|
448
449
|
</div>
|
|
449
|
-
<a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next" tabindex="0" aria-label="Next Page">Next ></a>
|
|
450
|
+
<a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" data-test-id="searchstax-pagination-next" id="searchstax-pagination-next" tabindex="0" aria-label="Next Page">Next ></a>
|
|
450
451
|
</div>
|
|
451
452
|
</div>
|
|
452
453
|
{{/results.length}}
|
|
@@ -496,13 +497,13 @@ example of facets widget initialization with various options
|
|
|
496
497
|
</div>
|
|
497
498
|
</div>
|
|
498
499
|
|
|
499
|
-
<div class="searchstax-facets-mobile-overlay {{#overlayOpened}} searchstax-show{{/overlayOpened}}" >
|
|
500
|
+
<div class="searchstax-facets-mobile-overlay {{#overlayOpened}} searchstax-show{{/overlayOpened}}" data-test-id="searchstax-facets-mobile-overlay">
|
|
500
501
|
<div class="searchstax-facets-mobile-overlay-header">
|
|
501
502
|
<div class="searchstax-facets-mobile-overlay-header-title">Filter By</div>
|
|
502
|
-
<div class="searchstax-search-close" tabindex="0" aria-label="close overlay" role="button"></div>
|
|
503
|
+
<div class="searchstax-search-close" tabindex="0" aria-label="close overlay" role="button" data-test-id="searchstax-search-close"></div>
|
|
503
504
|
</div>
|
|
504
505
|
<div class="searchstax-facets-container-mobile"></div>
|
|
505
|
-
<button class="searchstax-facets-mobile-overlay-done">Done</button>
|
|
506
|
+
<button class="searchstax-facets-mobile-overlay-done" data-test-id="searchstax-facets-mobile-overlay-done">Done</button>
|
|
506
507
|
</div>
|
|
507
508
|
`,
|
|
508
509
|
facetsContainerClass: `searchstax-facets-container-mobile`,
|
|
@@ -512,12 +513,12 @@ example of facets widget initialization with various options
|
|
|
512
513
|
},
|
|
513
514
|
showMoreButtonContainerTemplate: {
|
|
514
515
|
template: `
|
|
515
|
-
<div class="searchstax-facet-show-more-container">
|
|
516
|
+
<div class="searchstax-facet-show-more-container" data-test-id="searchstax-facet-show-more-container">
|
|
516
517
|
{{#showingAllFacets}}
|
|
517
|
-
<div class="searchstax-facet-show-less-button searchstax-facet-show-button" tabindex="0">less</div>
|
|
518
|
+
<div class="searchstax-facet-show-less-button searchstax-facet-show-button" tabindex="0" data-test-id="searchstax-facet-show-less-button">less</div>
|
|
518
519
|
{{/showingAllFacets}}
|
|
519
520
|
{{^showingAllFacets}}
|
|
520
|
-
<div class="searchstax-facet-show-more-button searchstax-facet-show-button" tabindex="0">more {{onShowMoreLessClick}}</div>
|
|
521
|
+
<div class="searchstax-facet-show-more-button searchstax-facet-show-button" tabindex="0" data-test-id="searchstax-facet-show-more-button">more {{onShowMoreLessClick}}</div>
|
|
521
522
|
{{/showingAllFacets}}
|
|
522
523
|
</div>
|
|
523
524
|
`,
|
|
@@ -526,7 +527,7 @@ example of facets widget initialization with various options
|
|
|
526
527
|
facetItemContainerTemplate: {
|
|
527
528
|
template: `
|
|
528
529
|
<div>
|
|
529
|
-
<div class="searchstax-facet-title-container">
|
|
530
|
+
<div class="searchstax-facet-title-container" data-test-id="searchstax-facet-title-container">
|
|
530
531
|
<div class="searchstax-facet-title" aria-label="Facet group: {{label}}" tabindex="0">
|
|
531
532
|
{{label}}
|
|
532
533
|
</div>
|
|
@@ -540,8 +541,8 @@ example of facets widget initialization with various options
|
|
|
540
541
|
},
|
|
541
542
|
clearFacetsTemplate: {
|
|
542
543
|
template: `
|
|
543
|
-
{{#shouldShow}}
|
|
544
|
-
<div class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all" tabindex="0" role="button">
|
|
544
|
+
{{#shouldShow}}
|
|
545
|
+
<div class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all" tabindex="0" role="button" data-test-id="searchstax-facets-pill-clear-all">
|
|
545
546
|
<div class="searchstax-facets-pill-label">Clear Filters</div>
|
|
546
547
|
</div>
|
|
547
548
|
{{/shouldShow}}
|
|
@@ -551,17 +552,17 @@ example of facets widget initialization with various options
|
|
|
551
552
|
facetItemTemplate: {
|
|
552
553
|
template: `
|
|
553
554
|
<div class="searchstax-facet-input">
|
|
554
|
-
<input type="checkbox" class="searchstax-facet-input-checkbox" {{#disabled}}disabled{{/disabled}} {{#isChecked}}checked{{/isChecked}} aria-label="{{value}} {{count}}" tabindex="0"/>
|
|
555
|
+
<input type="checkbox" class="searchstax-facet-input-checkbox" data-test-id="searchstax-facet-input-checkbox" {{#disabled}}disabled{{/disabled}} {{#isChecked}}checked{{/isChecked}} aria-label="{{value}} {{count}}" tabindex="0"/>
|
|
555
556
|
</div>
|
|
556
|
-
<div class="searchstax-facet-value-label">{{value}}</div>
|
|
557
|
-
<div class="searchstax-facet-value-count">({{count}})</div>
|
|
557
|
+
<div class="searchstax-facet-value-label" data-test-id="searchstax-facet-value-label">{{value}}</div>
|
|
558
|
+
<div class="searchstax-facet-value-count" data-test-id="searchstax-facet-value-count">({{count}})</div>
|
|
558
559
|
`,
|
|
559
560
|
inputCheckboxClass: `searchstax-facet-input-checkbox`,
|
|
560
561
|
checkTriggerClasses: ["searchstax-facet-value-label","searchstax-facet-value-count",],
|
|
561
562
|
},
|
|
562
563
|
filterByTemplate: {
|
|
563
564
|
template: `
|
|
564
|
-
<div class="searchstax-facets-pill searchstax-facets-pill-filter-by" tabindex="0" role="button" >
|
|
565
|
+
<div class="searchstax-facets-pill searchstax-facets-pill-filter-by" tabindex="0" role="button" data-test-id="searchstax-facets-pill-filter-by" >
|
|
565
566
|
<div class="searchstax-facets-pill-label">Filter By</div>
|
|
566
567
|
</div>
|
|
567
568
|
`,
|
|
@@ -569,7 +570,7 @@ example of facets widget initialization with various options
|
|
|
569
570
|
},
|
|
570
571
|
selectedFacetsTemplate: {
|
|
571
572
|
template: `
|
|
572
|
-
<div class="searchstax-facets-pill searchstax-facets-pill-facets" tabindex="0" role="button">
|
|
573
|
+
<div class="searchstax-facets-pill searchstax-facets-pill-facets" tabindex="0" role="button" data-test-id="searchstax-facets-pill-facets">
|
|
573
574
|
<div class="searchstax-facets-pill-label">{{value}} ({{count}})</div>
|
|
574
575
|
<div class="searchstax-facets-pill-icon-close"></div>
|
|
575
576
|
</div>
|
|
@@ -602,13 +603,13 @@ searchstax.addSearchFeedbackWidget("search-feedback-container", {
|
|
|
602
603
|
main: {
|
|
603
604
|
template: `
|
|
604
605
|
{{#searchExecuted}}
|
|
605
|
-
<a href="#searchstax-search-results" class="searchstax-skip">Skip to results section</a>
|
|
606
|
-
<h4 class="searchstax-feedback-container">
|
|
606
|
+
<a href="#searchstax-search-results" data-test-id="searchstax-skip" class="searchstax-skip">Skip to results section</a>
|
|
607
|
+
<h4 class="searchstax-feedback-container" data-test-id="searchstax-feedback-container">
|
|
607
608
|
{{#hasResults}}
|
|
608
609
|
<span> Showing <b>{{startResultIndex}} - {{endResultIndex}}</b> </span> of <b>{{totalResults}}</b> results {{#searchTerm}} for "<b>{{searchTerm}}</b>" {{/searchTerm}}
|
|
609
|
-
<div class="searchstax-feedback-container-suggested">
|
|
610
|
+
<div class="searchstax-feedback-container-suggested" data-test-id="searchstax-feedback-container-suggested">
|
|
610
611
|
{{#autoCorrectedQuery}}
|
|
611
|
-
Search instead for <a href="#" aria-label="Search instead for: {{originalQuery}}" class="searchstax-feedback-original-query">{{originalQuery}}</a>
|
|
612
|
+
Search instead for <a href="#" aria-label="Search instead for: {{originalQuery}}" class="searchstax-feedback-original-query" data-test-id="searchstax-feedback-original-query">{{originalQuery}}</a>
|
|
612
613
|
{{/autoCorrectedQuery}}
|
|
613
614
|
</div>
|
|
614
615
|
{{/hasResults}}
|
|
@@ -647,7 +648,7 @@ searchstax.addRelatedSearchesWidget("searchstax-related-searches-container", {
|
|
|
647
648
|
main: {
|
|
648
649
|
template: `
|
|
649
650
|
{{#hasRelatedSearches}}
|
|
650
|
-
<div class="searchstax-related-searches-container" id="searchstax-related-searches-container">
|
|
651
|
+
<div class="searchstax-related-searches-container" data-test-id="searchstax-related-searches-container" id="searchstax-related-searches-container">
|
|
651
652
|
Related searches: <span id="searchstax-related-searches"></span>
|
|
652
653
|
{{#relatedSearches}}
|
|
653
654
|
<span class="searchstax-related-search">
|
|
@@ -661,7 +662,7 @@ searchstax.addRelatedSearchesWidget("searchstax-related-searches-container", {
|
|
|
661
662
|
},
|
|
662
663
|
relatedSearch: {
|
|
663
664
|
template: `
|
|
664
|
-
<span class="searchstax-related-search searchstax-related-search-item" aria-label="Related search: {{related_search}}" tabindex="0">
|
|
665
|
+
<span class="searchstax-related-search searchstax-related-search-item" data-test-id="searchstax-related-search-item" aria-label="Related search: {{related_search}}" tabindex="0">
|
|
665
666
|
{{ related_search }}{{^last}}<span>,</span>{{/last}}
|
|
666
667
|
</span>
|
|
667
668
|
`,
|
|
@@ -692,7 +693,7 @@ searchstax.addExternalPromotionsWidget("searchstax-external-promotions-layout-co
|
|
|
692
693
|
mainTemplate: {
|
|
693
694
|
template: `
|
|
694
695
|
{{#hasExternalPromotions}}
|
|
695
|
-
<div class="searchstax-external-promotions-container" id="searchstax-external-promotions-container">
|
|
696
|
+
<div class="searchstax-external-promotions-container" id="searchstax-external-promotions-container" data-test-id="searchstax-external-promotions-container">
|
|
696
697
|
External promotions go here
|
|
697
698
|
</div>
|
|
698
699
|
{{/hasExternalPromotions}}
|
|
@@ -701,16 +702,16 @@ searchstax.addExternalPromotionsWidget("searchstax-external-promotions-layout-co
|
|
|
701
702
|
},
|
|
702
703
|
externalPromotion: {
|
|
703
704
|
template: `
|
|
704
|
-
<div class="searchstax-external-promotion searchstax-search-result">
|
|
705
|
+
<div class="searchstax-external-promotion searchstax-search-result" data-test-id="searchstax-external-promotion">
|
|
705
706
|
<div class="icon-elevated"></div>
|
|
706
707
|
{{#url}}
|
|
707
|
-
<a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link"></a>
|
|
708
|
+
<a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link" data-test-id="searchstax-result-item-link"></a>
|
|
708
709
|
{{/url}}
|
|
709
710
|
<div class="searchstax-search-result-title-container">
|
|
710
|
-
<span class="searchstax-search-result-title">{{name}}</span>
|
|
711
|
+
<span class="searchstax-search-result-title" data-test-id="searchstax-search-result-title">{{name}}</span>
|
|
711
712
|
</div>
|
|
712
713
|
{{#description}}
|
|
713
|
-
<p class="searchstax-search-result-description searchstax-search-result-common">
|
|
714
|
+
<p class="searchstax-search-result-description searchstax-search-result-common" data-test-id="searchstax-search-result-description">
|
|
714
715
|
{{description}}
|
|
715
716
|
</p>
|
|
716
717
|
{{/description}}
|
|
@@ -749,9 +750,9 @@ searchstax.addSearchSortingWidget("search-sorting-container", {
|
|
|
749
750
|
template: `
|
|
750
751
|
{{#searchExecuted}}
|
|
751
752
|
{{#hasResultsOrExternalPromotions}}
|
|
752
|
-
<div class="searchstax-sorting-container">
|
|
753
|
-
<label class="searchstax-sorting-label" for="searchstax-search-order-select">Sort By</label>
|
|
754
|
-
<select id="searchstax-search-order-select" class="searchstax-search-order-select" >
|
|
753
|
+
<div class="searchstax-sorting-container" data-test-id="searchstax-sorting-container">
|
|
754
|
+
<label class="searchstax-sorting-label" data-test-id="searchstax-sorting-label" for="searchstax-search-order-select">Sort By</label>
|
|
755
|
+
<select id="searchstax-search-order-select" class="searchstax-search-order-select" data-test-id="searchstax-search-order-select" >
|
|
755
756
|
{{#sortOptions}}
|
|
756
757
|
<option value="{{key}}">
|
|
757
758
|
{{value}}
|