Einführung
Layout > Layout-Generator
Themen bzw. Einstellungen dieses Kapitels:
2) Funktion des Layout-Generators
3) Platzhalter
4) Templates
5) jQuery
Klicken Sie links im Verzeichnisbaum auf das gewünschte Kapitel.
1) Info: Layout-Generator
Der Layout-Generator ist ein auf Platzhaltern basierendes Template-System. Sie bearbeiten mit dem Layout-Generator alle Templates sowie die CSS-Daten.
2) Funktion des Layout-Generators
Folgende Funktionen und Anzeigen stehen Ihnen im Layout-Generator zur Verfügung:
Bild 1: Funktionen und Anzeigen des Layout-Generators
| Option/Anzeige | Erläuterung |
|---|---|
| 1 | Unter Layout erscheint beim Öffnen des Menüs die aktive Vorlage. Sie können hier jedoch auch eine andere Vorlage zur Bearbeitung einstellen. |
| 2 | Wenn Sie verschiedene Versionen angelegt haben, wählen Sie die gewünschte Sprachversion der Vorlage. |
| 3 | CSS: Nach Klick auf diesen Button wird die CSS-Datei in einem separaten Bearbeitungsfenster geöffnet. |
| 4 | Seiten-Layout: Der grafische Rahmen des Webshops wird hier definiert. |
| 5 | Navigation: Verschiedene Navigationen für Artikel und Content-Seiten werden hier definiert. |
| 6 |
Artikelansichten: Jede Artikelansicht wird durch ein eigenes Template aus diesem Bereich dargestellt.
Unter jeder Gruppe verbergen sich eine Reihe von einzelnen Templates, welche das Aussehen bestimmter Bereiche des Webshops bestimmen bzw. steuern. Wird eine Gruppe geöffnet, kann über den Menüpunkt Platzhalter Einblick in die verfügbaren Platzhalter genommen werden. Nachdem ein Template gespeichert wurde, ist das Ergebnis direkt im Webshop sichtbar. |
| 7 | Weblog: Templates für den Bereich Blog. |
| 8 | Sonstige Inhalte: Templates für Newslist, FAQ etc. |
| 9 | Wählen Sie die Sprachversion des Layouts (s. Pfeil), in der die Änderungen gespeichert werden sollen. |
| 10 | Anzeige des Layouts, in dem die geöffnete Vorlage (hier: SingleArticle) enthalten ist. |
| 11 | Name der Vorlage (hier: SingleArticle), die bearbeitet wird. |
| 12 | Bilder-Galerie, die die Bilder des Layouts enthält. |
| 13 | Die Platzhalter zu den Vorlagen des Layout-Generators. |
| 14 | Hier erhalten Sie eine Vorschau des Webshops zur Kontrolle der durchgeführten Änderungen. |
Tab. 1: Erläuterungen zu den Funktionen und Anzeigen des Layout-Generators
3) Platzhalter
Platzhalter sind Bezeichner, die von [eckigen Klammern] eingeschlossen sind. Der Bezeichner selbst ist auch der Name des Platzhalters.
Hinter ihnen verbirgt sich ein bestimmter Inhalt, z. B. ein Text oder ein Bild. Im Webshop wird dann nur noch dieser Inhalt angezeigt, den der Platzhalter enthält.
Beispiel:
Hier ein Blick auf einige Beispielzeilen des HTML-Codes eines Templates mit Platzhaltern, erkennbar an den eckigen Klammern [...]:
Bild 2: HTML-Code im Template
Vergleichen Sie Bild 2, den HTML-Code mit Platzhaltern, mit Bild 3, das den HTML-Code des Webshops mit den aus den Platzhaltern gezogenen Inhalten zeigt:
Bild 3: HTML-Code im Webshop: der Inhalt der Platzhalter ist eingefügt (schwarze Schrift)
Im Webshop sind weder HTML-Code, noch Platzhalter zu sehen, sondern nur der hinterlegte Inhalt, hier der Name, der Preis und die Mehrwertsteuer.
Weitere Informationen siehe Wikipedia: Template Engine
Grundsätzlich gibt es zwei Arten von Platzhaltern, atomare und komplexe Platzhalter.
Atomare Platzhalter repräsentieren einen Wert, wie z. B. einen Artikelnamen.
Komplexe Platzhalter wiederum sind Verweise auf andere Templates.
Beispiel:
Bild 4 zeigt einen HTML-Auszug mit dem Platzhalter Container_ArticleListTopSell. Anstelle dieses Platzhalters erscheint im Webshop eine Liste mit Artikeln, die als Top-Artikel definiert wurden. Das Aussehen dieser Artikelliste wird durch das Template ArticleListTopSell definiert.
Bild 4: Beispiel für Platzhalter
4) Templates
Mit einem Template wird eine HTML-Vorlage bezeichnet, die das Aussehen eines ganz bestimmten Bereichs festlegt. So gibt es ein Template für die Artikelansicht und ein weiteres zur Definition von Artikelsuchergebnissen uvm.
Das zentrale Template ist der grafische Layoutrahmen Ihres Webshops. In diesem Template befinden sich Platzhalter, die wiederum auf andere Templates verweisen, so dass an der Stelle des Platzhalters dann der Inhalt des jeweiligen Templates angezeigt wird, auf das verwiesen wird.
Die Darstellung der Inhalte wird unter Verwendung von HTML und CSS, sowie Einbindung der verfügbaren Platzhalter vorgenommen.
Ein Template kann dabei aus nur einem einzigen HTML-Fragment bestehen oder auch aus mehreren, wenn Inhalte in einer Schleife (Loop) ausgegeben werden sollen.
Schleifen kommen z. B. für die Darstellung von Artikellisten zum Einsatz, wobei wiederholt die gleichen HTML-Fragmente ausgegeben werden.
Bild 5 zeigt eine einfache Artikelliste:
Bild 5: Beispiel für eine Artikelliste
Betrachten Sie die Zeilen. Es fällt Ihnen sicher auf, dass das HTML-Gerüst jeweils gleich bleibt, der Inhalt sich aber stets verändert. Zur Darstellung eines der Artikel aus der Liste wird folglich nur ein HTML-Fragment mit den jeweiligen Inhalten gefüllt. Dieses Fragment sehen Sie hier:
Bild 6: HTML-Fragment zur Darstellung eines Artikels
Dieses Beispiel soll Ihnen nur die Logik eines Schleifendurchlaufs veranschaulichen. Im Kapitel Artikelansichten werden Schleifen beschrieben. Diese kommen an vielen Stellen zum Einsatz.
5) jQuery
jQuery ist eine umfangreiche JavaScript-Klassenbibliothek, die komfortable Funktionen zur Manipulation und Navigation in Ihrer Website anbietet. Diese ist automatisch in Ihrem Webshop vorhanden und kann überall in Ihrem Layout genutzt werden. Zudem bieten wir Ihnen die Zusatz-Bibliotheken jQuery UI und jQuery Tools an.
Tutorial
Ein Tutorial zu jQuery finden Sie über den Link http://www.very-clever.com/jquery-tutorial.php.
Binden Sie keine der genannten Bibliotheken in Ihrem Layout neu ein. Dies könnte unabsehbare Auswirkungen auf die Funktion der Bibliotheken haben.
Kompatibilität prüfen
Sollten Sie beabsichtigen, mit anderen JavaScript-Klassenbibliotheken zu arbeiten, wie z.B. Prototype, informieren Sie sich bitte vorher über die Kompatiblität beider Bibliotheken und berücksichtigen mögliche Konfliktpotentiale.
