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

# Link-Shortener

> Lange Produktadressen mit vielen Konfigurationsparametern als kurzen, merkbaren Link anbieten, der beim Aufruf auf das konfigurierte Produkt zurückführt.

Produkte mit vielen Konfigurationsmöglichkeiten, etwa Drucksachen, erzeugen lange Adressen, weil jede gewählte Option als Parameter angehängt wird. Eine solche Adresse lässt sich nicht weitergeben und nicht notieren:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
https://www.druckerei.de/Flyer,-DIN-A8.htm?pi=PFLA844&ci=000573&depvar_index_setparent=%3cPFLA844%3e%3cPFLA844%2e170%2e%2e%2e25%3e&depvar_index_set_1=%3cZXXA8Y3A%3e%3cZXXA8Y3AA01%3e&depvar_index_set_2=%3cZXXXX97N%3e%3cZXXXX97NN90%3e
```

Der Link-Shortener bietet dem Kunden dafür einen kurzen Link an, der beim Aufruf auf genau diese Konfiguration zurückführt:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
https://www.druckerei.de/sl/g1uMosn
```

![Shortlink1](https://mintcdn.com/websaleag-44ee7ea6/-VOorhOnZ4aGhsis/images/shortlink1.png?fit=max\&auto=format\&n=-VOorhOnZ4aGhsis\&q=85\&s=14bb4bb97f6a7a02808d828c3a1d4f7d)

Der praktische Nutzen liegt beim Kunden: Er speichert den kurzen Link, ruft ihn später wieder auf und findet sein Produkt mit allen getroffenen Einstellungen vor, ohne sie erneut zusammenzustellen.

Der Link-Shortener ist eine eigenständige Funktion und hat technisch nichts mit den SEO-URLs zu tun. Beides lässt sich unabhängig voneinander nutzen.

Wegweiser: [SEO-URLs und Link-Optimierung](https://dokumentation.websale.de/v8s/seo/seo-urls-und-link-optimierung.md)

## Voraussetzungen

Die Funktion arbeitet mit AJAX und einer Ebene über der Seite. Sie steht deshalb nur Kunden zur Verfügung, die JavaScript im Browser eingeschaltet haben.

> [!WARNING]
>
> Das Nachladen per AJAX wird wie ein Seitenaufruf gewertet und erhöht damit die Anzahl der Leistungseinheiten. Bei einem Produkt, das viele Kunden konfigurieren, ist das kein Nebeneffekt, sondern eine Größe, die in die Kalkulation gehört.

Die Funktion muss von WEBSALE freigeschaltet und konfiguriert werden. Teilen Sie Ihrem Ansprechpartner mit, für welche Subshops Sie sie wünschen.

## Einrichten

### Schritt 1: Den Aufruf auf der Produktdetailansicht einbauen

![Shortlink Direktlink Erzeugt](https://mintcdn.com/websaleag-44ee7ea6/-VOorhOnZ4aGhsis/images/shortlink_direktlink_erzeugt.png?fit=max\&auto=format\&n=-VOorhOnZ4aGhsis\&q=85\&s=5afc92321cd650fac0b301c2240c14a9)

Auf der Produktdetailansicht `ws_product.htm` entsteht der Link, über den der Kunde den Kurzlink anfordert. Im Beispiel wird der Link für das Produkt samt gewählten Varianten gebildet.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-PrepareForShortURL}
   <div id="ws_shortlink">
      <a href="#" onclick="return ws_AJAXloadTemplate('~WS-SSLLoadTpl(tpl_shortlink.htm)~','~WS-Charset~',
         ws_AJAXloadShortLinkStart,ws_AJAXloadShortLinkError,'ws_AJAXloadShortLinkSuccess()','ws_AJAXloadShortLinkResponseError()',
         '~WS-PrepareForShortURL($PR-DepVarLink$)~')">Direktlink</a>
   </div>
{/WS-PrepareForShortURL}
```

Welcher Link gekürzt wird, entscheidet der Parameter von `WS-PrepareForShortURL()`. Im Beispiel ist das `PR-DepVarLink`, also der Produktlink mit den gewählten Varianten. Für einen anderen Kurzlink setzen Sie dort ein anderes Link-Tag ein.

Referenz: [WS-PrepareForShortURL](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md#die-tags-im-uberblick)

### Schritt 2: JavaScript-Bibliothek einbinden

Auf der Produktdetailansicht müssen die WEBSALE Systembibliothek und die Design-Komponente eingebunden sein, mindestens in der Version 1.8.1.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<head>
   ...
   <script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
   <script type="text/javascript" src="../ihr-verzeichnis/ws-design-1.8.3.js"></script>
   ...
</head>
```

Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)

Wegweiser: [JavaScript und jQuery](https://dokumentation.websale.de/v8s/templates/javascript-und-jquery.md)

### Schritt 3: Template für die Anzeige anlegen

Der Klick lädt per AJAX ein weiteres Template nach, das dem Kunden den erzeugten Kurzlink zeigt. Legen Sie es unter dem Namen an, der im Aufruf aus Schritt 1 steht, und speichern Sie es in Ihrem Template-Verzeichnis.

![Shortlink Direktlink](https://mintcdn.com/websaleag-44ee7ea6/-VOorhOnZ4aGhsis/images/shortlink_direktlink.png?fit=max\&auto=format\&n=-VOorhOnZ4aGhsis\&q=85\&s=7324a54b729014c4d856a526044e0679)

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Ajax}
<WS-Ajax-ws_shortlink>

   {WS-ShortURL}
      IHR PERSÖNLICHER DIREKTLINK
      <p>~WS-ShortURL~</p>
   {/WS-ShortURL}

   {!WS-ShortURL}
      Für dieses Produkt lässt sich leider kein Kurzlink erzeugen.
      Bitte wenden Sie sich an unseren Kundenservice.
   {/!WS-ShortURL}

</WS-Ajax-ws_shortlink>
{/ST-Ajax}
```

Der Name des AJAX-Bereichs muss mit der Kennung des `div` aus Schritt 1 übereinstimmen, hier `ws_shortlink`. Sonst weiß der Browser nicht, welchen Teil der Seite er ersetzen soll.

> [!WARNING]
>
> Der negative Bereich ist nicht optional. Lässt sich kein Kurzlink erzeugen, sieht der Kunde sonst eine leere Ebene und weiß nicht, ob etwas passiert ist.

Referenz: [WS-ShortURL](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md#die-tags-im-uberblick)

## Verwandte Themen

* Wegweiser: [SEO-URLs und Link-Optimierung](https://dokumentation.websale.de/v8s/seo/seo-urls-und-link-optimierung.md)
* Wegweiser: [JavaScript und jQuery](https://dokumentation.websale.de/v8s/templates/javascript-und-jquery.md)
* Wegweiser: [AJAX-Funktionen](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)


## Related topics

- [Shop, Seite und Technik](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md)
- [Server-Konfiguration ws_access.conf](https://dokumentation.websale.de/v8s/referenz/konfigurationen/server-konfiguration-ws-access-conf.md)
- [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)
- [JavaScript und jQuery](https://dokumentation.websale.de/v8s/templates/javascript-und-jquery.md)
- [Cross-Link-Set](https://dokumentation.websale.de/v8s/set-produkte/cross-link-set.md)


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