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

> Offer long product addresses with many configuration parameters as a short, memorable link that leads back to the configured product when called up.

Products with many configuration options, such as printed matter, produce long addresses because every selected option is appended as a parameter. Such an address cannot be passed on or written down:

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

The link shortener instead offers the customer a short link that leads back to exactly this configuration when called up:

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

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

The practical benefit lies with the customer: they save the short link, call it up again later and find their product with all the settings they made, without having to put them together again.

> [!NOTE]
>
> The link shortener is a standalone function and technically has nothing to do with SEO URLs. The two can be used independently of each other.

Guide: SEO URLs and link optimization

## Requirements

The function works with AJAX and a layer above the page. It is therefore only available to customers who have JavaScript enabled in their browser.

> [!WARNING]
>
> Reloading via AJAX counts as a page view and therefore increases the number of performance units. For a product that many customers configure, this is not a side effect but a figure that belongs in your cost calculation.

The function must be activated and configured by WEBSALE. Tell your contact person for which subshops you want it.

## Setting up

### Step 1: Add the call to the product detail view

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

The product detail view `ws_product.htm` contains the link the customer uses to request the short link. In the example, the link is created for the product including the selected variants.

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

Which link is shortened is determined by the parameter of `WS-PrepareForShortURL()`. In the example, this is `PR-DepVarLink`, that is, the product link with the selected variants. For a different short link, insert a different link tag there.

Reference: WS-PrepareForShortURL

### Step 2: Include the JavaScript library

The WEBSALE system library and the design component must be included on the product detail view, at least in 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>
```

Materials: WEBSALE JavaScript library

Guide: JavaScript and jQuery

### Step 3: Create the template for the display

The click loads an additional template via AJAX that shows the customer the generated short link. Create it under the name used in the call from step 1 and save it in your template directory.

![Short link direct link](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}
```

> [!NOTE]
>
> The name of the AJAX section must match the ID of the `div` from step 1, here `ws_shortlink`. Otherwise, the browser does not know which part of the page to replace.

> [!WARNING]
>
> The negative section is not optional. If no short link can be generated, the customer would otherwise see an empty layer and not know whether anything has happened.

Reference: WS-ShortURL

## Related topics

* Guide: SEO URLs and link optimization
* Guide: JavaScript and jQuery
* Guide: AJAX functions


## Related topics

- [Shop, page and technology](https://dokumentation.websale.de/en/v8s/referenz/tags/ws/shop-seite-und-technik.md)
- [Server configuration ws_access.conf](https://dokumentation.websale.de/en/v8s/referenz/konfigurationen/server-konfiguration-ws-access-conf.md)
- [WEBSALE JavaScript library](https://dokumentation.websale.de/en/v8s/materialien/websale-javascript-bibliothek.md)
- [External links](https://dokumentation.websale.de/en/v8s/domains/externe-verlinkungen.md)
- [Internal links](https://dokumentation.websale.de/en/v8s/domains/interne-verlinkungen.md)


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