Frontend Erstellung

Jeder Online-Shop bestehen mindestens aus einzelnen Seiten für

Produktdetails
Stellen einzelne Produkte mit allen Details dar. Üblicherweise werden alle Seiten für Produkte mit einem einzigen Template erstellt. Für jedes Produkt in der Datenbank generiert der Shop bei Abruf eine HTML Seite.

Um diese Seiten zu ändern können Produktdaten geändert werden. Außerdem können über Parameter einzelne Teile ein- und ausgeblendet werden.

Kategorien
Stellt eine Auflistung einer Gruppe von Produkten dar - üblicherweise als Liste oder als Gallerie von Thumbnails. Üblicherweise werden alle Kategorien mit einem Template generiert.

Kategorien enthalten primär eine Bezeichnung und eine Auflistung von Artikeln. Außerdem sind die Kategorien hierarchisch miteinander verbunden. Aus diesen Verknüpfungen kann der Shop Breadcrumbs und Menüs erstellen.

Um diese Seiten zu ändern können die Daten der Kategorien geändert werden. Außerdem können über Parameter einzelne Teile ein- und ausgeblendet werden.

Shop-Prozesse

Der Shop beeinhaltet einzelne Seiten, die typische Vorgänge wie Registrierung eines neuen Kunden, Anmeldung eines bestehenden Kunden, Zahlungsprozess, etc. implementieren. Diese Seiten entstehen durch die enthaltenen Funktionsmodule. Über Parameter können einzelne Teile ein- und ausgeblendet werden.

Landingpages

Diese Seiten werden komplett mit dem im Shop enthaltenen Content Management System und beginnen als leere Container, die eine beliebige Anzahl an Bausteinen beinhalten können. Sie können beliebig zusammengestellt und geändert werden und können Produkte und Kategorien enthalten - können aber auch komplett aus Text und Bildern zusammengesetzt werden.

Beispiele für solche Seiten sind die Startseite, Informationsbereiche für AGB, etc. oder für Marketingaktionen.

Technisch muss jede Seite aus validem HTML Code bestehen, die über einen Url abgerufen wird.

Da viele Seiten ein identisches Aussehen haben, sind Kopf und Fußbereiche üblicherweise getrennt gespeichert und werden gemeinsam genutzt - unabhängig von Produkttemplates, Seiten für Shop-Prozessen oder für Landingpages.

Deshalb ist das Layout einer “leeren” Seite in einem Shared Layout gespeichert. In der Regel hat ein Shop ein Shared Layout, kann aber z.B. für den Zahlungsprozess auch ein eigenes Shared Layout haben.

In dieser Datei sind nicht nur die Kopf- und Fußzeilen enthalten, sondern auch Stylesheets (.css Dateien) eingebunden und Javascript Bibliotheken (.js Dateien) geladen.

Im Shared Layout werden Parameter abgefragt, damit einzelne Teile ein- und ausgeblendet werden können.

An einer Stelle des Shared Layouts sorgt die Textzeile @RenderBody dafür, dass alle späteren Seiten an dieser Stelle in den HTML Code integriert werden, um in Summe eine komplette HTML Struktur zu erstellen.

Anpassen der Shop Seiten

Der BaseShop liefert als Referenzimplementierung Webseiten für alle Funktionen des Online-Shops, die jedoch projektspezifisch angepasst werden können, ohne dass dadurch die Funktion des Shops verloren geht.

Die Seiten der Referenzimplementierung bieten eine Reihe an Parametern an, über die Texte geändert, Teile ein- und ausgeblendet oder eine von mehreren möglichen Anzeigeformen gewählt werden kann. Beispielsweise wird beim Einrichten einer neuen Instanz normalerweise nur diese Konfigurationsparameter, das Logo und das Farbschema der Kundenwebseite durch Anpassen der .css Dateien angepasst.

Am anderen Ende der Änderungsmöglichkeiten können kann natürlich auch das gesamte HTML Gerüst des Shops angepasst werden, das in Form von HTML Vorlagen und .css Dateien getrennt von den Programmdateien im Shop Verzeichnis liegt.

Sinnvoll werden aber nur die Seiten geändert, die für das jeweilige Projekt neu konzipiert werden und für den Rest auf die Referenzimplementierung zurückgegriffen. Auf diese Weise werden die nicht geänderten Dateien im Zuge der Weiterentwicklung ständig um neue Funktionen erweitert. Bei den angepassten Seiten müssen neue Funktionen aber im Rahmen des Kundenprojekts nachgetragen werden.