NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

Tutorial f√ľr das kostenlose E-Commerce Shop System von NOF - hier in NOF 12

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.

nach oben

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik