SearchstaxLocationWidget JS

SearchStax Site Search solution offers a native JS search-location widget to assist with your custom search page.

The SearchstaxLocationWidget provides a location search input with location-based search functionality.

Usage

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
                });
        });
  }
 searchstax.addSearchLocationWidget("searchstax-location-container", {
  hooks: {
    locationDecode: locationDecodeFunction
    },
});

Props

  • hooks.locationDecode – Callback function invoked after location input blurs and is used to decode string to coordinates.

Template override

Allows customizing the location UI.

Slot 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

Usage

searchstax.addSearchLocationWidget("searchstax-location-container", {
  hooks: {
    locationDecode: locationDecodeFunction
  },
});

Example

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
  },
});

Questions?

Do not hesitate to contact the SearchStax Support Desk.