Card Index

A page layout that uses a grid of card to

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.