> ## 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.

# Wiederverwendung: Includes

> Wie Sie in WEBSALE V8s Elemente wie Header, Footer oder Rechtstexte einmal anlegen und über FastIncludes, Einzel-Includes und Externe Includes mehrfach verwenden.

Diese beschreibt, wie Sie wiederkehrende Inhalte einmal anlegen und an beliebig vielen Stellen einbinden. Vorausgesetzt wird, dass Sie mit den Templates Ihres Shops und mit der Shopkonfiguration `shop.config` vertraut sind.

Die Wiederverwendung von Elementen ist ein zentrales Prinzip von WEBSALE V8s. Includes sind Referenzen auf HTML-Dateien, deren Inhalt ganz oder in Teilen in andere Dateien eingebunden wird. Typische Kandidaten sind Header und Footer, die Navigation, Grafiken wie das Firmenlogo, aber auch Texte wie Informationen zum Unternehmen, Widerrufsbedingungen oder Angaben zum Datenschutz. Der Nutzen liegt in der Pflege: Sie ändern den Text an einer Stelle, und er ist überall aktuell.

WEBSALE V8s kennt drei Arten von Includes, die sich in ihrem Einsatzzweck unterscheiden:

| Art | Quelle | Sinnvoll für |
| - | - | - |
| FastInclude | benannte Bereiche in einer Sammeldatei | viele kleine Elemente, die auf fast jeder Seite gebraucht werden |
| Einzel-Include | eine eigene Datei je Inhalt | größere, abgeschlossene Inhalte wie Rechtstexte |
| Externes Include | ein fremdes System | Programme außerhalb des Shops, beispielsweise Produktkonfiguratoren |

![20171206 Includes 03](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/20171206_includes_03.png?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=424aced2db41e57100b68971addc7d12)

Die folgenden Abschnitte stellen die drei Arten in dieser Reihenfolge vor.

## FastInclude: gesammelte Includes

Die HTML-Datei `incl_fast_includes.htm` ist ein Standard-Modul jedes Shops. Sie sammelt häufig verwendete Elemente an einem Platz, von dem aus sie in die Einzelseiten des Shops geholt werden. Der Vorteil gegenüber vielen kleinen Dateien ist die Übersicht: Alle wiederkehrenden Bausteine stehen untereinander in einer Datei. Es steht Ihnen als Designer frei, sie zu benutzen.

### Bereiche definieren und einbinden

In der FastInclude-Datei definieren Sie benannte Include-Bereiche. Der Bereichsname beginnt mit dem Präfix `Incl-`.

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

Diesen Bereich binden Sie auf jeder beliebigen Seite mit dem Tag `WS-Fast_Include()` ein. In die Klammern schreiben Sie nur die Bereichsbezeichnung, nicht den Dateinamen. Welche Datei gemeint ist, steht in der Shopkonfiguration.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-Fast_Include(Incl-Header)~
```

Zur Laufzeit setzt der Shop an dieser Stelle den Inhalt des Bereichs ein. Enthält der Bereich selbst Tags, werden auch diese durch ihre Werte ersetzt.

### FastInclude-Datei in der shop.config hinterlegen

Damit der Shop weiß, aus welcher Datei die Bereiche stammen, tragen Sie die Quelle in der Shopkonfiguration `shop.config` im Abschnitt `<Templates>` ein.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   ...
   FastIncludes      = incl_fast_includes.htm
   ...
</Templates>
```

Referenz: Shopkonfiguration shop.config, Abschnitt Templates

### Mehrere FastInclude-Dateien

Sie sind nicht auf eine einzige Sammeldatei festgelegt. Mehrere Dateien lohnen sich in zwei Fällen. Erstens, wenn Sie Ihre wiederverwendeten Elemente nach Typen ordnen möchten, beispielsweise HTML getrennt von JavaScript. Zweitens bei größeren Umbauarbeiten am Shop, weil Sie so neben der produktiv genutzten Datei eine zweite für Testszenarien pflegen können und der Shop durchgehend funktionsfähig bleibt.

Jede zusätzliche Datei braucht einen eigenen Eintrag in der `shop.config` und wird über ein eigenes Tag angesprochen.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   ...
   FastIncludes         = incl_fast_includes.htm
   FastIncludes2        = incl_fast_includes2.htm
   FastIncludes_basket  = incl_basket.htm
   ...
</Templates>
```

Daraus ergeben sich diese Einbindungen:

| Eintrag in der shop.config | Tag im Template |
| - | - |
| `FastIncludes` | `~WS-Fast_Include(Bereich)~` |
| `FastIncludes2` | `~WS-Fast_Include2(Bereich)~` |
| `FastIncludes_<ID>` | `~WS-Fast_Include_<ID>(Bereich)~` |

Die frei benannte Form `FastIncludes_<ID>` ist die flexiblere. Die ID hinter dem Unterstrich wählen Sie selbst, sie taucht im Tag unverändert wieder auf. Im obigen Beispiel wird `FastIncludes_basket` also über `~WS-Fast_Include_basket(Bereich)~` angesprochen. Der Shop wertet maximal 15 solcher frei benannten Einträge aus, doppelte IDs werden ignoriert.

Referenz: [WS-Fast\_Include()](https://dokumentation.websale.de/v8s/referenz/tags/ws/includes-templates-css-und-js.md)

## Einzel-Includes

Includes müssen nicht in einer Sammeldatei liegen. Für jeden Inhalt können Sie stattdessen eine eigene Datei anlegen. Das bietet sich für größere, abgeschlossene Inhalte an, beispielsweise für Rechtstexte.

Für diese Dateien gilt:

* Sie können beliebig viele Einzel-Include-Dateien anlegen.
* Wir empfehlen das Präfix `incl_` im Dateinamen, damit die Include-Dateien in der Verzeichnisübersicht sofort erkennbar sind.
* Einzel-Include-Dateien werden nicht als eigenständige Seiten im Browser geöffnet.
* Sie brauchen deshalb immer eine eigenständige Seite, in der sie eingebunden sind und über die sie angezeigt werden.

Eingebunden wird der Inhalt über ein Tag-Paar. In der Include-Datei umschließt die Bereichsklammerung `{WS-Include}` den Inhalt, der übernommen werden soll. Auf der anzeigenden Seite holt `~WS-IncludeTpl()~` diesen Inhalt. Für dieses Tag-Paar gibt es zwei Einsatzarten, eine statische und eine dynamische.

### Statische Verwendung

Statisch bedeutet: Jede Zielseite ist ein eigenes Template und bindet einen fest benannten Inhalt ein.

Angenommen, Ihr Shop enthält die Include-Dateien `incl_agb.htm`, `incl_impressum.htm` und `incl_widerruf.htm`. In der Widerrufs-Include-Datei umschließen Sie den gewünschten Inhalt:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-Include}
    <h1>Widerrufsrecht</h1>
    <p>Ihr Widerrufs-Text...</p>
{/WS-Include}
```

Auf dem Widerrufs-Template `tpl_widerruf.htm` holen Sie diesen Inhalt auf die Seite:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<body>
...
    ~WS-IncludeTpl(incl_widerruf.htm)~
...
</body>
```

Derselbe Inhalt soll zusätzlich unter den AGB erscheinen. Dafür genügt dasselbe Tag auf dem AGB-Template `tpl_agb.htm`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<body>
...
<h1>Unsere Allgemeinen Geschäftsbedingungen</h1>
<p>AGB-Text (wird fest im Body der Seite eingetragen)</p>
...
<h1>Unser Widerrufsrecht</h1>
~WS-IncludeTpl(incl_widerruf.htm)~
...
</body>
```

Der geklammerte Inhalt aus `incl_widerruf.htm` erscheint damit auf zwei Seiten, gepflegt wird er weiterhin nur an einer Stelle.

Referenz: [WS-Include](https://dokumentation.websale.de/v8s/referenz/tags/ws/includes-templates-css-und-js.md)

### Dynamische Verwendung

Die statische Verwendung braucht pro Inhalt ein eigenes Template, also je eines für Widerruf, AGB und Impressum. Alle drei enthalten denselben Header, Footer und dieselbe Navigation. Genau diese Dopplung vermeidet die dynamische Verwendung.

Dabei legen Sie nur noch ein einziges vollständiges Template an, eine Master-Informationsseite mit Header, Footer und Navigation, aber ohne festen Inhalt. Welcher Inhalt erscheint, entscheidet der Link, den der Besucher anklickt. Die Include-Dateien bleiben rudimentär und enthalten weder Header noch Footer noch Navigation.

Auf der Master-Informationsseite `tpl_informationsseite.htm` steht dafür der Platzhalter `$IncludeTpl$` statt eines festen Dateinamens:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<body>
...
~WS-IncludeTpl($IncludeTpl$)~
...
</body>
```

Den einzusetzenden Inhalt übergibt der Link über den Parameter `include_tpl`. Die Include-Dateien müssen dafür im selben Template-Verzeichnis liegen wie die Master-Informationsseite.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-SSLLoadTpl(tpl_informationsseite.htm)~&include_tpl=incl_agb.htm">Unsere AGB</a>
<a href="~WS-SSLLoadTpl(tpl_informationsseite.htm)~&include_tpl=incl_widerruf.htm">Unsere Widerrufsbedingungen</a>
```

![20171205 Includes 02](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/20171205_includes_02.png?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=e2b60a4ee486dd1238c7faa48cbf0687)

Wegweiser: [Informationsseiten erstellen](https://dokumentation.websale.de/v8s/informationsseiten/informationsseiten-erstellen.md)

## Externe Includes

Externe Includes binden fremde Programme in den Shop ein, beispielsweise Produktkonfiguratoren, externe Anmeldesysteme oder Blätterkataloge.

Üblicherweise werden solche Systeme über einen Hyperlink in einem neuen Tab geöffnet oder über Frames, iFrames und Popups gestartet. In allen diesen Fällen verlässt der Besucher zunächst die Shop-Seite. Ein Externes Include vermeidet das. Der Besucher bleibt im Shop, und zusätzliche Frames oder Popups sind nicht nötig.

Auf diesem Weg integrieren Sie beispielsweise das WEBSALE-Produktbewertungssystem oder das WEBSALE-Anfragesystem "Inquiry4" direkt in ein Shop-Template. Eingebunden werden Externe Includes über Tags auf einem beliebigen Template.

Wegweiser: [Externe Includes verwenden](https://dokumentation.websale.de/v8s/externe-dienste/externe-inhalte-einbinden.md)

## Weiterführende Referenzen

* Referenz: WS-Include
* Referenz: [WS-IncludeTpl()](https://dokumentation.websale.de/v8s/referenz/tags/ws/includes-templates-css-und-js.md)
* Referenz: WS-DynIncludeTpl()
* Referenz: [WS-ExternInclude()](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md)


## Related topics

- [Onsite-Personalisierung](https://dokumentation.websale.de/v8s/marketing-funktionen/onsite-personalisierung.md)
- [Informationsseiten erstellen](https://dokumentation.websale.de/v8s/informationsseiten/informationsseiten-erstellen.md)
- [Template-Typen](https://dokumentation.websale.de/v8s/grundlagen-templates/template-typen.md)
- [Filter auf Kategorieebene](https://dokumentation.websale.de/v8s/kategorien/filter-auf-kategorieebene.md)
- [Grundlagen und Technik](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.