@searchstax-inc/searchstudio-ux-js 1.1.34 → 1.1.40

package/README.md

@@ -102,6 +102,8 @@ Following widgets are available:
 
 [Input Widget](#input-widget)
 
+[Location Widget](#location-widget)
+
 [Result Widget](#result-widget)
 
 [Facets Widget](#facets-widget)
@@ -313,6 +315,80 @@ example of input widget initialization with various options
     },
   });
 ```
+### Location Widget ###
+
+Initialization properties
+
+a. id of container where widget will be rendered
+
+b. Input widget config object of type: [ISearchstaxLocationConfig](https://www.searchstax.com/docs/searchstudio/interfaces/#h-search-results-interfaces)
+
+example of results 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>{
+      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
+                });
+      });
+    }
+ searchstax.addSearchLocationWidget("searchstax-location-container", {
+  hooks: {
+    locationDecode: locationDecodeFunction,
+    locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress
+    },
+});
+```
+example of result widget initialization with various options
+```
+searchstax.addSearchLocationWidget("searchstax-location-container", {
+  templates:{
+    mainTemplate: {
+      template: `
+        <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" placeholder="Zip, Postal Code or City..." aria-label="Search Location Input" data-test-id="searchstax-location-input" />
+                  <button id="searchstax-location-get-current-location" class="searchstax-get-current-location-button">Use my current location</button>
+                </div>
+                {{#shouldShowLocationDistanceDropdown}}
+                  <span class="searchstax-location-input-label">WITHIN</span>
+                  <select id="searchstax-location-radius-select" class="searchstax-location-radius-select" aria-label="Search Location Radius Select" data-test-id="searchstax-location-radius-select">
+                    {{#locationSearchDistanceValues}}
+                      <option value="{{value}}" {{#isSelected}}selected{{/isSelected}}>{{label}}</option>
+                    {{/locationSearchDistanceValues}}
+                  </select>
+                {{/shouldShowLocationDistanceDropdown}}
+            </div>
+        </div>
+        `,
+      locationInputId: "searchstax-location-input",
+      radiusInputId: "searchstax-location-radius-select"
+    },
+  },
+  hooks: {
+    locationDecode: locationDecodeFunction,
+    locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress
+  },
+});
+```
 ### Result Widget ###
 Initialization properties
 

package/README.mustache

@@ -102,6 +102,8 @@ Following widgets are available:
 
 [Input Widget](#input-widget)
 
+[Location Widget](#location-widget)
+
 [Result Widget](#result-widget)
 
 [Facets Widget](#facets-widget)
@@ -214,6 +216,62 @@ example of input widget initialization with various options
     },
   });
 ```
+### Location Widget ###
+
+Initialization properties
+
+a. id of container where widget will be rendered
+
+b. Input widget config object of type: [ISearchstaxLocationConfig](https://www.searchstax.com/docs/searchstudio/interfaces/#h-search-results-interfaces)
+
+example of results 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>{
+      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
+                });
+      });
+    }
+ searchstax.addSearchLocationWidget("searchstax-location-container", {
+  hooks: {
+    locationDecode: locationDecodeFunction,
+    locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress
+    },
+});
+```
+example of result widget initialization with various options
+```
+searchstax.addSearchLocationWidget("searchstax-location-container", {
+  templates:{
+    mainTemplate: {
+      template: `{{&location.mainTemplate.template}}`,
+      locationInputId: "searchstax-location-input",
+      radiusInputId: "searchstax-location-radius-select"
+    },
+  },
+  hooks: {
+    locationDecode: locationDecodeFunction,
+    locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress
+  },
+});
+```
 ### Result Widget ###
 Initialization properties