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

Store Locator Layout Options

v0.0.0

By wrapping all or parts of the Store Locator within a container different layouts can be created.

Filters, when used, should always be placed between map and search bar.

Column #

Example shows a store locator inside a container with modifer column

or
[Google map] 
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Store Locator  -->
  <div class="vi-store-locator" data-demo="true">
    <div class="vi-store-locator__search-bar">
      <div class="vi-store-locator__input vi-form vi-form--accent">
        <label class="sr-only" for="location-d72b6e">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-d72b6e" placeholder="Enter City, Province or Postal code" type="text">
          <!-- Button type: input-extend  -->
          <button aria-label="Clear Input" disabled data-clear-input="location-d72b6e" 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-de1c51" name="vi-store-locator[]" required type="checkbox" value="abc">
            <label class="custom-control-label" for="control-de1c51">
              Show only ABC pharmacies
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input aria-required="true" class="custom-control-input" id="control-d55b17" name="vi-store-locator[]" required type="checkbox" value="xyz">
            <label class="custom-control-label" for="control-d55b17">
              Show only XYZ pharmacies
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-store-locator__map">
      ...
    </div>
  </div>
</div>

Full width map on small devices #

In the following example, only the searchbar is wrapped in a container with modifer column. The map is wrapped in a container with modifer column-visual.

[visual alignment test]

Please scale browser to see the difference.

or
[Google map] 
<!-- Store Locator  -->
<div class="vi-store-locator" data-demo="true">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-store-locator__search-bar">
      <div class="vi-store-locator__input vi-form vi-form--accent">
        <label class="sr-only" for="location-6cb349">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-6cb349" placeholder="Enter City, Province or Postal code" type="text">
          <!-- Button type: input-extend  -->
          <button aria-label="Clear Input" disabled data-clear-input="location-6cb349" 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-5a5059" name="vi-store-locator[]" required type="checkbox" value="abc">
            <label class="custom-control-label" for="control-5a5059">
              Show only ABC pharmacies
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input aria-required="true" class="custom-control-input" id="control-c2a08d" name="vi-store-locator[]" required type="checkbox" value="xyz">
            <label class="custom-control-label" for="control-c2a08d">
              Show only XYZ pharmacies
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Container (mods: --column-visual) -->
  <div class="vi-container vi-container--column-visual">
    <div class="vi-store-locator__map">
      ...
    </div>
  </div>
</div>

Full width map on all devices #

In the following example, only the searchbar is wrapped in a container with modifer column. The map is wrapped in a container without any modifiers.

[visual alignment test]

Please scale browser to see the difference.

or
[Google map] 
<!-- Store Locator  -->
<div class="vi-store-locator" data-demo="true">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-store-locator__search-bar">
      <div class="vi-store-locator__input vi-form vi-form--accent">
        <label class="sr-only" for="location-23be4b">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-23be4b" placeholder="Enter City, Province or Postal code" type="text">
          <!-- Button type: input-extend  -->
          <button aria-label="Clear Input" disabled data-clear-input="location-23be4b" 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-ecb071" name="vi-store-locator[]" required type="checkbox" value="abc">
            <label class="custom-control-label" for="control-ecb071">
              Show only ABC pharmacies
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input aria-required="true" class="custom-control-input" id="control-ab9a61" name="vi-store-locator[]" required type="checkbox" value="xyz">
            <label class="custom-control-label" for="control-ab9a61">
              Show only XYZ pharmacies
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Container  -->
  <div class="vi-container">
    <div class="vi-store-locator__map">
      ...
    </div>
  </div>
</div>

Reversed map, filters and search bar #

When the search bar is displayed under the map, add modifier --bottom to .vi-store-locator__search-bar (and .vi-store-locator__filters when using filters) for adjusted spacing.

All of the above container wrappings will work for the reversed layout.

[Google map]
or
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Store Locator  -->
  <div class="vi-store-locator" data-demo="true">
    <div class="vi-store-locator__map">
      ...
    </div>
    <div class="vi-store-locator__filters vi-store-locator__filters--bottom">
      <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-80925d" name="vi-store-locator[]" required type="checkbox" value="abc">
            <label class="custom-control-label" for="control-80925d">
              Show only ABC pharmacies
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input aria-required="true" class="custom-control-input" id="control-1856a7" name="vi-store-locator[]" required type="checkbox" value="xyz">
            <label class="custom-control-label" for="control-1856a7">
              Show only XYZ pharmacies
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-store-locator__search-bar vi-store-locator__search-bar--bottom">
      <div class="vi-store-locator__input vi-form vi-form--accent">
        <label class="sr-only" for="location-3186e9">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-3186e9" placeholder="Enter City, Province or Postal code" type="text">
          <!-- Button type: input-extend  -->
          <button aria-label="Clear Input" disabled data-clear-input="location-3186e9" 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>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is 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.