> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# $wsStores - Stores & branches

> Reference for $wsStores: load configured stores and branches, manage the selected store and display opening hours for click & collect setups.

With the `$wsStores` module, you can access the shop's configured stores and branches. Typical use cases are Click & Collect, store finder, and the display of stock levels in the store. In this section, you will learn how to load stores, manage the selected store, and display opening hours.

***

## Module overview

**Example / excerpt of** `$wsStores`

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{= $wsStores | json }}
```

**JSON output**

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "selectedStore": null,
  "loadAllStores": "ƒ()",
  "loadStore": "ƒ()"
}
```

Note: `ƒ()` denotes a function.

**Variables and methods overview**

| **Name**          | **Return type** | **Description**                                          |
| ----------------- | --------------- | -------------------------------------------------------- |
| `selectedStore`   | map             | Currently selected store, or `null` if none is selected. |
| `loadAllStores()` | array           | Loads a list of all available stores.                    |
| `loadStore()`     | map             | Loads a single store by its ID.                          |

***

## Templates

The \$wsStores module is typically used on:

* Store search pages (store finder)
* Product detail pages (availability in the store)
* Checkout pages (Click & Collect selection)
* Header/footer (display of the selected store)

***

### Variables

### \$wsStores.selectedStore

Returns the store currently selected in the session. Is `null` if no store has been selected.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsStores.selectedStore }}
  Your store: {{= $wsStores.selectedStore.name }}
{{ else }}
  No store selected
{{ /if }}
```

***

## Methods

### \$wsStores.loadAllStores()

Loads a list of all available stores.

**Signature**\
`$wsStores.loadAllStores()`

**Return value**\
`array` - List of store maps.

**Example** that loads and displays all stores.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ foreach $store in $wsStores.loadAllStores() }}
  <p>{{= $store.name }} – {{= $store.city }}</p>
{{ /foreach }}
```

## \$wsStores.loadStore()

Loads a single store by its ID.

**Signature**\
`$wsStores.loadStore(storeId)`

**Return value**\
`map` - Store map with all store data.

**Example** that loads a store.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ var $store = $wsStores.loadStore(1) }}
Store name: {{= $store.name }}
```

<Info>
  By using the return data of `$wsStores.loadStore`, various properties are available that can be used. Below is an overview of which properties are available.

  Properties of `$wsStores.loadStore`

  | **Property**      | **Return type** | **Description**                                                                                             |
  | ----------------- | --------------- | ----------------------------------------------------------------------------------------------------------- |
  | `id`              | int             | Unique ID of the store.                                                                                     |
  | `name`            | string          | Name of the store.                                                                                          |
  | `street`          | string          | Street (incl. house number if applicable).                                                                  |
  | `zipCode`         | string          | Zip code.                                                                                                   |
  | `city`            | string          | City.                                                                                                       |
  | `country`         | string          | Country.                                                                                                    |
  | `storageId`       | string          | ID of the store warehouse for querying stock via `$wsInventory.load()`.                                     |
  | `clickAndCollect` | bool            | Availability of Click & Collect.                                                                            |
  | `openNow`         | bool            | Check whether the store is currently open.                                                                  |
  | `location`        | map             | GPS coordinates (`latitude, longitude`)                                                                     |
  | `latitude`        | float           | Latitude.                                                                                                   |
  | `longitude`       | float           | Longitude.                                                                                                  |
  | `openingHours`    | map             | Opening hours by day of the week (0-6).                                                                     |
  | `0-6`             | array           | Opening hours per weekday (0=Sunday, 1=Monday, …, 6=Saturday).                                              |
  | `specialDays`     | array           | Days with deviating opening hours (e.g. public holidays).                                                   |
  | `month`           | int             | Month (1-12).                                                                                               |
  | `day`             | int             | Day (1-31).                                                                                                 |
  | `times`           | array           | Opening hours for this day.                                                                                 |
  | `startTime`       | map             | Start time with `hours` and `minutes`.                                                                      |
  | `endTime`         | map             | End time with `hours` and `minutes`.                                                                        |
  | `zipPrefix`       | array           | Zip code prefixes assigned to this store (for automatic store suggestions based on the customer's address). |
  | `allowedSubshop`  | array           | List of subshop IDs in which this store is available.                                                       |
</Info>

***

## Actions

No actions are available for `$wsStores`.

***

## Examples

### List all stores

Example that displays all stores with address and opening status:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ foreach $store in $wsStores.loadAllStores() }}
  <div class="store">
    <h3>{{= $store.name }}</h3>
    <p>{{= $store.street }}, {{= $store.zipCode }} {{= $store.city }}</p>
    {{ if $store.openNow }}
      <span class="open">Open now</span>
    {{ else }}
      <span class="closed">Closed</span>
    {{ /if }}
  </div>
{{ /foreach }}
```

### Display store selection as a dropdown

Example that provides a store selection as a dropdown:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ var $action = $wsActions.create("SelectStore") }}
<form method="post" action="{{= $wsViews.current.url() }}" data-ws-ajax-form data-auto-submit-change>
    <input type="hidden" name="wsact"    value="{{= $action.id }}">
    <input type="hidden" name="wscsrf"   value="{{= $action.csrf }}">
    <input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">

    <label for="wsStorefinderSelect">My store</label>
    <select id="wsStorefinderSelect" name="storeId" aria-label="Select store" onchange="this.blur()">
        {{ foreach $store in $wsStores.loadAllStores() }}
            <option value="{{= $store.id }}"
                {{ if $wsStores.selectedStore and $store.id == $wsStores.selectedStore.id }}selected{{ /if }}>
                {{= $store.name }} - {{= $store.city }}
            </option>
        {{ /foreach }}
    </select>

    <button type="submit">Select store</button>
</form>
```

### Click & Collect in checkout

Example that only displays stores with Click & Collect for pickup:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ foreach $method in $wsConfig.shippingMethods }}
  {{ if $wsCheckout.selectedShippingMethod == $method.id and $method.type == "pickup" }}
    
    {{ var $storeAction = $wsActions.create("CheckoutStoreIdSelect") }}
    
    <form method="post" action="{{= $wsViews.current.url() }}">
      <input type="hidden" name="wsact" value="{{= $storeAction.id }}">
      <input type="hidden" name="wscsrf" value="{{= $storeAction.csrf }}">
      
      <label>Select pickup store:</label>
      <select name="storeId">
        {{ foreach $store in $wsStores.loadAllStores() }}
          {{ if $store.clickAndCollect }}
            <option value="{{= $store.id }}"
              {{ if $wsCheckout.selectedStoreId == $store.id }}selected{{ /if }}>
              {{= $store.name }} – {{= $store.city }}
            </option>
          {{ /if }}
        {{ /foreach }}
      </select>
      
      <button type="submit">Select store</button>
    </form>
    
    {{ if $storeAction.error }}
      {{ foreach $error in $storeAction.errors }}
        <div class="alert danger">
          {{ if $error.code == "reservationFailed" }}
            Product not available in this store: {{= $error.details.productId }}
          {{ else }}
            {{= ifnull($error.text, $error.code) }}
          {{ /if }}
        </div>
      {{ /foreach }}
    {{ /if }}
    
  {{ /if }}
{{ /foreach }}
```

### Check stock in the store

Example that checks the stock of a product in a specific store:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ var $store = $wsStores.selectedStore }}
{{ if $store }}
  {{ var $inventory = $wsInventory.load($product.id, $store.storageId) }}
  {{ if $inventory.active }}
    <p>Available in {{= $store.name }}: {{= $inventory.amount }} pieces</p>
  {{ else }}
    <p>Not available in {{= $store.name }}</p>
  {{ /if }}
{{ /if }}
```

***

## Related links

* [\$wsInventory](/en/frontend/referenz/module/wsinventory)
* [API reference: stores](/en/schnittstellen/admin-interface-api/api-referenz-stores)