Informationen für WebDesigner zur Implementation eines Online-Shops für das ERP System PC-Gärtner mit eigenen Templates


Allgemeines

Das ERP System "PC-Gärtner" (PCG) ist eine spezielle Warenwirtschaft und ein Verwaltungsprogramm zur Unterstützung von Lebensmittel-Erzeugern, Lieferbetrieben und Händlern. Es beinhaltet eine Vielzahl von Funktionen, u.a. 

  • zur Verwaltung von selbst erzeugten Produkten und zugekauften Waren, inkl. einer komplexen Zeitsteuerung (für Preise oder Herkunft oder auch Abverkauf)
  • für die Kundenverwaltung - dies beinhaltet auch Liefervorlieben und eine Abo-Verwaltung
  • für eine Tourenverwaltung und Planung - sofern die Lieferung der Produkte auf regelmäßigen Touren erfolgt
  • zur Abwicklung des Fullfillments von Bestellungen und Abos (Packen, Ausliefern)

Das PCG-Team

Unter diesem Namen finden sich verschiedene Unternehmen aus dem Ökosystem des PC-Gärtner. Ökobox-Online stellt für alle Systeme (die sonst lokal installiert sind) den Online-Zugang zur Verfügung.

Gern bieten wir weitergehende Beratung an.

Steuerung des Online-Shops

Alle operativen Daten des Shops (z.B. Artikel-Informationen oder auch die Hirarchie der Navigation oder Kundenprofile) werden im PCG verwaltet.

Darüberhinaus gibt es ein umfangreiches Einstellungsportal, das zur Konfiguration des Shops dient und Zugriff auf  unterstützende Systeme (wie z.B. das Mailsystems)  bietet. Dies bezeichnen wir als nicht-operative Daten. Einige Einstellungen sind auch dem WebDesigner zugänglich, z.B. ein Testbereich zum Versand von Emails aus dem System.

PCG-API

Die gesamte Funktionalität ist über eine REST/Json Schnittstelle verfügbar.

Die o.g. Konzepte bedingen viel Funktionalität im Online-Shop, die über einfache Artikel-Präsentation und Warenkorb-Funktionalität hinausgehen.

Deshalb wird die direkte Verwendung der API nur für spezielle Shop-Implementationen oder Anbindungen an Fremdsysteme empfohlen, da man sich sonst mit allen Konzepten auseinandersetzen muss. Eine Konzept-Dokumentation kann ggf. auf Nachfrage zur Verfügung gestelt werden.

Online-Shop mit Komponenten

Die typische Einbindung des Online-Shops erfolgt deshalb mit Komponenten. Damit bezeichnen wir HTML-Elemente, die mit Hilfe eines eingebundenen Scriptes die Funktionalität z.B. der Artikel-Darstellung oder des Warenkorbes übernehmen und alle Konzepte bereits implementieren.

Es gibt 9 notwendige Komponenten (z.B. Artikel-Präsentation, Navigation oder Warenkorb) und weitere ca. 10 optionale Komponenten (z.B. Newsletter, Unternavigation oder Chat).

Damit wird eine weitreichende Trennung von Design (in Verantwortung des Webdesigners) und Funktionalität (in Verantwortung des PCG-Teams) erreicht.

Beispiel:

<html>
 ....
 <head>
   <title>Warenkorb-Seite</title>
   <script src="oo.js"/></script>
   <style>
      #oo-cart .oo-cart-row {
         background-color: silver;
      }
   </style>
 <body>
   ...
   <div id="oo-cart" oo-cart-cnote="false"></div>
   ...
 </body>
</html>
   

Hier sind alle Aspekte der Einbindung zu sehen:

  • Das Beispiel zeigt die Warenkorb-Seite - eine typische Seite im Set aller Seiten, die für einen Shop notwendig sind. Es gibt einen funktionierenden Beispiel-Seitensatz, der alle Komponenten enthält und für erste eigene Versuche verwendet werden kann.
  • das DIV mit der Id oo-cart ist die Warenkorb-Komponente. Im Beispiel wird diese Komponente noch speziell konfiguriert (Die Kommentarfunktion für den Kunden wird abgeschaltet).
  • das Script im Header wird nach dem Laden der Seite ausgeführt und füllt die Komponente "mit Leben". Der Inhalt wird durch eine vorgegebene Vorlage bestimmt und ist je nach Zustand des Shops verschieden. Beim Warenkorb ist dies z.B. eine Tabelle mit den Artikelpositionen und deren Beschreibung (Name, Preis, istAboArtikel etc.) oder die Summeninformation (inkl.Mwst. oder Lieferkosten).
  • Alle CSS Referenzen im Template die mit "oo-" beginnen, sind Teil der offiziellen Schnittstelle (und werden sich nicht ändern). Dieses CSS muss im Stil des WebSites angepasst werden. Im Header ist hier ein einfaches Beispiel zu sehen.

Verschiedene Shop-Optionen

Da die Erstellung eines WebSites auch mit Komponenten recht komplex ist, gibt es vorgefertigte Templates (Siehe pcgteam.eu/shops:), welche sofort mit der PCG Warenwirtschaft funktionieren und viele Features unterstützen. Beide Templates können per CSS angepasst werden. Während das NEOS Template einen kompletten WebSite inkl. CMS umfasst, kann das Standard-Template per Javascript n vorhandene Webseiten eingepasst werden.

Aufgaben beim WebDesign

Für das gesamte Projekt einer Implementation des Online-Shops gibt es einen Projektplan-Vorschlag, der neben dem WebDesign viele weitere Arbeitsschritte enthält, die nicht beim WebDesigner liegen: u.a. die Entscheidung für eine Menüstruktur oder die Verwendung von Bildmaterial.

Beim WebDesign fallen diese Aufgaben an:

  • Bau eines Seiten-Satzes für den WebSite, der auf verschiedenen HTML Seiten alle notwendigen Komponenten für einen Shop enthält. Typischerweise sind es mindestens 5 Seiten für den Shop selber (Artikeldarstellung, Warenkorb, Profileseite, Datumsauswahl, Anmeldung). Die Seiten selber können mit einer beliebigen Programmiersprache oder CMS erstellt werden. Beispiele finden sich in der (nur mit Passwort zugänglichen) Dokumentation.
  • Anpassen der Stile der Komponenten-Inhalte per CSS. Viele Stile haben Vorgaben, die überschrieben werden können.
  • Test aller Funktionalitäten, inkl. des Verhaltens bei verschiedenen Browsern und Bildschirmgrößen. Die Komponenten bestehen i.d.R. aus einfachem, responsiven HTML.

Für die letzten zwei Punkte gibt es viele Hinweise im (nur mit Passwort zugänglichen) Designguide.

Tipps und Hinweise

  • Ein sehr gutes Verständnis von CSS(3) ist notwendig, Javascript-Kenntnisse sind hilfreich. Aus unserer Sicht muss kein eigenes Javascript verwendet werden, um einen Shop zu bauen.
  • Die Hauptarbeit liegt typischerweise im CSS-Detail-Design. Eine erste Umsetzung der Seiten (z.B. mit PHP oder einem CMS) dauert nur Tage oder Stunden, aber die Kontrolle in verschiedenen Geräten ist -je nach Designidee- zeitaufwändig.
  • Es gibt einige wenige Verbote beim WebDesign: 1: Alle Selectoren die mit "oo-" beginnen dürfen nicht in der Sichtbarkeit (display: none oder visible) verändert werden.  2. Elemente dürfen nicht (z.B. per Javascript) gelöscht werden.
  • Wir haben Umsetzungen in zwei Wochen, aber auch in 4 Monaten gesehen. Der Aufwand verteilt sich etwa so: 5% Lernzeit, 15% Bau des Seitensatzes, 80% CSS Anpassungen.
  • Die gemeinsame Diskussion und Entscheidung für eine Menüführung sollte am Anfang des Projektes stehen.
  • Gern geben wir Hilfestellung bei der Umsetzung, inkl. einem weiteren telefonischen Briefing.

Bob Schulze, Ökobox-Online, im PCG-Team.

Stand: Frühjahr 2018,2021.