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

# Materialien Online-Preise

> Ein Countdown im Warenkorb, der die Restgültigkeit der Online-Preise anzeigt, mit dem Template-Teil zur Ermittlung der kürzesten Restzeit und dem JavaScript dazu.

Online-Preise gelten nur eine begrenzte Zeit. Mit dem Beispiel auf dieser Seite zeigen Sie dem Käufer im Warenkorb, wie lange seine Preise noch gelten.

Der Countdown richtet sich nach dem Produkt mit der kürzesten Restgültigkeit, denn sobald dessen Preis abläuft, erneuert der Shop die Preise aller Online-Preis-Produkte im Warenkorb.

Wegweiser: [Online-Preise](https://dokumentation.websale.de/v8s/produkte/produktpreise.md#online-preise)

![Online Preis Timer](https://mintcdn.com/websaleag-44ee7ea6/qpKXKLTjn0wDjacH/images/online-preis-timer.png?fit=max\&auto=format\&n=qpKXKLTjn0wDjacH\&q=85\&s=1a3a1092190e6c978feaa1cc4d54b505)

## Voraussetzungen

Das Beispiel braucht jQuery. Im Vorlagenshop kommt jQuery aus der WEBSALE Systembibliothek, die zusammen mit ihrer Design-Komponente im `head`-Bereich des Templates stehen muss.

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

Das Beispiel nutzt von der Systembibliothek ausschließlich jQuery. Wenn Ihr Shop jQuery bereits auf anderem Weg einbindet, brauchen Sie die beiden Dateien hier nicht. Für neue Shops ist ohnehin der Weg über die WS-Module vorgesehen, nicht über die Systembibliothek.

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

## Das Beispiel

Der erste Teil läuft im Shop und ermittelt die kürzeste Restzeit, der zweite läuft im Browser und zählt herunter.

> [accordion] Countdown für die Restzeit
>
> ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> <!doctype html>
> <html>
> <head>
> <meta charset="iso-8859-1">
> <title>Countdown für die Restzeit</title>
> </head>
>
> <body>
>
> ~DC-Int1_set(0)~
> {BASKET-PR-Data}
>     {@BASKET-PR-Data}
>         {BASKET-PR-OnlinePrice}
>             {DC-Int1(0)}~DC-Int1_set($BASKET-PR-OnlinePriceTimeLeft$)~{/DC-Int1(0)}
>             {!DC-Int1(0)}
>                 {DC-CompareDigitLT($BASKET-PR-OnlinePriceTimeLeft$,$DC-Int1$)}
>                     ~DC-Int1_set($BASKET-PR-OnlinePriceTimeLeft$)~
>                 {/DC-CompareDigitLT($BASKET-PR-OnlinePriceTimeLeft$,$DC-Int1$)}
>             {/!DC-Int1(0)}
>         {/BASKET-PR-OnlinePrice}
>     {/@BASKET-PR-Data}
> {/BASKET-PR-Data}
>
> {!DC-Int1(0)}
> <script type="text/javascript">
>         var left = ~DC-Int1~ ;
>
>         function setBasketUpdateTime()
>         {
>                 var mins = parseInt(left / 60);
>                 var secs = left % 60;
>
>                 if (mins < 0)
>                         mins = 0;
>                 if (secs < 0)
>                         secs = 0;
>
>                 var res = "";
>                 res += mins + ":";
>                 if (secs < 10)
>                         res += "0";
>                 res += secs;
>
>                 $('#basket_time').html(res);
>                 left = left - 1;
>                 if (left < 0)
>                         left = 0;
>                 else
>                         setTimeout(setBasketUpdateTime, 1000);
>         }
>
>         $( document ).ready(function() {
>                 setBasketUpdateTime();
>         });
> </script>
> Die Preise in Ihrem Warenkorb sind noch <span id="basket_time"></span> gültig (Minuten:Sekunden)
> {/!DC-Int1(0)}
>
> </body>
> </html>
> ```

## Wie der Shopteil arbeitet

`~DC-Int1~` dient als Zwischenspeicher für die bisher kleinste gefundene Restzeit. Der Ablauf:

| Schritt | Was passiert |
| - | - |
| `~DC-Int1_set(0)~` | setzt den Zwischenspeicher auf null |
| `{@BASKET-PR-Data}` | läuft über alle Warenkorbpositionen |
| `{BASKET-PR-OnlinePrice}` | überspringt Positionen ohne Online-Preis |
| `{DC-Int1(0)}` | beim ersten gefundenen Produkt: dessen Restzeit übernehmen |
| `{DC-CompareDigitLT(…)}` | bei jedem weiteren: übernehmen, wenn es weniger Restzeit hat |
| `{!DC-Int1(0)}` | der Anzeigeblock erscheint nur, wenn überhaupt etwas gefunden wurde |

`~BASKET-PR-OnlinePriceTimeLeft~` liefert die Restzeit in **Sekunden**. Ist der Preis bereits abgelaufen, gibt es `0` zurück. Das Tag gibt es nur als Einzel-Tag und nur innerhalb einer Position, die tatsächlich einen Online-Preis hat. Außerhalb von `{BASKET-PR-OnlinePrice}` ist es ungültig.

> [!WARNING]
>
> Die Schleife hat eine Lücke: Ein Produkt, dessen Preis bereits abgelaufen ist, liefert `0` und wird von `{!DC-Int1(0)}` wie der Anfangszustand behandelt. Es gewinnt den Vergleich also nie. Enthält der Warenkorb ein abgelaufenes und ein noch gültiges Online-Preis-Produkt, zeigt der Countdown die Restzeit des gültigen an, obwohl die Preise bereits veraltet sind.
>
> Prüfen Sie diesen Fall zusätzlich mit `{BASKET-PR-OnlinePriceTimedOut}` und zeigen Sie dann einen Hinweis statt des Countdowns.

Ob der Warenkorb überhaupt ein Online-Preis-Produkt enthält, beantwortet `{BASKET-HasOnlinePriceProduct}` in einem Schritt. Für eine reine Ja-Nein-Frage brauchen Sie die Schleife oben nicht.

Referenz: [BASKET-PR-Data](https://dokumentation.websale.de/v8s/referenz/tags/basket/mehrfach-lieferadressen-und-belegexemplare.md#basket-pr-d) · [BASKET-PR-OnlinePrice](https://dokumentation.websale.de/v8s/referenz/tags/basket/besondere-produktarten-im-warenkorb.md#online-preise) · [BASKET-PR-OnlinePriceTimeLeft](https://dokumentation.websale.de/v8s/referenz/tags/basket/besondere-produktarten-im-warenkorb.md#online-preise) · [BASKET-PR-OnlinePriceTimedOut](https://dokumentation.websale.de/v8s/referenz/tags/basket/besondere-produktarten-im-warenkorb.md#online-preise) · [DC-CompareDigitLT()](https://dokumentation.websale.de/v8s/referenz/tags/dc/vergleiche.md#die-tags-im-uberblick) · [DC-Int1…3()](https://dokumentation.websale.de/v8s/referenz/tags/dc/rechnen.md#die-tags-im-uberblick)

## Wann die Preise wirklich erneuert werden

Der Countdown zeigt an, wann die Preise ablaufen. Er erneuert sie nicht.

Erneuert werden sie serverseitig beim nächsten Aufruf des Warenkorbs: Der Shop prüft, ob mindestens ein Online-Preis-Produkt abgelaufen ist, und holt in diesem Fall für **alle** Online-Preis-Produkte im Warenkorb neue Preise. Deshalb genügt es, die kürzeste Restzeit anzuzeigen.

> [!WARNING]
>
> Läuft der Countdown auf `0:00`, passiert von selbst nichts. Der Käufer sieht weiterhin die alten Preise, bis er den Warenkorb neu lädt oder eine Aktion auslöst.
>
> Wenn Sie wollen, dass sich die Seite bei `0:00` selbst neu lädt, ergänzen Sie das im `if (left < 0)`-Zweig, beispielsweise mit `location.reload()`.

Wie lange ein Online-Preis gilt, stellen Sie in der `shop.config` ein. Die Restzeit, die `~BASKET-PR-OnlinePriceTimeLeft~` ausgibt, ergibt sich aus dem Zeitpunkt des letzten Abrufs plus dieser Dauer.

Das Listing trägt den HTML5-Doctype zusammen mit `charset=iso-8859-1`. Übernehmen Sie für einen neuen Shop den Zeichensatz Ihrer übrigen Templates, üblicherweise UTF-8.


## Related topics

- [Produktpreise](https://dokumentation.websale.de/v8s/produkte/produktpreise.md)
- [Kategorien und weitere Dateien](https://dokumentation.websale.de/v8s/schnittstellen/produkte-und-kategorien/ws-sftp-produkte-pro/kategorien-und-weitere-dateien.md)
- [MSG- (Meldungen)](https://dokumentation.websale.de/v8s/referenz/tags/msg-meldungen.md)
- [Besondere Produktarten im Warenkorb](https://dokumentation.websale.de/v8s/referenz/tags/basket/besondere-produktarten-im-warenkorb.md)
- [Preise und Kosten](https://dokumentation.websale.de/v8s/preise/preise-und-kosten.md)


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