Store Availability

For installation instructions, see Getting Started with Unify Widgets.

Basic Implementation

As a dialog (default)

<unify-store-availability-widget
  api-key="your-api-key"
  item-id="your-item-id"
></unify-store-availability-widget>

<button onclick="document.querySelector('unify-store-availability-widget').open = true">
  Where to buy
</button>

Inline (no dialog)

<unify-store-availability-widget
  api-key="your-api-key"
  item-id="your-item-id"
  no-dialog
></unify-store-availability-widget>

Component Attributes

Attribute	Type	Required	Description
`api-key`	String	Yes	API key for Unify requests
`item-id`	String	Yes	Item identifier for stock-store API calls
`open`	Boolean	No	Controls dialog visibility when dialog mode is enabled
`no-dialog`	Boolean	No	Renders content inline instead of inside a dialog
`demo`	Boolean	No	Enables demo mode (`X-Demo-Mode: true` header)

Component Properties

Property	Type	Required	Description
`config`	Object	No	Configuration object (see Config Options)

Config Options

Pass configuration via the config property to customize text labels, behavior, and thresholds.

document.querySelector('unify-store-availability-widget').config = {
  dialogTitle: 'Find in store',
  locale: 'en-US',
  maxRange: 20,
  // ... more options
};

Dialog & Layout

Option	Default	Description
`dialogTitle`	`"Store availability"`	Title of the search dialog
`dialogDescription`	`"Check the availability of your item in the store of your choice - if needed, contact the store."`	Description text below title

Search & Loading

Option	Default	Description
`addressLabel`	`"Address"`	Search input label
`addressPlaceholder`	`"Your address"`	Search input placeholder
`submitButtonLabel`	`"Submit"`	Search submit button text
`submittingLabel`	`"Submitting..."`	Search loading state text
`geolocateButtonLabel`	`"Use my location"`	Geolocation button label
`geolocatingLabel`	`"Locating..."`	Geolocation loading state
`loadingMessage`	`"Searching for stores..."`	Text shown while stores are loading
`validationErrorMessage`	`"Please enter a full address including your city name"`	Address validation error message
`searchErrorMessage`	`"An error occurred while searching. Please try again."`	API error fallback
`noStoresMessage`	`"No stores found for the provided information."`	Empty result message

Search Options

Option	Default	Description
`requireFullAddress`	`false`	Require at least one letter in address before submit (prevents postal code-only searches)
`availableStock`	`false`	Initial state: only display available stock
`availableStockLabel`	`"Only display available stock"`	Toggle label
`hideAvailableStockToggler`	`false`	Hide the stock filter checkbox
`maxRange`	`10`	Maximum search distance in km

Store Display Options

Option	Default	Description
`hideStoreAddress`	`false`	Hide store address in results
`hideStoreContact`	`false`	Hide store phone number
`hideOpeningHours`	`false`	Hide open/closed status and hours
`storeOpenLabel`	`"Open"`	Label for open stores
`storeClosedLabel`	`"Closed"`	Label for closed stores
`storeOpeningHoursLabel`	`"Opening Hours"`	Section heading for hours
`noOpeningHoursMessage`	`"No opening hours available"`	Fallback when hours unavailable
`exceptionalDaysLabel`	`"Exceptional Days"`	Header for holiday hours
`informationLabel`	`"Information"`	Header for extra opening hours info

Stock Display

Option	Default	Description
`displayStockQuantity`	`true`	Show quantity in stock labels
`stockLimitedThreshold`	`10`	Quantity threshold between "limited" and "available"
`stockAvailableLabelWithQuantity`	`"Available (%qty% remaining)"`	Available stock label with `%qty%`
`stockAvailableLabel`	`"Available"`	Available stock label without quantity
`stockLimitedLabelWithQuantity`	`"Limited stock (%qty% remaining)"`	Limited stock label with `%qty%`
`stockLimitedLabel`	`"Limited stock"`	Limited stock label without quantity
`stockUnavailableLabel`	`"Out of stock"`	Out-of-stock label

Click & Go Options

Option	Default	Description
`showClickAndGoInfo`	`false`	Show click-and-go availability badge
`storeClickAndGoAvailableLabel`	`"⏱️ Click and Go Available"`	Click-and-go available label
`storeClickAndGoNotAvailableLabel`	`"🚫 Click and Go Not Available"`	Click-and-go unavailable label
`showStorePickupButton`	`false`	Show "Store Pickup" button for each store
`storePickupButtonLabel`	`"Store Pickup"`	Button text for store pickup action

Formatting

Option	Default	Description
`locale`	`"en-US"`	Locale for date and number formatting (e.g., `"fr-FR"`, `"de-DE"`)
`weekdayFormat`	`"long"`	Weekday display format: `"long"` (Monday), `"short"` (Mon), `"narrow"` (M)

Error Handling

Option	Default	Description
`errorMessage`	`"An error occurred while fetching store data. Please try again later."`	Generic error message

Styling

CSS Custom Properties (recommended)

All visual tokens (colors, sizes, spacing, fonts) are exposed as CSS custom properties prefixed with --unify-. This is the stable styling API.

Set them on the widget element or any ancestor:

unify-store-availability-widget {
  --unify-dialog-bg: #ffffff;
  --unify-dialog-color: #333333;
  --unify-store-status-open-color: #15803d;
  --unify-store-status-closed-color: #dc3545;
  --unify-geolocate-button-bg: #1a56db;
  --unify-geolocate-button-color: white;
}

To discover all available properties:

Open browser DevTools
Inspect the <unify-store-availability-widget> element
Look at the Computed tab for all --unify-* entries
Edit them live in the Styles panel to preview

CSS Parts

Structural elements can be targeted using ::part():

unify-store-availability-widget::part(dialog) {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

unify-store-availability-widget::part(store-status--open) {
  font-weight: bold;
  color: #15803d;
}

⚠️ Parts may change between versions. Use CSS custom properties where possible.

To find available parts, inspect the widget's shadow DOM in DevTools — every element with a part attribute is targetable from outside.

Events

`dialog-opened`

Fired when the dialog open/close state changes.

document.querySelector('unify-store-availability-widget').addEventListener('dialog-opened', (event) => {
  console.log('Dialog is', event.detail.open ? 'open' : 'closed');
});

Detail shape:

{
  open: boolean  // true when opened, false when closed
}

`store-pickup`

Fired when user clicks the "Store Pickup" button (only dispatched if showStorePickupButton config option is true).

document.querySelector('unify-store-availability-widget').addEventListener('store-pickup', (event) => {
  console.log('Store selected:', event.detail.location.name);
  console.log('Item:', event.detail.itemId);
});

Detail shape:

{
  itemId: string,        // The item ID passed to the widget
  location: {            // Store object with full details
    location_id: string,
    name: string,
    address: string,
    distance: number,
    phone_number: string,
    stock: { quantity: number, status: string },
    opening_hours: { /* ... */ },
    click_and_go: boolean
  },
  source: 'location'     // Always 'location'
}

Examples

Basic setup

const widget = document.querySelector('unify-store-availability-widget');

widget.config = {
  dialogTitle: 'Find in store',
  storeOpenLabel: 'Open now',
  storeClosedLabel: 'Closed',
  maxRange: 25,
  locale: 'en-US',
};

// Open the search dialog
widget.open = true;

With Click & Go and Store Pickup

const widget = document.querySelector('unify-store-availability-widget');

widget.config = {
  dialogTitle: 'Availability near you',
  showClickAndGoInfo: true,
  showStorePickupButton: true,
  storePickupButtonLabel: 'Order for pickup',
  maxRange: 30,
};

// Handle store pickup action
widget.addEventListener('store-pickup', (event) => {
  const { location, itemId } = event.detail;
  console.log(`User selected ${location.name} for item ${itemId}`);
  // Send to your backend or order system
});

widget.open = true;

Styled with custom theme

<style>
  unify-store-availability-widget {
    /* Colors */
    --unify-dialog-bg: #f8f9fa;
    --unify-dialog-color: #212529;
    --unify-backdrop-bg: rgba(0, 0, 0, 0.6);
    
    /* Store status */
    --unify-store-status-open-color: #28a745;
    --unify-store-status-closed-color: #dc3545;
    
    /* Buttons */
    --unify-geolocate-button-bg: #007bff;
    --unify-geolocate-button-color: white;
    
    /* Spacing & sizing */
    --unify-input-border-radius: 8px;
    --unify-dialog-width: 700px;
  }
</style>

<unify-store-availability-widget
  api-key="your-api-key"
  item-id="your-item-id"
></unify-store-availability-widget>