Deutsche Übersetzung: Thomas Hoffmann

Transkript

1

2 Copyright 2006 SoftPress Systems Limited Das Exklusivrecht der Vervielfältigung und des Vertriebs der deutschen Version der Software und der Dokumentation liegt bei der Application Systems Heidelberg Software GmbH. Diese Lizenzvereinbarung wird zwischen Ihnen (dem Käufer von Freeway), SoftPress Systems Limited und der Application Systems Heidelberg Software GmbH (ASH) geschlossen. ASH ist der Exklusivdistributor von SoftPress Systems Limited für die deutsche Version von Freeway. Unter allen Umständen ist ASH berechtigt, die Rechte von SoftPress Systems Limited entweder gemeinsam mit oder unabhängig von SoftPress Systems Limited wahrzunehmen und jeden Bruch dieser Lizenzvereinbarung zu verfolgen. Alle Rechte vorbehalten. Jede auch auszugsweise Vervielfältigung der Dokumentation oder des Freeway-Softwareprogramms wird strafrechtlich verfolgt. Die Übertragung des Softwareprogramms auf Datenträger jeglicher Art zu einem anderen Zwecke als dem der Datensicherung ist nicht gestattet. Die Rechte am Softwareprogramm Freeway und an der Dokumentation liegen bei SoftPress Systems Limited. Der rechtmäßige Erwerb des Handbuchs und der Original-CD erlaubt die Nutzung des Programms analog der Benutzung eines Buchs. Entsprechend der Unmöglichkeit, dass ein Buch zugleich an verschiedenen Orten von mehreren Personen gelesen wird, darf das Softwareprogramm Freeway nicht gleichzeitig von verschiedenen Personen an verschiedenen Orten benutzt werden. Der Verleih, die Rückübersetzung oder eine sonstige Teilverwertung der Software sind ausdrücklich untersagt. Einschränkung der Gewährleistung Inhaltliche Änderungen des Handbuchs und des Softwareprogramms behalten wir uns ohne Ankündigung vor. Es wird keine Haftung für die Richtigkeit des Inhalts des Handbuchs oder Schäden, die sich aus dem Gebrauch des Softwareprogramms ergeben, übernommen. Für Hinweise auf Fehler sind wir jederzeit dankbar. Warenzeichen Innerhalb dieses Handbuchs wird auf Warenzeichen Bezug genommen, die nicht explizit als solche ausgewiesen sind. Aus dem Fehlen einer Kennzeichnung kann also nicht geschlossen werden, dass ein Name frei von den Rechten Dritter ist. Apple, Macintosh, Power Macintosh und Mac OS sind geschützte Warenzeichen von Apple. Freeway ist ein geschütztes Warenzeichen der Softpress Systems Ltd. Deutsche Übersetzung: Thomas Hoffmann Application Systems Heidelberg Software GmbH Pleikartsförsterhof 4/ Heidelberg Telefon: , Telefax: SoftPress Systems Limited First Floor 25 Hanborough House Hanborough Business Park Witney, Oxon, OX29 8LH United Kingdom Phone: , Fax: Juni Freeway Shop in a Box

3 Inhaltsverzeichnis Einführung Tutorial Einrichten eines Zugangs bei Mal s e-commerce Erstkonfiguration eines Mal s e-commerce-zugangs Internationale und Währungseinstellungen Wichtig: Link Verification Zahlungen konfigurieren Freeway mit dem Warenkorb von Mal s e-commerce verwenden Erzeugen einer Shop-Seite Versandkostenberechnung in Mal s e-commerce konfigurieren Steuerberechnung in Mal s e-commerce konfigurieren Erscheinungsbild des Warenkorbs modifizieren Bestellungen abrufen Referenz E-Shop-Einstellungen Warenkorb-Einstellungen E-buy Knopf E-buy Text E-buy Formular E-Prüfen Knopf E-Prüfen Text Inhaltsverzeichnis 3

4 Einführung Shop in a Box Eine der auffälligsten Innovationen, die uns das Internet gebracht hat, ist das Online-Shopping. Die Vorteile für den Verkäufer bestehen in geringeren Kosten für Ladenmiete und Personal, in der internationalen und Rund-um-die-Uhr Verfügbarkeit des Shops und in der Möglichkeit, mit wesentlich größeren Anbietern unter gleichen Bedingungen zu konkurrieren. Allerdings ist die Bereitstellung eines Online-Shops oft mit großen Schwierigkeiten verbunden. Es muss ein Warenkatalog präsentiert werden, aus dem der Käufer Produkte auswählen kann, die gewählten Produkte müssen in einem Warenkorb verwaltet werden und die sichere Abwicklung der Zahlung muss gewährleistet sein. Mittlerweile gibt es viele Firmen, die die Integration der genannten Dienste in eine Web-Site anbieten. PayPal, Verisign und Authorize.net bieten die sichere Abwicklung von Kreditkartenzahlungen an. Viele Anbieter von Web-Shop-Lösungen stellen Anbindungen an die genannten und andere Online-Zahlungsdienstleister bereit. Eine gute Adresse zum Realisieren eines eigenen Online-Shops ist Mal s e-commerce ( Dort gibt es zwei Pakete: Einen kostenlosen Dienst inkl. PayPal-, NoChex und Paymate-Integration und ein Premium-Angebot mit VeriSign, Authorize.Net und anderen Kreditkartendienstleistern. Mit Hilfe der Freeway-Action-Technologie haben Sie nun die Möglichkeit, den Warenkorb von Mal s E-Commerce zu verwenden und in kürzester Zeit Ihren eigenen Online-Shop zu eröffnen. Freeway enthält ein brandneues Action-Paket, das eine einfache Konfiguration und nahtlose Integration des Shops in Ihre Web-Site ermöglicht. Entwerfen Sie die Shop-Seiten in Freeway, genau wie Sie es mit den anderen Seiten Ihrer Site machen. Weisen Sie den entsprechenden Objekten die Shop-Actions zu. Legen Sie die benötigten Einstellungen fest, erzeugen Sie Ihre Site und stellen Sie sie online. Dieses Dokument soll Ihnen als Tutorial, Funktionsreferenz der Shop-Actions und Anleitung zum Einrichten eines Shops bei Mal s-e-commerce dienen. Wir wünschen Ihnen ein erfolgreiches Online-Geschäft! 4 Freeway Shop in a Box

5 Tutorial Einrichten eines Zugangs bei Mal s e-commerce Der erste Schritt beim Einrichten Ihres Web-Shops ist die Anmeldung bei Mal s e-commerce. Öffnen Sie in Ihrem Web-Browser die Seite Klicken Sie auf Join Now. Sie erhalten zusätzlich eine mit diesen Informationen an die bei der Anmeldung angegebene -Adresse. Erstkonfiguration eines Mal s e-commerce-zugangs Als nächstes müssen Sie sich mit Ihren Zugangsdaten anmelden und erste Einstellungen vornehmen. Rufen Sie dazu wieder die Homepage von Mal s auf und melden Sie sich im Login -Bereich an: Shop in a Box Es wird die Seite Create A New Account geöffnet, auf der Sie Ihren Zugang einrichten können. Tragen Sie hier Ihre persönlichen Daten ein. Stellen Sie sicher, dass Sie eine korrekte -Adresse angeben, da Sie wichtige Informationen an diese Adresse erhalten werden. Klicken Sie auf Join Now. Daraufhin wird eine Dankeschön-Seite mit einigen wichtigen Informationen angezeigt: Klicken Sie auf den Login -Knopf, um den Administrationsbereich Ihres Shop-Zugangs aufzurufen. Bevor Sie in den Administrationsbereich gelangen, werden Sie aufgefordert, ein Payments Passwort festzulegen. Sie sollten den Ihnen zugeteilten Benutzernamen (Username) und das Passwort notieren und sicher aufbewahren. Auch den Namen des Servers (Server Name), auf dem Ihr Zugang eingerichtet wurde, werden Sie später noch benötigen. Legen Sie ein Passwort fest (und notieren Sie dieses). Klicken Sie auf Submit Passwort. Es erscheint eine Bestätigung, die Sie daran erinnert, dass Sie Ihr Passwort sicher aufbewahren sollen. Im linken Teil der Seite werden einige Links aufgeführt, über die Sie verschiedene Sektionen des Administrationsbereichs aufrufen können. Rufen Sie als erstes Admin Home auf. Tutorial 5

6 Shop in a Box Damit Ihr Shop funktionieren kann, müssen Sie den Warenkorb aktivieren. Aktivieren Sie dazu unter My Admin den Schalter Show Cart. Klicken Sie hier auf Language, Country and Currency. Dadurch gelangen Sie auf eine Seite, auf der Sie internationale Einstellungen für Ihren Warenkorb vornehmen können. Wählen Sie zunächst die Sprache aus, die für den Text im Warenkorb verwendet werden soll: Klicken Sie auf Update, um die Änderungen zu sichern. Daraufhin wird eine Seite angezeigt, die Sie darüber informiert, dass kein Warenkorb vorhanden ist. Sie werden gefragt, ob Sie einen erzeugen wollen. Klicken Sie auf den Yes -Knopf, um einen Warenkorb für Ihren Zugang einzurichten. Eine Bestätigungsseite informiert Sie darüber, dass Ihre Einstellungen aktualisiert wurden. Internationale und Währungseinstellungen Als nächstes müssen Sie einige Einstellungen überprüfen und gegebenenfalls ändern, bevor Sie Ihren Shop verwenden können. Im Administrationsbereich von Mal s finden Sie jetzt einige neue Links unter der Überschrift CART LINKS. Klicken Sie hier auf Cart Setup. Damit rufen Sie eine Seite mit weiteren Links zu diversen Einstellungsseiten auf: Legen Sie dann die Währung für Ihren Warenkorb fest und passen Sie den Warenkorbtext ( Default message ) und das Währungsformat entsprechend an: Mal s erlaubt auch die Verwendung mehrerer Währungen, dies würde aber dieses Tutorial sprengen. Wichtig: Link Verification Unter CART SETUP (links unterhalb von CART LINKS ) sollten Sie die Link Verification aktivieren. Damit sorgen Sie dafür, dass Ihr Warenkorb nur mit Seiten zusammenarbeitet, die Sie selbst erzeugt haben, und nicht manipuliert werden kann. Sie werden diese Einstellungsseite später noch einmal besuchen müssen, wenn Sie an Ihren Freeway-Seiten arbeiten, jetzt können Sie aber mit dem nächsten Schritt fortfahren. Zahlungen konfigurieren Sie haben verschiedene Dienstleister zum Abwickeln von Zahlungen zur Auswahl, die meisten stehen aller- 6 Freeway Shop in a Box

7 dings nur bei Verwendung des kostenpflichtigen Mal s-zugangs zur Verfügung. In unserem Tutorial werden wir uns deshalb auf PayPal konzentrieren. Wenn Sie mit anderen Dienstleistern zusammen arbeiten wollen, finden Sie die notwendigen Informationen dazu in der Dokumentation von Mal s e-commerce. Die Integration von PayPal ist gut überschaubar. Öffnen Sie zunächst wieder die Cart Set-up -Seite und klicken Sie hier unter Payments auf PayPal. Tragen Sie Ihre -Adresse in das Feld PAYPAL ACCOUNT ID ein und sorgen Sie dafür, dass der Schalter Website Payments Standard ausgewählt ist. Damit die Shop-Actions funktionieren können, müssen Sie als erstes die Web-Adresse Ihres Shops eingeben. Rufen Sie dazu den Menüpunkt Ablage/Dokumenteinstellungen auf und wechseln Sie auf die Karteikarte Upload. Geben Sie unter Web-Adresse die URL Ihres Shops ein. Shop in a Box Sie müssen dazu noch nicht einmal über ein PayPal-Konto verfügen: Sobald die erste Zahlung aus Ihrem Shop bei PayPal eingeht, wird Sie PayPal über die unter PAYPAL ACCOUNT ID angegebene -Adresse automatisch kontaktieren. Klicken Sie auf den Update -Kopf am unteren Seitenrand, um die vorgenommenen Änderungen zu übernehmen. Damit haben Sie die grundsätzliche Konfiguration von Mal s e-commerce zur Verwendung mit Freeway abgeschlossen. Einige der unzähligen weiteren Einstellungsmöglichkeiten werden im Referenzteil dieses Dokuments ausführlicher beschrieben, für alle anderen müssen wir auf die Dokumentation von Mal s e-commerce verweisen. Freeway mit dem Warenkorb von Mal s e-commerce verwenden Obwohl es fertige Vorlagen für den Freeway E-Shop gibt, werden wir in diesem Tutorial mit einem leeren Freeway-Dokument beginnen und alle Actions manuell zuweisen, um Ihnen das notwendige Hintergrundwissen zu vermitteln. Starten Sie Freeway und erzeugen Sie ein neues Dokument aus der Vorlage Leer. Um dieses Tutorial möglichst einfach zu halten, sollte es sich dabei um die Root-Adresse Ihrer Website handeln. Diese sollte mit beginnen (z.b. Es ist auch möglich, den Shop in einem Unterordner der Website abzulegen. Wie das geht, wird im Referenzteil dieser Anleitung beschrieben. Jetzt ist es an der Zeit, die Actions zur Integration Ihres Web-Shops zuzuweisen. Von besonderer Bedeutung ist dabei die Action E-Shop Einstellungen, in die Sie Informationen zu Ihrem Mal s e-commerce-zugang eingeben müssen. Bei dieser Action handelt es sich um eine Ordner-Action. Wählen Sie also im Site-Panel den Site Folder aus. Öffnen Sie falls nicht bereits geschehen die Actions-Palette und klicken Sie auf das + an deren unteren rechten Rand. Es erscheint ein Dialog mit einer Liste aller vorhandenen Ordner-Actions. Wählen Sie E-Shop Ein- Tutorial 7

8 Shop in a Box stellungen und klicken Sie auf OK. Die Actions-Palette zeigt nun die E-Shop Einstellungen. Geben Sie Ihre MAL s-benutzer-id in das entsprechende Feld ein und wählen Sie den MAL-Server aus, der Ihnen bei der Konfiguration Ihres Zugangs mitgeteilt wurde. Falls Sie die Adresse der Servers verlegt oder vergessen haben, können Sie sich unter einloggen und die Adresse nachschalgen. Als nächstes müssen Sie den Link Verification key code in das Feld Tastencode bzw. Keycode eingeben. Um diesen Code zu erhalten, müssen Sie sich unter mit Ihren Zugangsdaten anmelden und Cart set-up aufrufen. Klicken Sie dann auf den Link Link Verification. Es erscheint die Seite Link Verification, die Sie anfangs schon einmal besucht hatten. Unten auf dieser Seite gibt es den Abschnitt JavaScript Button Creator : Kopieren Sie den Hash Secret Key (also die Zeichenkette aus Buchstaben und Ziffern nach dem Doppelpunkt), wechseln Sie zurück nach Freeway und fügen Sie den Code in das Feld Tastencode bzw. Keycode der E-Shop Einstellungen-Action ein. Im Warenkorb -Bereich der Action können weitere Einstellungen vorgenommen werden. Indem Sie im Warenkorb -Popup eine Auswahl treffen, werden verschiedene Parameter zur Modifikation angeboten. Diese Parameter haben hauptsächlich mit dem Erscheinungsbild des Warenkorbs zu tun und werden im Referenzteil dieses Handbuchs genauer erläutert. Für dieses Tutorial können Sie die meisten Parameter so belassen, wie sie sind. Lediglich unter Sprache und Währung sollten Sie Deutsch als Warenkorbsprache festlegen. Erzeugen einer Shop-Seite Um die Integration von Freeway mit dem Warenkorbsystem von Mal s e-commerce zu demonstrieren, werden wir einen Demo-Shop aufbauen, in dem Farben und Malerzubehör angeboten werden. Erzeugen Sie als erstes eine einfache Grafik, die als Seitenüberschrift dienen soll. Zeichnen Sie dazu ein Grafikobjekt und weisen Sie ihm in der Inspektor-Palette folgende Abmessungen zu: Links 75px, Breite 400px, Höhe 70px. Klicken Sie in das Grafikobjekt und geben Sie den Text Farbladen ein. Wählen Sie den Text aus und verwenden Sie die Inspektor-Palette, um dem Text die Schriftart Sand und die Schriftgröße auf 60px zuzuweisen. Selektieren Sie den Schalter Hash secret on it s own, geben Sie Ihr Payments -Passwort (nicht Ihr Zugangspasswort) in das Payments password -Feld ein und klicken Sie auf den Get Validator -Knopf. Dadurch gelangen Sie auf eine Seite mit einem Text in der Form Hash Secret key for [Your User ID] : [Your Hash Secret key]. Es stehen mehrere Actions zur Verfügung, mit deren Hilfe Produktlinks zum Warenkorb des Shopsystems erzeugt werden können. In diesem Tutorial werden wir die Actions E-Kaufen Button und E-Kaufen 8 Freeway Shop in a Box

9 Text verwenden, mit denen Kunden ein Produkt in den Warenkorb legen können. Die Action E-Prüfen Button wiederum erlaubt die Anzeige des Warenkorbs. Zunächst verwenden wir E-Kaufen Button, um es den Kunden zu ermöglichen, einen Pinsel zu kaufen. Die Action E-Kaufen Button kann einem Grafikobjekt oder einem HTML-Formularknopf zugewiesen werden. Klickt der Kunde auf den Knopf, wird das Produkt in der vorgegebenen Anzahl in den Warenkorb übernommen. Zeichnen Sie unterhalb der Überschrift ein Grafikobjekt auf die Seite und importieren Sie das Bild eines Pinsels. Zeichnen Sie rechts neben dieses Bild ein kleineres Grafikobjekt in geben Sie in dieses den Text Einen Pinsel kaufen ein. Selektieren Sie das Grafikobjekt und rufen Sie den Menüpunkt Objekt/Actions/E-buy Knopf auf. Öffnen Sie, falls nicht bereits geschehen, die Actions-Palette ( Fenster/Actions ) und wählen Sie das Objekt aus, dem Sie gerade die Action zugewiesen haben. In der Actions-Palette werden die Parameter der Action angezeigt. (Zur Erinnerung: Die Site muss auf die Adresse geladen werden, die Sie im Upload -Dialog unter Web-Adresse festgelegt haben. Öffnen Sie Ihre Website in Ihrem Browser. Es erscheint die von Ihnen erzeugte Seite mit der Farbladen -Überschrift, der Pinsel-Abbildung und dem Grafiktext Einen Pinsel kaufen. Klicken Sie auf den Text Einen Pinsel kaufen. Normalerweise würde an dieser Stelle eine Weiterleitung zum Warenkorb Ihres Shops erfolgen. Da Sie die Site gerade zum ersten Mal hochgeladen haben, erscheint folgende Mitteilung: Die Einstellungen, die Sie in der E-Shop Einstellungen -Action vorgenommen haben, werden mit Hilfe einer automatisch generierten Konfigurationsdatei an Mal s e-commerce übertragen. Dies erfolgt nach jeder Änderung der E-Shop-Einstellungen beim ersten Zugriff auf den Warenkorb. Die oben gezeigte Mitteilung informiert Sie darüber, dass die Konfigurationsdatei korrekt übermittelt wurde. Falls Mal s die Konfigurationsdatei nicht finden kann, erhalten Sie folgende Nachricht: Shop in a Box Hier müssen die Parameter festgelegt werden, die an den Warenkorb übergeben werden sollen. Geben Sie untere Produkt: den Text Pinsel und unter Preis: den Wert 5 ein. Die Anzahl können Sie bei 1 belassen. Wenn der Kunde später auf den Knopf klickt, wird ein Pinsel, der 5 Währungseinheiten kostet, in den Warenkorb übernommen. Damit haben Sie ausreichend Informationen festgelegt, um Ihren Shop zu testen. Rufen Sie den Menüpunkt Ablage/Upload auf und geben Sie die FTP-Zugangsdaten Ihrer Website ein. Falls diese Nachricht bei Ihnen nicht erscheint, können Sie den folgenden Abschnitt überspringen. Falls diese Nachricht bei Ihnen erscheint, ist der wahrscheinlichste Grund dafür, dass Sie die URL Ihres Shops während der Mal s e-commerce-konfiguration falsch angegeben haben. Melden Sie sich deshalb bei Mal s e-commerce an und rufen Sie die Account Details -Seite auf (den entsprechenden Link finden Tutorial 9

10 Shop in a Box Sie unter links unter Management auf der Administrationsseite). Überprüfen Sie, ob im Feld Website URL die korrekte Adresse Ihres Shops angegeben ist. Falls nicht, geben Sie die richtige Adresse ein und klicken Sie auf Update Record. Rufen Sie nun erneut Ihren Online-Shop auf und klicken Sie nochmals auf Einen Pinsel kaufen. Jetzt sollten auch Sie die Mitteilung sehen, dass die Konfigurationsdatei korrekt übertragen wurde. Rufen Sie in Ihrem Browser die Funktion Seite neu laden auf, um zum Warenkorb zu gelangen. Hier werden Sie feststellen, dass tatsächlich ein Pinsel zum Preis von 5 Währungseinheiten im Warenkorb ist. HTML-Rahmen ein, indem Sie den Menüpunkt Einfügen/Grafikobjekt aufrufen. Selektieren Sie das Grafikobjekt und ändern Sie seine Größe auf 30 x 30 Pixel und seine Ausrichtung auf Mitte. Verwenden Sie dann die Stile und Farben -Palette, um dem Grafikobjekt eine orange Hintergrundfarbe zuzuweisen. Im unteren Bereich des Warenkorbs befinden sich drei Knöpfe: NEU BERECHNEN berechnet den Gesamtpreis neu, nachdem ein Kunde die Stückzahl geändert hat. BESTELLUNG AUSFÜHREN leitet den Kunden auf die Bezahlen -Seite weiter, die davon abhängig ist, welche Zahlungsmethoden Sie für Ihren Mal s-zugang aktiviert haben. Der dritte Knopf ist WEITER EINKAUFEN. Damit gelangt der Kunde auf die Seite Ihres Shops zurück, von der er den Warenkorb aufgerufen hat. Als nächstes werden wir die E-Buy Text -Aktion verwenden, um HTML-Text-Links zu erzeugen, mit denen der Kunde Farben in seinen Warenkorb legen kann. Wechseln Sie wieder zurück nach Freeway und zeichnen Sie ein 300 Pixel breites und 200 Pixel hohes HTML-Objekt unter die Grafikobjekte, die Sie vorhin erzeugt hatten. Verwenden Sie die Inspektorpalette, um das HTML-Objekt mit einem 1 Pixel breiten schwarzen Rand und einem Versatz von 5 Pixeln zu versehen. Klicken Sie in das HTML-Objekt. Es erscheint der Textcursor. Tippen Sie den Text Farbe kaufen. Drücken Sie die Return-Taste, um einen Zeilenvorschub zu erzeugen. Fügen Sie ein Grafikobjekt in den Klicken Sie rechts neben das orange Grafikobjekt in Ihren Textrahmen, um wieder einen Textcursor zu erhalten. Betätigen Sie die Leertaste, um ein Leerzeichen einzugeben. Rufen Sie den Menüpunkt Einfügen/Action-Objekt/E-Buy Text auf. Damit wird die E-Buy Text -Action in den Textfluss eingefügt. Selektieren Sie die Action, damit ihre Parameter in der Actions-Palette angezeigt werden. Die Parameter dieser Action unterscheiden sich kaum von denen der bereits benutzten E-Buy Knopf -Action. Dies ist nicht weiter verwunderlich, schließlich erfüllen beide Actions exakt denselben Zweck. Lediglich das Feld Text im Link ist dazugekommen. Hier geben Sie den Text an, auf den der Kunde klicken 10 Freeway Shop in a Box

11 soll, um das Produkt in den Warenkorb zu übernehmen. Geben Sie Einen Eimer orange Farbe kaufen in dieses Feld und Eimer orange Farbe in das Produkt -Feld ein. Ändern Sie den Preis auf und belassen Sie die Anzahl bei 1. Jetzt können Sie die Site erneut hochladen und überprüfen, ob das Hinzufügen der Farbe zum Warenkorb funktioniert. Anzahl: 5 (der Preis von ist pro Stück, so dass 5 Eimer kosten werden) Shop in a Box Sie werden feststellen, dass die E-Buy Text -Action unter Verwendung des Textes, den Sie unter Text im Link eingegeben hatten, einen Link erzeugt hat, der einen Eimer Farbe in den Warenkorb legt. Mit den Actions E-Buy Knopf und E-Buy Text kann auch eine andere Produktanzahl als 1 in den Warenkorb übernommen werden. Um dies zu demonstrieren, werden wir eine weitere E-Buy Text -Action verwenden, mit der 5 Eimer Farbe in den Warenkorb gelegt werden können. Wechseln Sie dazu wieder auf Ihr Freeway-Dokument uns setzen Sie den Textcursor in das HTML-Textobjekt direkt hinter die vorhin erzeugte E-Buy Text -Action. Drücken Sie die Return-Taste, um den Cursor in die nächste Zeile zu setzen. Fügen Sie mit Einfügen/Grafikobjekt ein Grafikobjekt ein, ändern Sie seine Größe im Inspektor auf 30 x 30 Pixel und seine Ausrichtung auf Mitte. Weisen Sie dem Objekt einen violetten Farbton zu. Setzen Sie den Eingabecursor rechts neben das Objekt, geben Sie ein Leerzeichen ein und rufen Sie dann Einfügen/Action-Objekt/E-Buy Text auf. Selektieren Sie das Action-Objekt und nehmen Sie in der Actions-Palette folgende Eintragungen vor: Text im Link: Fünf Eimer violette Farbe kaufen Produkt: Eimer violette Farbe Preis: (violett ist teurer als orange!) Laden Sie den Shop wieder hoch und testen Sie, ob auch das Hinzufügen von 5 Farbeimern funktioniert. Als letztes soll die Seite mit einem Knopf versehen werden, mit dem der Kunde den Warenkorb aufrufen kann, ohne einen Artikel hinzuzufügen. Dies kann mit der E-Prüfen Knopf -Action realisiert werden. Zeichnen Sie ein Grafikobjekt mit einer Breite von 120 Pixeln und einer Höhe von 20 Pixeln unter das Textobjekt mit den Farbeimern. Klicken Sie in das Grafikobjekt und geben Sie den Text Zum Warenkorb ein. Verwenden Sie die Inspektorpalette, um den Font auf Verdana und die Schriftgröße auf 16px zu ändern. Wählen Sie das Grafikobjekt aus und rufen Sie Objekt/Actions/E-Prüfen Knopf auf. Das war schon alles! Die Action verfügt zwar über weitere Parameter, diese werden hier aber nicht benötigt. Wenn Sie Ihre Shop-Site erneut hochladen, können Sie mit dem gerade erzeugten Knopf direkt Ihren Warenkorb aufrufen. Versandkostenberechnung in Mal s e-commerce konfigurieren Als nächstes stehen einige Einstellungen auf der Website von Mal s e-commerce auf dem Programm. Unterbrechen Sie also die Arbeit in Freeway und melden Sie sich bei Mal s an. Navigieren Sie auf die Cart set-up -Seite und klicken Sie auf den Shipping -Link. Hier können Sie festlegen, wie die Versandkosten für Einkäufe in Ihren Shop berechnet werden sollen. Es gibt acht Optionen zur Portoberechnung. Wir werden uns in diesem Tutorial mit den drei ersten beschäftigen, die am einfachsten zu handhaben sind. Tutorial 11

12 Shop in a Box Am Anfang der Shipping Calculations -Seite finden Sie zwei Eingabefelder. Im ersten können Sie festlegen, ab welcher Einkaufssumme die Lieferung portofrei erfolgen soll. Das zweite erlaubt es Ihnen, unabhängig von der gewählten Versandart, zusätzlich einen festen Betrag zu berechnen. Standardmäßig sind beide Eingabefelder mit 0.00 vorbelegt, das bedeutet, dass diese Optionen ausgeschaltet sind. Um eine der Optionen zu verwenden, müssen Sie nur den gewünschten Betrag in das betreffende Feld eingeben. Unterhalb dieser Felder finden Sie eine Reihe von Optionen, mit denen Sie die Methode zur Portoberechnung festlegen können. Voreingestellt ist No Shipping, was bedeutet, dass keine Versandkosten berechnet werden. Wenn Sie Option 1: Fixed Value aktivieren, wird zu jeder Bestellung ein fester Portobetrag addiert, egal wie viele Produkte bestellt wurden. Geben Sie in das Textfeld Shipping cost per order die Versandkosten ein, die jeder Bestellung hinzugefügt werden sollen. Die zweite Option Calculated from quantity berechnet die Versandkosten stückzahlabhängig. Wenn Sie beispielsweise 1,00 EUR Versandkosten pro Artikel berechnen, muss der Kunde beim Kauf von 5 Artikeln 5 EUR für den Versand bezahlen. Geben Sie in das Feld Shipping cost per item die Versandkosten pro verkauftem Artikel ein. Die dritte Option Calculated from weight or other value ermöglicht die Berechnung von Versandkosten auf Basis eines Wertes, den Sie später in Freeway festlegen können. Wenn Sie diese Option verwenden, werden die Versandkosten ähnlich wie bei Option 2 artikelabhängig berechnet. Allerdings können Sie hier für jeden Artikel einen Wert vorgeben, der mit dem Inhalt des Feldes Shipping cost per unit multipliziert wird. Indem Sie den Schalter Automatically set units to equal the price (shipping by value) aktivieren, legen Sie fest, dass die Versandkosten abhängig vom Artikelpreis berechnet werden. Indem Sie 0.10 in das Textfeld eingeben und den Schalter aktivieren erreichen Sie, dass die Versandkosten 10% des Preises betragen. Aktivieren Sie also den Radioknopf vor der Option, die Sie zum Berechnen der Versandkosten verwenden wollen und geben Sie die erforderlichen Informationen ein. Die Einstellungen werden mit Klick auf Update Shipping am Seitenende übernommen. Steuerberechnung in Mal s e-commerce konfigurieren Kehren Sie zur Cart set-up -Seite zurück und klicken Sie auf den Link Sales Tax. Daraufhin öffnet sich die Seite Tax Calculations. In dem Eingabefeld unter Tax Basis & Rate können Sie einen Steuersatz vorgeben. Diesen müssen Sie als Dezimalfaktor angeben. Für 16% MwSt. lautet dieser Faktor 0.16, für 19% entsprechend Aktivieren Sie den Schalter Tax will be calculated for all products at the rate above., wenn alle Produkte diesen Steuersatz verwenden sollen. Aktivieren Sie jedoch den Schalter Tax will be calculated using a rate set in your Buy Now links..., wenn Sie unterschiedliche Steuersätze berücksichtigen müssen. Dann wird der für das jeweilige Produkt in Freeeway angegebene Steuersatz verwendet. Nur die Versandkosten werden dann mit dem oben angegebenen Steuersatz besteuert. Schließlich legen Sie mit Shipping is taxable fest, ob auf die Versandkosten überhaupt Steuern berechnet werden sollen. Im Bereich Which orders are taxed? haben Sie weiter gehende Einstellungsmöglichkeiten. Hier sollen nur die ersten drei beschrieben werden: None: Es werden keine Steuern hinzuaddiert und im Warenkorb angezeigt. 12 Freeway Shop in a Box

13 All Orders: Es werden für alle Käufe Steuern berechnet (und im Warenkorb angezeigt). Check box: Der Käufer kann mit einer Checkbox festlegen, ob Steuern berechnet werden sollen. Die Checkbox wird mit dem Text beschriftet, den Sie unter Message eingeben können. Erscheinungsbild des Warenkorbs modifizieren Damit der von Mal s e-commerce bereitgestellte Warenkorb besser zu Ihrer Web-Site passt, können Sie sein Erscheinungsbild verändern. Wechseln Sie dazu zunächst wieder nach Freeway. Wählen Sie im Site-Panel das Wurzelverzeichnis Ihres Web-Shops aus. Öffnen Sie die Actions-Palette. Diese zeigt die E-Shop-Einstellungen an. Mit Hilfe des Popup-Menüs Warenkorb haben Sie Zugriff auf verschiedene Einstellungsgruppen. Als erstes wollen wir dafür sorgen, dass der Warenkorb im Browser-Fenster zentriert angezeigt wird. Wechsel Sie dazu unter Warenkorb auf Allgemein und wählen Sie im Popup-Menü Warenkorbausrichtung den Menüpunkt Zentrieren. Wechseln Sie nun im Warenkorb-Popup auf Hintergrund. Wählen Sie unter Farbe den Eintrag Andere und dann in der Farbauswahl ein helles Gelb. Damit setzen Sie die Hintergrundfarbe des Warenkorbs auf dieses Gelb. Verwenden Sie die Upload-Funktion, um Ihren Shop neu hochzuladen und öffnen Sie ihn im Browser. Beim Aufruf des Warenkorbs werden Sie darauf hingewiesen, dass die neue Konfiguration geladen wurde. Laden Sie die Seite neu, um sich den Warenkorb anzeigen zu lassen. Der Warenkorb erscheint mit der neuen Hintergrundfarbe und horizontal zentriert im Fenster. Ändern Sie nun als Vorbereitung für den letzten Schritt in diesem Tutorial alle Mengenangaben im Warenkorb auf 0 (Null) und klicken Sie auf NEU BERECHNEN. Damit wird der Warenkorb geleert. Bestellungen abrufen Als letztes werden wir uns damit beschäftigen, wie die von Ihren Kunden getätigten Bestellungen abgerufen werden können. Dazu werden Sie jetzt einen Eimer orange Farbe bestellen. Öffnen Sie wieder Ihre Shop-Seite und klicken Sie auf Einen Eimer orange Farbe kaufen. Daraufhin wird der Warenkorb angezeigt, der genau diesen einen Artikel enthalten sollte. Klicken Sie hier auf BESTELLUNG AUSFÜHREN. Es wird eine Seite angezeigt, auf der die Adressdaten einzugeben sind. Füllen Sie die Felder aus und klicken Sie auf WEITER. Es erscheint die Zusammenfassung Ihrer Bestellung, gefolgt von den Zahlungsoptionen. Da wir beim Einrichten des Shops nur PayPal als Zahlungsoption aktiviert hatten, wird auch nur PayPal angeboten. Klicken Sie auf WEITER. Sie werden nun auf die Bezahlungsseite von PayPal weitergeleitet. Hier müssen Sie nicht weiter machen, da das Weiterleiten auf die PayPal-Seite der letzte Schritt war, der von Mal s e-commerce übernommen wird. Mal s verfügt also jetzt über einen Datensatz der Bestellung. Loggen Sie sich wieder bei Mal s ein und klicken Sie unter Cart Links auf den Link List orders. Es wird eine Liste mit allen Bestellungen angezeigt, die Ihr Warenkorb verarbeitet hat, in diesem Fall also genau die Bestellung, die Sie gerade ausgeführt hatten. Mit Klick auf den Link DETAILS rechts neben Ihrer Bestellung wird die Bestellung inkl. bestellte Artikel, Rechnungs- und Lieferadresse angezeigt. Shop in a Box Tutorial 13

14 Shop in a Box Achtung: Das Vorliegen einer Bestellung bedeutet nicht, dass sie auch bezahlt wurde. Sie sollten also Ihre Waren erst verschicken, wenn Sie eine Zahlungsbestätigung erhalten haben. 14 Freeway Shop in a Box

15 Referenz E-Shop-Einstellungen Die Action E-Shop-Einstellungen wird dem Wurzelverzeichnis ( Root ) Ihres Freeway-Dokuments zugewiesen. Wählen Sie dazu im Site-Panel das Wurzelverzeichnis aus, öffnen Sie die Actions-Palette und klicken Sie auf das + -Symbol links unten. Wählen Sie aus der Liste, die dann erscheint, die Action E-Shop-Einstellungen aus. Diese Action verfügt über zahlreiche Parameter, unter anderem zur Identifikation bei Mal s e-commerce und zur Konfiguration des Warenkorbs. Verbindungseinstellungen Warenkorb Allgemein Warenkorbbreite: Legen Sie hier fest, in welcher Breite der Warenkorb im Browser dargestellt werden soll. Warenkorbausrichtung: Bestimmt die horizontale Ausrichtung des Warenkorbs im Browserfenster. Mögliche Werte sind Links, Zentriert und Rechts. Warenkorb Text Shop in a Box Diese Parameter spezifizieren die Verbindung zu Mal s e-commerce. Benutzer ID: Die Benutzer-ID ( User ID ), mit der Sie sich auf der Web-Site von Mal s e-commerce anmelden. MAL Server: Der Name des Mal s e-commerce-servers, der Ihnen bei der Anmeldung mitgeteilt wurde. Link-Überprüfung: Aktivieren Sie diese Checkbox, falls Sie für Ihr Mal s e-commerce-konto die Link verification aktiviert haben. Keycode: Falls die Link-Überprüfung aktiv ist, müssen Sie hier den hash secret -Keycode eintragen, den Sie im Administrations-Bereich von Mal s e-commerce generieren können. Warenkorb-Einstellungen Indem Sie im Warenkorb-Popup der E-Shop-Einstellungen-Action verschiedene Menüeinträge auswählen, werden weitere Einstellungen zur Funktionsweise Ihres Mal s e-commerce Warenkorbs sichtbar. Schrift: Legen Sie hier die Schriftart fest, in der Texte des Warenkorbes angezeigt werden sollen. Größe: Die Schriftgröße, die für Texte des Warenkorbs verwendet wird. Farbe: Die Schriftfarbe der Textausgaben des Warenkorbs. Warenkorb Hintergrund Farbe: Hintergrundfarbe der Warenkorbseiten. Bild: Hier können Sie ein Hintergrundbild für die Warenkorbseiten festlegen. Position: Falls Sie ein Hintergrundbild festgelegt haben, können Sie hier vorgeben, wie sich das Hintergrundbild verhalten soll, wenn der Anwender im Browserfenster blättert. Rollen sorgt dafür, dass sich das Hintergrundbild beim Blättern mit dem Seiteninhalt verschiebt. Fest hingegen bedeutet, dass das Hintergrundbild fixiert bleibt. Referenz 15

16 Shop in a Box Warenkorb Titelgrafik Bild: Legen Sie hier eine Grafik fest, die am oberen Rand aller Warenkorbseiten angezeigt werden soll. Alt. Text: Dieser Text wird anstelle der Titelgrafik angezeigt, falls der Browser die Titelgrafik nicht darstellen kann, z.b. weil der Anwender das Anzeigen von Bildern deaktiviert hat. Bildausrichtung: Legen Sie hier die horizontale Ausrichtung der Titelgrafik fest. Warenkorb Anzeigetitel Diese Einstellungen betreffen die Darstellung von Titelzeilen im Warenkorb, die über Informationen eingeblendet werden, die vom Kunden nicht modifiziert werden können. Hintergrund: Hintergrundfarbe der Anzeigezeile. Text: Textfarbe der Anzeigezeile. Warenkorb Eingabetitelzeile Diese Einstellungen betreffen die Darstellung von Titelzeilen im Warenkorb, die über Informationen eingeblendet werden, die vom Kunden modifiziert werden können (z.b. Stückzahl). Hintergrund: Hintergrundfarbe der Anzeigezeile. Text: Textfarbe der Anzeigezeile. Aktiv: Farbe von Warenkorb-Links, während diese angeklickt werden. Besucht: Farbe von Warenkorb-Links, die bereits besucht wurden. Warenkorb Sprache und Währung Sprache: Wählen Sie in dem Popup die Sprache aus, die Mal s e-commerce für den Warenkorb verwenden soll. Währung: Falls Sie im Admin-Bereich von Mal s e-commerce Multiple Currencies aktiviert haben, können Sie hier die zu verwendende Währung festlegen. Geben Sie dazu einen Wert von 1 bis 5 ein, entsprechend der Währungsnummer, die Sie im Admin-Bereich festgelegt haben. Falls Sie nicht mit mehreren Währungen arbeiten, müssen Sie diesen Wert aucn nicht verändern. E-buy Knopf Diese Action erzeugt einen HTML- oder Grafikknopf, der wenn er angeklickt wird ein bestimmtes Produkt in einer vorgegebenen Anzahl in den Warenkorb legt. Die Action kann Grafikobjekten und HTML-Formularknöpfen zugewiesen werden. Wählen Sie dazu das entsprechende Objekt aus und rufen Sie dann den Menüpunkt Objekt/Actions/E-buy Knopf auf. In der Actions-Palette können Sie folgende Einstellungen vornehmen: Warenkorb Link-Farben Normal: Farbe von Warenkorb-Links, die noch nicht besucht wurden. Produkt: Der Name des Produktes, wie er im Warenkorb und später auf der Bestellung erscheint. 16 Freeway Shop in a Box

17 Preis: Hier wird der Einzelpreis des Produkts angegeben. Die Preisangabe erfolgt ohne Währungseinheit, da diese in den Warenkorb-Einstellungen separat festgelegt wird. Steuer (%): Legen Sie hier den (Mehrwert-) Steuersatz für das Produkt fest. Diese Angabe wird nur dann verwendet, wenn Sie auf der Sales Tax -Seite der Mal s-administration festgelegt haben, dass die Steuerberechnung auf Basis von Buy Now -Links erfolgen soll. Anzahl: Produktanzahl, die mit Klick auf den Knopf in den Warenkorb übernommen wird. Versandeinheiten: Falls Sie Ihren Warenkorb im Administrationsbereich von Mal s e-commerce so konfiguriert haben, dass die Versandkosten abhängig vom Gewicht oder einem anderen Wert berechnet werden (Optionen 3, 5, 7 und 8 der Shipping -Seite), können Sie hier den entsprechenden Wert angeben. Falls Sie keine der genannten Versandoptionen verwenden, Tool-Tipp: Geben Sie hier einen Hilfetext ein, der erscheinen soll, wenn der Anwender die Maus über dem Knopf positioniert hat. Soll hier der Inhalt des Produktfeldes eingeblendet werden, geben Sie die Zeichenfolge ^0 (Null) ein. Ziel: Legt fest, in welchem Frame/Fenster sich der Warenkorb öffnen soll. E-buy Text Die Action kann direkt auf die Seite oder in ein anderes HTML-Objekt gelegt werden. Rufen Sie dazu den Menüpunkt Einfügen/Action-Objekt/E-buy Text auf. Die Einstellungen der E-buy Text Action sind identisch mit denen der E-buy Knopf-Action, es gibt lediglich einen zusätzlichen Parameter. Text im Link: Der hier angegebene Text erscheint als Link auf der Seite. Sie können dazu auch den Inhalt des Produktfeldes verwenden: Tragen Sie dazu ^0 (Null) in das Text im Link -Feld ein. ^0 wird dann durch den Inhalt des Produktfeldes ersetzt. E-buy Formular Auch diese Action erlaubt es Ihren Kunden, Produkte in den Warenkorb zu legen. Sie bietet allerdings im Vergleich zu E-buy Knopf und E-buy Text weitergehende Möglichkeiten. Die Action erzeugt auf Ihrer Shop-Seite ein Formular mit einem Jetzt kaufen -Knopf, den der Kunde anklicken kann, um seine Auswahl in den Warenkorb zu übernehmen. Sie können HTML-Formularobjekte als Kindobjekte des E-buy-Formulars erzeugen, mit deren Hilfe der Kunde die Anzahl und Varianten (z.b. Farbe oder Größe bei Kleidungsstücken) des Artikels auswählen kann. Diese Funktionen werden in Zusammenarbeit mit den Actions E-Anzahl und E-Produktvariante bereitgestellt. Die E-buy Formular-Action kann HTML-Objekten und HTML-Tabellen zugewiesen werden. Wählen Sie dazu das entsprechende Objekt aus und rufen Sie den Menüpunkt Objekt/Actions/E-buy Formular auf. Shop in a Box Die E-buy Text-Action erzeugt einen HTML-Textlink. Klickt der Kunde auf diesen Link, wird das in der Action angegebene Produkt in den Warenkorb gelegt. Die E-buy Formular-Action verfügt über dieselben Parameter wie die E-buy Knopf-Action. Allerdings gibt Referenz 17

18 Shop in a Box es kein Tool-Tipp-Feld und das Anzahl -Feld wird anders gehandhabt. Anzahl: Legen Sie hier die Produktanzahl fest, die dem Warenkorb hinzugefügt werden soll, falls keine E-Anzahl-Action als Kindobjekt dieser E-buy Formular-Action existiert oder die E-Anzahl-Action keinen gültigen Wert liefert. E-buy Formular: Produktanzahl und Variationen Verwenden Sie die E-Anzahl- und E-Produktvariante-Actions, um dem Kunden entsprechende Eingabemöglichkeiten anzubieten. Die Actions können HTML-Formularobjekten zugewiesen werden, die Kindobjekte des Objektes sind, dem die E-buy-Formular-Action zugewiesen wurde. Dabei kann es sich um Checkboxen, Radioknöpfe, Textfelder oder Menü/Listen-Objekte handeln. Diese Objekte werden als Kindobjekte erzeugt, indem man entweder doppelt in das E-buy-Formular-Action-Objekt klickt und dann das Formularobjekt über den Menüpunkt Einfügen/... einsetzt oder das Formularobjekt innerhalb der Grenzen des Elternobjekts zeichnet. Verwenden Sie dann die Objekt-Ausgabeeinstellungen der Inspektorpalette, um die Anzahl/Variante festzulegen, die der Kunde mit dem entsprechenden Formularobjekt auswählen kann. Bitte beachten Sie dazu folgende Aufstellung: Formularobjekte mit E-Anzahl-Action Checkbox: Geben Sie ins Feld Wert der Objekt-Ausgabeeinstellungen der Inspektorpalette die Produktanzahl ein, die hinzugefügt werden soll, wenn der Kunde die Checkbox aktiviert. Radioknopf: Erzeugen Sie eine Gruppe von Radioknöpfen und weisen Sie jedem die E-Anzahl-Action zu. Tragen Sie in in das Wert -Feld des jeweiligen Knopfes die Produktanzahl ein, die in den Warenkorb gelegt werden soll, wenn dieser Knopf aktiviert ist. Menü/Liste: Erlauben Sie dem Kunden, die gewünschte Anzahl aus einer Liste auszuwählen. Erzeugen Sie in der Inspektorpalette Auswahl/Wert-Paare für jede Produktanzahl, die Sie anbieten möchten. Tragen Sie dabei jeweils in das Wert-Feld die Produktanzahl ein, die bei Auswahl des entsprechenden Listeneintrags in den Warenkorb übernommen werden soll. Textfeld: Der Kunde kann die Produktanzahl frei eingeben. Formularobjekte mit E-Produktvariante-Action Checkbox: Geben Sie ins Wert-Feld der Objekt-Ausgabeeinstellungen der Inspektorpalette die gewünschte Produktvariante ein. Radioknopf: Erzeugen Sie eine Gruppe von Radioknöpfen und weisen Sie jedem die E-Produktvariante-Action zu, damit der Kunde aus einer vorgegebenen Anzahl von Varianten auswählen kann. Tragen Sie ins Wert-Feld der einzelnen Knöpfe die Produktvariante ein, die an den Warenkorb übergeben werden soll, falls dieser Knopf ausgewählt wurde. Menü/Liste: Hier kann der Kunde die gewünschte Variante aus einer Liste auswählen. Erzeugen Sie dazu in den Objekt-Ausgabeeinstellungen der Inspektorpalette Auswahl/Wert-Paare. Der Wert des ausgewählten Listeneintrags wird dann an den Warenkorb übergeben. Textfeld: Erlauben Sie dem Kunden, die gewünschte Produktvariante selbst einzutippen. Verwenden eines eigenen Jetzt kaufen -Knopfes Wenn Sie nicht den automatisch erzeugten Jetzt kaufen -Knopf verwenden wollen, müssen Sie folgendermaßen vorgehen: Erzeugen Sie ein Kind-Grafikobjekt oder einen HTML-Knopf innerhalb des E-buy-Formularobjekts und weisen Sie ihm die E-buy Kopf -Action zu. Wenn Freeway einen solchen Knopf innerhalb des E-buy-Formularobjekts findet, wird dieser als Submit-Knopf verwendet und der Standardknopf nicht ausgegeben. E-Prüfen Knopf Die E-prüfen Knopf -Action erzeugt einen HTMLoder Grafikknopf, der den Kunden auf die Warenkorbseite weiterleitet. Die Action kann HTML-Formularknöpfen und Grafikobjekten zugewiesen werden. Wählen Sie dazu das Element aus, dem Sie die Action 18 Freeway Shop in a Box

19 zuweisen möchten und rufen Sie dann Objekt/Actions/E-prüfen Knopf auf. Text im Link: Der hier angegebene Text erscheint als anklickbarer Link auf der Seite. Shop in a Box In der Actions-Palette gibt es folgende Einstellungsmöglichkeiten: Tool-Tipp: Geben Sie hier einen Hilfetext ein, der erscheinen soll, wenn der Anwender die Maus über dem Knopf positioniert hat. Ziel: Legt fest, in welchem Frame/Fenster sich der Warenkorb öffnen soll. E-Prüfen Text Diese Action erzeugt einen HTML-Textlink. Mit Klick auf diesen Link öffnet sich der Warenkorb. Der Link kann direkt auf der Seite oder in einem anderen HTML-Objekt erzeugt werden. Rufen Sie dazu den Menüpunkt Einfügen/Action-Objekt/E-prüfen Text auf. Da die Funktionsweise der E-prüfen Text -Action mit der Funktionsweise der E-prüfen Knopf -Action vergleichbar ist, stehen dieselben Parameter zur Verfügung. Lediglich Text im Link ist dazugekommen. Referenz 19