SearchstaxLocationWidget Vue

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

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
                });
        });
  }
 <SearchstaxLocationWidget     :locationDecode="locationDecodeFunction">
</SearchstaxLocationWidget>

Props

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

Slots

#location

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

<SearchstaxLocationWidget     :locationDecode="locationDecodeFunction">
</SearchstaxLocationWidget>

Example

<SearchstaxLocationWidget :locationDecode="renderConfig.locationWidget.locationDecode">
    <template
      #location="{
        locationData,
        inputValue,
        locationBlur,
        radiusChange,
        selectValue,
        inputChange,
        locationError,
        getCurrentLocation
      }"
    >
      <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>
    </template>
  </SearchstaxLocationWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.