\n
\n `,\n locationInputId: \"searchstax-location-input\",\n radiusInputId: \"searchstax-location-radius-select\"\n },\n },\n hooks: {\n locationDecode: locationDecodeFunction,\n locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress\n },\n});\n```\n\n### Result Widget ###\n\nThe SearchStax Site Search solution’s Results Widget for UX-JS displays the search results.\n\n**Usage**\n\n```\nsearchstax.addSearchResultsWidget(\"searchstax-results-container\", {});\n```\n\n**Props**\n\n- renderMethod – either “pagination” or “infiniteScroll”.\n- resultsPerPage – number of results on a page.\n- linkTarget – either \"_self\" (default) or \"_blank\" to open results in a new tab.\n- hooks.afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.\n- templates - see examples below\n\n**Main Template Override**\n\nThe template prop allows customizing the result UI.\n\nIt receives no props:\n\n**Search Result Template Override**\n\nThe template prop allows customizing the result UI.\n\nIt receives following props:\n\n- custom?: any - custom properties that may be added through aftersearchHook\n- ribbon: string | null\n- paths: string | null;\n- url: string | null;\n- title: string | null;\n- titleTracking: string | null;\n- promoted: boolean | null;\n- thumbnail: string | null;\n- date: string | null;\n- snippet: string | null;\n- description: string | null;\n- uniqueId: string;\n- position: number;\n- distance: number | null;\n- unit: string | null;\n- unmappedFields: {\n key: string;\n value: string | string[] | boolean;\n isImage?: boolean;\n }[] - fields that were not mapped.\n- allFields: { key: string; value: string | string[] | boolean }[] - all fields\n\n**No Results Template Override**\n\nThe template prop allows customizing the result UI.\n\nIt receives following props:\n\n- spellingSuggestion - suggestion of corrected spelling\n- searchExecuted - boolean if search was executed\n- searchTerm - term that was searched\n\n**Example of default render method**\n```\n searchstax.addSearchResultsWidget(\"searchstax-results-container\", {\n templates: {\n mainTemplate: {\n template: `\n \n NEAR\n
\n \n \n \n
\n {{#shouldShowLocationDistanceDropdown}}\n WITHIN\n \n {{/shouldShowLocationDistanceDropdown}}\n \n \n
\n \n {{#promoted}}\n \n {{/promoted}}\n\n {{#ribbon}}\n ![\"\"](\"{{thumbnail}}\")
\n {{/thumbnail}}\n
\n \n `,\n searchResultUniqueIdAttribute: \"data-searchstax-unique-result-id\"\n },\n noSearchResultTemplate: {\n template: `\n {{#searchExecuted}}\n \n {{{ribbon}}}\n
\n {{/ribbon}}\n\n {{#thumbnail}}\n \n
\n\n {{#paths}}\n {{{title}}}
\n\n {{{paths}}}\n
\n {{/paths}}\n\n {{#description}}\n\n {{{description}}}\n
\n {{/description}}\n\n {{#unmappedFields}}\n {{#isImage}}\n\n ![\"\"](\"{{value}}\")
\n
\n {{/isImage}}\n {{^isImage}}\n \n {{{value}}}\n
\n {{/isImage}}\n {{/unmappedFields}}\n {{#distance}}\n\n {{distance}} {{unit}}\n
\n {{/distance}}\n\n
\n {{/searchExecuted}}\n `\n }\n },\n linkTarget: \"_self\",\n hooks: {\n afterLinkClick: function (result: ISearchstaxParsedResult) {\n // gets result that was clicked, if passed along further functions will execute, if null then event gets canceled\n const propsCopy = { ...result };\n\n return propsCopy;\n },\n },\n });\n```\n\n**Example of infinite scroll render method**\n```\n searchstax.addSearchResultsWidget(\"searchstax-results-container\", {\n templates: {\n mainTemplate: {\n template: `\n \n Showing no results for \"{{ searchTerm }}\"\n
\n {{#spellingSuggestion}}\n Did you mean {{ spellingSuggestion }}?\n {{/spellingSuggestion}}\n
\n \n {{#spellingSuggestion}}\n Did you mean {{ spellingSuggestion }}?\n {{/spellingSuggestion}}\n
- \n
- Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need. \n
\n \n
\n \n {{#promoted}}\n \n {{/promoted}}\n\n {{#ribbon}}\n \n {{/thumbnail}}\n
\n \n `,\n searchResultUniqueIdAttribute: \"data-searchstax-unique-result-id\"\n },\n noSearchResultTemplate: {\n template: `\n {{#searchExecuted}}\n \n {{{ribbon}}}\n
\n {{/ribbon}}\n\n {{#thumbnail}}\n \n
\n\n {{#paths}}\n {{{title}}}
\n\n {{{paths}}}\n
\n {{/paths}}\n\n {{#description}}\n\n {{{description}}}\n
\n {{/description}}\n\n {{#unmappedFields}}\n {{#isImage}}\n\n \n
\n {{/isImage}}\n {{^isImage}}\n \n {{{value}}}\n
\n {{/isImage}}\n {{/unmappedFields}}\n {{#distance}}\n\n {{distance}} {{unit}}\n
\n {{/distance}}\n\n
\n {{/searchExecuted}}\n `\n }\n },\n renderMethod: 'infiniteScroll',\n resultsPerPage: 10,\n linkTarget: \"_blank\",\n hooks: {\n afterLinkClick: function (result: ISearchstaxParsedResult) {\n // gets result that was clicked, if passed along further functions will execute, if null then event gets canceled\n const propsCopy = { ...result };\n\n return propsCopy;\n },\n },\n });\n```\n\n### Pagination Widget ###\n\nThe SearchStax Site Search solution’s Pagination Widget displays a pagination control for UX-JS.\n\n**Usage**\n\n```\nsearchstax.addPaginationWidget(\"searchstax-pagination-container\", {});\n```\n\n**Props**\n- templates - see examples below\n\n\n**Multiple Instances**\n\nMultiple instances of the Pagination widget can be added by calling the addPaginationWidget method multiple times with different target containers:\n\n```\nsearchstax.addPaginationWidget('container1', options1);\n\nsearchstax.addPaginationWidget('container2', options2);\n\n```\n\nEach instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.\n\n\n\n**Main Template Override**\n\nMain template for the pagination controls.\n\nIt receives following props:\n\n- nextPageLink - link of next page;\n- previousPageLink - link of previous page;\n\n\n**Infinite Scroll Template Override**\n\nMain template for the pagination controls in infinite scroll mode.\n\nIt receives following props:\n- isLastPage - boolean, true if its last page\n- results - results.length can be used if there are results\n\n**Example**\n\n```\n searchstax.addPaginationWidget(\"searchstax-pagination-container\", {\n templates: {\n mainTemplate: {\n template: `\n {{#results.length}}\n \n Showing no results for \"{{ searchTerm }}\"\n
\n {{#spellingSuggestion}}\n Did you mean {{ spellingSuggestion }}?\n {{/spellingSuggestion}}\n
\n \n {{#spellingSuggestion}}\n Did you mean {{ spellingSuggestion }}?\n {{/spellingSuggestion}}\n
- \n
- Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need. \n
\n \n
\n {{/results.length}}\n `,\n previousButtonClass: \"searchstax-pagination-previous\",\n nextButtonClass: \"searchstax-pagination-next\"\n },\n infiniteScrollTemplate: {\n template: `\n {{#results.length}}\n \n \n
\n {{/results.length}}\n `,\n loadMoreButtonClass: \"searchstax-pagination-load-more\"\n }\n },\n });\n```\n\n### Facets Widget ###\n\nThe SearchStax Site Search solution’s Facets Widget for UX-JS displays faceted filters for search.\n\n**Facet Selection and Order**\n\nFacet lists are configured and ordered on the Site Search [Faceting Tab](https://www.searchstax.com/docs/searchstudio/faceting-tab/).\n\n**Usage**\n\n```\n searchstax.addFacetsWidget(\"searchstax-facets-container\", {\n facetingType: \"and\",\n itemsPerPageDesktop: 3,\n itemsPerPageMobile: 99,\n });\n```\n\n**Multiple Instances**\n\nMultiple instances of the Facets widget can be added by calling the addFacetsWidget method multiple times with different target containers:\n\n```\nsearchstax.addFacetsWidget('container1', options1);\n\nsearchstax.addFacetsWidget('container2', options2);\n\n```\n\nEach instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.\n\n\n**Props**\n\n- facetingType: \"and\" | \"or\" | \"showUnavailable\" | \"tabs\"; // type that determines how facets will behave\n- specificFacets?: string[]; // optional array of facet names that if provided will only render those facets\n- itemsPerPageDesktop: number; // default expanded facets for desktop\n- itemsPerPageMobile: number; // default expanded facets for mobile\n- templates - see examples below\n- hooks: Optional object of lifecycle hooks to customize facet data before rendering. Supported hook:\n - **beforeFacetsRender** `(facets: IFacetData[]) => IFacetData[]` — Called with the current facets array before the widget renders. Return the same or a modified array to filter, reorder, or transform facets (e.g., hide certain facets or change their order).\n\n\n**Main Template Desktop Override**\n\nMain wrapper template for desktop facets display.\n\nIt receives following props from [IFacetsTemplateData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)\n\n\n**Main Template Mobile Override**\n\nMain wrapper template for mobile facets display.\n\nIt receives following props from [IFacetsTemplateData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)\n\n**Show More Button Container Override**\n\nTemplate for show more button\n\nIt receives following props:\n\n- showingAllFacets - boolean true if showing all facets\n\n**Facet Item Container Template Override**\n\nTemplate for facet item container.\n\nIt receives following props:\n\n- label - label of facet\n\n\n**Clear Facets Template Override**\n\nTemplate for clear facets.\n\nIt receives following props:\n\n- shouldShow - boolean, true if it should be displayed\n\n**Facet Item Template Override**\n\nTemplate for facet item.\n\nIt receives following props:\n\n- disabled - boolean, true if disabled\n- isChecked - boolean, true if checked\n- value - string, value of facet\n- count - number of items for that facet\n\n**Filter By Template Override**\n\nTemplate for filter by.\n\nIt receives no props\n\n**Selected Facets Template Override**\n\nTemplate for selected facets.\n\nIt receives following props:\n\n- value - string, value of facet\n- count - number of items for that facet\n\n**Example**\n```\n searchstax.addFacetsWidget(\"searchstax-facets-container\", {\n facetingType: \"and\",\n itemsPerPageDesktop: 3,\n itemsPerPageMobile: 99,\n templates: {\n mainTemplateDesktop: {\n template: `\n {{#hasResultsOrExternalPromotions}}\n \n {{/hasResultsOrExternalPromotions}}\n `,\n facetsContainerId: \"\",\n },\n mainTemplateMobile: {\n template: `\n \n
\n\n \n `,\n facetsContainerClass: `searchstax-facets-container-mobile`,\n closeOverlayTriggerClasses: [\"searchstax-facets-mobile-overlay-done\",\"searchstax-search-close\",],\n filterByContainerClass: `searchstax-facets-pills-container`,\n selectedFacetsContainerClass: `searchstax-facets-pills-selected`,\n },\n showMoreButtonContainerTemplate: {\n template: `\n \n
\n \n {{#showingAllFacets}}\n \n {{/showingAllFacets}}\n {{^showingAllFacets}}\n \n {{/showingAllFacets}}\n
\n `,\n showMoreButtonClass: `searchstax-facet-show-more-container`,\n },\n facetItemContainerTemplate: {\n template: `\n \n
\n `,\n facetListTitleContainerClass: `searchstax-facet-title-container`,\n facetListContainerClass: `searchstax-facet-values-container`,\n },\n clearFacetsTemplate: {\n template: `\n {{#shouldShow}}\n \n
\n \n \n {{label}}\n
\n \n \n
\n {{/shouldShow}}\n `,\n containerClass: `searchstax-facets-pill-clear-all`,\n },\n facetItemTemplate: {\n template: `\n Clear Filters
\n \n \n
\n {{value}}
\n ({{count}})
\n `,\n inputCheckboxClass: `searchstax-facet-input-checkbox`,\n checkTriggerClasses: [\"searchstax-facet-value-label\",\"searchstax-facet-value-count\",],\n },\n filterByTemplate: {\n template: `\n \n
\n `,\n containerClass: `searchstax-facets-pill-filter-by`,\n },\n selectedFacetsTemplate: {\n template: `\n Filter By
\n \n
\n `,\n containerClass: `searchstax-facets-pill-facets`,\n },\n\n },\n });\n```\n\n### SearchFeedback Widget ###\n\nThe SearchStax Site Search solution’s Feedback Widget displays search feedback and stats for UX-JS.\n\n**Usage**\n\n```\nsearchstax.addSearchFeedbackWidget(\"search-feedback-container\", {});\n```\n\n**Multiple Instances**\n\nMultiple instances of the SearchFeedback widget can be added by calling the addSearchFeedbackWidget method multiple times with different target containers:\n\n```\nsearchstax.addSearchFeedbackWidget('container1', options1);\n\nsearchstax.addSearchFeedbackWidget('container2', options2);\n\n```\n\nEach instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.\n\n**Props**\n- templates - see examples below\n\n**Main Template Override**\n\nMain template for the search feedback message.\n\nIt receives following props:\n- searchExecuted - boolean, true if search was executed\n- hasResults - boolean, true if search has results\n- startResultIndex - number, start of page results\n- endResultIndex - number, end of page results\n- totalResults - number, total results\n- searchTerm - term that was searched\n- autoCorrectedQuery - query that search was autocorrected to\n- originalQuery - original query\n\n**Example**\n```\nsearchstax.addSearchFeedbackWidget(\"search-feedback-container\", {\n templates: {\n main: {\n template: `\n {{#searchExecuted}}\n Skip to results section\n {{value}} ({{count}})
\n \n \n {{#hasResults}}\n Showing {{startResultIndex}} - {{endResultIndex}} of {{totalResults}} results {{#searchTerm}} for \"{{searchTerm}}\" {{/searchTerm}}\n \n {{#autoCorrectedQuery}}\n Search instead for {{originalQuery}}\n {{/autoCorrectedQuery}}\n \n {{/hasResults}}\n
\n {{/searchExecuted}}\n `,\n originalQueryClass: `searchstax-feedback-original-query`\n }\n },\n });\n```\n\n### RelatedSearches widget ###\n\nThe SearchStax Site Search solution’s Related Searches Widget displays related searches for UX-JS.\n\n**Usage**\n```\n searchstax.addRelatedSearchesWidget(\"searchstax-related-searches-container\", {\n relatedSearchesURL: \"URL\",\n relatedSearchesAPIKey: \"KEY\"\n })\n```\n\n**Props**\n\n- relatedSearchesURL: // : An endpoint from the Discovery tab of the App Settings > All APls screen.\n- relatedSearchesAPIKey: The Discovery API key from the Discovery tab of the App Settings > All\n- templates - see examples below\n\n**Main Template Override**\n\nMain template for related searches.\n\nIt receives following props:\n\n- hasRelatedSearches - boolean, true if has related searches\n- relatedSearches - array of related searches\n\n\n**Related Search Template Override**\n\nRelated Search template.\n\nIt receives following props:\n\n- related_search - string, related searc\n- last - boolean, true if last related search\n\n**Example**\n\n```\nsearchstax.addRelatedSearchesWidget(\"searchstax-related-searches-container\", {\n relatedSearchesURL: \"URL\",\n relatedSearchesAPIKey: \"KEY\",\n templates: {\n main: {\n template: `\n {{#hasRelatedSearches}}\n \n {{/hasRelatedSearches}}\n `,\n relatedSearchesContainerClass: `searchstax-related-search`,\n },\n relatedSearch: {\n template: `\n \n `,\n relatedSearchContainerClass: `searchstax-related-search-item`,\n },\n },\n });\n```\n\n### ExternalPromotions widget ###\n\nSearchStax Site Search solution’s External Promotions Widget displays external promotions for UX-JS.\n\n**Usage**\n\n```\n searchstax.addExternalPromotionsWidget(\"searchstax-external-promotions-layout-container\", {})\n```\n\n**Props**\n- templates - see examples below\n\n**Main Template Override**\n\nMain template for external promotions.\n\nIt receives following props:\n\n- hasExternalPromotions - boolean, true if has external promotions\n\n**External promotion Template Override**\n\nTemplate for external promotion item.\n\nIt receives following props:\n\n- url - url of external promotion\n- uniqueId - unique id\n- name - name of promotion\n- description - description\n\n**Example**\n```\nsearchstax.addExternalPromotionsWidget(\"searchstax-external-promotions-layout-container\", {\n templates: {\n mainTemplate: {\n template: `\n {{#hasExternalPromotions}}\n \n External promotions go here\n
\n {{/hasExternalPromotions}}\n `,\n externalPromotionsContainerId: `searchstax-external-promotions-container`,\n },\n externalPromotion: {\n template: `\n \n \n {{#url}}\n \n {{/url}}\n
\n `,\n },\n },\n });\n```\n\n\n### Sorting Widget ###\n\nThe SearchStax Site Search solution’s Sorting Widget allows sorting of search results for UX-JS.\n\n**Usage**\n\n```\n searchstax.addSearchSortingWidget(\"search-sorting-container\", {});\n```\n\n**Props**\n- templates - see examples below\n\n**Main Template Override**\n\nMain template for sorting widget.\n\nIt receives following props:\n\n- searchExecuted - boolean, true if search was executed\n- hasResultsOrExternalPromotions - boolean, true if there are results or external promotions\n- sortOptions - array of sort options, has key/value\n\n**Example**\n\n```\nsearchstax.addSearchSortingWidget(\"search-sorting-container\", {\n templates: {\n main: {\n template: `\n {{#searchExecuted}}\n {{#hasResultsOrExternalPromotions}}\n {{#sortOptions.length}}\n \n {{name}}\n
\n {{#description}}\n \n {{description}}\n
\n {{/description}}\n {{#url}}\n\n {{url}}\n
\n {{/url}}\n\n \n \n
\n {{/sortOptions.length}}\n {{/hasResultsOrExternalPromotions}}\n {{/searchExecuted}}\n `,\n selectId: `searchstax-search-order-select`\n }\n },\n });\n```\n\n\n## Template overrides\nTemplates use mustache templating. For more info see https://github.com/janl/mustache.js\n\n## STYLING\n\nscss styles can be imported from searchstudio-ux-js\n```\n @import './../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';\n```\ncss can be taken from\n\n```\n./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css\n```\n\n### Data Flow Subscriptions ###\nAll variables are observables that have these functions:\n```\n$observable.subscribe((var) => {})\n$observable.setValue(value)\n$observable.getValue()\n```\n\n## Loading change subscription\n\nsubscribing to loading event observable is available at\n\n```\nsearchstax.dataLayer.$loadingChange.subscribe((data) => {})\nsearchstax.dataLayer.$loadingChange.setValue(data)\nconst data = searchstax.dataLayer.$loadingChange.getValue()\n```\n\n$loadingChange observable is of type: boolean\n\n## Search metadata subscription\n\nsubscribing to search metadata event observable is available at\n\n```\nsearchstax.dataLayer.$searchResultsMetadata.subscribe((data) => {})\nsearchstax.dataLayer.$searchResultsMetadata.setValue(data)\nconst data = searchstax.dataLayer.$searchResultsMetadata.getValue()\n```\n\n$searchResultsMetadata observable is of type: [ISearchstaxSearchMetadata](https://www.searchstax.com/docs/searchstudio/interfaces/#h-search-results-interfaces) and can be used for custom pagination implementation along with afterSearch hook\n\n## Search pagination data subscription\n\nsubscribing to pagination data event observable is available at\n\n```\nsearchstax.dataLayer.$paginationData.subscribe((data) => {})\nsearchstax.dataLayer.$paginationData.setValue(data)\nconst data = searchstax.dataLayer.$paginationData.getValue()\n```\n\n$paginationData observable is of type: [IPaginationData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-pagination-interfaces) and can be used for custom pagination implementation along with afterSearch hook\n\n### Data Calculations ###\nAt any moment data calculation object is accessible with various variables aimed to help build templates in a cleaner way.\n\n## Data calculations\n\nData calculations can be accessed through\n\n```\nsearchstax.dataLayer.parsedData.data\n```\n\nparsedData.data is of type: [ISearchstaxParsedData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)\n","readmeFilename":"README.md"}