Link shortener - WEBSALE Dokumentation

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:

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:

https://www.druckerei.de/sl/g1uMosn

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.

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.

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

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.

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

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

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

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.

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

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

​Requirements

​Setting up

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

​Step 2: Include the JavaScript library

​Step 3: Create the template for the display

​Related topics

Requirements

Setting up

Step 1: Add the call to the product detail view

Step 2: Include the JavaScript library

Step 3: Create the template for the display

Related topics