Skip to main content
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
{{= $wsStores | json }}
JSON output
{
  "selectedStore": null,
  "loadAllStores": "ƒ()",
  "loadStore": "ƒ()"
}
Note: ƒ() denotes a function. Variables and methods overview
NameReturn typeDescription
selectedStoremapCurrently selected store, or null if none is selected.
loadAllStores()arrayLoads a list of all available stores.
loadStore()mapLoads 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.
{{ 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.
{{ 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.
{{ var $store = $wsStores.loadStore(1) }}
Store name: {{= $store.name }}
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
PropertyReturn typeDescription
idintUnique ID of the store.
namestringName of the store.
streetstringStreet (incl. house number if applicable).
zipCodestringZip code.
citystringCity.
countrystringCountry.
storageIdstringID of the store warehouse for querying stock via $wsInventory.load().
clickAndCollectboolAvailability of Click & Collect.
openNowboolCheck whether the store is currently open.
locationmapGPS coordinates (latitude, longitude)
latitudefloatLatitude.
longitudefloatLongitude.
openingHoursmapOpening hours by day of the week (0-6).
0-6arrayOpening hours per weekday (0=Sunday, 1=Monday, …, 6=Saturday).
specialDaysarrayDays with deviating opening hours (e.g. public holidays).
monthintMonth (1-12).
dayintDay (1-31).
timesarrayOpening hours for this day.
startTimemapStart time with hours and minutes.
endTimemapEnd time with hours and minutes.
zipPrefixarrayZip code prefixes assigned to this store (for automatic store suggestions based on the customer’s address).
allowedSubshoparrayList of subshop IDs in which this store is available.

Actions

No actions are available for $wsStores.

Examples

List all stores

Example that displays all stores with address and opening status:
{{ 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:
{{ 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:
{{ 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:
{{ 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 }}