@searchstax-inc/searchstudio-ux-vue 1.0.48 → 2.0.0

package/README.md

@@ -55,7 +55,7 @@ Initialization example
 ```
 sampleConfig = {
     language: "en",
-    model: "",
+    model: "Main Profile",
     searchURL: "",
     suggesterURL: "",
     trackApiKey: "",
@@ -156,124 +156,90 @@ Following widgets are available:
 [sorting Widget](#sorting-widget)
 
 ### Answer Widget ###
+SearchStax Site Search solution offers Vue widgets to assist in building your custom search page.
+
+The SearchstaxAnswerWidget component for Vue provides an AI answer widget for your searches.
+
+**Usage**
 
-example of answer widget initialization with minimum options
 ```
-  <SearchstaxAnswerWidget :showShowMoreAfterWordCount="10"></SearchstaxAnswerWidget>
+<SearchstaxAnswerWidget :showShowMoreAfterWordCount="10"></SearchstaxAnswerWidget>
 ```
 
+**Props**
+
+- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
+- feedbackWidget – an optional object that configures thumbs-up and thumbs-down feedback functionality.
 
-example of answer widget initialization with lightweight feedback widget
+Example of feedbackWidget config:
 ```
-feedbackConfig = {
+const feedbackConfig = {
     renderFeedbackWidget: true,
-    emailOverride: () => '',
+    emailOverride: searchstaxEmailOverride,
     thumbsUpValue: 10,
-    thumbsDownValue: 0,
-    lightweightTemplateOverride: `
- <div class="searchstax-lightweight-widget-container">
- <div class="searchstax-lightweight-widget-thumbs-up {{#thumbsUpActive}}active{{/thumbsUpActive}}">
- <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M4.85079 7.59996L7.83141 1C8.4243 1 8.9929 1.23178 9.41213 1.64436C9.83136 2.05694 10.0669 2.61651 10.0669 3.19999V6.1333H14.2845C14.5005 6.13089 14.7145 6.17474 14.9116 6.26179C15.1087 6.34885 15.2842 6.47704 15.426 6.63747C15.5677 6.79791 15.6723 6.98676 15.7326 7.19094C15.7928 7.39513 15.8072 7.60975 15.7748 7.81996L14.7465 14.4199C14.6926 14.7696 14.5121 15.0884 14.2382 15.3175C13.9643 15.5466 13.6156 15.6706 13.2562 15.6666H4.85079M4.85079 7.59996V15.6666M4.85079 7.59996H2.61531C2.22006 7.59996 1.84099 7.75448 1.5615 8.02953C1.28201 8.30458 1.125 8.67763 1.125 9.06661V14.1999C1.125 14.5889 1.28201 14.9619 1.5615 15.237C1.84099 15.512 2.22006 15.6666 2.61531 15.6666H4.85079"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-</div>
- <div class="searchstax-lightweight-widget-separator"></div>
- <div class="searchstax-lightweight-widget-thumbs-down {{#thumbsDownActive}}active{{/thumbsDownActive}}">
-  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12.1492 9.06801L9.16859 15.668C8.5757 15.668 8.0071 15.4362 7.58787 15.0236C7.16864 14.611 6.93311 14.0515 6.93311 13.468V10.5347H2.71552C2.4995 10.5371 2.28552 10.4932 2.08842 10.4062C1.89132 10.3191 1.71581 10.1909 1.57405 10.0305C1.43229 9.87006 1.32766 9.6812 1.26743 9.47702C1.2072 9.27284 1.19279 9.05822 1.22521 8.84801L2.25353 2.24806C2.30742 1.89833 2.48793 1.57955 2.76179 1.35046C3.03566 1.12136 3.38443 0.997398 3.74384 1.0014H12.1492M12.1492 9.06801V1.0014M12.1492 9.06801H14.3847C14.7799 9.06801 15.159 8.91349 15.4385 8.63844C15.718 8.36339 15.875 7.99034 15.875 7.60135V2.46805C15.875 2.07907 15.718 1.70602 15.4385 1.43097C15.159 1.15592 14.7799 1.0014 14.3847 1.0014H12.1492"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-
- </div>
- </div>
-  `
+    thumbsDownValue: 0
   }
-  <SearchstaxAnswerWidget :showShowMoreAfterWordCount="100" :feedbackwidget="feedbackConfig">
-      <template #answer="{ answerData, showMore }">
-        <div v-if="answerData && answerData?.searchExecuted && answerData.shouldShowAnswer">
-          <div class="searchstax-answer-wrap">
-            <div class="searchstax-answer-icon"></div>
-            <div>
-              <div
-                :class="
-                  'searchstax-answer-container ' + answerData.showMoreButtonVisible
-                    ? 'searchstax-answer-show-more'
-                    : ''
-                "
-              >
-                <div class="searchstax-answer-title">Smart Answers</div>
-                <div class="searchstax-answer-error" v-if="answerData.shouldShowAnswerError" v-html="answerData.answerErrorMessage"></div>
-                <div
-                  class="searchstax-answer-description"
-                  v-html="answerData.fullAnswerFormatted"
-                ></div>
-                <div v-if="answerData.answerLoading" class="searchstax-answer-loading"></div>
-              </div>
-              <div
-                v-if="answerData.showMoreButtonVisible"
-                class="searchstax-answer-load-more-button-container"
-              >
-                <button class="searchstax-answer-load-more-button" @click="showMore">
-                  Read More
-                </button>
-              </div>
-            </div>
-            <div class="searchstax-answer-footer">
-              <div id="feedbackWidgetContainer"></div>
-              <div class="searchstax-lightweight-widget-separator-inline"></div>
-              <p class="searchstax-disclaimer">Generative AI is Experimental</p>
-            </div>
-          </div>
-        </div>
-      </template>
-    </SearchstaxAnswerWidget>
 ```
 
-example of answer widget initialization without feedback widget
+
+**searchAnswerTemplate**
+
+The templates prop allows customizing the answer UI.
+
+It receives the following props:
+
+- answerData – Data object of type: ISearchstaxAnswerData
+- showMore - Handler for exiting the show more view
+
+**Example**
+
 ```
-  <SearchstaxAnswerWidget :showShowMoreAfterWordCount="10">
+<SearchstaxAnswerWidget :showShowMoreAfterWordCount="100" :feedbackwidget="feedbackConfig">
       <template #answer="{ answerData, showMore }">
         <div v-if="answerData && answerData?.searchExecuted && answerData.shouldShowAnswer">
-          <div class="searchstax-answer-wrap">
-            <div class="searchstax-answer-icon"></div>
-            <div>
-              <div
-                :class="
-                  'searchstax-answer-container ' + answerData.showMoreButtonVisible
-                    ? 'searchstax-answer-show-more'
-                    : ''
-                "
-              >
-                <div class="searchstax-answer-title">Smart Answers</div>
-                <div class="searchstax-answer-error" v-if="answerData.shouldShowAnswerError" v-html="answerData.answerErrorMessage"></div>
-                <div
-                  class="searchstax-answer-description"
-                  v-html="answerData.fullAnswerFormatted"
-                ></div>
-                <div v-if="answerData.answerLoading" class="searchstax-answer-loading"></div>
-              </div>
-              <div
-                v-if="answerData.showMoreButtonVisible"
-                class="searchstax-answer-load-more-button-container"
-              >
-                <button class="searchstax-answer-load-more-button" @click="showMore">
-                  Read More
-                </button>
-              </div>
-            </div>
-            <div class="searchstax-answer-footer">
-              <div id="feedbackWidgetContainer"></div>
-              <div class="searchstax-lightweight-widget-separator-inline"></div>
-              <p class="searchstax-disclaimer">Generative AI is Experimental</p>
-            </div>
-          </div>
+    <div class="searchstax-answer-wrap">
+      <div class="searchstax-answer-icon"></div>
+      <div>
+        <div
+          :class="{
+            'searchstax-answer-container': true,
+            'searchstax-answer-show-more': answerData.showMoreButtonVisible
+          }"
+        >
+          <div class="searchstax-answer-title">Smart Answers</div>
+          <div
+            class="searchstax-answer-error"
+            v-if="answerData.shouldShowAnswerError"
+            v-html="answerData.answerErrorMessage"
+          ></div>
+          <div class="searchstax-answer-description" v-html="answerData.fullAnswerFormatted"></div>
+          <div v-if="answerData.answerLoading" class="searchstax-answer-loading"></div>
+        </div>
+        <div
+          v-if="answerData.showMoreButtonVisible"
+          class="searchstax-answer-load-more-button-container"
+        >
+          <button class="searchstax-answer-load-more-button" @click="showMore">Read More</button>
         </div>
+      </div>
+      <div class="searchstax-answer-footer">
+        <div id="feedbackWidgetContainer"></div>
+        <div class="searchstax-lightweight-widget-separator-inline"></div>
+        <p class="searchstax-disclaimer">Generative AI is Experimental</p>
+      </div>
+    </div>
+  </div>
       </template>
     </SearchstaxAnswerWidget>
 ```
 
 ### Input Widget ###
 
-example of input widget initialization with minimum options
+SearchStax Site Search solution offers a Vue search-input widget to assist with your custom search page.
+
+The SearchstaxInputWidget provides a search input box with autosuggest/autocomplete functionality.
+
+**Usage**
 ```
 <SearchstaxInputWidget
           :afterAutosuggest="afterAutosuggest"
@@ -282,8 +248,26 @@ example of input widget initialization with minimum options
         ></SearchstaxInputWidget>
 ```
 
+**Props**
+
+- suggestAfterMinChars - default 3. Number of characters needed for autosuggest to start triggering
+- 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.
+- 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.
+- inputTemplate - template override. look at examples below
 
-example of input widget initialization with template override
+
+**inputWidgetTemplate**
+
+The inputTemplate prop allows customizing the input UI.
+
+It receives the following props:
+
+- suggestions – Array of autosuggestion results
+- onMouseLeave - Handler for mouse leave event
+- onMouseOver - Handler for mouse over event
+- onMouseClick - Handler for mouse click event
+
+**example**
 ```
 <SearchstaxInputWidget
           :afterAutosuggest="afterAutosuggest"
@@ -292,72 +276,312 @@ example of input widget initialization with template override
         >
           <template #input="{ suggestions, onMouseLeave, onMouseOver, onMouseClick }">
             <div class="searchstax-search-input-wrapper">
-              <input
-                type="text"
-                id="searchstax-search-input"
-                class="searchstax-search-input"
-                placeholder="SEARCH FOR..."
-              />
-              <div
-                class="searchstax-autosuggest-container"
-                :class="{ 'hidden': suggestions.length === 0 }"
-                @mouseleave="onMouseLeave"
-              >
-                <div
-                  class="searchstax-autosuggest-item"
-                  v-for="suggestion in suggestions"
-                  :key="suggestion.term"
-                >
-                  <div
-                    class="searchstax-autosuggest-item-term-container"
-                    v-html="suggestion.term"
-                    @mouseover="onMouseOver(suggestion)"
-                    @click.stop="onMouseClick()"
-                  ></div>
-                </div>
-              </div>
-              <button
-                class="searchstax-spinner-icon"
-                id="searchstax-search-input-action-button"
-              >
-              </button>
-            </div>
+    <input
+      type="text"
+      id="searchstax-search-input"
+      class="searchstax-search-input"
+      placeholder="SEARCH FOR..."
+      aria-label="search"
+    />
+    <div
+      class="searchstax-autosuggest-container"
+      :class="{ hidden: suggestions.length === 0 }"
+      @mouseleave="onMouseLeave"
+    >
+      <div
+        class="searchstax-autosuggest-item"
+        v-for="suggestion in suggestions"
+        :key="suggestion.term"
+      >
+        <div
+          class="searchstax-autosuggest-item-term-container"
+          v-html="suggestion.term"
+          tabindex="0"
+          @mouseover="onMouseOver(suggestion)"
+          @click.stop="onMouseClick()"
+        ></div>
+      </div>
+    </div>
+  </div>
+  <SearchstaxLocationWidget />
+  <button
+    class="searchstax-spinner-icon"
+    id="searchstax-search-input-action-button"
+    aria-label="search"
+    role="button"
+  ></button>
           </template>
         </SearchstaxInputWidget>
 ```
-
 ### Location Widget ###
 
-example of location widget initialization with minimum options
-```
-function locationDecodeFunction(term: string): Promise<ISearchstaxLocation>{
-        return new Promise((resolve) => {
-          // make a request to geocoding API to retrieve lat, lon and address and then resolve promise
-      resolve({
-                  address:'Address',
-                  lat: lat,
-                  lon: lon,
-                  error: false
-                });
-        });
-  }
-  function locationDecodeCoordinatesToAddress(lat, lon): Promise<ISearchstaxLocation>{
+SearchStax Site Search solution offers a Vue search-location widget to assist with your custom search page.
+
+The SearchstaxLocationWidget provides a location search input with location-based search functionality.
+
+**Usage**
+
+```
+const config = {
+  appId: "APP_ID",
+  relatedSearchesAPIKey: "KEY"
+}
+
+const locationWidgetConfig = {
+    locationDecode: (term: string): Promise<ISearchstaxLocation> => {
       return new Promise((resolve) => {
-        // make a request to geocoding API to convert lat, lon to address and then resolve promise
-      resolve({
-                  address:'Address',
-                  lat: lat,
-                  lon: lon,
-                  error: false
-                });
+        // make a request to google geocoding API to retrieve lat, lon and address
+
+        const geocodingAPIKey = "GEOCODING_API_KEY";
+        const geocodingURL = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+          term
+        )}&key=${geocodingAPIKey}`;
+        fetch(geocodingURL)
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              const location = {
+                lat: result.geometry.location.lat,
+                lon: result.geometry.location.lng,
+                address: result.formatted_address,
+              };
+              resolve(location);
+            } else {
+              resolve({
+                address: undefined,
+                lat: undefined,
+                lon: undefined,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: undefined,
+              lon: undefined,
+              error: true,
+            });
+          });
       });
-    }
- <SearchstaxLocationWidget :locationDecode="locationDecodeFunction" :locationDecodeCoordinatesToAddress="locationDecodeCoordinatesToAddress">
+    },
+    locationDecodeCoordinatesToAddress: (lat: string, lon: string): Promise<ISearchstaxLocation> => {
+      return new Promise((resolve) => {
+        fetch(
+          `https://geocoding-staging.searchstax.co/reverse?location=${lat},${lon}&components=country:US&app_id=${config.appId}`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Token ${config.relatedSearchesAPIKey}`,
+            },
+          }
+        )
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              resolve({
+                address: result.formatted_address,
+                lat: lat,
+                lon: lon,
+                error: false,
+              });
+            } else {
+              resolve({
+                address: undefined,
+                lat: lat,
+                lon: lon,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: lat,
+              lon: lon,
+              error: true,
+            });
+          });
+      });
+    },
+    locationSearchEnabled: false,
+    locationValuesOverride: {
+      locationDistanceEnabled: true,
+      filterValues: ["any", "1000"],
+      filterUnit: "miles",
+      locationFilterDefaultValue: "any"
+    },
+  }
+<SearchstaxLocationWidget :locationDecode="locationWidgetConfig.locationDecodeFunction" :locationDecodeCoordinatesToAddress="locationWidgetConfig.locationDecodeCoordinatesToAddress" :locationValuesOverride="locationWidgetConfig.locationValuesOverride" :locationSearchEnabled="locationWidgetConfig.locationSearchEnabled">
 </SearchstaxLocationWidget>
 ```
-example of location widget initialization with template override
+
+**Props**
+
+- locationDecode - callback function to override location decoding
+- locationDecodeCoordinatesToAddress - callback function to override location decoding
+
+**Template Override**
+
+The searchLocationTemplate prop allows customizing the location input UI.
+
+It receives the following props:
+
+- locationData –  data containing info on when to show certain elements
+- inputValue – value of location input
+- locationBlur - Handler for location input blur
+- radiusChange - Handler for location radius change
+- selectValue  - Value of radius select
+- inputChange - location input change handler
+- locationError - boolean stating if location has error
+- getCurrentLocation - Handler for getting current location from browser
+
+
+**Example**
+
 ```
-<SearchstaxLocationWidget :locationDecode="renderConfig.locationWidget.locationDecode" :locationDecodeCoordinatesToAddress="locationDecodeCoordinatesToAddress">
+const config = {
+  appId: "APP_ID",
+  relatedSearchesAPIKey: "KEY"
+}
+
+const locationWidgetConfig = {
+    locationDecode: (term: string): Promise<ISearchstaxLocation> => {
+      return new Promise((resolve) => {
+        // make a request to google geocoding API to retrieve lat, lon and address
+
+        const geocodingAPIKey = "GEOCODING_API_KEY";
+        const geocodingURL = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+          term
+        )}&key=${geocodingAPIKey}`;
+        fetch(geocodingURL)
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              const location = {
+                lat: result.geometry.location.lat,
+                lon: result.geometry.location.lng,
+                address: result.formatted_address,
+              };
+              resolve(location);
+            } else {
+              resolve({
+                address: undefined,
+                lat: undefined,
+                lon: undefined,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: undefined,
+              lon: undefined,
+              error: true,
+            });
+          });
+      });
+    },
+    locationDecodeCoordinatesToAddress: (lat: string, lon: string): Promise<ISearchstaxLocation> => {
+      return new Promise((resolve) => {
+        fetch(
+          `https://geocoding-staging.searchstax.co/reverse?location=${lat},${lon}&components=country:US&app_id=${config.appId}`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Token ${config.relatedSearchesAPIKey}`,
+            },
+          }
+        )
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              resolve({
+                address: result.formatted_address,
+                lat: lat,
+                lon: lon,
+                error: false,
+              });
+            } else {
+              resolve({
+                address: undefined,
+                lat: lat,
+                lon: lon,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: lat,
+              lon: lon,
+              error: true,
+            });
+          });
+      });
+    },
+    locationSearchEnabled: false,
+    locationValuesOverride: {
+      locationDistanceEnabled: true,
+      filterValues: ["any", "1000"],
+      filterUnit: "miles",
+      locationFilterDefaultValue: "any"
+    },
+  }
+<div
+        class="searchstax-location-input-container"
+        data-test-id="searchstax-location-input-container"
+      >
+        <div class="searchstax-location-input-wrapper">
+          <span class="searchstax-location-input-label">NEAR</span>
+          <div class="searchstax-location-input-wrapper-inner">
+            <input
+              type="text"
+              id="searchstax-location-input"
+              class="searchstax-location-input"
+              :class="{ 'searchstax-input-location-error': locationError }"
+              placeholder="Zip, Postal Code or City..."
+              aria-label="Search Location Input"
+              data-test-id="searchstax-location-input"
+              @change="inputChange"
+              :value="inputValue"
+              @blur="locationBlur"
+            />
+            <button @click="getCurrentLocation" class="searchstax-get-current-location-button">
+              Use my current location
+            </button>
+          </div>
+          <span
+            v-if="locationData.shouldShowLocationDistanceDropdown"
+            class="searchstax-location-input-label"
+            >WITHIN</span
+          >
+          <select
+            v-if="locationData.shouldShowLocationDistanceDropdown"
+            id="searchstax-location-radius-select"
+            class="searchstax-location-radius-select"
+            aria-label="Search Location Radius Select"
+            data-test-id="searchstax-location-radius-select"
+            @change="radiusChange"
+            :value="selectValue"
+          >
+            <option
+              v-for="value in locationData.locationSearchDistanceValues"
+              :value="value.value"
+              :key="value.value"
+            >
+              {{ value.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+<SearchstaxLocationWidget :locationDecode="locationWidgetConfig.locationDecode" :locationDecodeCoordinatesToAddress="locationWidgetConfig.locationDecodeCoordinatesToAddress" :locationValuesOverride="locationWidgetConfig.locationValuesOverride" :locationSearchEnabled="locationWidgetConfig.locationSearchEnabled">
     <template
       #location="{
         locationData,
@@ -370,7 +594,7 @@ example of location widget initialization with template override
         getCurrentLocation
       }"
     >
-      <div
+                <div
         class="searchstax-location-input-container"
         data-test-id="searchstax-location-input-container"
       >
@@ -420,135 +644,338 @@ example of location widget initialization with template override
     </template>
   </SearchstaxLocationWidget>
 ```
+
 ### Result Widget ###
 
-example of results widget initialization with minimum options
+The SearchStax Site Search solution offers a Vue results widget to assist with your custom search page.
+
+The SearchstaxResultsWidget component displays the search results.
+
+**Usage**
+
 ```
 <SearchstaxResultWidget :afterLinkClick="afterLinkClick"></SearchstaxResultWidget>
 ```
 
-example of results widget initialization with infinite scroll behavior
+**Result Template Override**
+
+The resultsTemplate prop allows customizing the result UI.
+
+It receives following props:
+- searchResults - Array of result items
+- resultClicked - Handler for result click events
+
+
+**No Results Template Override**
+
+The noResultTemplate prop allows customizing the result UI.
+
+It receives following props:
+
+- searchResults - Array of result items
+- resultClicked - Handler for result click events
+- searchTerm - Search input term
+- metadata - Metadata object
+- executeSearch - Handler for executing srearch
+- store - Main store of app
+
+**Example of default render method**
 ```
-<SearchstaxResultWidget :afterLinkClick="afterLinkClick" :renderMethod="'infiniteScroll'"></SearchstaxResultWidget>
+ <SearchstaxResultWidget :afterLinkClick="afterLinkClick">
+              <template #results="{ searchResults, resultClicked }">
+                <div class="searchstax-search-results" v-if="searchResults && searchResults.length">
+    <a
+      :key="searchResult.uniqueId"
+      v-for="searchResult in searchResults"
+      :href="searchResult.url"
+      :data-searchstax-unique-result-id="searchResult.uniqueId"
+      @click="resultClicked(searchResult, $event)"
+      @keyup.enter="resultClicked(searchResult, $event)"
+      @keyup.space="resultClicked(searchResult, $event)"
+      class="searchstax-result-item-link searchstax-result-item-link-wrapping"
+      tabindex="0"
+    >
+      <div
+        class="searchstax-search-result"
+        :class="{
+          'has-thumbnail': searchResult.thumbnail,
+          promoted: searchResult.promoted
+        }"
+      >
+        <div v-if="searchResult.promoted" class="searchstax-search-result-promoted"></div>
+        <div
+          v-if="searchResult.ribbon"
+          v-html="searchResult.ribbon"
+          class="searchstax-search-result-ribbon"
+        ></div>
+        <img
+          alt=""
+          v-if="searchResult.thumbnail"
+          :src="searchResult.thumbnail"
+          class="searchstax-thumbnail"
+        />
+        <div class="searchstax-search-result-title-container">
+          <span class="searchstax-search-result-title" v-html="searchResult.title"></span>
+        </div>
+        <p
+          v-if="searchResult.paths"
+          v-html="searchResult.paths"
+          class="searchstax-search-result-common"
+        ></p>
+        <p
+          v-if="searchResult.description"
+          v-html="searchResult.description"
+          class="searchstax-search-result-description searchstax-search-result-common"
+        ></p>
+        <div :key="unmappedField.key" v-for="unmappedField in searchResult.unmappedFields">
+          <div
+            v-if="unmappedField.isImage && typeof unmappedField.value === 'string'"
+            class="searchstax-search-result-image-container"
+          >
+            <img alt="" :src="unmappedField.value" class="searchstax-result-image" />
+          </div>
+          <div v-else>
+            <p class="searchstax-search-result-common" v-html="unmappedField.value"></p>
+          </div>
+        </div>
+      </div>
+    </a>
+  </div>
+              </template>
+              <template #noResult="{ searchResults, resultClicked, searchTerm, metadata, executeSearch, store }">
+                <div
+    v-if="
+      searchResults &&
+      searchResults.length === 0 &&
+      searchTerm !== '' &&
+      searchTerm !== '*' &&
+      store.searchstax.dataLayer.parsedData.firstSearchHappened
+    "
+  >
+    <div class="searchstax-no-results">
+      Showing <strong>no results</strong> for <strong>"{{ searchTerm }}"</strong>
+      <br />
+      <span v-if="metadata?.spellingSuggestion"
+        >Did you mean
+        <a
+          href="#"
+          class="searchstax-suggestion-term"
+          @click="executeSearch(metadata?.spellingSuggestion, $event)"
+        >
+          {{ metadata?.spellingSuggestion }}</a
+        >?</span
+      >
+    </div>
+    <ul>
+      <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>
+      <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
+    </ul>
+  </div>
+              </template>
+            </SearchstaxResultWidget>
 ```
 
-example of result widget initialization with template override
+**Example of infinite scroll and pagination render methods**
 ```
- <SearchstaxResultWidget :afterLinkClick="afterLinkClick">
+
+
+ <SearchstaxResultWidget :afterLinkClick="afterLinkClick" :renderMethod="'infiniteScroll'">
               <template #results="{ searchResults, resultClicked }">
+                <div class="searchstax-search-results" v-if="searchResults && searchResults.length">
+    <a
+      :key="searchResult.uniqueId"
+      v-for="searchResult in searchResults"
+      :href="searchResult.url"
+      :data-searchstax-unique-result-id="searchResult.uniqueId"
+      @click="resultClicked(searchResult, $event)"
+      @keyup.enter="resultClicked(searchResult, $event)"
+      @keyup.space="resultClicked(searchResult, $event)"
+      class="searchstax-result-item-link searchstax-result-item-link-wrapping"
+      tabindex="0"
+    >
+      <div
+        class="searchstax-search-result"
+        :class="{
+          'has-thumbnail': searchResult.thumbnail,
+          promoted: searchResult.promoted
+        }"
+      >
+        <div v-if="searchResult.promoted" class="searchstax-search-result-promoted"></div>
+        <div
+          v-if="searchResult.ribbon"
+          v-html="searchResult.ribbon"
+          class="searchstax-search-result-ribbon"
+        ></div>
+        <img
+          alt=""
+          v-if="searchResult.thumbnail"
+          :src="searchResult.thumbnail"
+          class="searchstax-thumbnail"
+        />
+        <div class="searchstax-search-result-title-container">
+          <span class="searchstax-search-result-title" v-html="searchResult.title"></span>
+        </div>
+        <p
+          v-if="searchResult.paths"
+          v-html="searchResult.paths"
+          class="searchstax-search-result-common"
+        ></p>
+        <p
+          v-if="searchResult.description"
+          v-html="searchResult.description"
+          class="searchstax-search-result-description searchstax-search-result-common"
+        ></p>
+        <div :key="unmappedField.key" v-for="unmappedField in searchResult.unmappedFields">
+          <div
+            v-if="unmappedField.isImage && typeof unmappedField.value === 'string'"
+            class="searchstax-search-result-image-container"
+          >
+            <img alt="" :src="unmappedField.value" class="searchstax-result-image" />
+          </div>
+          <div v-else>
+            <p class="searchstax-search-result-common" v-html="unmappedField.value"></p>
+          </div>
+        </div>
+      </div>
+    </a>
+  </div>
+              </template>
+              <template #noResult="{ searchResults, resultClicked, searchTerm, metadata, executeSearch, store }">
                 <div
-                  class="searchstax-search-results"
-                  v-if="searchResults && searchResults.length"
-                >
-                  <div
-                    class="searchstax-search-result"
-                    :class="{ 'has-thumbnail': searchResult.thumbnail }"
-                    :key="searchResult.uniqueId"
-                    v-for="searchResult in searchResults"
-                  >
-                    <div
-                      v-if="searchResult.promoted"
-                      class="searchstax-search-result-promoted"
-                    ></div>
-                    <a
-                      v-if="searchResult.url"
-                      :href="searchResult.url"
-                      :data-searchstax-unique-result-id="searchResult.uniqueId"
-                      @click="resultClicked(searchResult, $event)"
-                      class="searchstax-result-item-link"
-                    ></a>
-                    <div
-                      v-if="searchResult.ribbon"
-                      class="searchstax-search-result-ribbon"
-                    > {{ searchResult.ribbon }} </div>
-                    <img
-                      v-if="searchResult.thumbnail"
-                      :src="searchResult.thumbnail"
-                      class="searchstax-thumbnail"
-                    />
-                    <div class="searchstax-search-result-title-container">
-                      <span class="searchstax-search-result-title">{{ searchResult.title }}</span>
-                    </div>
-                    <p
-                      v-if="searchResult.paths"
-                      class="searchstax-search-result-common"
-                    > {{ searchResult.paths }} </p>
-                    <p
-                      v-if="searchResult.description"
-                      class="searchstax-search-result-description searchstax-search-result-common"
-                    > {{ searchResult.description }} </p>
-                    <div
-                      :key="unmappedField.key"
-                      v-for="unmappedField in searchResult.unmappedFields"
-                    >
-                      <div
-                        v-if="unmappedField.isImage && typeof unmappedField.value === 'string'"
-                        class="searchstax-search-result-image-container"
-                      >
-                        <img
-                          :src="unmappedField.value"
-                          class="searchstax-result-image"
-                        />
-                      </div>
-                      <div v-else>
-                        <p class="searchstax-search-result-common"> {{ unmappedField.value }} </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+    v-if="
+      searchResults &&
+      searchResults.length === 0 &&
+      searchTerm !== '' &&
+      searchTerm !== '*' &&
+      store.searchstax.dataLayer.parsedData.firstSearchHappened
+    "
+  >
+    <div class="searchstax-no-results">
+      Showing <strong>no results</strong> for <strong>"{{ searchTerm }}"</strong>
+      <br />
+      <span v-if="metadata?.spellingSuggestion"
+        >Did you mean
+        <a
+          href="#"
+          class="searchstax-suggestion-term"
+          @click="executeSearch(metadata?.spellingSuggestion, $event)"
+        >
+          {{ metadata?.spellingSuggestion }}</a
+        >?</span
+      >
+    </div>
+    <ul>
+      <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>
+      <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
+    </ul>
+  </div>
               </template>
             </SearchstaxResultWidget>
+
 ```
 
 ### Pagination Widget ###
 
+The SearchStax Site Search solution offers a Vue pagination widget to assist with you custom search page.
+
+The SearchstaxPaginationWidget component displays pagination controls for search results.
+
+**Usage**
 
-example of pagination widget initialization with minimum options
 ```
 <SearchstaxPaginationWidget></SearchstaxPaginationWidget>
 ```
 
-example of pagination widget initialization with various options
-```
- <template #pagination="{ paginationData, previousPage, nextPage }">
-                <div
-                  class="searchstax-pagination-container"
-                  v-if="paginationData"
-                >
-                  <div class="searchstax-pagination-content">
-                    <a
-                      class="searchstax-pagination-previous"
-                      :disabled="paginationData?.isFirstPage"
-                      @click="previousPage"
-                      id="searchstax-pagination-previous"
-                    > &lt; Previous </a>
-                    <div class="searchstax-pagination-details"> {{ paginationData?.startResultIndex }} - {{
-                      paginationData?.endResultIndex }} of {{ paginationData?.totalResults }} </div>
-                    <a
-                      class="searchstax-pagination-next"
-                      :disabled="paginationData?.isLastPage"
-                      @click="nextPage"
-                      id="searchstax-pagination-next"
-                    >Next ></a>
-                  </div>
-                </div>
-              </template>
-```
-example of pagination widget initialization with infinite scroll template override
+**Main Template Override**
+
+Main template for the pagination controls.
+
+It receives following props:
+
+- paginationData – Pagination info object
+- previousPage – Handler for previous page click
+- nextPage - – Handler for next page click
+
+
+**Infinite Scroll Template Override**
+
+Main template for the pagination controls in infinite scroll mode.
+
+It receives following props:
+- isLastPage - boolean, true if its last page
+- results - results.length can be used if there are results
+
+**Example**
+
 ```
-<template #infiniteScroll="{ nextPage }">
-<div className="searchstax-pagination-container"
-                <a
-                  class="searchstax-pagination-load-more"
-                  @click="nextPage"
-                >Load More override</a>
-</div>
-</template>
+<SearchstaxPaginationWidget>
+  <template #pagination="{ paginationData, previousPage, nextPage }">
+    <div class="searchstax-pagination-container" v-if="paginationData">
+    <div class="searchstax-pagination-content">
+      <a
+        class="searchstax-pagination-previous"
+        :class="paginationData.isFirstPage ? 'disabled' : ''"
+        :disabled="paginationData?.isFirstPage"
+        @click="previousPage"
+        @keyup.enter="previousPage"
+        @keyup.space="previousPage"
+        tabindex="0"
+        id="searchstax-pagination-previous"
+      >
+        &lt; Previous
+      </a>
+      <div class="searchstax-pagination-details">
+        {{ paginationData?.startResultIndex }} - {{ paginationData?.endResultIndex }} of
+        {{ paginationData?.totalResults }}
+      </div>
+      <a
+        class="searchstax-pagination-next"
+        :class="paginationData.isLastPage ? 'disabled' : ''"
+        :disabled="paginationData?.isLastPage"
+        tabindex="0"
+        @click="nextPage"
+        @keyup.enter="nextPage"
+        @keyup.space="nextPage"
+        id="searchstax-pagination-next"
+        >Next ></a
+      >
+    </div>
+  </div>
+  </template>
+</SearchstaxPaginationWidget>
+// infinite scroll example
+<SearchstaxPaginationWidget>
+  <template #infiniteScroll="{ nextPage }">
+    <div className="searchstax-pagination-container">
+    <a
+      class="searchstax-pagination-load-more"
+      tabindex="0"
+      @click="nextPage"
+      @keyup.enter="nextPage"
+      @keyup.space="nextPage"
+      >Load More</a
+    >
+  </div>
+  </template>
+</SearchstaxPaginationWidget>
 ```
 
 ### Facets Widget ###
 
-example of facets widget initialization with minimum options
+The SearchStax Site Search solution offers a Vue SearchstaxFacetsWidget component to display facets on your custom search page.
+
+**Facet Selection and Order**
+
+Facet lists are configured and ordered on the Site Search [Faceting Tab](https://www.searchstax.com/docs/searchstudio/faceting-tab/).
+
+**Usage**
+
 ```
 <SearchstaxFacetsWidget
               :facetingType="'or'"
@@ -557,316 +984,428 @@ example of facets widget initialization with minimum options
             ></SearchstaxFacetsWidget>
 ```
 
+**Props**
+
+- 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
+
+
+**Main Template Desktop Override**
+
+Main wrapper template for desktop facets display.
+
+It receives following props:
+- facetsTemplateDataDesktop -  Facets data object
+- isNotDeactivated - Check if facet group is active
+- toggleFacetGroup - Toggle facet group active state
+- isChecked - Check if facet value is selected
+- selectFacet - Handler for facet select
+- showMoreLessDesktop - Show more/less facets handler
+- facetContainers - Object of facet DOM containers
+- updateRefDesktop - Handler for keeping checkbox references
+
 
-example of facets widget initialization with template overrides
+**Main Template Mobile Override**
+
+Main wrapper template for mobile facets display.
+
+It receives following props:
+- facetsTemplateDataMobile - Facets data object
+- selectedFacetsCheckboxes - Selected facet values
+- isNotDeactivated - Check if facet group is active
+- toggleFacetGroup - Toggle facet group active state
+- isChecked - Check if facet value is selected
+- selectFacet - Handler for facet select
+- showMoreLessDesktop - Show more/less facets handler
+- facetContainers - Object of facet DOM containers
+- openOverlay - Handler to open mobile overlay
+- unselectFacet - Handler to unselect specific facet
+- unselectAll - Handler to unselect all facets
+- closeOverlay - Handler to close mobile overlay
+- updateRefMobile - Handler for keeping mobile checkbox references
+
+
+**Example**
 ```
-             <SearchstaxFacetsWidget
-              :facetingType="'or'"
-              :itemsPerPageDesktop="3"
-              :itemsPerPageMobile="99"
+<SearchstaxFacetsWidget
+ :facetingType="'or'"
+ :itemsPerPageDesktop="3"
+ :itemsPerPageMobile="99"
+>
+ <template
+   #desktopFacets="{ facetsTemplateDataDesktop, isNotDeactivated, toggleFacetGroup, isChecked, selectFacet, showMoreLessDesktop, facetContainers, updateRefDesktop }"
+ >
+  <div
+    v-if="facetsTemplateDataDesktop?.hasResultsOrExternalPromotions"
+    class="searchstax-facets-container-desktop"
+  >
+    <div
+      v-for="facet in facetsTemplateDataDesktop.facets"
+      :key="facet.name + 'desktop'"
+      class="searchstax-facet-container"
+      :class="{ active: isNotDeactivated(facet.name) }"
+    >
+      <div>
+        <div class="searchstax-facet-title-container" @click="toggleFacetGroup(facet.name)">
+          <div class="searchstax-facet-title">{{ facet.label }}</div>
+          <div class="searchstax-facet-title-arrow active"></div>
+        </div>
+        <div class="searchstax-facet-values-container" aria-live="polite">
+          <div
+            v-for="(facetValue) in (facet.values as IFacetValueData[])"
+            :key="facetValue.value + facetValue.parentName"
+            class="searchstax-facet-value-container"
+            :class="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
+            :ref="(el) => updateRefDesktop(el, facetValue)"
+          >
+            <div class="searchstax-facet-input">
+              <input
+                type="checkbox"
+                class="searchstax-facet-input-checkbox"
+                :checked="isChecked(facetValue)"
+                :disabled="facetValue.disabled"
+                :aria-label="facetValue.value + ' ' + facetValue.count"
+                @click="selectFacet(facetValue.value + '-desktop', $event, facetValue, true)"
+              />
+            </div>
+            <div
+              class="searchstax-facet-value-label"
+              @click="selectFacet(facetValue.value + '-desktop', $event, facetValue, false)"
+            >
+              {{ facetValue.value }}
+            </div>
+            <div
+              class="searchstax-facet-value-count"
+              @click="selectFacet(facetValue.value + '-desktop', $event, facetValue, false)"
             >
-              <template
-                #desktopFacets="{ facetsTemplateDataDesktop, isNotDeactivated, toggleFacetGroup, isChecked, selectFacet, showMoreLessDesktop, facetContainers }"
+              ({{ facetValue.count }})
+            </div>
+          </div>
+          <div class="searchstax-facet-show-more-container" v-if="facet.hasMoreFacets">
+            <div
+              class="searchstax-facet-show-more-container"
+              @click="showMoreLessDesktop($event, facet)"
+              @keyup.space="
+                $event.preventDefault();
+                showMoreLessDesktop($event, facet)
+              "
+              @keyup.enter="showMoreLessDesktop($event, facet)"
+              tabindex="0"
+            >
+              <div
+                v-if="facet.showingAllFacets"
+                class="searchstax-facet-show-less-button searchstax-facet-show-button"
               >
+                less
+              </div>
+              <div v-else class="searchstax-facet-show-more-button searchstax-facet-show-button">
+                more
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+ </template>
+ <template
+   #mobileFacets="{ facetsTemplateDataMobile, selectedFacetsCheckboxes, isNotDeactivated, toggleFacetGroup, isChecked, selectFacet, showMoreLessDesktop, facetContainers, openOverlay, unselectFacet, unselectAll, closeOverlay, updateRefMobile }"
+ >
+ <div
+    class="searchstax-facets-container-mobile"
+    v-if="facetsTemplateDataMobile?.hasResultsOrExternalPromotions"
+  >
+    <div class="searchstax-facets-pills-container">
+      <div class="searchstax-facets-pill searchstax-facets-pill-filter-by" @click="openOverlay">
+        <div class="searchstax-facets-pill-label">Filter By</div>
+      </div>
+      <div class="searchstax-facets-pills-selected">
+        <div
+          class="searchstax-facets-pill searchstax-facets-pill-facets"
+          v-for="facet in selectedFacetsCheckboxes"
+          :key="facet.value"
+          @click="unselectFacet(facet)"
+        >
+          <div class="searchstax-facets-pill-label">{{ facet.value }} ({{ facet.count }})</div>
+          <div class="searchstax-facets-pill-icon-close"></div>
+        </div>
+      </div>
+      <div
+        class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+        v-if="selectedFacetsCheckboxes.length"
+        @click="unselectAll"
+      >
+        <div class="searchstax-facets-pill-label">Clear Filters</div>
+      </div>
+    </div>
+    <div
+      class="searchstax-facets-mobile-overlay"
+      :class="{ 'searchstax-show': (facetsTemplateDataMobile as any)?.overlayOpened }"
+    >
+      <div class="searchstax-facets-mobile-overlay-header">
+        <div class="searchstax-facets-mobile-overlay-header-title">Filter By</div>
+        <div class="searchstax-search-close" @click="closeOverlay"></div>
+      </div>
+      <div class="searchstax-facets-container-mobile">
+        <div
+          v-for="facet in facetsTemplateDataMobile?.facets"
+          :key="facet.name + 'mobile'"
+          class="searchstax-facet-container"
+          :class="{ active: isNotDeactivated(facet.name) }"
+        >
+          <div>
+            <div class="searchstax-facet-title-container" @click="toggleFacetGroup(facet.name)">
+              <div class="searchstax-facet-title">{{ facet.label }}</div>
+              <div class="searchstax-facet-title-arrow active"></div>
+            </div>
+            <div class="searchstax-facet-values-container" aria-live="polite">
+              <div
+                v-for="(facetValue) in facet.values as IFacetValueData[]"
+                :key="facetValue.value + facetValue.parentName"
+                class="searchstax-facet-value-container"
+                :class="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
+                :ref="
+                  (el) => {
+                    updateRefMobile(el, facetValue)
+                  }
+                "
+              >
+                <div class="searchstax-facet-input">
+                  <input
+                    type="checkbox"
+                    class="searchstax-facet-input-checkbox"
+                    :checked="isChecked(facetValue)"
+                    :disabled="facetValue.disabled"
+                    :aria-label="facetValue.value + ' ' + facetValue.count"
+                    @click="selectFacet(facetValue.value + '-mobile', $event, facetValue, true)"
+                  />
+                </div>
                 <div
-                  v-if="facetsTemplateDataDesktop?.hasResultsOrExternalPromotions"
-                  class="searchstax-facets-container-desktop"
+                  class="searchstax-facet-value-label"
+                  @click="selectFacet(facetValue.value + '-mobile', $event, facetValue, false)"
                 >
-                  <div
-                    v-for="facet in facetsTemplateDataDesktop.facets"
-                    :key="facet"
-                    class="searchstax-facet-container"
-                    :class="{ 'active': isNotDeactivated(facet.name) }"
-                  >
-                    <div>
-                      <div
-                        class="searchstax-facet-title-container"
-                        @click="toggleFacetGroup(facet.name)"
-                      >
-                        <div class="searchstax-facet-title"> {{ facet.label }} </div>
-                        <div class="searchstax-facet-title-arrow active"></div>
-                      </div>
-                      <div class="searchstax-facet-values-container">
-                        <div
-                          v-for="(facetValue, key) in facet.values"
-                          :key="facetValue.value + facetValue.parentName"
-                          class="searchstax-facet-value-container"
-                          :class="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
-                          :ref="el => { facetContainers[key + facet.name] = el }"
-                        >
-                          <div class="searchstax-facet-input">
-                            <input
-                              type="checkbox"
-                              class="searchstax-facet-input-checkbox"
-                              :checked="isChecked(facetValue)"
-                              :disabled="facetValue.disabled"
-                              @click="selectFacet(key + facet.name, $event, facetValue, true)"
-                            />
-                          </div>
-                          <div
-                            class="searchstax-facet-value-label"
-                            @click="selectFacet(key + facet.name, $event, facetValue, false)"
-                          >{{ facetValue.value }}</div>
-                          <div
-                            class="searchstax-facet-value-count"
-                            @click="selectFacet(key + facet.name, $event, facetValue, false)"
-                          >({{ facetValue.count }})</div>
-                        </div>
-                        <div
-                          class="searchstax-facet-show-more-container"
-                          v-if="facet.hasMoreFacets"
-                        >
-                          <div
-                            class="searchstax-facet-show-more-container"
-                            @click="showMoreLessDesktop($event, facet)"
-                          >
-                            <div
-                              v-if="facet.showingAllFacets"
-                              class="searchstax-facet-show-less-button searchstax-facet-show-button"
-                            >less</div>
-                            <div
-                              v-else
-                              class="searchstax-facet-show-more-button  searchstax-facet-show-button"
-                            >more</div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                  {{ facetValue.value }}
                 </div>
-              </template>
-              <template
-                #mobileFacets="{ facetsTemplateDataMobile, selectedFacetsCheckboxes, isNotDeactivated, toggleFacetGroup, isChecked, selectFacet, showMoreLessDesktop, facetContainers, openOverlay, unselectFacet, unselectAll, closeOverlay }"
-              >
                 <div
-                  class="searchstax-facets-container-mobile"
-                  v-if="facetsTemplateDataMobile?.hasResultsOrExternalPromotions"
+                  class="searchstax-facet-value-count"
+                  @click="selectFacet(facetValue.value + '-mobile', $event, facetValue, false)"
                 >
-                  <div class="searchstax-facets-pills-container">
-                    <div
-                      class="searchstax-facets-pill searchstax-facets-pill-filter-by"
-                      @click="openOverlay"
-                    >
-                      <div class="searchstax-facets-pill-label">Filter By</div>
-                    </div>
-                    <div class="searchstax-facets-pills-selected">
-                      <div
-                        class="searchstax-facets-pill searchstax-facets-pill-facets"
-                        v-for="facet in selectedFacetsCheckboxes"
-                        :key="facet.value"
-                        @click="unselectFacet(facet)"
-                      >
-                        <div class="searchstax-facets-pill-label">{{ facet.value }} ({{ facet.count }})</div>
-                        <div class="searchstax-facets-pill-icon-close"></div>
-                      </div>
-                    </div>
-                    <div
-                      class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
-                      v-if="selectedFacetsCheckboxes.length"
-                      @click="unselectAll"
-                    >
-                      <div class="searchstax-facets-pill-label">Clear Filters</div>
-                    </div>
+                  ({{ facetValue.count }})
+                </div>
+              </div>
+              <div class="searchstax-facet-show-more-container" v-if="facet.hasMoreFacets">
+                <div
+                  class="searchstax-facet-show-more-container"
+                  @click="showMoreLessMobile($event, facet)"
+                  @keyup.space="showMoreLessMobile($event, facet)"
+                  @keyup.enter="showMoreLessMobile($event, facet)"
+                  tabindex="0"
+                >
+                  <div
+                    v-if="facet.showingAllFacets"
+                    class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                  >
+                    less
                   </div>
                   <div
-                    class="searchstax-facets-mobile-overlay"
-                    :class="{ 'searchstax-show': facetsTemplateDataMobile?.overlayOpened }"
+                    v-else
+                    class="searchstax-facet-show-more-button searchstax-facet-show-button"
                   >
-                    <div class="searchstax-facets-mobile-overlay-header">
-                      <div class="searchstax-facets-mobile-overlay-header-title">Filter By</div>
-                      <div
-                        class="searchstax-search-close"
-                        @click="closeOverlay"
-                      ></div>
-                    </div>
-                    <div class="searchstax-facets-container-mobile">
-                      <div
-                        v-for="facet in facetsTemplateDataMobile?.facets"
-                        :key="facet"
-                        class="searchstax-facet-container"
-                        :class="{ 'active': isNotDeactivated(facet.name) }"
-                      >
-                        <div>
-                          <div
-                            class="searchstax-facet-title-container"
-                            @click="toggleFacetGroup(facet.name)"
-                          >
-                            <div class="searchstax-facet-title"> {{ facet.label }} </div>
-                            <div class="searchstax-facet-title-arrow active"></div>
-                          </div>
-                          <div class="searchstax-facet-values-container">
-                            <div
-                              v-for="(facetValue, key) in facet.values"
-                              :key="facetValue.value + facetValue.parentName"
-                              class="searchstax-facet-value-container"
-                              :class="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
-                              :ref="el => { facetContainers[key + facet.name] = el }"
-                            >
-                              <div class="searchstax-facet-input">
-                                <input
-                                  type="checkbox"
-                                  class="searchstax-facet-input-checkbox"
-                                  :checked="isChecked(facetValue)"
-                                  :disabled="facetValue.disabled"
-                                  @click="selectFacet(key + facet.name, $event, facetValue, true)"
-                                />
-                              </div>
-                              <div
-                                class="searchstax-facet-value-label"
-                                @click="selectFacet(key + facet.name, $event, facetValue, false)"
-                              >{{ facetValue.value }}</div>
-                              <div
-                                class="searchstax-facet-value-count"
-                                @click="selectFacet(key + facet.name, $event, facetValue, false)"
-                              >({{ facetValue.count }})</div>
-                            </div>
-                            <div
-                              class="searchstax-facet-show-more-container"
-                              v-if="facet.hasMoreFacets"
-                            >
-                              <div
-                                class="searchstax-facet-show-more-container"
-                                @click="showMoreLessDesktop($event, facet)"
-                              >
-                                <div
-                                  v-if="facet.showingAllFacets"
-                                  class="searchstax-facet-show-less-button searchstax-facet-show-button"
-                                >less</div>
-                                <div
-                                  v-else
-                                  class="searchstax-facet-show-more-button  searchstax-facet-show-button"
-                                >more</div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <button
-                      class="searchstax-facets-mobile-overlay-done"
-                      @click="closeOverlay"
-                    >Done</button>
+                    more
                   </div>
                 </div>
-              </template>
-            </SearchstaxFacetsWidget>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button class="searchstax-facets-mobile-overlay-done" @click="closeOverlay">Done</button>
+    </div>
+  </div>
+ </template>
+</SearchstaxFacetsWidget>
 ```
 
 ### SearchFeedback Widget ###
 
-example of search feedback widget initialization with minimum options
+The SearchStax Site Search solution provides a search feedback widget to support your Vue search pages.
+
+The SearchstaxSearchFeedbackWidget displays search feedback and stats.
+
+**Usage**
+
 ```
 <SearchstaxSearchFeedbackWidget></SearchstaxSearchFeedbackWidget>
 ```
 
+**Main Template Override**
+
+Main template for the search feedback message.
 
-example of search feedback widget initialization  with template overrides
+It receives following props:
+- searchFeedbackData - Feedback data object
+- onOriginalQueryClick - Handler for clicking on original query suggestion
+
+**Example**
 ```
 <SearchstaxSearchFeedbackWidget>
             <template #searchFeedback="{ searchFeedbackData, onOriginalQueryClick }">
-              <div
-                class="searchstax-feedback-container"
-                v-if="searchFeedbackData && searchFeedbackData?.searchExecuted && searchFeedbackData?.totalResults"
-              > Showing <b>{{ searchFeedbackData.startResultIndex }} - {{ searchFeedbackData.endResultIndex }}</b> of
-                <b>{{ searchFeedbackData.totalResults }}</b> results <span v-if="searchFeedbackData.searchTerm">for "<b>{{
-                  searchFeedbackData.searchTerm }}</b>" </span>
-                <div class="searchstax-feedback-container-suggested">
-                  <div v-if="searchFeedbackData.autoCorrectedQuery"> Search instead for <a
-                      href="#"
-                      @click.prevent="onOriginalQueryClick($event)"
-                      class="searchstax-feedback-original-query"
-                    >{{ searchFeedbackData.originalQuery }}</a>
-                  </div>
-                </div>
-              </div>
+                <h2
+    class="searchstax-feedback-container"
+    v-if="
+      searchFeedbackData && searchFeedbackData?.searchExecuted && searchFeedbackData?.totalResults
+    "
+  >
+    Showing
+    <b>{{ searchFeedbackData.startResultIndex }} - {{ searchFeedbackData.endResultIndex }}</b> of
+    <b>{{ searchFeedbackData.totalResults }}</b> results
+    <span v-if="searchFeedbackData.searchTerm"
+      >for "<b>{{ searchFeedbackData.searchTerm }}</b
+      >"
+    </span>
+    <div class="searchstax-feedback-container-suggested">
+      <div v-if="searchFeedbackData.autoCorrectedQuery">
+        Search instead for
+        <a
+          href="#"
+          @click.prevent="onOriginalQueryClick($event)"
+          class="searchstax-feedback-original-query"
+          :aria-label="'Search instead for ' + searchFeedbackData.originalQuery"
+          >{{ searchFeedbackData.originalQuery }}</a
+        >
+      </div>
+    </div>
+  </h2>
             </template>
           </SearchstaxSearchFeedbackWidget>
 ```
 
-## RelatedSearches widget
+### RelatedSearches widget ###
 
+The SearchStax Site Search solution offers a Vue widget for displaying related searches.
 
+The SearchstaxRelatedSearchesWidget for Vue component displays related searches.
 
-example of search feedback widget initialization with minimum options
+**Usage**
 ```
-<SearchstaxRelatedSearchesWidget
+  <SearchstaxRelatedSearchesWidget
               :relatedSearchesURL="config.relatedSearchesURL"
               :relatedSearchesAPIKey="config.relatedSearchesAPIKey"
             ></SearchstaxRelatedSearchesWidget>
 ```
 
+**Props**
+
+- relatedSearchesURL: API URL for fetching related searches
+- relatedSearchesAPIKey?: API key for related searches API
+
+**Main Template Override**
+
+Main template for related searches.
+
+It receives following props:
+
+- relatedData - Related searches data object
+- executeSearch - Handler to run new search from related term
+
+**Example**
 
-example of search feedback widget initialization with template overrides
 ```
 <SearchstaxRelatedSearchesWidget
               :relatedSearchesURL="config.relatedSearchesURL"
               :relatedSearchesAPIKey="config.relatedSearchesAPIKey"
             >
               <template #related="{ relatedData, executeSearch }">
-                <div
-                  class="searchstax-related-searches-container"
-                  id="searchstax-related-searches-container"
-                  v-if="relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches"
-                > Related searches: <span id="searchstax-related-searches"></span>
-                  <span
-                    class="searchstax-related-search"
-                    v-if="relatedData.relatedSearches"
-                  >
-                    <span
-                      v-for="related in relatedData.relatedSearches"
-                      :key="related.related_search"
-                      @click="executeSearch(related)"
-                      class="searchstax-related-search searchstax-related-search-item"
-                    > {{ related.related_search }}<span v-if="!related.last">,</span>
-                    </span>
-                  </span>
-                </div>
+              <div
+    class="searchstax-related-searches-container"
+    id="searchstax-related-searches-container"
+    v-if="relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches"
+  >
+    Related searches: <span id="searchstax-related-searches"></span>
+    <span class="searchstax-related-search" v-if="relatedData.relatedSearches">
+      <span
+        v-for="related in relatedData.relatedSearches"
+        :key="related.related_search"
+        @click="executeSearch(related)"
+        @keyup.enter="executeSearch(related)"
+        @keyup.space="executeSearch(related)"
+        tabindex="0"
+        class="searchstax-related-search searchstax-related-search-item"
+        :aria-label="'Related search: ' + related.related_search"
+      >
+        {{ related.related_search }}<span v-if="!related.last">,</span>
+      </span>
+    </span>
+  </div>
               </template>
             </SearchstaxRelatedSearchesWidget>
 ```
 
 ### ExternalPromotions widget ###
 
-example of search feedback widget initialization with minimum options
+The SearchStax Site Search solution offers a Vue external-promotions widget for your custom search page.
+
+The SearchstaxExternalPromotionsWidget component displays external promotions fetched from the API.
+
+**Usage**
+
 ```
 <SearchstaxExternalPromotionsWidget></SearchstaxExternalPromotionsWidget>
 ```
 
+**Main Template Override**
+
+Main template for external promotions.
+
+It receives following props:
+
+- externalPromotionsData – External promotions data object
+- trackClick – Handler for tracking link clicks
 
-example of search feedback widget initialization  with template overrides
+**Example**
 ```
 <SearchstaxExternalPromotionsWidget>
               <template #externalPromotions="{ externalPromotionsData, trackClick }">
                 <div
-                  class="searchstax-external-promotions-container"
-                  id="searchstax-external-promotions-container"
-                  v-if="externalPromotionsData && externalPromotionsData?.searchExecuted && externalPromotionsData?.hasExternalPromotions"
-                >
-                  <div
-                    class="searchstax-external-promotion searchstax-search-result"
-                    v-for="externalPromotion in externalPromotionsData.externalPromotions"
-                    :key="externalPromotion.id"
-                  >
-                    <div class="icon-elevated"></div>
-                    <a
-                      v-if="externalPromotion.url"
-                      href="{{externalPromotion.url}}"
-                      @click="trackClick(externalPromotion, $event)"
-                      class="searchstax-result-item-link"
-                    ></a>
-                    <div class="searchstax-search-result-title-container">
-                      <span class="searchstax-search-result-title">{{ externalPromotion.name }}</span>
-                    </div>
-                    <p
-                      v-if="externalPromotion.description"
-                      class="searchstax-search-result-description searchstax-search-result-common"
-                    > {{ externalPromotion.description }} </p>
-                    <p
-                      v-if="externalPromotion.url"
-                      class="searchstax-search-result-description searchstax-search-result-common"
-                    > {{ externalPromotion.url }} </p>
-                  </div>
-                </div>
+    class="searchstax-external-promotions-container"
+    id="searchstax-external-promotions-container"
+    v-if="
+      externalPromotionsData &&
+      externalPromotionsData?.searchExecuted &&
+      externalPromotionsData?.hasExternalPromotions
+    "
+  >
+    <div
+      class="searchstax-external-promotion searchstax-search-result"
+      v-for="externalPromotion in externalPromotionsData.externalPromotions"
+      :key="externalPromotion.id"
+    >
+      <div class="icon-elevated"></div>
+      <a
+        v-if="externalPromotion.url"
+        href="{{externalPromotion.url}}"
+        @click="trackClick(externalPromotion, $event)"
+        class="searchstax-result-item-link"
+      ></a>
+      <div class="searchstax-search-result-title-container">
+        <span class="searchstax-search-result-title">{{ externalPromotion.name }}</span>
+      </div>
+      <p
+        v-if="externalPromotion.description"
+        class="searchstax-search-result-description searchstax-search-result-common"
+      >
+        {{ externalPromotion.description }}
+      </p>
+      <p
+        v-if="externalPromotion.url"
+        class="searchstax-search-result-description searchstax-search-result-common"
+      >
+        {{ externalPromotion.url }}
+      </p>
+    </div>
+  </div>
               </template>
             </SearchstaxExternalPromotionsWidget>
 ```
@@ -874,42 +1413,58 @@ example of search feedback widget initialization  with template overrides
 
 ### Sorting Widget ###
 
-example of sorting widget initialization with minimum options
+The SearchStax Site Search solution offers a Vue sorting widget for your custom search page.
+
+The SearchstaxSortingWidget component displays sorting options for search results.
+
+**Usage**
+
 ```
 <SearchstaxSortingWidget></SearchstaxSortingWidget>
 ```
 
+**Main Template Override**
+
+Main template for sorting widget.
+
+It receives following props:
+
+- sortingData – Sorting data object
+- orderChange – Handler for sorting change
+- selectedSorting – Current selected sorting
+
+**Example**
 
-example of sorting widget initialization with template override
 ```
 <SearchstaxSortingWidget>
             <template #sorting="{ sortingData, orderChange, selectedSorting }">
-              <div
-                class="searchstax-sorting-container"
-                v-if="sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions"
-              >
-                <label
-                  class="searchstax-sorting-label"
-                  for="sort-by"
-                >Sort By</label>
-                <select
-                  id="searchstax-search-order-select"
-                  class="searchstax-search-order-select"
-                  :value="selectedSorting"
-                  @change="orderChange($event)"
-                >
-                  <option value=""> Relevance </option>
-                  <option value="date desc"> Newest Content </option>
-                  <option value="date asc"> Oldest Content </option>
-                </select>
-              </div>
+                <div
+    class="searchstax-sorting-container"
+    v-if="sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions"
+  >
+    <label class="searchstax-sorting-label" for="searchstax-search-order-select">Sort By</label>
+    <select
+      id="searchstax-search-order-select"
+      class="searchstax-search-order-select"
+      :value="selectedSorting"
+      @change="orderChange($event)"
+    >
+      <option
+        v-for="sortOption in sortingData.sortOptions"
+        :key="sortOption.key"
+        :value="sortOption.key"
+      >
+        {{ sortOption.value }}
+      </option>
+    </select>
+  </div>
             </template>
           </SearchstaxSortingWidget>
 ```
 
 
 ## Template overrides
-Templates use vue slots.
+Templates use vue templating.
 
 ## STYLING
 
@@ -921,4 +1476,4 @@ css can be taken from
 
 ```
 ./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css
-```
+```