@searchstax-inc/searchstudio-ux-js 0.3.0 → 0.3.2

package/README.md

@@ -28,42 +28,7 @@ After importing Searchstax class a new instance needs to be created:
 ```const searchstax = new Searchstax();```
 
 ## Initialization
-Initialization object
-
-{
-
-  `language: string;` - language code. Example: 'en'
-
-  `searchURL: string;` - SeachStudio select endpoint
-
-  `suggesterURL: string;` - SeachStudio suggest endpoint
-
-  `trackApiKey: string;` - Api key used for tracking events
-
-  `searchAuth: string;` - Authentication value. based on authType it's either a token value or basic auth value
-
-  `authType: 'token' | 'basic';` - Type of authentication
-
-  `router: {` - optional object containing router settings
-
-    'enabled: boolean' - if enabled navigation will history and will keep track of search state
-
-    'routeName: string' - prefix name for all search properties
-
-    'title: (result: ISearchObject) => string' - function that will update page title
-
-    `ignoredKeys: string[]` - array of keys to ignore and not keep track of
-
-  `}`
-
-  `hooks?: {` - optional object that provides various hook options
-
-    `beforeSearch?: (props: ISearchObject) => ISearchObject | null;` - this function gets called before firing search. searchProps 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.
-
-    `afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[];` - this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
-  `};`
-
-}
+Initialization object needs to be of type: [ISearchstaxConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/connector.interface.ts#L5)
 
 Initialization example
 ```
@@ -146,31 +111,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `suggestAfterMinChars: number;` - controls how many characters the UI should accept at the minimum before showing suggestions
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplate?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `searchInputId: string;` - id of search input within the mainTemplate
-    `};`
-
-    `autosuggestItemTemplate?: {` - autosuggest item template in Mustache
-      `template: string;` - autosuggest template in Mustache templating language
-    `};`
-  `};`
-
-  `hooks?: {` - optional object that provides various hook options
-
-    `beforeAutosuggest?: (props: ISearchstaxSuggestProps) => ISearchstaxSuggestProps | null;` - this function 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.
-
-    `afterAutosuggest?: (result: ISearchstaxSuggestResponse) => ISearchstaxSuggestResponse;`- this function gets called after autosuggest has values but before rendering. It needs to return same type of data but it can be modified.
-
-  `};`
-
-}
+b. Input widget config object of type: [ISearchstaxSearchInputConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchInputConfig.interface.ts#L4)
 
 
 example of input widget initialization with minimum options
@@ -223,34 +164,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `searchResultUniqueIdAttribute?: string;` - this is needed only if searchResultTemplate is overridden. searchResultTemplate needs to have unique result id property. Default is data-searchstax-unique-result-id="uniqueId". see example below on how it is used
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplate?: {`
-        template: string; - main template in Mustache templating language.,
-        searchResultsContainerId: string;` - this is needed only if mainTemplate is overridden. It points to an element in the template where results need to be rendered
-    }
-
-    `searchResultTemplate?: {`
-        template: string - result template using Mustache. ISearchstaxParsedResult is passed to the template and all its properties are available to be used when rendering;
-        searchResultUniqueIdAttribute?: string - this is needed only if searchResultTemplate is overridden. searchResultTemplate needs to have unique result id property. Default is data-searchstax-unique-result-id="niqueId". see example below on how it is used
-    }
-
-    `noSearchResultTemplate?: {`
-        template: string - Mustache template for no results section override. spellingSuggestion and searchTerm are values available in the template
-    }
-
-  `};`
-
-  `hooks?: {` - optional object that provides various hook options
-
-    `afterLinkClick?: (resultClicked: ISearchstaxParsedResult) => ISearchstaxParsedResult | null;` - function is called after user clicks result and passes that result as a property. when result is passed along tracking will execute and user will be navigated if null is returned events are canceled and nothing happens.
-
-  `};`
-}
+b. Result widget config object of type: [ISearchstaxSearchResultsConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchResultsConfig.interface.ts#L3)
 
 example of results widget initialization with minimum options
 ```
@@ -353,18 +267,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplate?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language. Data available: IPaginationData
-        `previousButtonClass: string;` - class of previous page link within template,
-        `nextButtonClass: string;` - class of next page link within template,
-    `};`
-  `};`
-
-}
+b. Pagination widget config object of type: [ISearchstaxSearchPaginationConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchPaginationConfig.interface.ts#L1)
 
 example of pagination widget initialization with minimum options
 ```
@@ -401,65 +304,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-   `facetingType`: "and" | "or" | "showUnavailable" | "tabs" - type that determines how facets will behave,
-
-   'specificFacets?: string[]' - optional array of facet names that if provided will only render those facets
-
-   `itemsPerPageDesktop`: number - default expanded facets for desktop,
-
-   `itemsPerPageMobile`: number - default expanded facets for mobile,
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplateDesktop?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language data available: IFacetsTemplateData
-        `facetsContainerClass: string;` - class of container where facets will be placed
-    `},`
-
-    `mainTemplateMobile?: {` - optional object for overriding main mobile template
-        `template: string;` - main template in Mustache templating language. data available: IFacetsTemplateData
-        `facetsContainerId: string;` - id of container where facets will be placed
-        `closeOverlayTriggerClasses: string[];` - class list of all elements that should trigger mobile overlay close action
-        `filterByContainerId: string` - id of container where "Filter By" button will be rendered
-        'selectedFacetsContainerId: string' - id of container where selected facets will be listed
-    `},`
-
-    `showMoreButtonContainerTemplate?: {` - optional object for overriding facet section show more/less template
-        `template: string;` - main template in Mustache templating language. data available: IFacetData
-        `showMoreButtonClass: string;` - class of container where show more/less button will be placed
-    `},`
-
-    `facetItemContainerTemplate?: {` - optional object for overriding facet container template
-        `template: string;` - main template in Mustache templating language. data available: IFacetData
-        'facetListTitleContainerClass: string;' - container class where facet category title will be rendered within template
-        `facetListContainerClass: string;` - container class where facet items will be listed
-       `},`
-
-      `clearFacetsTemplate?: {` - optional object for overriding clear facets container template
-        `template: string;` - main template in Mustache templating language. data available: {shouldShow: boolean}
-        'containerId: string;' - container id where clear facets button will be rendered
-       `},`
-
-      `facetItemTemplate?: {` - optional object for overriding clear facet item template
-        `template: string;` - main template in Mustache templating language. data available:  { ...IFacetValueData, isChecked }
-        'inputCheckboxClass: string;' - class of checkboxes
-        'checkTriggerClasses: string[];' - class list of elements that trigger facet select/unselect action
-       `},`
-
-       `filterByTemplate?: {` - optional object for overriding filter by button template
-        `template: string;` - main template in Mustache templating language
-        'containerId: string;' - id where button will be placed within the template
-       `},`
-
-       `selectedFacetsTemplate?: {` - optional object for overriding selected facets template
-        `template: string;` - main template in Mustache templating language. data available: IFacetValue | IFacetValueRange
-        'containerId: string;' - id where selected facets will be placed within the template
-       `},`
-  `};`
-
-}
+b. Facets widget config object of type: [ISearchstaxSearchFacetsConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchFacetsConfig.interface.ts#L1)
 
 example of facets widget initialization with minimum options
 ```
@@ -584,17 +429,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `main?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-    `};`
-
-  `};`
-
-}
+b. SearchFeedback widget config object of type: [ISearchstaxSearchFeedbackConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchFeedbackConfig.interface.ts#L1)
 
 
 example of search feedback widget initialization with minimum options
@@ -612,9 +447,15 @@ searchstax.addSearchFeedbackWidget("search-feedback-container", {
         {{#searchExecuted}}
             <div class="searchstax-feedback-container">
                 Showing <b>{{startResultIndex}} - {{endResultIndex}}</b> of <b>{{totalResults}}</b> results {{#searchTerm}} for "<b>{{searchTerm}}</b>" {{/searchTerm}}
+                <div class="searchstax-feedback-container-suggested">
+                  {{#autoCorrectedQuery}}
+                    Search instead for <a href="#" class="searchstax-feedback-original-query">{{originalQuery}}</a>
+                  {{/autoCorrectedQuery}}
+                </div>
             </div>
         {{/searchExecuted}}
         `,
+          originalQueryClass: `searchstax-feedback-original-query`
       }
     },
   });
@@ -625,23 +466,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `main?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `relatedSearchesContainerClass: string;` - class where related searches will be rendered within the template
-    `};`
-
-    `relatedSearch?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `relatedSearchContainerClass: string;` - class where related search item will be rendered within the template
-    `};`
-
-  `};`
-
-}
+b. RelatedSearches widget config object of type: [ISearchstaxRelatedSearchesConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchRelatedSearchesConfig.interface.ts#L1)
 
 
 example of search feedback widget initialization with minimum options
@@ -691,22 +516,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplate?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `externalPromotionsContainerId: string;` - id where external promotions will be rendered within the template
-    `};`
-
-    `externalPromotion?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-    `};`
-
-  `};`
-
-}
+b. ExternalPromotions widget config object of type: [ISearchstaxExternalPromotionsConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchExternalPromotionsConfig.interface.ts#L1)
 
 
 example of search feedback widget initialization with minimum options
@@ -763,18 +573,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `main?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `selectId: string;` - id of select element within the template
-    `};`
-
-  `};`
-
-}
+b. Sorting widget config object of type: [ISearchstaxSearchSortingConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchSortingConfig.interface.ts#L1)
 
 
 example of sorting widget initialization with minimum options

package/README.mustache

@@ -28,42 +28,7 @@ After importing Searchstax class a new instance needs to be created:
 ```const searchstax = new Searchstax();```
 
 ## Initialization
-Initialization object
-
-{
-
-  `language: string;` - language code. Example: 'en'
-
-  `searchURL: string;` - SeachStudio select endpoint
-
-  `suggesterURL: string;` - SeachStudio suggest endpoint
-
-  `trackApiKey: string;` - Api key used for tracking events
-
-  `searchAuth: string;` - Authentication value. based on authType it's either a token value or basic auth value
-
-  `authType: 'token' | 'basic';` - Type of authentication
-
-  `router: {` - optional object containing router settings
-
-    'enabled: boolean' - if enabled navigation will history and will keep track of search state
-
-    'routeName: string' - prefix name for all search properties
-
-    'title: (result: ISearchObject) => string' - function that will update page title
-
-    `ignoredKeys: string[]` - array of keys to ignore and not keep track of
-
-  `}`
-
-  `hooks?: {` - optional object that provides various hook options
-
-    `beforeSearch?: (props: ISearchObject) => ISearchObject | null;` - this function gets called before firing search. searchProps 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.
-
-    `afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[];` - this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
-  `};`
-
-}
+Initialization object needs to be of type: [ISearchstaxConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/connector.interface.ts#L5)
 
 Initialization example
 ```
@@ -146,31 +111,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `suggestAfterMinChars: number;` - controls how many characters the UI should accept at the minimum before showing suggestions
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplate?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `searchInputId: string;` - id of search input within the mainTemplate
-    `};`
-
-    `autosuggestItemTemplate?: {` - autosuggest item template in Mustache
-      `template: string;` - autosuggest template in Mustache templating language
-    `};`
-  `};`
-
-  `hooks?: {` - optional object that provides various hook options
-
-    `beforeAutosuggest?: (props: ISearchstaxSuggestProps) => ISearchstaxSuggestProps | null;` - this function 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.
-
-    `afterAutosuggest?: (result: ISearchstaxSuggestResponse) => ISearchstaxSuggestResponse;`- this function gets called after autosuggest has values but before rendering. It needs to return same type of data but it can be modified.
-
-  `};`
-
-}
+b. Input widget config object of type: [ISearchstaxSearchInputConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchInputConfig.interface.ts#L4)
 
 
 example of input widget initialization with minimum options
@@ -214,34 +155,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `searchResultUniqueIdAttribute?: string;` - this is needed only if searchResultTemplate is overridden. searchResultTemplate needs to have unique result id property. Default is data-searchstax-unique-result-id="uniqueId". see example below on how it is used
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplate?: {`
-        template: string; - main template in Mustache templating language.,
-        searchResultsContainerId: string;` - this is needed only if mainTemplate is overridden. It points to an element in the template where results need to be rendered
-    }
-
-    `searchResultTemplate?: {`
-        template: string - result template using Mustache. ISearchstaxParsedResult is passed to the template and all its properties are available to be used when rendering;
-        searchResultUniqueIdAttribute?: string - this is needed only if searchResultTemplate is overridden. searchResultTemplate needs to have unique result id property. Default is data-searchstax-unique-result-id="niqueId". see example below on how it is used
-    }
-
-    `noSearchResultTemplate?: {`
-        template: string - Mustache template for no results section override. spellingSuggestion and searchTerm are values available in the template
-    }
-
-  `};`
-
-  `hooks?: {` - optional object that provides various hook options
-
-    `afterLinkClick?: (resultClicked: ISearchstaxParsedResult) => ISearchstaxParsedResult | null;` - function is called after user clicks result and passes that result as a property. when result is passed along tracking will execute and user will be navigated if null is returned events are canceled and nothing happens.
-
-  `};`
-}
+b. Result widget config object of type: [ISearchstaxSearchResultsConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchResultsConfig.interface.ts#L3)
 
 example of results widget initialization with minimum options
 ```
@@ -280,18 +194,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplate?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language. Data available: IPaginationData
-        `previousButtonClass: string;` - class of previous page link within template,
-        `nextButtonClass: string;` - class of next page link within template,
-    `};`
-  `};`
-
-}
+b. Pagination widget config object of type: [ISearchstaxSearchPaginationConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchPaginationConfig.interface.ts#L1)
 
 example of pagination widget initialization with minimum options
 ```
@@ -316,65 +219,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-   `facetingType`: "and" | "or" | "showUnavailable" | "tabs" - type that determines how facets will behave,
-
-   'specificFacets?: string[]' - optional array of facet names that if provided will only render those facets
-
-   `itemsPerPageDesktop`: number - default expanded facets for desktop,
-
-   `itemsPerPageMobile`: number - default expanded facets for mobile,
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplateDesktop?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language data available: IFacetsTemplateData
-        `facetsContainerClass: string;` - class of container where facets will be placed
-    `},`
-
-    `mainTemplateMobile?: {` - optional object for overriding main mobile template
-        `template: string;` - main template in Mustache templating language. data available: IFacetsTemplateData
-        `facetsContainerId: string;` - id of container where facets will be placed
-        `closeOverlayTriggerClasses: string[];` - class list of all elements that should trigger mobile overlay close action
-        `filterByContainerId: string` - id of container where "Filter By" button will be rendered
-        'selectedFacetsContainerId: string' - id of container where selected facets will be listed
-    `},`
-
-    `showMoreButtonContainerTemplate?: {` - optional object for overriding facet section show more/less template
-        `template: string;` - main template in Mustache templating language. data available: IFacetData
-        `showMoreButtonClass: string;` - class of container where show more/less button will be placed
-    `},`
-
-    `facetItemContainerTemplate?: {` - optional object for overriding facet container template
-        `template: string;` - main template in Mustache templating language. data available: IFacetData
-        'facetListTitleContainerClass: string;' - container class where facet category title will be rendered within template
-        `facetListContainerClass: string;` - container class where facet items will be listed
-       `},`
-
-      `clearFacetsTemplate?: {` - optional object for overriding clear facets container template
-        `template: string;` - main template in Mustache templating language. data available: {shouldShow: boolean}
-        'containerId: string;' - container id where clear facets button will be rendered
-       `},`
-
-      `facetItemTemplate?: {` - optional object for overriding clear facet item template
-        `template: string;` - main template in Mustache templating language. data available:  { ...IFacetValueData, isChecked }
-        'inputCheckboxClass: string;' - class of checkboxes
-        'checkTriggerClasses: string[];' - class list of elements that trigger facet select/unselect action
-       `},`
-
-       `filterByTemplate?: {` - optional object for overriding filter by button template
-        `template: string;` - main template in Mustache templating language
-        'containerId: string;' - id where button will be placed within the template
-       `},`
-
-       `selectedFacetsTemplate?: {` - optional object for overriding selected facets template
-        `template: string;` - main template in Mustache templating language. data available: IFacetValue | IFacetValueRange
-        'containerId: string;' - id where selected facets will be placed within the template
-       `},`
-  `};`
-
-}
+b. Facets widget config object of type: [ISearchstaxSearchFacetsConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchFacetsConfig.interface.ts#L1)
 
 example of facets widget initialization with minimum options
 ```
@@ -440,17 +285,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `main?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-    `};`
-
-  `};`
-
-}
+b. SearchFeedback widget config object of type: [ISearchstaxSearchFeedbackConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchFeedbackConfig.interface.ts#L1)
 
 
 example of search feedback widget initialization with minimum options
@@ -465,6 +300,7 @@ searchstax.addSearchFeedbackWidget("search-feedback-container", {
     templates: {
       main: {
           template: `{{&searchFeedback.main.template}}`,
+          originalQueryClass: `{{&searchFeedback.main.originalQueryClass}}`
       }
     },
   });
@@ -475,23 +311,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `main?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `relatedSearchesContainerClass: string;` - class where related searches will be rendered within the template
-    `};`
-
-    `relatedSearch?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `relatedSearchContainerClass: string;` - class where related search item will be rendered within the template
-    `};`
-
-  `};`
-
-}
+b. RelatedSearches widget config object of type: [ISearchstaxRelatedSearchesConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchRelatedSearchesConfig.interface.ts#L1)
 
 
 example of search feedback widget initialization with minimum options
@@ -526,22 +346,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `mainTemplate?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `externalPromotionsContainerId: string;` - id where external promotions will be rendered within the template
-    `};`
-
-    `externalPromotion?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-    `};`
-
-  `};`
-
-}
+b. ExternalPromotions widget config object of type: [ISearchstaxExternalPromotionsConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchExternalPromotionsConfig.interface.ts#L1)
 
 
 example of search feedback widget initialization with minimum options
@@ -571,18 +376,7 @@ Initialization properties
 
 a. id of container where widget will be rendered
 
-b. {
-
-  `templates?: {` - optional object that defines template override options
-
-    `main?: {` - optional object for overriding main template
-        `template: string;` - main template in Mustache templating language
-        `selectId: string;` - id of select element within the template
-    `};`
-
-  `};`
-
-}
+b. Sorting widget config object of type: [ISearchstaxSearchSortingConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/searchSortingConfig.interface.ts#L1)
 
 
 example of sorting widget initialization with minimum options