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

# Web-to-Print-Produkte

> Wie Sie in WEBSALE V8s Produkte anbieten, die der Käufer online selbst gestaltet, von der Produktkennzeichnung über den Warenkorb bis zur Bestellhistorie.

Bei einem Web-to-Print-Produkt gestaltet der Käufer seine Drucksache direkt im Browser, auf Basis vordefinierter Vorlagen und ohne zusätzliche Software. Je Produkt entscheiden Sie, ob Sie eine solche Gestaltung anbieten und ob dafür Zusatzkosten anfallen.

Die Gestaltungsoberfläche selbst stellt Ihr Web-to-Print-Partner. Welche Vorlagen und Möglichkeiten es dort gibt und wie die Oberfläche aussieht, vereinbaren Sie mit ihm. WEBSALE V8s steuert den Weg dorthin und zurück.

![Web To Print](https://mintcdn.com/websaleag-44ee7ea6/-1_oq4gULAhdP5g2/images/web-to-print.png?fit=max\&auto=format\&n=-1_oq4gULAhdP5g2\&q=85\&s=53aaa0e4724d9d606b58cacabebfff1c)

## Ablauf im Shop

Der Käufer klickt auf der Produktdetailansicht auf den Gestaltungs-Button. Damit landet das Produkt bereits im Hintergrund im Warenkorb.

Anschließend fragt ein Dialog, ob er sich anmelden möchte. Die Anmeldung über sein Kundenkonto lohnt sich für ihn, weil seine Gestaltungen dann gespeichert bleiben und für spätere Bestellungen zur Verfügung stehen.

Danach führt der Shop ihn auf die Oberfläche des Web-to-Print-Partners. Von dort kehrt er in beiden Fällen auf die Warenkorbseite zurück:

| Ausgang | Folge |
| - | - |
| Gestaltung abgeschlossen | Der Warenkorb zeigt eine Vorschau, der Bestellablauf kann starten. |
| Gestaltung abgebrochen | Das Produkt liegt ohne Gestaltung im Warenkorb. |

Im Abbruchfall kann der Käufer das Produkt je nach Konfiguration trotzdem bestellen und Ihnen seine Druckdaten auf anderem Weg zukommen lassen, beispielsweise über das WEBSALE Upload-Modul.

Bereits gestaltete, aber noch nicht bestellte Web-to-Print-Produkte lassen sich im Cookie-Warenkorb zwischenspeichern. Die Arbeit des Käufers geht dann nicht verloren, wenn er den Shop zwischendurch verlässt.

## Schritt 1: Produktdaten anpassen

Web-to-Print-fähige Produkte müssen zusätzlich als Upload-Produkte gekennzeichnet sein. Das gilt im WSPManager ebenso wie im angeschlossenen Warenwirtschaftssystem.

Legen Sie im WSPManager unter **Subshop-Einstellungen > Erweitert > Freie Felder** diese Felder an:

| Technischer Feldname | Typ | Werte | Bedeutung |
| - | - | - | - |
| `W2P` | Text einzeilig mit Auswahlliste | `Y`, `N`, `C` | Web-to-Print-fähig, nicht fähig oder bedingt fähig |
| `W2PCost` | Text einzeilig | Preis in Shop-Basiswährung | Zusatzkosten für die Gestaltung |
| `W2POnly` | Text einzeilig mit Auswahlliste | `Y`, `N` | Produkt ist nur mit Gestaltung bestellbar |
| `W2PDiscardDesignOnProductChange` | Text einzeilig mit Auswahlliste | `Y`, `N` | `Y` verwirft die Gestaltung, sobald das Produkt geändert wird |

Der Wert `C` steht für "bedingt Web-to-Print-fähig". Solche Produkte sind nur dann gestaltbar, wenn die Rechnungsadresse des Käufers festgelegten Bedingungen entspricht, beispielsweise über bestimmte Suffixfelder. Die Bedingungen werden nicht in der `shop.config` hinterlegt, sondern zentral. Ihr WEBSALE-Ansprechpartner richtet sie ein.

## Schritt 2: Shopkonfiguration ergänzen

Der Abschnitt `<W2P>` der `shop.config` enthält die Beschriftungen und Meldungstexte.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<W2P>
   SaveW2PToCookieBasket-Allow = no
   W2PCost-Txt                 = Gesamtkosten der Web-to-Print-Gestaltung
   W2PVAT-Txt                  = Mehrwertsteueranteil der Web-to-Print-Gestaltung
   W2PItemCost-Txt             = Kosten der Web-to-Print-Gestaltung pro Produkt
   W2PItemVAT-Txt              = Mehrwertsteueranteil der Web-to-Print-Gestaltung pro Produkt
   W2PCreated-Txt              = Ihre Web-to-Print-Gestaltung wurde erfolgreich erstellt und zum Warenkorb hinzugefügt.
   W2PChanged-Txt              = Ihre Änderungen wurden erfolgreich übernommen.
   W2PCanceled-Txt             = Die Gestaltung wurde auf Ihren Wunsch abgebrochen. Ihre erstellten Daten werden nicht in den Warenkorb übernommen.
   W2PDeleted-Txt              = Ihre Gestaltung wurde erfolgreich gelöscht.
   W2PError-Txt                = Es ist ein Fehler aufgetreten. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.
</W2P>
```

`SaveW2PToCookieBasket-Allow` steuert das oben erwähnte Zwischenspeichern im Cookie-Warenkorb.

Referenz: [Abschnitt W2P](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/warenkorb-und-bestellprozess.md#w2p)

## Schritt 3: Gestaltungs-Button auf der Produktdetailansicht

Der Button gehört in das Produktformular. Zusammen mit ihm setzt ein kleines Skript ein verstecktes Feld, damit der Shop nach einer eventuellen Anmeldung weiß, dass der Käufer zur Gestaltung möchte.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Product~" method="post" name="product" id="productform">
   ...
   {PR-W2P}
      <input type="hidden" id="w2p_trigger" name="otp3" value="">
      <script type="text/javascript">
         function activateW2P()
         {
            $("#w2p_trigger").val('w2p-request');
         }
      </script>

      <input type="submit" value="Online gestalten" class="button" onclick="activateW2P(); return true;">
   {/PR-W2P}
   ...
</form>
```

Der Wert `w2p-request` im Parameter `otp3` ist die Marke, an der alle folgenden Schritte den Gestaltungswunsch wiedererkennen. Sie begleitet den Käufer durch Anmeldung und Adresseingabe hindurch bis zurück in den Warenkorb.

## Schritt 4: Zusatzinformationen auf der Produktdetailansicht

Innerhalb von [`PR-Data`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten#die-tags-im-uberblick) geben Sie an beliebiger Stelle aus, ob und zu welchem Preis das Produkt gestaltbar ist.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-Data}
   ...
   {PR-W2P}
      Dieses Produkt können Sie online gestalten.

      {PR-W2PCost}Kosten für die Onlinegestaltung: ~PR-W2PCost~<br>{/PR-W2PCost}
      {PR-W2PNetCost}Nettokosten: ~PR-W2PNetCost~<br>{/PR-W2PNetCost}
      {PR-W2PGrossCost}Bruttokosten: ~PR-W2PGrossCost~<br>{/PR-W2PGrossCost}
      {PR-W2PVAT}Mehrwertsteueranteil: ~PR-W2PVAT~<br>{/PR-W2PVAT}
   {/PR-W2P}

   {!PR-W2P}
      Dieses Produkt lässt sich nicht online gestalten.
   {/!PR-W2P}
   ...
{/PR-Data}
```

## Schritt 5: Skript auf der Warenkorbseite

Das Skript im `<head>` von `ws_basket.htm` erledigt zwei Dinge: Es entscheidet, ob der Anmeldedialog erscheint oder direkt zur Gestaltung weitergeleitet wird, und es steuert die Hinweis-Layer aus Schritt 6.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script type="text/javascript">

function w2pdispatch_create_w2p()
{
   {ST-LoggedIn}
      // angemeldet, direkt zur Gestaltung
      window.location = $('#w2p_createlink').attr('href');
   {/ST-LoggedIn}

   {!ST-LoggedIn}
      // nicht angemeldet, Anmeldedialog zeigen
      $("#w2p_createlayer").show();
   {/!ST-LoggedIn}
}

{WS-OTP3(w2p-request)}
   // Ankunft von der Produktseite
   $(document).ready(function()
   {
      w2pdispatch_create_w2p();
   });
{/WS-OTP3(w2p-request)}

</script>
```

Die Klammerung `{WS-OTP3(w2p-request)}` sorgt dafür, dass die automatische Weiterleitung nur greift, wenn der Käufer tatsächlich über den Gestaltungs-Button gekommen ist. Bei einem normalen Warenkorbaufruf passiert nichts.

## Schritt 6: Hinweis-Layer auf der Warenkorbseite

Vier Layer decken die Entscheidungen ab, die der Käufer treffen kann. Sie stehen an beliebiger Stelle auf `ws_basket.htm` und sind zunächst ausgeblendet.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Anmelden oder ohne Anmeldung gestalten -->
<div id="w2p_createlayer" style="display: none">
   <h2>Mit Anmeldung?</h2>
   <p>Mit Anmeldung werden Ihre online gestalteten Druckdaten im Kundenkonto gespeichert und stehen für Ihre nächste Bestellung wieder zur Verfügung.</p>

   <h2>Ohne Anmeldung?</h2>
   <p>Ohne Anmeldung werden die Druckdaten nicht gespeichert und müssen bei jeder Bestellung neu erstellt werden.</p>

   <a href="#" onclick="window.location = $('#w2p_createlink').attr('href'); return false;">Ohne Anmeldung</a><br>
   <a href="~WS-LoginLink~&type=LoginUser&otp3=w2p-request">Mit Anmeldung</a><br>
   <a href="#" onclick="$('#w2p_createlayer').hide(); return false;">Abbrechen</a>
</div>

<!-- Gestaltung löschen -->
<div id="w2p_deletelayer_w2p" style="display: none">
   <h2>Gestaltung verwerfen?</h2>
   <p>Soll Ihre Gestaltung wirklich gelöscht werden?</p>

   <a href="#" onclick="window.location = $('#w2p_deletelink').attr('href'); return false;">Ja, löschen</a><br>
   <a href="#" onclick="$('#w2p_deletelayer_w2p').hide(); return false;">Nein, beibehalten</a>
</div>

<!-- Produkt ändern, Gestaltung geht verloren -->
<div id="w2p_changelayer_pr" style="display: none">
   <h2>Produkt wirklich ändern?</h2>
   <p>Ändern Sie das gewählte Produkt, wird Ihre bereits erstellte Gestaltung verworfen. Möchten Sie trotzdem fortfahren?</p>

   <a href="#" onclick="window.location = $('#w2p_changepr_link').attr('href'); return false;">Fortfahren</a><br>
   <a href="#" onclick="$('#w2p_changelayer_pr').hide(); return false;">Abbrechen</a>
</div>

<!-- Produkt löschen, Gestaltung geht verloren -->
<div id="w2p_deletelayer_pr" style="display: none">
   <h2>Produkt wirklich löschen?</h2>
   <p>Löschen Sie das gewählte Produkt, wird Ihre bereits erstellte Gestaltung verworfen. Möchten Sie trotzdem fortfahren?</p>

   <a href="#" onclick="window.location = $('#w2p_deletepr_link').attr('href'); return false;">Fortfahren</a><br>
   <a href="#" onclick="$('#w2p_deletelayer_pr').hide(); return false;">Abbrechen</a>
</div>
```

> [!WARNING]
>
> Die IDs `w2p_createlayer`, `w2p_deletelayer_w2p`, `w2p_changelayer_pr`, `w2p_deletelayer_pr`, `w2p_createlink`, `w2p_deletelink`, `w2p_changepr_link` und `w2p_deletepr_link` verbinden Layer, Links und Skript miteinander. Benennen Sie sie nicht um.

## Schritt 7: Ändern- und Löschen-Buttons im Warenkorb

Hat eine Position eine Gestaltung, soll der Käufer vor dem Ändern oder Löschen gewarnt werden. [`BASKET-PR-W2PUsed`](https://dokumentation.websale.de/v8s/referenz/tags/basket/web-to-print-im-warenkorb#die-einzelne-position) unterscheidet beide Fälle.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{@BASKET-PR-Data}
   ...
   {ST-BasketPage}

      {BASKET-PR-ChangeLink}
         {BASKET-PR-W2PUsed}
            <a href="~BASKET-PR-ChangeLink~" id="w2p_changepr_link"
               onclick="$('#w2p_changelayer_pr').show(); return false;">Ändern</a>
         {/BASKET-PR-W2PUsed}
         {!BASKET-PR-W2PUsed}
            <a href="~BASKET-PR-ChangeLink~">Ändern</a>
         {/!BASKET-PR-W2PUsed}
      {/BASKET-PR-ChangeLink}

      {BASKET-PR-DeleteLink}
         {BASKET-PR-W2PUsed}
            <a href="~BASKET-PR-DeleteLink~" id="w2p_deletepr_link"
               onclick="$('#w2p_deletelayer_pr').show(); return false;">Löschen</a>
         {/BASKET-PR-W2PUsed}
         {!BASKET-PR-W2PUsed}
            <a href="~BASKET-PR-DeleteLink~">Löschen</a>
         {/!BASKET-PR-W2PUsed}
      {/BASKET-PR-DeleteLink}

   {/ST-BasketPage}
   ...
{/@BASKET-PR-Data}
```

## Schritt 8: Produktinformationen im Warenkorb

Innerhalb der Positionsschleife geben Sie Kosten, Vorschaubild und die Links zur Gestaltung aus.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{@BASKET-PR-Data}
   ...
   {BASKET-PR-W2P}
      {BASKET-PR-W2PCost}Kosten für die Onlinegestaltung: ~BASKET-PR-W2PCost~<br>{/BASKET-PR-W2PCost}
      {BASKET-PR-W2PNetCost}Nettokosten: ~BASKET-PR-W2PNetCost~<br>{/BASKET-PR-W2PNetCost}
      {BASKET-PR-W2PGrossCost}Bruttokosten: ~BASKET-PR-W2PGrossCost~<br>{/BASKET-PR-W2PGrossCost}
      {BASKET-PR-W2PVAT}Mehrwertsteueranteil: ~BASKET-PR-W2PVAT~<br>{/BASKET-PR-W2PVAT}

      {ST-BasketPage}
         {BASKET-PR-W2PThumbnailURL}
            Vorschau: <img src="~BASKET-PR-W2PThumbnailURL~" alt="Vorschau Ihrer Gestaltung"><br>
         {/BASKET-PR-W2PThumbnailURL}
      {/ST-BasketPage}

      {BASKET-PR-W2PUsed}
         Sie haben für dieses Produkt eine Onlinegestaltung vorgenommen.
      {/BASKET-PR-W2PUsed}

      {ST-BasketPage}
         {BASKET-PR-W2PCreateLink}
            <a id="w2p_createlink" href="~BASKET-PR-W2PCreateLink~"
               onclick="w2pdispatch_create_w2p(); return false;">Onlinegestaltung erstellen</a><br>
         {/BASKET-PR-W2PCreateLink}
         {BASKET-PR-W2PChangeLink}
            <a href="~BASKET-PR-W2PChangeLink~">Onlinegestaltung ändern</a><br>
         {/BASKET-PR-W2PChangeLink}
         {BASKET-PR-W2PDeleteLink}
            <a id="w2p_deletelink" href="~BASKET-PR-W2PDeleteLink~"
               onclick="$('#w2p_deletelayer_w2p').show(); return false;">Onlinegestaltung löschen</a><br>
         {/BASKET-PR-W2PDeleteLink}
      {/ST-BasketPage}
   {/BASKET-PR-W2P}
   ...
{/@BASKET-PR-Data}
```

Die drei Links schließen einander aus: Der Shop bietet je Position genau den an, der im aktuellen Zustand sinnvoll ist.

## Schritt 9: Gesamtkosten im Warenkorb

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{BASKET-PR-Data}
   ...
   {BASKET-W2P}
      {BASKET-W2PTotal}
         Web-to-Print-Zusatzkosten: ~BASKET-W2PTotal~ (~BASKET-W2PTotalVAT~)
      {/BASKET-W2PTotal}
   {/BASKET-W2P}
   ...
{/BASKET-PR-Data}
```

## Schritte 10 bis 12: Den Gestaltungswunsch über die Anmeldung retten

Meldet sich der Käufer erst jetzt an oder legt er ein Konto an, führen ihn drei Seiten wieder zurück zur Gestaltung. Dafür muss die Marke `otp3=w2p-request` jeweils mitgereicht werden.

### Loginseite ws\_login.htm

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-CombinedLogin~" method="post">
   ...
   {WS-OTP3}
      <input type="hidden" name="otp3" value="w2p-request">
   {/WS-OTP3}
   ...
</form>
```

### Adresseingabeseite

Denselben Block brauchen Neukunden, die vor der Gestaltung erst ihre Adresse erfassen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Addr~" method="post">
   ...
   {WS-OTP3}
      <input type="hidden" name="otp3" value="w2p-request">
   {/WS-OTP3}
   ...
</form>
```

### Kundenkontoseite ws\_user\_account.htm

Nach erfolgreicher Anmeldung landet der Käufer im Standardablauf auf der Kundenkontoseite. Mit Gestaltungswunsch soll er stattdessen weiter zum Warenkorb und von dort zur Gestaltung. Ergänzen Sie dafür im `<head>`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-OTP3(w2p-request)}
   <meta http-equiv="refresh" content="0; url=~WS-BasketLink~&otp3=~WS-OTP3~">
{/WS-OTP3(w2p-request)}
```

## Schritt 13: Kosten in der Bestellhistorie

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{OH-S-Order}
   ...
   {OH-P-W2PCost}
      ~OH-P-W2PCost_text~: ~OH-P-W2PCost~<br>
   {/OH-P-W2PCost}

   {OH-P-W2PVAT}
      ~OH-P-W2PVAT_text~: ~OH-P-W2PVAT~<br>
   {/OH-P-W2PVAT}
   ...
{/OH-S-Order}
```

## Web-to-Print und Upload-Produkte kombinieren

Manche Käufer haben ihre Drucksache schon fertig gestaltet und wollen die Datei nur noch hochladen. Web-to-Print und das Upload-Modul schließen einander nicht aus.

Auf der Bestelleingangsbestätigung `ws_confirm.htm` und in der Bestelleingangs-E-Mail an den Shopbetreiber `mail_merchant_order.htm` blenden Sie den Upload-Link genau dann ein, wenn mindestens eine Position **ohne** Web-to-Print-Gestaltung bestellt wurde.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{BASKET-PR-Data}
   ~DC-FP1_reset~
   {@BASKET-PR-Data}
      {!BASKET-PR-W2PUsed}
         ~DC-FP1_set(UploadLink)~
      {/!BASKET-PR-W2PUsed}
   {/@BASKET-PR-Data}
{/BASKET-PR-Data}

{DC-FP1(UploadLink)}
   {WS-UploadID}
      <a href="~WS-UploadLink~">Zum Upload</a>
   {/WS-UploadID}
{/DC-FP1(UploadLink)}
```

Der freie Parameter `DC-FP1` dient hier als Merker: Die Schleife setzt ihn, sobald sie eine ungestaltete Position findet. Unterhalb der Schleife lässt sich dann einmalig entscheiden, ob der Upload-Link nötig ist. Ohne diesen Umweg stünde der Link je Position oder gar nicht.

Wegweiser: [Upload-Produkte anbieten](https://dokumentation.websale.de/v8s/produkte/upload-produkte-anbieten.md)


## Related topics

- [Web-to-Print im Warenkorb](https://dokumentation.websale.de/v8s/referenz/tags/basket/web-to-print-im-warenkorb.md)
- [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md)
- [AltCurrency- (Alternative Währung)](https://dokumentation.websale.de/v8s/referenz/tags/altcurrency.md)
- [Shopkonfiguration global.config](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-global-config.md)
- [PayPal](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/paypal.md)


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