Tutorial für das kostenlose E-Commerce Shop System von NOF - hier in NOF 2013 und HTML5

Zieht Euch die Komponente “E-Commerce”, die Ihr unter “Erweiterte Werkzeuge” von NOF findet, auf.

Tragt bei “Name” einen Katalog-Namen ein (bitte keine Umlaute, Leer- oder Sonderzeichen) und wählt bei “Shop” > “Ein Shopsystem hinzufügen”

Es öffnet sich ein Fenster “Shopsystem Anmelden”. Es werden etliche Systeme angeboten, ich habe hier bisher nur “PayPal” verwendet, das ich in diesem Tutorial auch beschreibe. Dabei ist es egal, ob Ihr PayPal.us oder PayPal.de wählt. Man kann diese Komponente auch nur als “Katalog” (ohne Shop) zur Anzeige seiner Artikel verwenden. Lest bitte auch meine zusätzlichen Bemerkungen.

Weiterhin tragt Ihr in diesem Fenster Eure bei PayPal hinterlegte e-Mail Adresse ein. Ihr müsst also bereits ein Konto bei PayPal angelegt haben.

Es öffnet sich das Eigenschaften-Fenster des Shops. Alle Einstellungen können später jederzeit geändert und ergänzt werden.

Zunächst klickt Ihr auf den Reiter “Shop”. Klickt in diesem Fenster auf den Button “URLs anpassen”. Wenn Ihr den Warenkorb bei PayPal in deutscher Sprache angezeigt bekommen wollt, müsst Ihr bei allen “Typen” die oberste Zeile ein wenig ändern. Also bei den Typen

  • Kaufen
  • Zum Warenkorb hinzufügen
  • Zur Kasse
  • Warenkorb ansehen

... ändert dort jeweils die oberste Zeile ab (fügt also /de hinzu) in:

action.value=https://www.paypal.com/de/cgi-bin/webscr

Achtung:

Wie Ihr oben im Screenshot erkennen könnt, habe ich bei dem Typ “Kaufen” die URL der 4. Zeile von oben abgeändert von:

parameter.input.hidden.cmd=_cart

in:

parameter.input.hidden.cmd=_xclick

... da sonst beim Typ “Kaufen” ebenfalls die URL vom “Warenkorb ansehen” aufgerufen wird. So wird direkt zur PayPal “Kassen-Seite” verlinkt.

Die Einstellungen im Shop sind eigentlich selbsterklärend. Ihr fangt also beim Tab “Produkte” an und fügt beliebig viel Produkte hinzu. Die Reihenfolge könnt Ihr später auch ändern.

Es gibt eine Listenseite zur Übersicht der Produkte und Detailseiten. Jedes Produkt könnt Ihr beliebig benennen, Beschreibungen hinzufügen und Detailbilder sowie Piktogramme für die Listenseite. Die Größe dieser Bilder ist beliebig einstellbar.

So wie der Shop von NOF voreingestellt ist (URLs) müssen sämtliche Felder einen Eintrag erhalten - auch wenn dieser Wert 0.00 ist. Lasst also keine Felder, die einen numerischen Wert tragen, frei - sonst wird PayPal den Shop nicht anzeigen. Bei Umsatzsteuer wird nicht der Prozentsatz, sondern der Steuerbetrag eingetragen. Sollte sich der Prozentsatz ändern, müsst Ihr an dieser Stelle die neue Umsatzsteuer eintragen.

Ihr könnt entscheiden welche Elemente angezeigt werden sollen - Elemente entfernen oder auch hinzufügen. Im rechten Fenster könnt Ihr auf den Button “Formatieren” klicken und dort das Format sowie die Beschriftung ändern. Es stehen Text-Links oder auch Buttons unter dem Tab “Kaufoptionen” zum Shop zur Verfügung.

Die Detail-Seiten werden von NOF als sogenannte “Stapelseiten” generiert, die Ihr dann unter der Seite mit dem Shop finden werdet.

Ihr könnt diese automatisch generierten Detail-Seiten auch einzeln gestalten, also jeder Seite auch noch bestimmte Bilder oder auch Texte hinzufügen (ich habe hier z.B. die Navigations-Pfeile geändert). Dazu öffnet Ihr die Stapelseite mittels Doppelklick, bearbeitet sie und klickt Euch dann mit der dafür vorgesehenen Navigation oben im Menü von einer Seite zur anderen.

Der Klick auf “Warenkorb” oder “Kaufen” verlinkt dann in einem neuen Fenster direkt zu PayPal. Dieses Fenster ist von NOF in der Datei

  • store.js (im Verzeichnis “assets”)

programmiert und war mir persönlich zu klein. Daher habe ich die Größe in dieser Datei händisch geändert.

Hierfür habe ich diese Datei mit meinem Windows-Editor geöffnet und die Größe in Zeile 76 geändert - bei mir auf: Breite=1000px und Höhe=850px

width=1000,height=850

Hier noch eine Ansicht vom PayPal Warenkorb. Nach dem Klick auf den Button “Zur Kasse” kann man die Zahlungsart wählen, wie z.B. Banküberweisung oder auch Kreditkarten oder mit Klick auf den “PayPal” Button eben mit seinem PayPal-Guthaben zahlen.

 

Bemerkungen:

  • Man kann jeweils nur 1 Bild auf der Listen- und auf der Detailseite anzeigen lassen.
     
  • Eine Suchen-Funktion existiert nicht. Man kann aber über eine Suchmaschine Artikel finden, wie diese oben auf meiner Seite eingebaut ist.
     
  • Die Anzahl der möglichen Artikel ist mir nicht bekannt, da aber für jeden Artikel eine eigene HTML-Seite von NOF generiert wird, sollte man die Seiten in Grenzen halten. Ich denke mal, dass es bei ca. 50 Seiten kritisch werden könnte - kann es aber nicht wirklich sagen. Probiert es aus.
     
  • Dieser Shop ist wohl eher als Mini-Shop zu verstehen und nicht als professionelles Shop-System für Tausende von Artikeln.

 

Diese Komponente von NOF bietet Verbindungen zu Shop-Systemen an wie:

  • BeanStream
  • FirstGate
  • Kurant
  • Mal’s-E
  • PayPal US
  • PayPal DE
  • 1&1 UK
  • 1&1 DE
  • Quick Commerce
  • Shoppro PERL
  • Shoppro PHP

Ich kann aber über die anderen Systeme nichts sagen, da ich nur “PayPal” als kostenloses Tool getestet habe. Die aufgeführten Systeme sind nicht alle kostenlos und da ich lediglich diese NOF-Komponente ausprobieren wollte und selbst keinen Shop benötige, werde ich die anderen Systeme auch nicht testen.

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik