Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

Store Locator Filters

v0.0.0

Filters can be added to the Store Locator.

For this to work, the filters key is required in the marker json.
The values of the checkboxes need to correspond to the values used in the filters key of the marker json for this to work.

Example shows a store locator inside a container with modifer column. For more layout options look here.

or
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Store Locator  -->
  <div class="vi-store-locator" data-endpoint="/api/map-locator/locations.json" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-ip-lookup-key="6751675a13e2f097805aa47e57aa73bf" data-ip-lookup-service="google" data-latlng="52.1651876,5.6710352" data-nearby-distance="30000" data-nearby-max-results="3">
    <div class="vi-store-locator__search-bar">
      <div class="vi-store-locator__input vi-form vi-form--accent">
        <label class="sr-only" for="location-5d3253">Enter City, Province or Postal code</label>
        <!-- Input Extend  -->
        <div class="vi-input-extend" data-form-field-proxy="true">
          <input class="form-control" id="location-5d3253" placeholder="Enter City, Province or Postal code" type="text">
          <!-- Button type: input-extend  -->
          <button aria-label="Clear Input" disabled data-clear-input="location-5d3253" type="button" class="vi-btn-input-extend vi-btn"><!-- Icon cross-sign  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg></button>
        </div>
      </div>
      <div class="vi-store-locator__triggers">
        <div class="vi-store-locator__or">or</div>
        <div class="vi-store-locator__current-location">
          <!-- Button type: outline  -->
          <button type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-1 vi-btn">Use my current location
            <span class="vi-store-locator__current-location-loader">
              <!-- Loading Indicator  -->
              <span class="vi-loading-indicator" role="status"><span class="sr-only">Loading</span>
                <progress class="vi-loading-indicator__progress"></progress>
              </span></span></button>
        </div>
      </div>
    </div>
    <div class="vi-store-locator__filters">
      <div class="vi-store-locator__filter-fields vi-form vi-form--accent">
        <div class="form-group">
          <div class="custom-checkbox custom-control">
            <input aria-required="true" class="custom-control-input" id="control-e82d9b" name="vi-store-locator[]" required type="checkbox" value="abc">
            <label class="custom-control-label" for="control-e82d9b">
              Show only ABC pharmacies
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input aria-required="true" class="custom-control-input" id="control-37d287" name="vi-store-locator[]" required type="checkbox" value="xyz">
            <label class="custom-control-label" for="control-37d287">
              Show only XYZ pharmacies
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-store-locator__map"></div>
  </div>
</div>

Filters Markup and Json #

The filters markup needs to be placed between searchbar and the map.

Following are two examples. First the Filters markup followed by an example of the JSON with one marker. See marker json documentation for further details on the JSON.

The values of the checkboxes need to correspond to the keys used in the filters key of the marker json for this to work.

Markup: note the values of the checkbox elements.

<div class="vi-store-locator__filters">
  <div class="vi-store-locator__filter-fields vi-form vi-form--accent">
    <div class="form-group">
      <div class="custom-checkbox custom-control">
        <input aria-required="true" class="custom-control-input" id="control-043137" name="vi-store-locator[]" required type="checkbox" value="abc">
        <label class="custom-control-label" for="control-043137">
          Show only ABC pharmacies
        </label>
      </div>
      <div class="custom-checkbox custom-control">
        <input aria-required="true" class="custom-control-input" id="control-40d316" name="vi-store-locator[]" required type="checkbox" value="xyz">
        <label class="custom-control-label" for="control-40d316">
          Show only XYZ pharmacies
        </label>
      </div>
    </div>
  </div>
</div>

Json: note the filters key somewhere at the end.

[
  {
    "latitude": 52.352007971824925,
    "longitude": 4.694430515437228,
    "title": "Ethical hammock everyday.",
    "address": [
      "582 Marguerita Skyway",
      "Suite 994",
      "72270-2913, Port Maland",
      "Nevada"
    ],
    "contact": [
      {
        "url": "tel:608-667-7118x750",
        "target": "_blank",
        "label": "608-667-7118 x750"
      },
      {
        "url": "mailto:stanton.conroy@example.org",
        "target": "_blank",
        "label": "stanton.conroy@example.org"
      },
      {
        "url": "http://example.com/lurlene.von",
        "target": "_blank",
        "label": "http://example.com"
      }
    ],
    "zoom": 13,
    "filters": [
      {
        "key": "abc",
        "label": "ABC Pharmacy"
      },
      {
        "key": "xyz",
        "label": "XYZ Pharmacy"
      }
    ]
  }
]

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Change

  • 15 Nov 2024 - feat(store-locator): update input field to use input extend wrapper and input extend button with data-clear-input attribute.
  • 23 Aug 2024 - Submit on select
  • 13 Jun 2024 - Update Map API version to 3.57
  • Update Map API version to 3.47
  • Allow data-icon-scale to be number from 0.2 to 1 (including)

Added

  • 19 Feb 2024 - Show example of noresults data attribute.
  • 19 Feb 2024 - Sanitize empty array items in the data.
  • The ability to use filters and documentation.
  • Data attribute data-icon-scale for scaling the icon.
  • RTL support (need info on dropdown formatting)
  • Initial draft

FIX

  • 15 Aug 2024 - Remove IE11 polyfill
  • 13 Jun 2024 - Fix Malaga issue somwhat blinded. Can not recreate the scenario.
  • IE11 issue after dependency upgrade.
  • Fix RTL support, secondary text different order. Might need finetuning from native speakers.
  • Fix RTL support, demo requires extra js (because of the direction switch)
  • RTL infowindow not under pin.
  • Break long sentences on word.