@searchstax-inc/searchstudio-ux-react 1.0.49 → 2.0.0
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/README.md +1267 -702
- package/README.mustache +556 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxAnswerWidgetTemplate.d.ts +3 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxExternalPromotionsWidgetTemplate.d.ts +3 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxFacetsWidgetTemplate.d.ts +8 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxInputWidgetTemplate.d.ts +4 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxLocationWidgetTemplate.d.ts +3 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxLocationWidgetTemplateConfig.d.ts +13 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxOverviewWidgetTemplate.d.ts +3 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxPaginationWidgetTemplate.d.ts +4 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxRelatedSearchesWidgetTemplate.d.ts +3 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxResultWidgetTemplate.d.ts +4 -0
- package/dist/@searchstax-inc/components/templates/SearchstaxSortingWidgetTemplate.d.ts +3 -0
- package/dist/@searchstax-inc/main.d.ts +1 -12
- package/dist/@searchstax-inc/searchstudio-ux-react.cjs +56 -54
- package/dist/@searchstax-inc/searchstudio-ux-react.d.cts +1 -12
- package/dist/@searchstax-inc/searchstudio-ux-react.iife.js +58 -56
- package/dist/@searchstax-inc/searchstudio-ux-react.mjs +2260 -2091
- package/dist/main.d.ts +12 -0
- package/package.json +5 -3
package/README.mustache
ADDED
|
@@ -0,0 +1,556 @@
|
|
|
1
|
+
# sitesearch-ux-react
|
|
2
|
+
|
|
3
|
+
Library to build Site Search page
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
npm install following package
|
|
7
|
+
`npm install --save @searchstax-inc/searchstudio-ux-react`
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
Add the following code to <head>:
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
<script type="text/javascript">
|
|
16
|
+
var _msq = _msq || []; //declare object
|
|
17
|
+
var analyticsBaseUrl = '<https://analytics-us-east.searchstax.co>';
|
|
18
|
+
(function () {
|
|
19
|
+
var ms = document.createElement('script');
|
|
20
|
+
ms.type = 'text/javascript';
|
|
21
|
+
ms.src = '<https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
|
|
22
|
+
var s = document.getElementsByTagName('script')[0];
|
|
23
|
+
s.parentNode.insertBefore(ms, s);
|
|
24
|
+
})();
|
|
25
|
+
</script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Initialization
|
|
29
|
+
sampleConfig object needs to be of type: `ISearchstaxConfig`
|
|
30
|
+
```
|
|
31
|
+
const sampleConfig = {
|
|
32
|
+
language: 'en',
|
|
33
|
+
searchURL: '',
|
|
34
|
+
suggesterURL: '',
|
|
35
|
+
trackApiKey: '',
|
|
36
|
+
searchAuth: '',
|
|
37
|
+
authType: 'basic',
|
|
38
|
+
router: {
|
|
39
|
+
enabled: true,
|
|
40
|
+
routeName: 'searchstax',
|
|
41
|
+
title: (result) => `Search results for: ${result.query}`,
|
|
42
|
+
ignoredKeys: []
|
|
43
|
+
},
|
|
44
|
+
hooks: {
|
|
45
|
+
beforeSearch: (props) => {
|
|
46
|
+
// modify props
|
|
47
|
+
return props;
|
|
48
|
+
},
|
|
49
|
+
afterSearch: (results) => {
|
|
50
|
+
// modify results
|
|
51
|
+
return results;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
<SearchstaxWrapper
|
|
57
|
+
language={sampleConfig.language}
|
|
58
|
+
searchURL={sampleConfig.searchURL}
|
|
59
|
+
suggesterURL={sampleConfig.suggesterURL}
|
|
60
|
+
trackApiKey={sampleConfig.trackApiKey}
|
|
61
|
+
searchAuth={sampleConfig.searchAuth}
|
|
62
|
+
authType={sampleConfig.authType}
|
|
63
|
+
router={sampleConfig.router}
|
|
64
|
+
beforeSearch={sampleConfig.hooks.beforeSearch}
|
|
65
|
+
afterSearch={sampleConfig.hooks.afterSearch}
|
|
66
|
+
>
|
|
67
|
+
</SearchstaxWrapper>
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Initial layout
|
|
73
|
+
Add any other Site Search components as needed:
|
|
74
|
+
```
|
|
75
|
+
<SearchstaxWrapper>
|
|
76
|
+
|
|
77
|
+
<SearchstaxInputWidget />
|
|
78
|
+
|
|
79
|
+
<SearchstaxResultsWidget />
|
|
80
|
+
|
|
81
|
+
{/* Other components */}
|
|
82
|
+
|
|
83
|
+
</SearchstaxWrapper>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### widgets
|
|
87
|
+
Following widgets are available:
|
|
88
|
+
|
|
89
|
+
[Answer Widget](#answer-widget)
|
|
90
|
+
|
|
91
|
+
[Input Widget](#input-widget)
|
|
92
|
+
|
|
93
|
+
[Location Widget](#location-widget)
|
|
94
|
+
|
|
95
|
+
[Result Widget](#result-widget)
|
|
96
|
+
|
|
97
|
+
[Facets Widget](#facets-widget)
|
|
98
|
+
|
|
99
|
+
[Pagination Widget](#pagination-widget)
|
|
100
|
+
|
|
101
|
+
[SearchFeedback Widget](#searchfeedback-widget)
|
|
102
|
+
|
|
103
|
+
[RelatedSearches Widget](#relatedsearches-widget)
|
|
104
|
+
|
|
105
|
+
[ExternalPromotions Widget](#externalpromotions-widget)
|
|
106
|
+
|
|
107
|
+
[sorting Widget](#sorting-widget)
|
|
108
|
+
|
|
109
|
+
### Answer Widget ###
|
|
110
|
+
SearchStax Site Search solution offers React and Next.js widgets to assist in building your custom search page.
|
|
111
|
+
|
|
112
|
+
The SearchstaxAnswerWidget component provides a React and Next.js AI answer widget for your searches.
|
|
113
|
+
|
|
114
|
+
**Usage**
|
|
115
|
+
|
|
116
|
+
```
|
|
117
|
+
<SearchstaxAnswerWidget
|
|
118
|
+
showShowMoreAfterWordCount={100}
|
|
119
|
+
feedbackConfig={feedbackConfig}
|
|
120
|
+
></SearchstaxAnswerWidget>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
**Props**
|
|
124
|
+
|
|
125
|
+
- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
|
|
126
|
+
- feedbackWidget – an optional object that configures thumbs-up and thumbs-down feedback functionality.
|
|
127
|
+
|
|
128
|
+
Example of feedbackWidget config:
|
|
129
|
+
```
|
|
130
|
+
const feedbackConfig = {
|
|
131
|
+
renderFeedbackWidget: true,
|
|
132
|
+
emailOverride: searchstaxEmailOverride,
|
|
133
|
+
thumbsUpValue: 10,
|
|
134
|
+
thumbsDownValue: 0
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
**searchAnswerTemplate**
|
|
140
|
+
|
|
141
|
+
The templates prop allows customizing the answer UI.
|
|
142
|
+
|
|
143
|
+
It receives the following props:
|
|
144
|
+
|
|
145
|
+
- shouldShowAnswer – boolean
|
|
146
|
+
- answerErrorMessage – string
|
|
147
|
+
- fullAnswerFormatted – string
|
|
148
|
+
- showMoreButtonVisible – boolean
|
|
149
|
+
- answerLoading – boolean
|
|
150
|
+
|
|
151
|
+
**Example**
|
|
152
|
+
|
|
153
|
+
```
|
|
154
|
+
{{&SearchstaxAnswerWidget}}
|
|
155
|
+
<SearchstaxAnswerWidget
|
|
156
|
+
searchAnswerTemplate={answerTemplate}
|
|
157
|
+
showShowMoreAfterWordCount={100}
|
|
158
|
+
></SearchstaxAnswerWidget>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Input Widget ###
|
|
162
|
+
|
|
163
|
+
SearchStax Site Search solution provides React and Next.js widgets to help you build your custom search page.
|
|
164
|
+
|
|
165
|
+
The SearchstaxInputWidget component provides a search input with autosuggest/autocomplete functionality.
|
|
166
|
+
|
|
167
|
+
**Usage**
|
|
168
|
+
```
|
|
169
|
+
<SearchstaxInputWidget
|
|
170
|
+
suggestAfterMinChars={3}
|
|
171
|
+
afterAutosuggest={afterAutosuggest}
|
|
172
|
+
beforeAutosuggest={beforeAutosuggest}
|
|
173
|
+
></SearchstaxInputWidget>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
**Props**
|
|
177
|
+
|
|
178
|
+
- suggestAfterMinChars - default 3. Number of characters needed for autosuggest to start triggering
|
|
179
|
+
- beforeAutosuggest - callback function that gets called before firing autosuggest. autosuggestProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
|
|
180
|
+
- afterAutosuggest - callback function that gets called after autosuggest has values but before rendering. It needs to return same type of data but it can be modified.
|
|
181
|
+
- inputTemplate - template override. look at examples below
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
**inputWidgetTemplate**
|
|
185
|
+
|
|
186
|
+
The inputTemplate prop allows customizing the input UI.
|
|
187
|
+
|
|
188
|
+
It receives the following props:
|
|
189
|
+
|
|
190
|
+
- locationEnabled – boolean
|
|
191
|
+
|
|
192
|
+
**example**
|
|
193
|
+
```
|
|
194
|
+
{{&SearchstaxLocationWidgetConfig}}
|
|
195
|
+
{{&SearchstaxLocationWidget}}
|
|
196
|
+
{{&SearchstaxInputWidget}}
|
|
197
|
+
|
|
198
|
+
<SearchstaxInputWidget
|
|
199
|
+
afterAutosuggest={afterAutosuggest}
|
|
200
|
+
beforeAutosuggest={beforeAutosuggest}
|
|
201
|
+
inputTemplate={InputTemplate}
|
|
202
|
+
></SearchstaxInputWidget>
|
|
203
|
+
```
|
|
204
|
+
### Location Widget ###
|
|
205
|
+
|
|
206
|
+
SearchStax Site Search solution offers a React search-location widget to assist with your custom search page.
|
|
207
|
+
|
|
208
|
+
The SearchstaxLocationWidget provides a location search input with location-based search functionality.
|
|
209
|
+
|
|
210
|
+
**Usage**
|
|
211
|
+
|
|
212
|
+
```
|
|
213
|
+
{{&SearchstaxLocationWidgetConfig}}
|
|
214
|
+
<SearchstaxLocationWidget hooks={ {locationDecode: locationDecodeFunction, locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress} } />
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
**Props**
|
|
218
|
+
|
|
219
|
+
- locationDecode - callback function to override location decoding
|
|
220
|
+
- locationDecodeCoordinatesToAddress - callback function to override location decoding
|
|
221
|
+
|
|
222
|
+
**Template Override**
|
|
223
|
+
|
|
224
|
+
The searchLocationTemplate prop allows customizing the location input UI.
|
|
225
|
+
|
|
226
|
+
It receives the following props:
|
|
227
|
+
|
|
228
|
+
- locationSearchDistanceValues – location distance values
|
|
229
|
+
- shouldShowLocationDistanceDropdown – boolean determining if distance dropdown should be shown
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
**Example**
|
|
233
|
+
|
|
234
|
+
```
|
|
235
|
+
{{&SearchstaxLocationWidgetConfig}}
|
|
236
|
+
{{&SearchstaxLocationWidget}}
|
|
237
|
+
<SearchstaxLocationWidget searchLocationTemplate={LocationTemplate} hooks={ {locationDecode:locationDecode, locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress} } />
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### Result Widget ###
|
|
241
|
+
|
|
242
|
+
The SearchStax Site Search solution provides a React and Next.js results widget to support your custom search page.
|
|
243
|
+
|
|
244
|
+
The SearchstaxResultsWidget displays the search results.
|
|
245
|
+
|
|
246
|
+
**Usage**
|
|
247
|
+
|
|
248
|
+
```
|
|
249
|
+
<SearchstaxResultWidget
|
|
250
|
+
afterLinkClick={afterLinkClick}
|
|
251
|
+
renderMethod={'pagination'}
|
|
252
|
+
></SearchstaxResultWidget>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
**Result Template Override**
|
|
256
|
+
|
|
257
|
+
The resultsTemplate prop allows customizing the result UI.
|
|
258
|
+
|
|
259
|
+
It receives no props:
|
|
260
|
+
- custom?: any - custom properties that may be added through aftersearchHook
|
|
261
|
+
- ribbon: string | null
|
|
262
|
+
- paths: string | null;
|
|
263
|
+
- url: string | null;
|
|
264
|
+
- title: string | null;
|
|
265
|
+
- titleTracking: string | null;
|
|
266
|
+
- promoted: boolean | null;
|
|
267
|
+
- thumbnail: string | null;
|
|
268
|
+
- date: string | null;
|
|
269
|
+
- snippet: string | null;
|
|
270
|
+
- description: string | null;
|
|
271
|
+
- uniqueId: string;
|
|
272
|
+
- position: number;
|
|
273
|
+
- distance: number | null;
|
|
274
|
+
- unit: string | null;
|
|
275
|
+
- unmappedFields: {
|
|
276
|
+
key: string;
|
|
277
|
+
value: string | string[] | boolean;
|
|
278
|
+
isImage?: boolean;
|
|
279
|
+
}[] - fields that were not mapped.
|
|
280
|
+
- allFields: { key: string; value: string | string[] | boolean }[] - all fields
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
**No Results Template Override**
|
|
284
|
+
|
|
285
|
+
The noResultTemplate prop allows customizing the result UI.
|
|
286
|
+
|
|
287
|
+
It receives following props:
|
|
288
|
+
|
|
289
|
+
- spellingSuggestion - suggestion of corrected spelling
|
|
290
|
+
- searchExecuted - boolean if search was executed
|
|
291
|
+
- searchTerm - term that was searched
|
|
292
|
+
|
|
293
|
+
**Example of default render method**
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
**Example of infinite scroll and pagination render methods**
|
|
299
|
+
```
|
|
300
|
+
{{&SearchstaxResultWidget}}
|
|
301
|
+
<SearchstaxResultWidget
|
|
302
|
+
afterLinkClick={afterLinkClick}
|
|
303
|
+
noResultTemplate={noResultTemplate}
|
|
304
|
+
resultsTemplate={resultsTemplate}
|
|
305
|
+
renderMethod={'pagination'}
|
|
306
|
+
></SearchstaxResultWidget>
|
|
307
|
+
// Infinite scroll
|
|
308
|
+
|
|
309
|
+
<SearchstaxResultWidget
|
|
310
|
+
afterLinkClick={afterLinkClick}
|
|
311
|
+
noResultTemplate={noResultTemplate}
|
|
312
|
+
resultsTemplate={resultsTemplate}
|
|
313
|
+
renderMethod={'infiniteScroll'}
|
|
314
|
+
></SearchstaxResultWidget>
|
|
315
|
+
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
### Pagination Widget ###
|
|
319
|
+
|
|
320
|
+
The SearchStax Site Search solution offers a pagination widget for React and Next.js search pages.
|
|
321
|
+
|
|
322
|
+
The SearchstaxPaginationWidget displays pagination controls for search results.
|
|
323
|
+
|
|
324
|
+
**Usage**
|
|
325
|
+
|
|
326
|
+
```
|
|
327
|
+
<SearchstaxPaginationWidget></SearchstaxPaginationWidget>
|
|
328
|
+
```
|
|
329
|
+
|
|
330
|
+
**Main Template Override**
|
|
331
|
+
|
|
332
|
+
Main template for the pagination controls.
|
|
333
|
+
|
|
334
|
+
It receives following props:
|
|
335
|
+
|
|
336
|
+
- nextPageLink - link of next page;
|
|
337
|
+
- previousPageLink - link of previous page;
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
**Infinite Scroll Template Override**
|
|
341
|
+
|
|
342
|
+
Main template for the pagination controls in infinite scroll mode.
|
|
343
|
+
|
|
344
|
+
It receives following props:
|
|
345
|
+
- isLastPage - boolean, true if its last page
|
|
346
|
+
- results - results.length can be used if there are results
|
|
347
|
+
|
|
348
|
+
**Example**
|
|
349
|
+
|
|
350
|
+
```
|
|
351
|
+
{{&SearchstaxPaginationWidget}}
|
|
352
|
+
<SearchstaxPaginationWidget paginationTemplate={paginationTemplate}></SearchstaxPaginationWidget>
|
|
353
|
+
// example of pagination widget for infinite scroll
|
|
354
|
+
<SearchstaxPaginationWidget infiniteScrollTemplate={infiniteScrollTemplate}></SearchstaxPaginationWidget>
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
### Facets Widget ###
|
|
358
|
+
|
|
359
|
+
The SearchStax Site Search solution offers a SearchstaxFacetsWidget component for React and Next.js. This widget displays the search facets.
|
|
360
|
+
|
|
361
|
+
**Facet Selection and Order**
|
|
362
|
+
|
|
363
|
+
Facet lists are configured and ordered on the Site Search [Faceting Tab](https://www.searchstax.com/docs/searchstudio/faceting-tab/).
|
|
364
|
+
|
|
365
|
+
**Usage**
|
|
366
|
+
|
|
367
|
+
```
|
|
368
|
+
<SearchstaxFacetsWidget
|
|
369
|
+
facetingType="and"
|
|
370
|
+
itemsPerPageDesktop={2}
|
|
371
|
+
itemsPerPageMobile={3}
|
|
372
|
+
specificFacets={undefined}
|
|
373
|
+
></SearchstaxFacetsWidget>
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
**Props**
|
|
377
|
+
|
|
378
|
+
- facetingType: "and" | "or" | "showUnavailable" | "tabs"; // type that determines how facets will behave
|
|
379
|
+
- specificFacets?: string[]; // optional array of facet names that if provided will only render those facets
|
|
380
|
+
- itemsPerPageDesktop: number; // default expanded facets for desktop
|
|
381
|
+
- itemsPerPageMobile: number; // default expanded facets for mobile
|
|
382
|
+
- templates - see examples below
|
|
383
|
+
|
|
384
|
+
|
|
385
|
+
**Main Template Desktop Override**
|
|
386
|
+
|
|
387
|
+
Main wrapper template for desktop facets display.
|
|
388
|
+
|
|
389
|
+
It receives following props from [IFacetsTemplateData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
**Main Template Mobile Override**
|
|
393
|
+
|
|
394
|
+
Main wrapper template for mobile facets display.
|
|
395
|
+
|
|
396
|
+
It receives following props from [IFacetsTemplateData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)
|
|
397
|
+
|
|
398
|
+
|
|
399
|
+
**Example**
|
|
400
|
+
```
|
|
401
|
+
{{&SearchstaxFacetsWidget}}
|
|
402
|
+
<SearchstaxFacetsWidget
|
|
403
|
+
facetingType="and"
|
|
404
|
+
itemsPerPageDesktop={2}
|
|
405
|
+
itemsPerPageMobile={3}
|
|
406
|
+
specificFacets={undefined}
|
|
407
|
+
facetsTemplateDesktop={facetsTemplateDesktop}
|
|
408
|
+
facetsTemplateMobile={facetsTemplateMobile}
|
|
409
|
+
></SearchstaxFacetsWidget>
|
|
410
|
+
```
|
|
411
|
+
|
|
412
|
+
### SearchFeedback Widget ###
|
|
413
|
+
|
|
414
|
+
The SearchStax Site Search solution provides a search feedback widget to support your React and Next.js search pages.
|
|
415
|
+
|
|
416
|
+
The SearchstaxFeedbackWidget displays search feedback and stats.
|
|
417
|
+
|
|
418
|
+
**Usage**
|
|
419
|
+
|
|
420
|
+
```
|
|
421
|
+
<SearchstaxOverviewWidget></SearchstaxOverviewWidget>
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
**Main Template Override**
|
|
425
|
+
|
|
426
|
+
Main template for the search feedback message.
|
|
427
|
+
|
|
428
|
+
It receives following props:
|
|
429
|
+
- searchExecuted - boolean, true if search was executed
|
|
430
|
+
- hasResults - boolean, true if search has results
|
|
431
|
+
- startResultIndex - number, start of page results
|
|
432
|
+
- endResultIndex - number, end of page results
|
|
433
|
+
- totalResults - number, total results
|
|
434
|
+
- searchTerm - term that was searched
|
|
435
|
+
- autoCorrectedQuery - query that search was autocorrected to
|
|
436
|
+
- originalQuery - original query
|
|
437
|
+
|
|
438
|
+
**Example**
|
|
439
|
+
```
|
|
440
|
+
{{&SearchstaxOverviewWidget}}
|
|
441
|
+
<SearchstaxOverviewWidget searchOverviewTemplate={searchOverviewTemplate}></SearchstaxOverviewWidget>
|
|
442
|
+
```
|
|
443
|
+
|
|
444
|
+
### RelatedSearches widget ###
|
|
445
|
+
|
|
446
|
+
The SearchStax Site Search solution offers a related-searches widget for React and Next.js search pages.
|
|
447
|
+
|
|
448
|
+
The SearchstaxRelatedSearchesWidget displays related searches.
|
|
449
|
+
|
|
450
|
+
**Usage**
|
|
451
|
+
```
|
|
452
|
+
<SearchstaxRelatedSearchesWidget
|
|
453
|
+
relatedSearchesURL={config.relatedSearchesURL}
|
|
454
|
+
relatedSearchesAPIKey={config.relatedSearchesAPIKey}
|
|
455
|
+
></SearchstaxRelatedSearchesWidget>
|
|
456
|
+
```
|
|
457
|
+
|
|
458
|
+
**Main Template Override**
|
|
459
|
+
|
|
460
|
+
Main template for related searches.
|
|
461
|
+
|
|
462
|
+
It receives following props:
|
|
463
|
+
|
|
464
|
+
- hasRelatedSearches - boolean, true if has related searches
|
|
465
|
+
- relatedSearches - array of related searches
|
|
466
|
+
- related_search - string, related searc
|
|
467
|
+
- last - boolean, true if last related search
|
|
468
|
+
|
|
469
|
+
**Example**
|
|
470
|
+
|
|
471
|
+
```
|
|
472
|
+
{{&SearchstaxRelatedSearchesWidget}}
|
|
473
|
+
<SearchstaxRelatedSearchesWidget
|
|
474
|
+
relatedSearchesURL={config.relatedSearchesURL}
|
|
475
|
+
relatedSearchesAPIKey={config.relatedSearchesAPIKey}
|
|
476
|
+
searchRelatedSearchesTemplate={searchRelatedSearchesTemplate}
|
|
477
|
+
></SearchstaxRelatedSearchesWidget>
|
|
478
|
+
```
|
|
479
|
+
|
|
480
|
+
### ExternalPromotions widget ###
|
|
481
|
+
|
|
482
|
+
The SearchStax Site Search solution offers an external-promotions widget to assist with your React and Next.js custom search pages.
|
|
483
|
+
|
|
484
|
+
The SearchstaxExternalPromotionsWidget displays external promotions fetched from the API.
|
|
485
|
+
|
|
486
|
+
**Usage**
|
|
487
|
+
|
|
488
|
+
```
|
|
489
|
+
<SearchstaxExternalPromotionsWidget></SearchstaxExternalPromotionsWidget>
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
**Main Template Override**
|
|
493
|
+
|
|
494
|
+
Main template for external promotions.
|
|
495
|
+
|
|
496
|
+
It receives following props:
|
|
497
|
+
|
|
498
|
+
- hasExternalPromotions - boolean, true if has external promotions
|
|
499
|
+
- url - url of external promotion
|
|
500
|
+
- uniqueId - unique id
|
|
501
|
+
- name - name of promotion
|
|
502
|
+
- description - description
|
|
503
|
+
|
|
504
|
+
**Example**
|
|
505
|
+
```
|
|
506
|
+
{{&SearchstaxExternalPromotionsWidget}}
|
|
507
|
+
<SearchstaxExternalPromotionsWidget
|
|
508
|
+
searchExternalPromotionsTemplate={searchExternalPromotionsTemplate}
|
|
509
|
+
></SearchstaxExternalPromotionsWidget>
|
|
510
|
+
```
|
|
511
|
+
|
|
512
|
+
|
|
513
|
+
### Sorting Widget ###
|
|
514
|
+
|
|
515
|
+
The SearchStax Site Search solution offers a sorting widget for your React or Next.js custom search page.
|
|
516
|
+
|
|
517
|
+
The SearchstaxSortingWidget displays sorting options for search results.
|
|
518
|
+
|
|
519
|
+
**Usage**
|
|
520
|
+
|
|
521
|
+
```
|
|
522
|
+
<SearchstaxSortingWidget></SearchstaxSortingWidget>
|
|
523
|
+
```
|
|
524
|
+
|
|
525
|
+
**Main Template Override**
|
|
526
|
+
|
|
527
|
+
Main template for sorting widget.
|
|
528
|
+
|
|
529
|
+
It receives following props:
|
|
530
|
+
|
|
531
|
+
- searchExecuted - boolean, true if search was executed
|
|
532
|
+
- hasResultsOrExternalPromotions - boolean, true if there are results or external promotions
|
|
533
|
+
- sortOptions - array of sort options, has key/value
|
|
534
|
+
|
|
535
|
+
**Example**
|
|
536
|
+
|
|
537
|
+
```
|
|
538
|
+
{{&SearchstaxSortingWidget}}
|
|
539
|
+
<SearchstaxSortingWidget searchSortingTemplate={searchSortingTemplate}></SearchstaxSortingWidget>
|
|
540
|
+
```
|
|
541
|
+
|
|
542
|
+
|
|
543
|
+
## Template overrides
|
|
544
|
+
Templates use relatedsearches templating.
|
|
545
|
+
|
|
546
|
+
## STYLING
|
|
547
|
+
|
|
548
|
+
scss styles can be imported from searchstudio-ux-js
|
|
549
|
+
```
|
|
550
|
+
@import './../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';
|
|
551
|
+
```
|
|
552
|
+
css can be taken from
|
|
553
|
+
|
|
554
|
+
```
|
|
555
|
+
./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css
|
|
556
|
+
```
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ISearchstaxAnswerData } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function answerTemplate(answerData: null | ISearchstaxAnswerData, showMore: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export { answerTemplate };
|
package/dist/@searchstax-inc/components/templates/SearchstaxExternalPromotionsWidgetTemplate.d.ts
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { IExternalPromotion, ISearchstaxExternalPromotionsData } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function searchExternalPromotionsTemplate(externalPromotionsData: null | ISearchstaxExternalPromotionsData, trackClick: (externalPromotion: IExternalPromotion, event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export { searchExternalPromotionsTemplate };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IFacetData, IFacetValue, IFacetValueData, IFacetsTemplateData } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function facetsTemplateDesktop(facetsTemplateDataDesktop: IFacetsTemplateData | null, facetContainers: {
|
|
3
|
+
[key: string]: React.LegacyRef<HTMLDivElement> | undefined;
|
|
4
|
+
}, isNotDeactivated: (name: string) => boolean, toggleFacetGroup: (name: string) => void, selectFacet: (index: string, event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: IFacetValueData, isInput: boolean) => void, isChecked: (facetValue: IFacetValueData) => boolean | undefined, showMoreLessDesktop: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, data: IFacetData) => void): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function facetsTemplateMobile(facetsTemplateDataMobile: IFacetsTemplateData | null, selectedFacetsCheckboxes: IFacetValue[], facetContainers: {
|
|
6
|
+
[key: string]: React.LegacyRef<HTMLDivElement> | undefined;
|
|
7
|
+
}, isNotDeactivated: (name: string) => boolean, toggleFacetGroup: (name: string) => void, selectFacet: (index: string, event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: IFacetValueData, isInput: boolean, isMobile?: boolean) => void, isChecked: (facetValue: IFacetValueData) => boolean | undefined, unselectFacet: (facet: IFacetValue) => void, showMoreLessMobile: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, data: IFacetData) => void, openOverlay: () => void, closeOverlay: () => void, unselectAll: () => void): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { facetsTemplateDesktop, facetsTemplateMobile };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ISearchstaxSuggestion } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
import { locationWidgetConfig } from "./SearchstaxLocationWidgetTemplateConfig.js";
|
|
3
|
+
declare function InputTemplate(suggestions: ISearchstaxSuggestion[], onMouseLeave: () => void, onMouseOver: (suggestion: ISearchstaxSuggestion) => void, onMouseClick: () => void): React.ReactElement;
|
|
4
|
+
export { InputTemplate, locationWidgetConfig };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ISearchstaxLocationRenderData } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function LocationTemplate(locationData: null | ISearchstaxLocationRenderData, locationChange: (value: string) => void, locationBlur: (value: string) => void, radiusChange: (value: string | number) => void, getCurrentLocation: () => void, inputValue?: string | null, selectValue?: string | number | undefined, locationError?: boolean): React.ReactElement;
|
|
3
|
+
export { LocationTemplate };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ISearchstaxLocation } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare const locationWidgetConfig: {
|
|
3
|
+
locationDecode: (term: string) => Promise<ISearchstaxLocation>;
|
|
4
|
+
locationDecodeCoordinatesToAddress: (lat: string, lon: string) => Promise<ISearchstaxLocation>;
|
|
5
|
+
locationSearchEnabled: boolean;
|
|
6
|
+
locationValuesOverride: {
|
|
7
|
+
locationDistanceEnabled: boolean;
|
|
8
|
+
filterValues: string[];
|
|
9
|
+
filterUnit: string;
|
|
10
|
+
locationFilterDefaultValue: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export { locationWidgetConfig };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ISearchstaxSearchFeedbackData } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function searchOverviewTemplate(searchFeedbackData: null | ISearchstaxSearchFeedbackData, onOriginalQueryClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export { searchOverviewTemplate };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { IPaginationData } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function paginationTemplate(paginationData: IPaginationData | null, nextPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void, previousPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function infiniteScrollTemplate(paginationData: IPaginationData | null, nextPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export { paginationTemplate, infiniteScrollTemplate };
|
package/dist/@searchstax-inc/components/templates/SearchstaxRelatedSearchesWidgetTemplate.d.ts
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ISearchstaxRelatedSearchResult, ISearchstaxRelatedSearchesData } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function searchRelatedSearchesTemplate(relatedData: null | ISearchstaxRelatedSearchesData, executeSearch: (result: ISearchstaxRelatedSearchResult) => void): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export { searchRelatedSearchesTemplate };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ISearchstaxParsedResult, ISearchstaxSearchMetadata } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadata | null, executeSearch: (searchTerm: string) => void): React.ReactElement;
|
|
3
|
+
declare function resultsTemplate(searchResults: ISearchstaxParsedResult[], resultClicked: (results: ISearchstaxParsedResult, event: any) => void): React.ReactElement;
|
|
4
|
+
export { noResultTemplate, resultsTemplate };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ISearchstaxSearchSortingData } from "@searchstax-inc/searchstudio-ux-js";
|
|
2
|
+
declare function searchSortingTemplate(sortingData: null | ISearchstaxSearchSortingData, orderChange: (value: string) => void, selectedSorting: string): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export { searchSortingTemplate };
|
|
@@ -1,12 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import SearchstaxWrapper from "./components/SearchstaxWrapper";
|
|
3
|
-
import SearchstaxResultWidget from "./components/SearchstaxResultWidget";
|
|
4
|
-
import SearchstaxPaginationWidget from "./components/SearchstaxPaginationWidget";
|
|
5
|
-
import SearchstaxSortingWidget from "./components/SearchstaxSortingWidget";
|
|
6
|
-
import SearchstaxOverviewWidget from "./components/SearchstaxOverviewWidget";
|
|
7
|
-
import SearchstaxFacetsWidget from "./components/SearchstaxFacetsWidget";
|
|
8
|
-
import SearchstaxRelatedSearchesWidget from './components/SearchstaxRelatedSearchesWidget';
|
|
9
|
-
import SearchstaxExternalPromotionsWidget from './components/SearchstaxExternalPromotionsWidget';
|
|
10
|
-
import SearchstaxAnswerWidget from './components/SearchstaxAnswerWidget';
|
|
11
|
-
import SearchstaxLocationWidget from './components/SearchstaxLocationWidget';
|
|
12
|
-
export { SearchstaxWrapper, SearchstaxResultWidget, SearchstaxInputWidget, SearchstaxPaginationWidget, SearchstaxSortingWidget, SearchstaxOverviewWidget, SearchstaxFacetsWidget, SearchstaxRelatedSearchesWidget, SearchstaxExternalPromotionsWidget, SearchstaxAnswerWidget, SearchstaxLocationWidget };
|
|
1
|
+
export * from '../main'
|