Form Store Picker

Prior to this element we used a standard select element to select a store in web forms. This is a cumbersome interface for retailers with a large number of stores. The Form Store Picker allows us to use the standard store selection interface used in the store locator in web forms.

Examples

The base data-store-picker attribute defines the store picker.

Basic Example

The consumer selects a store in a modal and the selection updates a hidden form input element in the form.

<input type="hidden" name="store-id" id="store-id" >
<div class="input-group mb-3">
  <div class="form-control" id="store-address" aria-label="Selected Store Address" aria-describedby="store-button">
  Select a Preferred Store...
  </div>
  <button class="btn btn-outline-primary input-group-addon" id="store-button" type="button"
    data-store-form-picker
    data-store-picker-input="#store-id"
    data-store-picker-address="#store-address"
    data-bs-toggle="modal" 
    data-bs-target="#site-modal" 
    data-load="/ajax/store_locator" 
    data-title="Select a Preferred Store"
  >Select a Store</button>
</div>

Selection States Example

The following shows how the component looks before and after a store selection has been made. The example above is fully functional and you can use it to try this effect.

Before Store Selection

Before the store is selected we see a prompt to select a store.

After Store Selection

After a store is collected we see the location name and store address.

Attributes

The following attributes are used by the Form Store Picker to enable rich functionality. These are placed on the button containing the data-store-picker attribute.