Seiten-Layout
Layout > Layout-Generator > Tab: Webshop > Dropdown-Menü: Seiten-Layout
Themen bzw. Einstellungen dieses Kapitels:
2) Elemente eines Seiten-Layouts
4) Ein Seiten-Layout bearbeiten
5) Ein anderes Seiten-Layout für eine Content-Seite einstellen
6) Einfügen einer Intro-Seite (Landing-Page)
7) Platzhalter für das Seiten-Layout
Wenn Sie Einträge, Einstellungen oder Änderungen vorgenommen haben, klicken Sie vor Verlassen eines Bereichs jeweils auf das Speichern-Symbol, um Ihre Konfiguration zu sichern.
1) Info: Seiten-Layout
Unter einem Seiten-Layout verstehen wir den Layout-Rahmen ihres Webshops, was alle Inhalte einschließt. Innerhalb des Seiten-Layouts werden alle Inhalte (Artikel, Hintergrundbilder, Content-Seiten, Bestellvorgang) dargestellt. Dazu werden im Seiten-Layout jeweils Bereiche zur Darstellung der verschiedenen Inhalte definiert.
2) Elemente eines Seiten-Layouts
Im nachfolgenden Beispiel erscheint das Layout in seiner meistens verwendeten Form: der mittlere Bereich ist dynamisch, d.h. die Inhalte wechseln je nachdem, welche Links angeklickt werden. Die dynamischen Inhalte werden durch Platzhalter in den Layout-Rahmen geladen. Neben der Ansicht der Artikel erscheinen dort die Inhalte der Content-Seiten, wie der verschiedenen Informationsseiten, zum Beispiel des Bereichs Info-Menü.
Die Bereiche Schnellsuche und Kategorien sind ebenfalls dynamische Inhalte, denn bei Klick auf einen Button erscheinen jeweils verfügbare Untermenüs.
Die meisten der seitlich angeordneten Bereiche sind statische Inhalte, die weder ihre Form, noch ihre Größe ändern und immer an derselben Stelle zu sehen sind. Sie dienen der Orientierung während des Einkaufs und ermöglichen, jederzeit zu jedem gewünschten Bereich des Webshops zu gelangen.
Bild 1: Startseite eines Webshops
Bild 1, die Startseite eines Webshops, zeigt ein modernes Webshop-Layout. Nach Klick auf eine der angebotenen Kategorien oder auf eins der Angebote im Hauptbereich (Mitte) gelangt der Besucher direkt zu den Artikelansichten (s. Bild 02). Wir zeigen Ihnen anhand von Bild 2 die verschiedenen Elemente eines Seiten-Layouts.
Bild 2: Artikelansichten des obigen Webshops
Die nachfolgende Tabelle enthält eine Übersicht der wichtigsten Elemente eines Webshop-Layouts mit entsprechenden Erläuterungen.
| Pos.Nr. | Element | Erläuterung | Template |
|---|---|---|---|
| 1 | Hauptbereich |
Artikelansichten und Content-Seiten (wie AGB, Impressum etc.) werden innerhalb dieses Bereichs dargestellt. Dazu wird im HTML-Template an dieser Stelle der Platzhalter [MainColumn] gesetzt, der vom System durch die entsprechenden Inhalte ersetzt wird. Alle Bereiche außerhalb dieses Bereichs sind entweder statische Inhalte, wie Bilder oder unveränderliche Layout-Bereiche ( z. B. Hauptnavigation) oder dynamische Inhalte, die durch Platzhalter in den Layout-Rahmen geladen werden. |
[SingleArticle] |
| 2 | Kopfbanner mit Logo | Hier erscheinen Shopname, Logo und idealerweise ein Slogan, der in Kurzform das Programm des Webshops darstellt. | [MainLayout_Content] |
| 3 | Wunschzettel | Der Kunde kann hier seine Wunschartikel hinterlegen. | [ItemWishlist] |
| 4 | Warenkorb | Zeigt den Warenkorbstatus, der Besucher kann Artikelmenge und Warenwert ablesen und damit seinen Einkauf verfolgen. Zur Anzeige dieser Werte müssen zwei Platzhalter in den Layout-Rahmen eingefügt werden. | [MainLayoutOrder] |
| 5 | Login | Hier erfolgt die Anmeldung, für Besucher, die bereits Kunde sind, mit den Login-Daten oder eine Neuanmeldung. | |
| 6 | Newsletter | Der Besucher kann durch Angabe seines Namens und seiner E-Mail-Adresse einen Newsletter abonnieren. | |
| 7 | Sprachwahl | Die Sprachen-Buttons sind in diesem Beispiel relativ weit unten angeordnet. Für Webshops mit erhöhtem ausländischen Kundenanteil sollten diese weiter oben angeordnet werden. | |
| 8 | Top Artikel | Hier werden die beliebtesten Artikel gelistet. | [ArticleListTopSell] |
| 9 | Hotline | Wichtiges Service-Element: die Hotline-Informationen, meistens eine Telefonnummer und eine E-Mail-Adresse. | |
| 10 | Info-Menü | Dieses Element zeigt die Informationsseiten des Webshops sowie die Kontaktdaten. Nicht fehlen dürfen Links zu den elementaren Content-Seiten mit Hinweisen zu AGB, Datenschutz und Widerrufsrecht. | |
| 11 | Bezahlsysteme | Ebenfalls ein wichtiges Element, besonders für Kunden, die bestimmte Bezahlarten bevorzugen. | |
| 12 | Artikelnavigation | Artikelnavigation, die automatisch aus den verfügbaren Artikeln aufgebaut wird und mittels Platzhalter im Layout-Rahmen aufgerufen wird. | [ArticleListCategory], [CategoryImageNavigationStepByStep] |
| 13 | Schnellsuche | Die Schnellsuche dieses Beispiels bietet einen Vorteil, den die Artikelnavigation nicht bietet: Der Besucher kann nicht nur die Kategorie wählen, sondern auch die Artikelvariante Schuhgröße, damit werden dann nur die Schuhe der gewählten Größe aufgelistet. Nach Wahl der Kategorie erscheint ein weiteres Drop-Down-Menü zur Wahl einer Unterkategorie und schließlich ein drittes Menü zur Wahl der Größe. | |
| 14 | Content-Seiten | Auswahl der wichtigsten Bereiche für die Abwicklung des Einkaufs. | Verlinkung zu den Seiten im Template [MainLayout_Content] |
| 15 | Bewertungen | Die Bewertungen erscheinen hier auf der Startseite und dienen zur Aufwertung des Image des Webshops. Wenn Sie möchten, dass die Bewertungen immer sichtbar sind, ordnen Sie diese seitlich im Layout an. | |
| 16 | Artikel Link Cloud | Eine solche Link Cloud (Link-"Wolke") generieren Sie mit wenig Aufwand, beachten Sie dazu unsere Handbuchseite Artikel Link Cloud. | Platzhalter [ArticleLinkCloud] im Template [MainLayout_Content], Steuerung über CSS |
Tab. 1: Erläuterungen: Elemente eines Webshop-Layouts
3) Seiten-Layout-Typen
In einem Webshop werden verschiedene Szenarien abgebildet, wobei diese nicht immer im gleichen Layout abgebildet werden können. Zum einen müssen Artikel und sonstige Inhalte (Content-Seiten), wie AGB und Kontaktdaten, und zum anderen der Bestellvorgang (Warenkorb und MeinKonto) dargestellt werden.
Diese beiden Anforderungen werden meist nicht durch ein einziges Seiten-Layout erfüllt. Ein moderner Webshop besteht aus den oben gezeigten Elementen, wie z. B. einem Kopfbanner mit Logo, einer übersichtlichen Navigation und Bereichen für Artikelsuche, Artikelnavigation, Artikelansichten, Warenkorbübersicht uvm. Im Sinne der sogenannten Barrierefreiheit soll dabei alles übersichtlich angeordnet sein und so wenige Unterebenen wie möglich enthalten, damit der Nutzer sich nicht im Webshop verirrt.
Während des Bestellvorgangs soll das Hauptaugenmerk allerdings ausschließlich auf die Abwicklung gelenkt werden, weshalb hier eine Artikelnavigation oder die Anzeige der Top-Angebote störend wirken würde. Daher gibt es besonders für den Bestellvorgang ein eigenständiges Seiten-Layout, das einen angepassten Layout-Rahmen enthält.
Schließlich ist es in manchen Fällen sinnvoll, Inhalte in einem neuen Fenster (per PopUp) anzeigen zu lassen. Diese Variante kommt häufig bei Artikelbildern zum Einsatz. Für diese Darstellung ist ebenfalls ein eigenständiges Seiten-Layout verfügbar, welches meist ausschließlich aus dem Platzhalter [MainColumn] besteht. So können Inhalte komplett ohne Layout-Rahmen dargestellt werden.
Sie haben somit die Möglichkeit, für die Artikeldarstellung und den Bestellvorgang inkl. dem Bereich Mein-Konto jeweils ein individuelles Seiten-Layout zu entwerfen.
4) Ein Seiten-Layout bearbeiten
Im Menü Layout > Layout-Generator > Tab: Webshop kann über das Dropdown-Menü Seiten-Layout auf alle verfügbaren Seiten-Layouts zugegriffen werden.
| Seiten-Layout | Verwendung |
|---|---|
| [MainLayout_Content] | Wird verwendet zur Darstellung von Artikeln und Content-Seiten. |
| [MainLayout_Order] | Bestellvorgang, MeinKonto |
| [MainLayout_StandAlone] |
Dieses Seiten-Layout wird nicht automatisch angezeigt, kann aber für bestimmte Darstellungsbereiche aktiviert werden. Anwendungsfall: Artikelbilder in einem neuen Fenster. |
| [MainLayout_Weblog] | Zur Darstellung des Blogs. Weitere Informationen zum Blog finden Sie auf folgender Handbuchseite. |
Jedes Seiten-Layout besteht aus den Bereichen MainFrame, AdditionalMeta und AdditionalBody.
In MainFrame befindet sich das HTML-Template mit mindestens dem Platzhalter MainFrame.
Die Inhalte des Datenfelds AdditionalMeta werden im HTML-Kopf zwischen (
und
) ausgegeben.
Angaben in AdditionalBody werden als Teil des Body-Tags ausgegeben.
Seiten-Layout bearbeiten:
- Öffnen Sie den Bereich Layout > Layout-Generator > Tab: Webshop.
-
Wählen Sie aus dem Dropdown-Menü des Bereichs Seiten-Layout das Template aus, das Sie bearbeiten möchten.
⇒ Der Bearbeitungsmodus des Templates wird geöffnet. - Nehmen Sie die gewünschten Änderungen vor.
- Klicken Sie auf das Speichern-Symbol, um die Einstellungen zu sichern.
5) Ein anderes Seiten-Layout für eine Content-Seite einstellen
Sie können das Seiten-Layout für jede Content-Seite individuell einstellen.
In der Grundeinstellung ist generell das Seiten-Layout [MainLayout_Content] eingestellt.
Diese Möglichkeit wird oft verwendet, wenn Content-Seiten per PopUp-Fenster dargestellt werden sollen. In dem Fall soll nicht das gewöhnliche Webshop-Layout, sondern nur allein der Seiteninhalt dargestellt werden.
Seiten-Layout einer Content-Seite ändern:
- Öffnen Sie den Bereich Content > Content-Seiten > Content-Seiten anzeigen.
-
Klicken Sie am Zeilenende der betreffenden Content-Seite in der Liste auf das Stift-Symbol.
⇒ Der Bearbeitungsmodus der Content-Seite wird geöffnet. - Wählen Sie im Tab Einstellungen für die Option Seiten-Layout das gewünschte Layout aus.
-
Klicken Sie auf das Speichern-Symbol, um die Einstellungen zu sichern.
⇒ Die Content-Seite erscheint im gewünschten Seiten-Layout.
6) Einfügen einer Intro-Seite (Landing-Page)
Soll vor dem Webshop eine Intro-Seite dargestellt werden, empfehlen wir die folgende Vorgehensweise:
Innerhalb des Templates [MainLayout_Content], das immer geladen wird, sofern dies nicht für die Startseite umgestellt wurde, entscheiden wir mittels IF-ELSE-Abfrage, ob die Intro-Seite dargestellt werden soll.
Dazu prüfen wir, ob der Platzhalter [LandingPage] gefüllt wurde und als Content-Seiten-ID (Platzhalter: [ PContent]) die ID der Startseite verwendet wird.
Im folgenden Beispiel ist als Startseite die Content-Seite mit der ID 3 definiert worden.
[IF::([LandingPage])&&(105==3)] |
Übernehmen Sie genau diese IF-ELSE-Abfrage in Ihr System und fügen Sie in den ersten Bereich den kompletten Inhalt Ihrer Intro-Seite und in den zweiten Abschnitt das normale Seiten-Layout für dieses Template ein.
Soll ein bestehendes Layout um eine Intro-Seite erweitert werden, muss einfach nur der erste Bereich der IF-ELSE Abfrage inklusive dem Inhalt der Intro-Seite und dem Ausdruck [ELSE] vor das bestehende Seiten-Layout im Datenfeld [MainLayout_Content_MainFrame] eingefügt werden. Ganz am Ende von [MainLayout_Content_MainFrame] muss dann natürlich noch der Ausdruck [ENDIF] eingefügt werden.
7) Platzhalter für das Seiten-Layout
| Platzhalter | Verwendung | |
|---|---|---|
|
[ActionPositivResult] |
[IF::[ActionPositivResult] führt zum Erfolg, wenn spezielle Webshop-Aktionen erfolgreich durchgeführt werden konnten. Dazu gehören: Eintrag in Newsletter, Teilnahme an Gewinnspiel bzw. Lotterie. |
|
|
[AddLightbox_JS] |
Fügt ein Script zur vergrößerten Darstellung von Bildern hinzu. |
|
|
[AddShadowbox_JS] |
Fügt ein Script zur vergrößerten Darstellung von Bildern hinzu. Weitere Details zum Script: Shadowbox JS |
|
|
[ArticleCategoryOption] |
Erweitert die Suchfunktion um einen Kategoriefilter. Enthalten sind nur Kategorien erster Ebene. Muss innerhalb von [FormOpen_Search] und [FormClose_Search] eingefügt werden. Beispiel: |
|
|
[ArticleLinkCloud] |
Fügt eine Artikel Link Cloud (Artikel-Link-"Wolke") hinzu. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[ArticleProducerOption] |
Erweitert die Suchfunktion um einen Filter nach Herstellern. Muss innerhalb von [FormOpen_Search] und [FormClose_Search] eingefügt werden. Beispiel: |
|
|
[ArticleQuickGuide_Standalone] |
Eine Filterfunktion für die Webshop-Suche. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[ArticleQuickGuide] |
Eine Filterfunktion für die Webshop-Suche. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[BankAccount] |
Kontonummer |
Konfiguration unter Einstellungen > Grundeinstellungen > Bankdaten |
|
[BankAccountOwner] |
Kontoinhaber |
|
|
[BankCode] |
Bankleitzahl |
|
|
[BankIban] |
IBAN |
|
|
[BankName] |
Bankname |
|
|
[BankSwift] |
Swift Code |
|
|
[Basket_Amount_Comma] |
Gesamtsumme aller im Warenkorb liegenden Artikel mit Komma-Darstellung: 10,23 € |
|
|
[Basket_Amount_Dot] |
Gesamtsumme aller im Warenkorb liegenden Artikel mit Punkt-Darstellung: 10.23 € |
|
|
[Basket_ArticleQuantity] |
Gesamtzahl der im Warenkorb liegenden Artikel. |
|
|
[BlogArchive] |
Fügt eine Übersicht aller Monate mit Blogeinträgen hinzu. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[BlogCategories] |
Fügt eine Übersicht der Blogkategorien hinzu. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[BlogId] |
Die ID (Nummer) des angezeigten Blogeintrags. Hat den Wert 0, wenn kein Blogeintrag angezeigt wird. |
|
|
[Captchar] |
Fügt ein Sicherheitsbild mit einer zufälligen Folge aus Buchstaben und Zahlen ein. |
|
|
[CompanyCEO] |
Geschäftsführer |
Konfiguration unter Einstellungen > Grundeinstellungen > Stammdaten |
|
[CompanyCity] |
Ort |
|
|
[CompanyCountry] |
Land |
|
|
[CompanyEmail] |
|
|
|
[CompanyFax] |
Fax-Nr. |
|
|
[CompanyFon] |
Telefonnr. |
|
|
[CompanyHotline] |
Hotlinenr. |
|
|
[CompanyName] |
Firmenname |
|
|
[CompanyStreet] |
Straße und Hausnummer |
|
|
[CompanyVATNumber] |
Umsatzsteuer-ID |
|
|
[CompanyZIP] |
Postleitzahl |
|
|
[Container_BlogPreviewList] |
Eine Liste mit verkürzter Darstellung der letzten Blogeinträge. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[Container_DateList] |
Zeigt die unter Content >Termine angelegten Termine an. Das Layout können Sie im Layout-Generator unter Sonstige Inhalte > DateList anpassen. |
|
|
[Container_FaqList] |
Zeigt die FAQ-Einträge an. Diese können unter Content > FAQ angelegt werden. Das Layout können Sie im Layout-Generator unter Sonstige Inhalte > FAQList anpassen. |
|
|
[Container_NewsList] |
Zeigt die News-Einträge an. Diese können unter Content > News angelegt werden. Das Layout können Sie im Layout-Generator unter Sonstige Inhalte > NewsList anpassen. |
|
|
[ContentPageName] |
Der Name der angezeigten Content-Seite. Die Seiten und Namen können im Bereich Content > Content-Seiten bearbeitet werden. |
|
|
[CouponCode] |
Der im Bestellvorgang eingegebene Gutscheincode. |
|
|
[Currency] |
Die aktive Währung im Webshop. Je nach Konfiguration kann die Währung im Webshop frei gewählt werden. |
|
|
[CustomerFSK] |
Die FSK-Beschränkung des Kunden. Die Beschränkung kann in den Kundendaten festgelegt werden. Ist dem Kunden keine Beschränkung zugeordnet, wird [CustomerFSK] durch 0 ersetzt. |
|
|
[CustomerGroup] |
Die Kundenklasse des Kunden. Bei Standardkunden und Kunden, die nicht angemeldet sind, ist die Kundenklasse 0. Kundenklassen können im Bereich Kunden > Einstellungen > Kundenklassen erstellt werden. |
|
|
[CustomerID] |
Die Kundennummer. Ist der Kunde nicht angemeldet, wird 0 als Kundennummer angezeigt. |
|
|
[CustomerName] |
Der Name des Kunden (Vor- und Nachname). |
|
|
[FormClose_ArticleQuickGuide] |
Schließt das Suchformular für die Artikel QuickGuide-Suche. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[FormClose_Blank] |
Schließt allgemein ein beliebiges Formular. |
|
|
[FormClose_BlogSearch] |
Schließt das Suchformular für die Blogsuche. Weitere Details zum Blog finden Sie auf der Handbuchseite. |
|
|
[FormClose_ContentSearch] |
Schließt das Suchformular zum Durchsuchen von Content-Seiten. |
|
|
[FormClose_Coupon] |
Schließt ein Formular zum Einlösen eines Gutscheins. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[FormClose_Search] |
Schließt das Suchformular zur Artikelsuche. |
|
|
[FormOpen_ArticleQuickGuide] |
Öffnet das Suchformular für die Artikel QuickGuide-Suche. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[FormOpen_Blank] |
Öffnet ein Formular ohne zugewiesene Aktion. |
|
|
[FormOpen_BlogSearch] |
Öffnet das Suchformular für die Blogsuche. Weitere Details zum Blog finden Sie auf der Handbuchseite. |
|
|
[FormOpen_ContentSearch] |
Öffnet das Suchformular zum Durchsuchen von Content-Seiten. |
|
|
[FormOpen_Coupon] |
Öffnet ein Formular zum Einlösen eines Gutscheins. Weitere Details finden Sie auf der Handbuchseite. |
|
|
[FormOpen_Search] |
Öffnet das Suchformular zur Artikelsuche. |
|
|
[FreeVar1], [FreeVar2], [FreeVar3], [FreeVar4], [FreeVar5], [FreeVar6], [FreeVar7], [FreeVar8], [FreeVar9], [FreeVar10] |
Im Bereich Layout > Konstanten können diese 10 Platzhalter beliebig gefüllt werden. | |
|
[Hour] |
Stunde der aktuellen Uhrzeit. |
|
|
[HTTP_HOST] |
Die Domain des Webshops (ohne http://). |
|
|
[LandingPage] |
Ermöglicht es, eine Begrüßungsseite vor der Anzeige des Webshops zu zeigen. Weitere Details sind auf dieser Handbuchseite im Abschnitt Einfügen einer Intro-Seite beschrieben. |
|
|
[Lang] |
Die Sprache, in der der Webshop dargestellt wird. Je nach Konfiguration kann die Sprache vom Kunden manuell gewählt werden. |
|
|
[LiveShoppingEndTime] |
Die Uhrzeit, zu der das Live-Shopping-Angebot endet. |
Weitere Details zum Live-Shopping finden Sie auf der Handbuchseite. |
|
[LiveShoppingID] |
Die Nummer des aktuellen Live-Shopping-Anbegots. |
|
|
[LiveShoppingPercentRemaining] |
Die Artikelmenge in Prozent, die vom aktuellen Live-Shopping-Angebot noch verfügbar ist. |
|
|
[LiveShoppingPercentSold] |
Die Artikelmenge in Prozent, die vom aktuellen Live-Shopping-Angebot bereits verkauft ist. |
|
|
[LiveShoppingPriceOriginal] |
Der ursprüngliche Preis des aktuellen Live-Shopping-Angebots. |
|
|
[LiveShoppingQuantityRemaining] |
Die Artikelmenge, die vom aktuellen Live-Shopping-Angebot noch verfügbar ist. | |
|
[LiveShoppingQuantitySold] |
Die Artikelmenge, die vom aktuellen Live-Shopping-Angebot bereits verkauft ist. |
|
|
[LiveShoppingStartTime] |
Die Uhrzeit, zu der das Live-Shopping-Angebot gestartet ist. |
|
|
[Minute] |
Minute der aktuellen Uhrzeit. |
|
|
[MultiShop] |
Die Nummer des Multishops. Der Standardshop hat immer die Nummer 0. |
|
|
[PageTitle] |
Der Titel der aktiven Seite. |
|
|
[PageTitle4Tracking] |
Der Titel der aktiven Seite in suchmaschinenoptimierter Form. |
|
|
105 |
Die Nummer der angezeigten Content-Seite. |
|
|
[PlentyContentpageNavigation] |
Navigationsanker zur Navigation in Content-Seiten. |
|
|
[Request_MaxCatDeep_QuickGuide] |
Die höchste vorhandene Kategorieebene bei einer Quick Guide-Suche. |
|
|
[Request_SearchInDescription] |
Gesetzt, wenn in der Artikelbeschreibung gesucht wird. |
|
|
[Request_SearchPriceRangeStart] |
Eingegebene Untergrenze bei Suche nach Artikelpreis. |
|
|
[Request_SearchPriceRangeStop] |
Eingegebene Obergrenze bei Suche nach Artikelpreis. |
|
|
[Request_SearchProducer] |
Suchbegriff nach Hersteller. |
|
|
[Request_SearchString] |
Eingegebener Suchbegriff. |
|
|
[SCRIPT_URL] |
Die URL des Scripts ohne Domain (z. B. /index.php). |
|
|
[SID] |
Die aktive Session ID. |
|
|
[USR_BROWSER_AGENT] |
Der verwendete Webbrowser. |
|
|
[USR_BROWSER_VER] |
Die Version des Webbrowsers. |
|
|
[USR_OS] |
Das verwendete Betriebssystem. |
|
