Shop Frontend Anpassungen

Dieser Artikel beschreibt die verschiedenen Möglichkeiten wie das Shop Frontend nach Ihren Wünschen gestaltet und angepasst werden kann.

eCMS - das Herz eines Shop Frontends

Das Content Management System (eCMS) bildet die Grundlage für jedes Shop Frontend. Über das eCMS können unter anderem Seiten erzeugt, Inhalte gepflegt oder Daten bereitgestellt werden. 

Arbeitsweise des eCMS

Eine jede Seite die über das eCMS verwaltet wird, ist in viele Bereiche (Platzhalter) unterteilt. Diese Platzhalter können mit HTML Markup in Form von Layouten, dynamischen Daten aus dem Redaktionssystem mit Hilfe von Formaten und mit statischen Texten befüllt werden.

Grundsätzlich arbeitet das eCMS dabei Blockweise. Das heißt, dass beim Aufruf einer Seite im Browser folgende Schritte ausgeführt werden:

  • über Datenfunktionen z.B. dynamische Daten abgeholt werden (z.B. gespeicherte Produktdaten)
  • diese Daten an Formate weitergereicht werden
  • die Formate dabei HTML erzeugen
  • das HTML anschließend auf der Seite an der gewünschten Position platziert wird (in Platzhaltern)
  • die fertige Seite anschließend dargestellt wird
  • der Browser stellt die Seite so dar, wie sie über das definierte und eingebundene Stylesheet (CSS) designed wurde
Weiterführende Informationen zum eCMS sind im Handbuch unter eCMS aufgeführt.

Grundlegende Komponenten

Im eCMS können grundsätzlich verschiedene Komponenten unterschieden werden, die dabei über das eCMS angelegt, erstellt, verändert oder verwaltet werden können.

Diese Komponenten sind:

  • Seiten
  • Layoute / Makro-Layoute
  • Formate / Macroformate
  • Datenfunktionen
  • Menüs
  • Platzhalterkonfigurationen

Seiten

Eine Seite im eCMS repräsentiert zu meist eine echt über den Browser aufrufbare Website. Der Aufbau einer Seite im eCMS erfolgt grundsätzlich über verschiedene Komponenten, die mit Hilfe von Platzhalterkonfigurationen eingebunden sind.

Grundsätzlich kann eine Seite unterschieden werden in:

  • statisch
  • dynamisch ( als Template )

Bei einer statischen Seite ist der dargestellte Inhalt entweder direkt eingegebener Text oder über fest eingestellte Zugriffe ermittelte Daten. Die Startseite eines Shop Frontends ist in der Regel eine solche statische Seite, da auf dieser gezielte Inhalte angezeigt werden sollen.

Bei einer dynamischen Seite / Template-Seite werden bestimmte Platzhalterkonfigurationen wie gewünscht angeordnet. Die auf der Seite dargestellten Inhalte werden dabei dynamisch ermittelt und in der eingestellten Anordnung ausgegeben. Klassische Template-Seiten sind unter anderem die Produktdetail-Seite oder eine Kategorieseite. Die Optik ist hierbei durch die Anordnung der Platzhalterkonfigurationen vorgegeben, die Inhalte werden aber dynamisch aus den jeweilig zu verwendenden Datensatz ermittelt (meist über URL-Parameter). So gibt es im eCMS faktisch nur eine Seite für die Produktdetail-Darstellung, aber n-Seiten mit Produktdetails, die über den Browser aufgerufen werden können.

Der Vorteil einer dynamischen Seite: Eine Änderung beispielsweise der Produktdetail-Seite im eCMS bewirkt die Änderung auf allen über diese Seite angezeigten Produktdetails beim Aufruf im Browser.

Mehr Information zu Seiten im eCMS erfahren Sie unter: Seiten - die Grundlagen.

Layoute / Makro-Layoute

Layoute sind Komponenten die in der Regel aus HTML bestehen und über Platzhalterkonfigurationen auf einer Seite integriert werden können. Dabei kann ein Layout auch wiederum einen freien Platzhalter erzeugen, in welchem wiederum Platzhalterkonfigurationen eingebunden werden können. Im Normalfall werden Layoute erstellt, wenn man bestimmte HTML Ausgaben öfter verwenden will. Typischen Anwendungsfälle von Layouten sind:

  • das Container-Layout welches das Grundgerüst einer Seite vorgibt (html, head, body - Elemente)
  • Boxen und Container, die um Listen oder andere Inhalte gelegt werden, damit diese in einem gewissen Stile erscheinen (in den meisten Fällen im direkten Zusammenspiel mit CSS Angaben im Stylesheet)

Makro-Layoute sind wiederverwendbare, vorkonfigurierte Sammlungen von Platzhalterkonfigurationen, die auf zuvor definierten Layouten basieren. Ausgehend von einem Masterlayout (welches ein oder mehrere freie Platzhalter enthält) können Makro-Layoute in diese freien Platzhalter des Masterlayoutes wiederum Layoute, aber auch Formate, Macroformate oder weitere Makro-Layoute integrieren. Solch ein erstelltes Makro-Layout kann dann an freie Platzhalter oder als Masterlayout in eine oder mehrere eCMS Seite(n) eingefügt werden. Dadurch können gleiche Inhalte auf mehreren Seiten wiederholt dargestellt werden, ohne auf jeder Seite alle Platzhalterkonfigurationen neu zu definieren.

Ändern Sie die Platzhalterkonfigurationen eines Makro-Layoutes, so wird diese Änderung an allen Einsatzorten des Makro-Layoutes übernommen. Sie brauchen somit nur zentral an einer Stelle eine Änderung vornehmen und erhalten das Ergebnis auf allen Seiten, die das Makro-Layout verwenden.

Mehr Information zu Layouten und Makro-Layouten im eCMS erfahren Sie unter: Layoute - die Grundlagen sowie Makro-Layoute - die Grundlagen.

Formate / Macroformate

Formate sind dynamische Ausgaben, die in der Programmiersprache PHP erstellt werden und auf einer aufgerufenen Website letztendlich HTML erzeugen. Mit Hilfe von Formaten können Datenabfragen in unterschiedlichster Form ausgegeben und verarbeitet werden. Formate können URL-Parameter nutzen. Formate können selbst weitere Formate aufrufen. Meistens werden Formate mit der Kombination einer Datenabfrage als Platzhalterkonfiguration in einer Seite eingebunden. Formate werden physisch auf der Festplatte als Dateien gespeichert und onDemand eingebunden.
 
Anwendungsfälle von Formaten in einem Shop-Frontend sind beispielsweise:
  • Produktlisten
  • In-den-Warenkorb-Button
  • Ausgabe von Produktdetails
  • Ausgabe von Kategoriedetails
  • Slider
  • etc.
Macroformate sind hierarchische, verschachtelte Ketten von Formaten, die im Backend des eCMS konfiguriert werden können. Die Ergebnisse jedes Formates werden dabei ein Ebene höher weitergereicht und können z.B. als Liste in einer Website integriert werden. Ein Anwendungsfall ist beispielsweise die Listenartige Ausgabe von Aktionen (Empfehlen, Vergleichen, Merken, etc.) auf einer Produktdetail-Seite. Dabei liefern verschiedene Plugin spezielle Formate, die in einem Macroformat organisiert werden. Bei der Ausgabe des Macroformates kann nun das Ergebnis jedes Einzelformates in einem HTML-Listenelement eingebunden werden, wodurch wiederum Vorteile beim Design der Seite (im CSS Stylesheet) entstehen.
 
Detaillierte Informationen zu Formaten und Macroformaten finden Sie unter: Formate - die Grundlagen und Macroformate.

Datenfunktionen

Datenfunktionen sind in PHP programmierte Klassen, die Daten aus Datenbanken "ziehen", aufbereiten und in verschiedene Rückgabestrukturen (z.B. Listen, Einzeldatensatz) zur Verfügung stellen. Die Datenfunktionen können beispielsweise in Platzhalterkonfigurationen eingestellt werden. Die erhaltenen Daten werden dann an das hinterlegte Format weitergereicht und von diesem in passendes HTML umgewandelt.

Weitergehende Informationen zu Datenfunktionen finden Sie unter: Methoden und Funktionen - die Grundlagen.

Menüs

Mit Menüs im eCMS können Listen angelegt werden, die beispielsweise für unterschiedliche Navigationen verwendet werden können. Menüs bestehen aus einem Menübaum, der verschiedene Menüknoten beinhalten kann. Diese Menüknoten können einzelne Links auf Seiten des eCMS oder statischer Text, aber auch aus Datenabfragen erzeugt werden. Menüknoten können geschachtelt werden und werden durch spezielle Formate im Shop Frontend dargestellt. Das prominenteste Beispiel für ein Menü Shop Frontend ist die Hauptnavigation.
 
Mehr Informationen zu Menüs im eCMS erhalten Sie unter: Menü - die Grundlagen.

Platzhalterkonfigurationen

Platzhalterkonfigurationen (PHCs) sind alle Inhalte die auf einer Seite im eCMS an freie Platzhalter eingebunden werden. Diese können Layoute, Makrolayoute, Formate oder statischer Text sein. Mit Hilfe des WYSIWYG Live Editors oder der speziellen PHC Baumansicht im eCMS Backend können Platzhalterkonfigurationen eingefügt, verschoben, kopiert, geändert oder entfernt werden.
 
Bildlich ausgedrückt sind Platzhalterkonfigurationen nichts anderes als Komponenten eines Raumes, wobei eine Seite im eCMS einem Raum eines Hauses entspricht. Layoute bilden die Außenmauern. Andere Platzhalter definieren die Möbel, die im Raum aufgestellt werden. Alle Möbel können verschoben oder verrückt werden oder werden einfach in einen anderen Raum getragen und somit aus dem Raum entfernt.
 
Platzhalterkonfigurationen ermöglichen somit jede Seite individuell einzurichten und entsprechend zu gestalten. Mit dem passenden CSS Stylesheet werden die erzeugten Objekte dann beim Aufruf im Browser entsprechend des Designs ausgegeben.
 
Weitergehende Informationen zu Platzhalterkonfigurationen finden Sie unter: Platzhalterkonfiguration - die Grundlagen.

Shop Frontend Templates

Ein Shop Frontend im eCMS basiert im Normalfall (bei einer Standardinstallation) auf einem sogenannten Shop-Template. In diesem Shop-Template sind bereits die wichtigsten Seiten, Layoute, Formate integriert, die für die Darstellung von Produkten und den Kaufprozess notwendig sind. Einem solchen Template liegt auch bereits ein Standard Stylesheet zu Grunde, welches ein Design der einzelnen Seiten vorgibt. 

Ein Shop-Template kann angepasst, erweitert oder grundsätzlich komplett neu designed werden.

Typische Seiten eines Shop-Templates

Ein Standard Shop-Template wird normalerweise mit folgenden Seiten ausgeliefert:

  • Startseite
  • Kategorieseite
    zur Darstellung von Produktkategorien und zugeordneten Produkten
  • Produktdetail-Seite
    zur Darstellung der wichtigsten Informationen eines Produktes. In der Regel auch mit Preisauszeichnung und "In-den-Warenkorb"-Button
  • Warenkorb
  • Checkout-Seiten
    Seiten zum Kaufprozess von Produkten, die in den Warenkorb gelegt wurde
  • Suchergebnis
    Gefundene Produkte einer Suche
  • Statische Seiten
    Wichtige statische Seiten wie AGB, Impressum, etc.

Die genaue Aufteilung von Seiten in einem Template können abweichen, wenn im Vorfeld bereits Anpassungen vorgenommen wurden oder andere Plugins/Module installiert werden, die eigene Seiten enthalten und bei Installation in das eCMS einfügen.

Typische Datenfunktionen in einem Shop Frontend

Die eCommerce Suite beinhaltet verschiedene Datenfunktionen über die auf Platzhalterkonfigurationen im eCMS zurückgegriffen werden. Typische Datenfunktionen sind unter anderem:

  • eCS Produkt-Liste - Manuelle Auswahl (plugin_ecs__ecs_product_dsf__product_getlistmanually)
    manuelle Auswahl der darzustellenden Produkte.
  • eCS Produkt-Liste - Top-Seller Shopweit (plugin_ecs__ecs_product_dsf__product_topseller)
    Liste der shopweiten Top-Seller Produkte.
  • eCS Produkt-Liste - Zugehörige Produkte für ein Produkt (plugin_ecs__ecs_product_dsf__product_relatedByProduct)
    Liste der Zubehörprodukte, die einem Produkt zugeordnet wurden.
  • eCS Produkt (plugin_ecs__ecs_product_dsf__product_get)
    Datensatz eines Produktes. Das Produkt kann direkt ausgewählt oder dynamisch übergeben werden. Häufigster Einsatz ist z.B. auf der Produktdetail-Seite.
  • eCS Produkt-Kategorie (plugin_ecs__ecs_product_dsf__productgroup_get)
    Datensatz einer Produktkategorie. Die Produktkategorie kann direkt ausgewählt oder dynamisch übergeben werden. Häufigster Einsatz ist z.B. auf der Kategorie-Seite.
  • eCS Produkt-Kategorie-Liste - Manuelle Auswahl (plugin_ecs__ecs_product_dsf__productgroup_getlistmanually)
    manuelle Auswahl der darzustellenden Produktkategorien.
  • eCS Produkt-Liste - Produkt-Kategorie (plugin_ecs__ecs_product_dsf__productgroup_getproductlist)
    Liste von Produkten die einer Produktkategorie zugeordnet wurden. Die Produktkategorie kann direkt ausgewählt oder dynamisch übergeben werden. Häufigster Einsatz ist z.B. auf der Kategorie-Seite.
  • eCMS Inhalt (ecms_cdb_dsf__record_get)
    Ausgabe eines Redaktionssystem-Artikels, z.B. die dort angelegten AGBs.

Weitere Funktionen können einfach über die Vorschlagssuche im Daten-Reiter einer Platzhalterkonfiguration gefunden und ausgewählt werden.

Trennung von Inhalt und Design

Grundsätzlich sollte beachtet werden, dass das eCMS im Zusammenspiel mit der eCommerce Suite und dem Shop-Template in den meisten Fällen nach der Maxime Trennung von Inhalt (Content) und Design arbeitet und betrachtet werden sollte.

So ist es unter anderem zwar möglich beispielsweise Textfarben und Größen auch mit Hilfe der Text-Editoren bei einer Produktbeschreibung zu hinterlegen. Allerdings werden dabei die Vorteile eines CSS Stylesheets untergraben, mit denen das Design des Shop Frontends im Browser maßgeblich definiert wird. Zwei kurze Beispiele zur Verdeutlichung:

Beispiel 1:
Wenn das responsive Design zum Tragen kommt (also auf kleineren Endgeräten wie Tablets oder Smartphones) soll eine andere Schriftgröße für die Produktbeschreibung verwendet werden. Wurde die Schriftgröße in den Text-Editoren der Produkteingabe manuell verändert, so kann das allgemein gültige Design der Schriftgrößen aus dem CSS Stylesheet auf diese nicht (oder nur mit Umwegen) reagieren. Die manuelle Eingabe gewinnt in den meisten Fällen und kann zum "Designbruch" auf Tablets oder Smartphones führen.

Beispiel 2:
In jeder Produktbeschreibung wurde über die Text-Editoren ein grüner Hinweistext eingefügt. Nach einiger Zeit wird festgestellt, dass dieser Text besser rot sein sollte. Nun müsste jedes Produkt manuell geändert und die Schriftfarbe entsprechend korrigiert werden. Mit dem entsprechend - im Vorfeld eine Projektes - definierten Screen-Designs hätte auf diese Textstelle eingegangen werden können. Über das CSS Stylesheet wäre dann eine Designvorgabe in Form der Schriftfarbe definiert worden, die dann bei Bedarf zentral, an einer Stelle hätte geändert werden können.

Tipps zur optimalen Vorgehensweise

  • Dateneingaben wie Produktdaten als reine Datenerfassung begreifen
  • möglichst keine Style und Design verändernden Angaben in solche Daten einfließen lassen.
  • gute Planung des Shop-Frontend Designs und Ihrer darzustellenden Daten im Vorfeld (am Besten projektbegleitend)

Inhalte (Content) anpassen

Was sind "Inhalte"?

Inhalte in einem Shop-Template sind alle Ausgaben auf Ihrer Website die Texte oder Daten, wie beispielsweise Produkt- oder Produktkategoriedaten, darstellen. Welche Inhalte, an welcher Stelle ausgegeben werden, wird über Platzhalterkonfigurationen auf einer eCMS Seite oder in einem Makro-Layout definiert.

Inhalte platzieren - WYSIWYG oder Baumansicht

Zum Platzieren der Inhalte gibt es zwei Herangehensweisen. Zum Einen der WYSIWYG Live Editor, zum Anderen eine spezielle Baumansicht im eCMS Backend. Beide Möglichkeiten haben Ihre Vorteile, aber auch Einschränkungen. Für Einsteiger empfiehlt es sich den WYSIWYG Live Editor zu verwenden, um ein direktes Ergebnis der Veränderungen feststellen zu können.

WYSIWYG Live Editor - What You See Is What You Get

Der WYSIWYG Live Editor ermöglicht das direkte Bearbeiten von Platzhalterkonfigurationen beim "surfen" durch das Shop Frontend in einem Browser.  Der WYSIWYG Live Editor kann direkt aus dem eCommerce Suite Backend über die Hauptnavigation eCMS > Shop Frontend WYSIWYG gestartet werden.


Aufruf des WYSIWYG Live Editors im Hauptmenü der eCommerce Suite

Eine im WYSIWYG Live Editor geöffnete Seite stellt die entsprechende Shop Frontend Seite dar, wie Sie im Browser auch ohne WYSIWYG sichtbar ist. Durch den WYSIWYG Modus werden aber zusätzliche Linien und Symbole eingeblendet, die anzeigen wo sich Platzhalter und Platzhalterkonfigurationen befinden.


Beispielansicht des WYSIWYG Live Editors in einem Shop Frontend


Beispielansicht einer Produktkategorieseite in einem Shop Frontend

Innerhalb des WYSIWYG Live Editors sind alle Shop Frontend Seiten ganz normal verlinkt und werden beim Öffnen ebenfalls im WYSIWYG Modus dargestellt. Dadurch können alle Platzhalterkonfigurationen erreicht und bearbeiten oder entfernt werden. Außerdem ist möglich in Platzhalter weitere Platzhalterkonfigurationen einzubinden. Alle Änderungen werden dann direkt in die Website übernommen und sind sofort sichtbar. Mit einem Rechtsklick auf die verschiedenen Symbole stehen verschiedene Einstellungsoptionen zur Verfügung.


Rechtsklick auf Symbol öffnet Einstellungsoptionen zu einem Platzhalter
 

Seiten-Inhalte - eine Baumansicht

Mit der Baumansicht im eCMS Backend steht eine weitere Möglichkeit zur Verfügung die Platzhalterkonfigurationen zu bearbeiten. Die Ansicht auf der Seite "Seite-Inhalte" ist im eCMS Backend zu finden, die für eine jede eCMS Seite aufgerufen werden kann. Erreichen kann man diese Baumansicht-Seite über die Liste alle Seiten (Hauptmenü: Site > Seiten > Seiten Liste). In dieser Liste kann über das Symbol  (blaues Dreieck) die Seite "Seiten-Inhalte" aufgerufen werden.


Beispiel einer "Seiten-Inhalte" Baumansicht

Jede Farbe steht dabei für eine Art von Platzhalterkonfiguration:

  • hellblau - Layoute (   ) und Makro-Layoute (   )
  • grün - Formate (mit möglicherweise) Datenfunktion (   )
  • pink - direkter Content / HTML (   )

Über die rechts im jeden Bereich angeordneten Icons kann eine Platzhalterkonfiguration bearbeitet, kopiert, ausgeschnitten oder entfernt werden. 

Die dünneren grauen Bereiche zeigen den Anfang eines Platzhalters. Über das Symbol   (blaues Dreick mit einem Plus-Zeichen) können neue Platzhalterkonfiguration in diesen Platzhalter eingefügt werden. Wurde bei einer Platzhalterkonfiguration die Option Kopieren oder Ausschneiden gewählt, so erscheint innerhalb der grauen Bereiche ein Einfügen Symbol (   ), über dieses die kopierte oder ausgeschnittene Platzhalterkonfiguration in einen neuen Platzhalter eingefügt werden kann. Eine kopierte oder ausgeschnittene Platzhalterkonfiguration wird in einer Zwischenablage gespeichert und kann auch auf andere Seiten des Shop Frontends über die Baumansicht eingefügt werden. So ist es beispielsweise möglich einen bestimmten Text oder ein Format von einer Seite auf eine andere zu "verschieben" ohne, die Konfiguration selbst neu eingeben zu müssen.

Beachten Sie in diesem Zusammenhang, dass immer nur eine Platzhalterkonfiguration in der Zwischenablage gespeichert wird. Wenn eine Platzhalterkonfiguration ausgeschnitten und nachfolgend eine weitere kopiert wird, so ist die ausgeschnittene Platzhalterkonfiguration unwiderruflich verloren.

Innerhalb eines Platzhalters können vorhandene Platzhalterkonfigurationen mit den blauen Pfeilen in Ihrer Position verschoben werden.

Platzhalterkonfiguration - die Einstellungsoptionen

Egal welche Option zur Bearbeitung von Platzhalterkonfigurationen gewählt wurde, die nachfolgenden Dialoge unterscheiden sich hierbei nicht.

Platzhalterkonfiguration anlegen

Wenn eine neue Platzhalterkonfiguration angelegt werden soll und die entsprechende Option ausgewählt wurde, erscheint eine Auswahl dessen, was angelegt werden kann. Dabei kann zwischen Formaten, Layouten (Makro-Layouten) und HTML direct gewählt werden.


Beispielansicht einer Auswahl von Formaten beim Anlegen einer Platzhalterkonfiguration.

Wurde die gewünschte Art gewählt, so folgt ein Dialog mit weiteren Einstellungsmöglichkeiten, die als Tab-Reiter ausgegeben werden. Je nachdem ob sich für Formate, Layout oder HTML direct entschieden wurde, können sich die Dialoge von einander unterscheiden. Diese Dialoge sind mit denen beim Bearbeiten einer Platzhalterkonfiguration identisch.

Platzhalterkonfiguration bearbeiten

Beim Bearbeiten einer Platzhalterkonfiguration werden je nach Art verschiedene Tab-Reiter dargestellt. Nachfolgende Screenshots stellen beispielhaft eine Einbindung eines Formates mit Datenfunktion dar. 

Manche Formate können spezielle Parameter oder Einstellungen verarbeiten. Zu diesem Zweck stellen einige Formate "ConfigDialogs" bereit, um die zur Verfügung stehenden Optionen leicht und einfach einstellbar zu machen. Diese ConfigDialogs werden im Reiter "Format" nach einer Formatauswahl angezeigt.


Reiter "Format" - Beispiel einer Formatdefinition mit ConfigDialog

Über den Reiter "Daten" können Datenfunktionen ausgewählt werden. Diese können über den Komponenten Finder gesucht und eingebunden werden. Den Komponenten Finder können Sie über das Symbol neben der Datenfunktionseingabe (   ) öffnen. Im Feld der Datenfunktionseingabe ist zusätzlich eine Vorschlagssuche integriert, mit welcher eine Datenfunktion auch ohne den Komponenten Finder ausgewählt werden kann.


Reiter "Daten" - Beispiel einer Funktionsauswahl über den Komponenten Finder


Reiter "Daten" - Beispiel einer Funktionsauswahl über die Vorschlagssuche

Wie bei den Formaten können auch Datenfunktionen eigene ConfigDialogs bereitstellen, über die weitere Einstellungsoptionen an die Datenfunktion übergeben werden können. Beispielsweise die Produktcodes bei einer manuellen Produktliste.


Reiter "Daten" - Beispiel einer Produktcode-Eingabe bei der Datenfunktion einer manuellen Produktliste

Design Anpassung (HTML, CSS)

Zum besseren Verständnis des nachfolgenden Artikels werden Grundkenntnisse in HTML und CSS empfohlen.

Online Shops sind Webseiten. Aus diesem Grund hängt das Design eines Shop-Templates oder Shop Frontends zwangsläufig mit der HTML Struktur und dem CSS Stylesheet zusammen aus denen Webseiten erstellt sind. Im eCMS kann dabei die HTML Struktur innerhalb des Backend angepasst werden. Jede eCMS Seite die für die Darstellung im Frontend betrieben wird, besteht aus Layouten, die die grundsätzliche Struktur definieren. Dabei ist es nicht nötig eine komplette, im Browser sichtbare, Website von oben nach unten in HTML zu programmieren. Durch die Möglichkeit der Einbindung von Platzhaltern und Platzhalterkonfigurationen kann auf alle strukturellen Besonderheiten gezielt eingegangen werden . Die u.a. für die Farbgebung verantwortlichen CSS Stylesheets werden direkt im HTML angegeben.

Responsive Design und Bootstrap

Wenn ein Shop Frontend responsive reagieren soll - also wenn es auf kleineren Endgeräten (wie Tablets oder Smartphones) angezeigt wird - so hat dies in erster Linie mit der strukturellen Ausrichtung im HTML und den verwendeten CSS Angaben im Stylesheet zu tun, die im HTML eingebunden sind.

Um sich einige Funktionalitäten (wie z.B. die Fragen: Wann bricht welcher Container, welches Bild wie um? Oder: Bei welcher Browserfenstergröße muss die Schriftgröße der Überschriften kleiner werden? Oder: Wann blende ich Off-Canvas Navigationsbereiche ein? u.v.a.m.) und CSS Einstellungen zu vereinfachen, kann auf externe Frameworks zurückgegriffen werden, die sich dem Thema "Responsive" bereits ausgiebig gewidmet haben.

Das Standard Shop-Template der eCommerce Suite greift deshalb auf das Framework Bootstrap zurück, welches bereits im Shop-Template integriert ist. Das bedeutet, dass einige Layoute (und auch einige HTML ausgebende Formate bereits Bootstrap ready sind und bestimmte, für Bootstrap nötige, CSS Klassenangaben verwenden.

Mehr zum Thema Bootstrap erfahren Sie hier: http://getbootstrap.com/ (öffnet neues Fenster)

Seiten-Struktur mit Layouten und Makro-Layouten

Layoute

Die grundlegende Struktur einer Seite für das Shop Frontend werden über Layoute definiert, in denen HTML eingefügt wurde. Innerhalb des HTML kann durch die Angabe von:

  1. ${PH:<Platzhaltername>}$

ein neuer Platzhalter geschaffen werden, in den z.B. mit Hilfe des WYSIWYG Live Editors Platzhalterkonfigurationen eingesetzt werden können. Da alle im Backend angelegten Layoute technisch gesehen in einer Datenbanktabelle gespeichert werden, steht ein einmal für das Shop Frontend angelegtes Layout für alle Seiten zu Verfügung und könnte eingefügt werden.

Typische Layoute eines Shop-Templates

In einem Standard Shop-Template sind zumeist einige Layoute enthalten. Zu den wichtigsten zählen:

  • eCS HTML Basis Container (ecs_html_container)
    Dieser enthält die Hauptelemente einer Website (Doctype, html, head, body)
  • eCS Site 1-1-1
    Grundlayout mit drei aufeinanderfolgenden Container. Wird üblicherweise direkt im body-Platzhalter des Layoutes eCS HTML Basis Container platziert, um Platz für den Kopf- und Fuß- und Hauptinhaltsbereich zu schaffen.
  • eCS 1 Spalte (ecs_1column)
    Einspaltiges Layout. Wird im Normalfall als einspaltiger Hauptcontainer innerhalb des Hauptinhalts-Platzhalter des Layout eCS Site 1-1-1 verwendet.
  • eCS 2 Spalten (links+zentral) (ecs_2columns)
    Zweispaltiges Layout. Verwendung im Normalfall wie eCS 1 Spalte, wobei zwei Spalten vorgegeben werden, bei denen die linke Spalte schmaler ist, als die rechte. Ideal, um links eine Sidebar oder Navigation zu platzieren und den rechten Bereich für den Hauptinhalt zu verwenden.
  • eCS 2 Spalten (zentral+rechts) (ecs_2columns_right)
    Zweispaltiges Layout. Verwendung im Normalfall wie eCS 1 Spalte, wobei zwei Spalten vorgegeben werden, bei denen die linke Spalte größer ist, als die rechte. Ideal, um links den Hauptinhalt zu platzieren und rechts eine Sidebar zu integrieren.
  • eCS 3 Spalten (ecs_3columnn)
    Dreispaltiges Layout. Verwendung im Normalfall wie eCS 1 Spalte, wobei drei Spalten vorgegeben werden, bei denen die mittlere Spalte größer ist als die linke und rechte, die zumeinst gleich breit definiert sind. Ideal, um mittig den Hauptinhalt zu platzieren und links und rechts eine Sidebar mit weiteren Inhalten oder eine Navigation zu integrieren.
  • eCS Container Bootstrap (ecs_container_bs)
    Nötige Div-Container, für eine Bootstrap col-12 Einbindung.
  • [...]

Makro-Layoute

Mit Makro-Layouten lassen sich Platzhalterkonfigurationen sammeln und leichter wiederverwenden. Dies ist nicht nur für die Ausgabe von Inhalten und Formaten sinnvoll, sondern kann auch praktisch für die Struktur einer Seite verwendet werden.

Das klassischste Beispiel für ein Makro-Layout ist eCS Makro Site (ecs_site) welche in einem Standard Shop Template integriert ist. Dies bildet folgendes ab:

  • Hauptlayout eCS HTML Basis Container
  • Site-Layout eCS Site 1-1-1 im body-Platzhalter des Hauptlayoutes
  • Makro-Layout eCS Makro Site Header im header-Platzhalter des Site-Layoutes
  • Makro-Layout eCS Makro Site Footer im footer-Platzhalter des Site-Layoutes

Das Makro-Layout eCS Makro Site enthält also die HTML Layoute für das Grundgerüst einer Website, ein erstes Strukturierungslayout für Kopf-, Hauptinhalt- und Fußbereich der Seite, sowie jeweils ein weiteres Makro-Layout für den Kopf- und Fußbereich. Wenn das Makro-Layout eCS Makro Site also als Haupt- bzw. Masterlayout einer eCMS Seite verwendet wird, sind die Bereiche der Seite bereits vorkonfiguriert und müssen nicht manuell auf jeder Seite wiederholt konfiguriert werden.

CSS Anpassungen

Ein Standard Shop-Template enthält meist Default CSS-Datei, in welcher das Design der Seite im Wesentlichen definiert ist. Außerdem wird bei der Installation eine leere CSS-Datei shop_styles_custom.css angelegt. In dieser CSS Datei können und sollten alle zusätzlichen Shop Anpassungen vorgenommen werden. Die Datei wird im <head>-Bereich der Seite an letzter Stelle eingebunden und erlaubt damit die CSS Überschreibung aller zuvor eingebundenen CSS Dateien (egal ob fix im Layout gesetzt oder dynamisch über Formate geladen).

Weitere Information zum Thema CSS Design Anpassungen finden Sie unter: Anpassungen des Shop Frontend Stylesheets (CSS)

Anpassung von Detailausgaben (Formate)

Dieser Teil richtet sich an Entwickler. Zum besseren Verständnis werden Kenntnisse in PHP und HTML empfohlen.

Formate sind in PHP programmierte PHP-Klassen die Daten aus Datenfunktionen erhalten können, diese Verarbeiten und HTML zurückliefern. Formate werden über Platzhalterkonfigurationen oder über die eCMS Elementschreibweise auf einer Seite eingebunden werden.

Formate werden als Dateien auf dem Server abgelegt und sind darüber abrufbar und gezielter änderbar. Neue Formate können dort ebenfalls abgelegt werden um sie im Shop Frontend verfügbar zu machen.

Wie Formate programmiert werden können erfahren Sie unter: Formate - die Grundlagen