Template Theme

​

Verzeichnisstruktur

​

Template-Verzeichnis

templates
 ├── components
 │   └── inline-scripts
 │   └── spc
 ├── layouts
 ├── mails
 │   └── comment
 ├── pdfs
 ├── views
 │   └── account
 │   └── checkout
 │   └── newsletter
 │   └── other

• templates/components/: Wiederverwendbare Template-Elemente (Includes), beispielsweise Produktboxen.
• templates/layouts/: Basis-Templates (Layout-Templates), die das allgemeine Grundgerüst aller Shopseiten definieren, beispielsweise Header, Footer und Navigation.
• templates/mails/: Templates für automatisch versendete E-Mails, beispielsweise Bestellbestätigungen oder Versandbenachrichtigungen. Das Verzeichnis mails ist fest vorgegeben und kann nicht umbenannt oder verschoben werden. E-Mail-Templates müssen direkt in diesem Verzeichnis liegen. In den E-Mail-Konfigurationen wird beim template-Parameter nur der Dateiname ohne das Präfix mails/ angegeben (siehe E-Mails & E-Mail Einstellungen).
• templates/pdfs/: Templates für PDF-Ausgaben, beispielsweise Rechnungen oder Lieferscheine.
• templates/views/: Seiten-Templates (View-Templates) für die einzelnen Shopseiten, beispielsweise Startseite oder Kategorieseiten.

​

Medien-Verzeichnis

media
 ├── themes
 │   └── default
 │       └── favicon
 │       └── fonts
 │       └── images
 │       └── scripts
 │       └── scss
 │       └── styles

<link rel="stylesheet" type="text/css" href="{{= static('styles/wsTemplateGlobal.css') }}">

<script src="{{= static('scripts/bootstrap.bundle.js') }}"></script>
<script src="{{= static('scripts/jquery-3.6.4.js') }}"></script>

<img src="{{= static('images/logo.png')}}" alt="">

​

Basis-Template (Layout-Template)

templates
 ├── layouts

• Technischer <head>-Bereich:
  • Meta-Angaben für Suchmaschinenoptimierung (beispielsweise Title, Description, Keywords).
  • Verweise auf die CSS- und JavaScript-Dateien der Storefront.
  • Integration von externen Ressourcen wie Schriftarten oder Tracking-Codes.
• Sichtbarer Headerbereich:
  • Logo: Darstellung des Shop-Logos.
  • Suche: Eingabefeld für die Produktsuche.
  • Login-Bereich: Zugriff auf das Kundenkonto.
  • Warenkorb und Merkliste: Übersicht über gespeicherte Produkte.
  • Navigation: Primäre Navigation des Shops (beispielsweise Kategorien).
• Breadcrumb:
  • Anzeige des aktuellen Navigationspfads zur besseren Orientierung der Benutzer.
• Footer:
  • Weiterführende Verlinkungen wie Impressum, Datenschutz, AGB.
  • Kontaktinformationen oder andere zusätzliche Inhalte.

{{ extends "layouts/default.htm" }}

​

Template-Blöcke

{{ block header }}
  <header class="header">
     <h1>Standard-Header</h1>
  </header>
{{ /block }}

​

Template-Blöcke überschreiben

{{ block header }}
    <header>
        <h1>Willkommen im Shop!</h1>
        <p>Das ist unser spezieller Header für die Startseite.</p>
    </header>
{{ /block }}

​

Template-Blöcke erweitern

{{ block header append }}
    <p>Versandkostenfreiheit ab 50.00 € Einkaufswert</p>
{{ /block }}

​

View-Templates (Seiten-Templates)

templates
 ├── views

<a href="{{= $wsViews.viewUrl('impressum.htm')}}">Impressum</a>

​

Direkter URL-Aufruf eines View-Templates

https://www.beispielshop.de/?wsvc=View&view=impressum.htm

{{ extends "layouts/default.htm" }}

​

System-Templates

1. start.htm: Definiert die Startseite des Shops.
2. category.htm: Template für die Kategorieseiten.
3. product.htm: Template für die Produktseiten.

​

CMS-Seitentemplate

​

Das Seitendokument $wsCmsPage

{{ if $wsCmsPage }}
    {{# nur auf CMS-Seiten #}}
{{ /if }}

{{ if $wsCmsPage }}
    {{ var $cFields = {} }}
    {{ foreach $cField in $wsCmsPage.fields }}
        {{ $cFields[$cField.name] = $cField.value }}
    {{ /foreach }}

    <h1>{{= $wsCmsPage.meta.metaTitle }}</h1>
    <div>{{! $cFields.Markup }}</div>
{{ /if }}

{{ else }}
    {{ if $wsTestMode.active }}
        <!-- Komponente "{{= $cItem.component }}" ist im Template nicht umgesetzt -->
    {{ /if }}

{{ if $wsViews.current.robotOptions }}
    <meta name="robots" content="{{= join($wsViews.current.robotOptions, ",") }}">
{{ /if }}

{{ foreach $cAlt in $wsCmsPage.meta.hreflang }}
    <link rel="alternate" hreflang="{{= $cAlt.language }}" href="{{= $cAlt.url }}">
{{ /foreach }}

​

Benutzerdefinierte Templates

• account.htm: Für das Kundenkonto
• search.htm: Für die Suche
• impressum.htm: Für die Impressumsseite

​

Components (Includes)

templates
 ├── components

• In der Kategorieübersicht, um Produkte in einer Liste darzustellen.
• In den Suchergebnissen, um die Treffer anzuzeigen.
• Auf der Merkliste, um gespeicherte Produkte darzustellen.
• Im Cross-Selling-Bereich auf der Produktdetailseite, um verwandte oder empfohlene Produkte anzuzeigen.

<div class="product-box">
    <h3>{{= $myProduct.name }}</h3>
    <p>Preis: {{= $myProduct.price | currency }}</p>
    <a href="{{= $wsViews.url('Product', {productId: $myProduct.id}) }}">Details</a>
</div>

{{ include "components/productBox.htm" with $myProduct = $cProduct }}

​

Storefront API