Web-to-Print-Produkte - WEBSALE Dokumentation

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.

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.

<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

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.

<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 geben Sie an beliebiger Stelle aus, ob und zu welchem Preis das Produkt gestaltbar ist.

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

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

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

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 unterscheidet beide Fälle.

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

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

{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

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

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

{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

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

{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

​Ablauf im Shop

​Schritt 1: Produktdaten anpassen

​Schritt 2: Shopkonfiguration ergänzen

​Schritt 3: Gestaltungs-Button auf der Produktdetailansicht

​Schritt 4: Zusatzinformationen auf der Produktdetailansicht

​Schritt 5: Skript auf der Warenkorbseite

​Schritt 6: Hinweis-Layer auf der Warenkorbseite

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

​Schritt 8: Produktinformationen im Warenkorb

​Schritt 9: Gesamtkosten im Warenkorb

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

​Loginseite ws_login.htm

​Adresseingabeseite

​Kundenkontoseite ws_user_account.htm

​Schritt 13: Kosten in der Bestellhistorie

​Web-to-Print und Upload-Produkte kombinieren

Ablauf im Shop

Schritt 1: Produktdaten anpassen

Schritt 2: Shopkonfiguration ergänzen

Schritt 3: Gestaltungs-Button auf der Produktdetailansicht

Schritt 4: Zusatzinformationen auf der Produktdetailansicht

Schritt 5: Skript auf der Warenkorbseite

Schritt 6: Hinweis-Layer auf der Warenkorbseite

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

Schritt 8: Produktinformationen im Warenkorb

Schritt 9: Gesamtkosten im Warenkorb

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

Loginseite ws_login.htm

Adresseingabeseite

Kundenkontoseite ws_user_account.htm

Schritt 13: Kosten in der Bestellhistorie

Web-to-Print und Upload-Produkte kombinieren