Zum Hauptinhalt springen
Mit dem $wsStores Modul können Sie auf die konfigurierten Märkte und Filialen des Shops zugreifen. Typische Anwendungsfälle sind Click & Collect, Filialfinder und die Anzeige von Lagerbeständen im Markt. In diesem Abschnitt erfahren Sie, wie Sie Märkte laden, den ausgewählten Markt verwalten und Öffnungszeiten anzeigen können.

Modulübersicht

Beispiel / Ausschnitt über $wsStores
{{= $wsStores | json }}
JSON-Ausgabe
{
  "selectedStore": null,
  "loadAllStores": "ƒ()",
  "loadStore": "ƒ()"
}
Anmerkung: ƒ() kennzeichnet eine Funktion. Variablen und Methoden in der Übersicht
NameRückgabe-TypBeschreibung
selectedStoremapAktuell ausgewählter Markt oder null, wenn keiner ausgewählt ist.
loadAllStores()arrayLädt eine Liste aller verfügbaren Märkte.
loadStore()mapLädt einen einzelnen Markt anhand seiner ID.

Templates

Das $wsStores Modul wird typischerweise verwendet auf:
  • Marktsuche-Seiten (Filialfinder)
  • Produktdetailseiten (Verfügbarkeit im Markt)
  • Checkout-Seiten (Click & Collect Auswahl)
  • Header/Footer (ausgewählter Markt anzeigen)

Variablen

$wsStores.selectedStore

Gibt den aktuell in der Session ausgewählten Markt aus. Ist null, wenn kein Markt ausgewählt wurde.
{{ if $wsStores.selectedStore }}
  Ihr Markt: {{= $wsStores.selectedStore.name }}
{{ else }}
  Kein Markt ausgewählt
{{ /if }}

Methoden

$wsStores.loadAllStores()

Lädt eine Liste aller verfügbaren Märkte. Signatur
$wsStores.loadAllStores()
Rückgabe
array - Liste mit Store-Maps.
Beispiel, das alle Märkte lädt und anzeigt.
{{ foreach $store in $wsStores.loadAllStores() }}
  <p>{{= $store.name }} – {{= $store.city }}</p>
{{ /foreach }}

$wsStores.loadStore()

Lädt einen einzelnen Markt anhand seiner ID. Signatur
$wsStores.loadStore(storeId)
Rückgabe
map - Store-Map mit allen Marktdaten.
Beispiel, das einen Markt lädt.
{{ var $store = $wsStores.loadStore(1) }}
Marktname: {{= $store.name }}
Mit Verwendung der Rückgabe-Daten von $wsStores.loadStore stehen verschiedene Eigenschaften zur Verfügung, die verwendet werden können. Nachfolgend eine Übersicht, welche Eigenschaften verfügbar sind.Eigenschaften von $wsStores.loadStore
EigenschaftenRückgabe-TypBeschreibung
idintEindeutige ID des Marktes.
namestringName des Marktes.
streetstringStraße (ggf. mit Hausnummer).
zipCodestringPostleitzahl.
citystringStadt.
countrystringLand.
storageIdstringID des Markt-Lagers zur Abfrage des Lagerbestands über $wsInventory.load().
clickAndCollectboolVerfügbarkeit von Click & Collect.
openNowboolPrüfung, ob der Markt aktuell geöffnet ist.
locationmapGPS-Koordinaten (latitude, longitude)
latitudefloatBreitengrad.
longitudefloatLängengrad.
openingHoursmapÖffnungszeiten nach Wochentag (0-6).
0-6arrayÖffnungszeiten pro Wochentag (0=Sonntag, 1=Montag, … , 6=Samstag).
specialDaysarrayTage mit abweichenden Öffnungszeiten (z.B. Feiertage).
monthintMonat (1-12).
dayintTag (1-31).
timesarrayÖffnungszeiten für diesen Tag.
startTimemapStartzeit mit hours und minutes.
endTimemapEndzeit mit hours und minutes.
zipPrefixarrayPostleitzahl-Präfixe, die diesem Markt zugeordnet sind (für automatische Marktvorschläge basierend auf Kundenadresse).
allowedSubshoparrayListe der Subshop-IDs, in denen dieser Markt verfügbar ist.

Aktionen

Für $wsStores stehen keine Aktionen zur Verfügung.

Beispiele

Alle Märkte auflisten

Beispiel, das alle Märkte mit Adresse und Öffnungsstatus anzeigt:
{{ 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">Jetzt geöffnet</span>
    {{ else }}
      <span class="closed">Geschlossen</span>
    {{ /if }}
  </div>
{{ /foreach }}

Filialauswahl als Dropdown darstellen

Beispiel, das eine Filialauswahl als Dropdown zur Verfügung stellt:
{{ 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">Mein Markt</label>
    <select id="wsStorefinderSelect" name="storeId" aria-label="Markt auswählen" 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">Markt auswählen</button>
</form>

Click & Collect im Checkout

Beispiel, das nur Märkte mit Click & Collect für Abholung anzeigt:
{{ 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>Abholmarkt auswählen:</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">Markt auswählen</button>
    </form>
    
    {{ if $storeAction.error }}
      {{ foreach $error in $storeAction.errors }}
        <div class="alert danger">
          {{ if $error.code == "reservationFailed" }}
            Produkt nicht verfügbar in diesem Markt: {{= $error.details.productId }}
          {{ else }}
            {{= ifnull($error.text, $error.code) }}
          {{ /if }}
        </div>
      {{ /foreach }}
    {{ /if }}
    
  {{ /if }}
{{ /foreach }}

Lagerbestand im Markt prüfen

Beispiel, das den Lagerbestand eines Produkts in einem bestimmten Markt prüft:
{{ var $store = $wsStores.selectedStore }}
{{ if $store }}
  {{ var $inventory = $wsInventory.load($product.id, $store.storageId) }}
  {{ if $inventory.active }}
    <p>Verfügbar in {{= $store.name }}: {{= $inventory.amount }} Stück</p>
  {{ else }}
    <p>Nicht verfügbar in {{= $store.name }}</p>
  {{ /if }}
{{ /if }}