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

# Reusability: includes

> How to create elements such as headers, footers, or legal texts once in WEBSALE V8s and reuse them via FastIncludes, single includes, and external includes.

This page describes how to create recurring content once and include it in as many places as you like. It assumes that you are familiar with the templates of your shop and with the shop configuration `shop.config`.

The reuse of elements is a central principle of WEBSALE V8s. Includes are references to HTML files whose content is embedded in whole or in part in other files. Typical candidates are headers and footers, the navigation, graphics such as the company logo, but also texts such as company information, terms of withdrawal, or privacy information. The benefit lies in maintenance: you change the text in one place, and it is up to date everywhere.

WEBSALE V8s knows three types of includes, which differ in their purpose:

| Type | Source | Sensible for |
| - | - | - |
| FastInclude | named sections in a collection file | many small elements that are needed on almost every page |
| Single include | a separate file per piece of content | larger, self-contained content such as legal texts |
| External include | a foreign system | programs outside the shop, for example product configurators |

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

The following sections present the three types in this order.

## FastInclude: collected includes

The HTML file `incl_fast_includes.htm` is a standard module of every shop. It gathers frequently used elements in one place, from which they are pulled into individual pages of the shop. The advantage over many small files is clarity: all recurring building blocks are listed below each other in one file. As a designer, you are free to use them.

### Define and include sections

In the FastInclude file, you define named include sections. The section name starts with the prefix `Incl-`.

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

You include this section on any page with the `WS-Fast_Include()` tag. In the parentheses, you write only the section name, not the file name. Which file is meant is defined in the shop configuration.

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

At runtime, the shop inserts the content of the section at this position. If the section itself contains tags, they are also replaced by their values.

### Register the FastInclude file in shop.config

So that the shop knows which file the sections come from, enter the source in the shop configuration `shop.config` in the `<Templates>` section.

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

Reference: Shop configuration shop.config, Templates section&#x20;

### Multiple FastInclude files

You are not limited to a single collection file. Multiple files are worth it in two cases. First, if you want to organize your reused elements by type, for example HTML separately from JavaScript. Second, during larger reconstruction work on the shop, because this way you can maintain a second file for test scenarios alongside the productively used file and the shop remains fully functional throughout.

Each additional file needs its own entry in `shop.config` and is addressed via its own tag.

```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>
```

This results in the following inclusions:

| Entry in shop.config | Tag in the template |
| - | - |
| `FastIncludes` | `~WS-Fast_Include(section)~` |
| `FastIncludes2` | `~WS-Fast_Include2(section)~` |
| `FastIncludes_<ID>` | `~WS-Fast_Include_<ID>(section)~` |

The freely named form `FastIncludes_<ID>` is the more flexible one. You choose the ID after the underscore yourself, and it appears unchanged in the tag. In the example above, `FastIncludes_basket` is therefore addressed via `~WS-Fast_Include_basket(section)~`. The shop evaluates a maximum of 15 such freely named entries; duplicate IDs are ignored.

Reference: WS-Fast\_Include()&#x20;

## Single includes

Includes do not have to be in a collection file. For each piece of content, you can instead create its own file. This is a good option for larger, self-contained content, for example legal texts.

For these files:

* You can create any number of single include files.
* We recommend the `incl_` prefix in the file name so that the include files are immediately recognizable in the directory overview.
* Single include files are not opened as standalone pages in the browser.
* They therefore always need a standalone page in which they are embedded and via which they are displayed.

The content is included via a tag pair. In the include file, the section bracketing `{WS-Include}` wraps the content that is to be adopted. On the displaying page, `~WS-IncludeTpl()~` pulls this content in. There are two usage patterns for this tag pair, a static and a dynamic one.

### Static usage

Static means: each target page is its own template and includes a fixed named piece of content.

Suppose your shop contains the include files `incl_agb.htm`, `incl_impressum.htm`, and `incl_widerruf.htm`. In the withdrawal include file, you wrap the desired content:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-Include}
    <h1>Right of withdrawal</h1>
    <p>Your withdrawal text...</p>
{/WS-Include}
```

On the withdrawal template `tpl_widerruf.htm`, you pull this content onto the page:

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

The same content is also to appear below the terms and conditions. The same tag on the terms template `tpl_agb.htm` is enough for this:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<body>
...
<h1>Our terms and conditions</h1>
<p>Terms text (permanently entered in the body of the page)</p>
...
<h1>Our right of withdrawal</h1>
~WS-IncludeTpl(incl_widerruf.htm)~
...
</body>
```

The bracketed content from `incl_widerruf.htm` thus appears on two pages, but it is still only maintained in one place.

Reference: WS-Include&#x20;

### Dynamic usage

Static usage requires a separate template per piece of content, that is, one each for withdrawal, terms and conditions, and imprint. All three contain the same header, footer, and navigation. Dynamic usage avoids exactly this duplication.

You then create only one complete template, a master information page with header, footer, and navigation, but without fixed content. Which content appears is decided by the link that the visitor clicks. The include files remain rudimentary and contain neither header, footer, nor navigation.

On the master information page `tpl_informationsseite.htm`, the placeholder `$IncludeTpl$` is used instead of a fixed file name:

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

The link passes the content to be inserted via the `include_tpl` parameter. The include files must be located in the same template directory as the master information page.

```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">Our terms and conditions</a>
<a href="~WS-SSLLoadTpl(tpl_informationsseite.htm)~&include_tpl=incl_widerruf.htm">Our terms of withdrawal</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)

Guide: Creating information pages&#x20;

## External includes

External includes embed foreign programs in the shop, for example product configurators, external login systems, or flip catalogs.

Usually, such systems are opened via a hyperlink in a new tab or started via frames, iframes, and popups. In all these cases, the visitor initially leaves the shop page. An external include avoids this. The visitor stays in the shop, and additional frames or popups are not needed.

In this way, you integrate, for example, the WEBSALE product rating system or the WEBSALE inquiry system "Inquiry4" directly into a shop template. External includes are embedded via tags on any template.

Guide: Using external includes&#x20;

## Further references

* Reference: WS-Include
* Reference: WS-IncludeTpl()
* Reference: WS-DynIncludeTpl()
* Reference: WS-ExternInclude()


## Related topics

- [Creating information pages](https://dokumentation.websale.de/en/v8s/informationsseiten/informationsseiten-erstellen.md)
- [Includes, templates, CSS and JavaScript](https://dokumentation.websale.de/en/v8s/referenz/tags/ws/includes-templates-css-und-js.md)
- [Integrating tracking](https://dokumentation.websale.de/en/v8s/funktionen-zur-shop-optimierung/tracking-einbinden.md)
- [Onsite personalization](https://dokumentation.websale.de/en/v8s/marketing-funktionen/onsite-personalisierung.md)
- [External services and interfaces](https://dokumentation.websale.de/en/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/externe-dienste-und-schnittstellen.md)


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