Seitenaufbau

plentymarkets » CMS » Webdesign

 

Inhalt dieser Seite

Auf dieser Seite erhalten Sie wichtige und grundlegende Informationen zum Seitenaufbau im CMS Ihres plentymarkets-Systems. Die grundlegende Struktur der Templates und der Seitenaufbau werden anhand eines Beispiels erklärt.

Struktur-Übersicht

Das folgende Bild veranschaulicht die grundlegende Struktur Ihres Webshops:

Bild 1: Grundlegende Template-Struktur

Das Bild zeigt die Template-Struktur. Sie erkennen die Anordnung der Templates und welche Elemente jeweils in welches Template gehören. Diese Struktur finden Sie in vielen Templates im plentymarkets-CMS wieder. Die jeweils kleineren Einheiten, die wiederum in Templates hinterlegt sind, werden mittels Containern eingefügt. So ist das Template PageDesignContentMainFrame mittels einer Template-Variable in PageDesignContentHtmlStructure enthalten. Der Inhalt von ...MainFrame wiederum wird über die gleichnamige Template-Variable in PageDesignContentMainFrame eingefügt.

Die Templates dieses Beispiels werden nun nacheinander erläutert. Vorher sehen wir uns an, wie die in Bild 1 dargestellten Templates im Menü Webdesign angeordnet sind und wo sich die Template-Variable $MainFrame befindet. Bild 1 und Bild 2 sollen Ihnen dabei das Verständnis erleichtern.

Bild 2: Anordnung der in Bild 1 gezeigten Templates im Menü Webdesign

PageDesignContentHtmlStructure

Ein Template mit der Endung HtmlStructure enthält den gesamten Inhalt der jeweiligen Seite und gibt der Seite die gewünschte Struktur. Sie finden den Code unseres Beispiels im Ordner PageDesign im Tab PageDesignContentHtmlStructure des Templates PageDesignContent (Bild 2). Der etwas vereinfachte Code sieht folgendermaßen aus:

PageDesignContentHtmlStructure

$HtmlStartTag
<head>
    <title>$HtmlMetaTitle</title>
    $HtmlHeadLinkCSSTags
    $HtmlHeadJavaScriptTags
    $HtmlHeadMetaTags
</head>
<body>
    $PageDesignContentMainFrame

    $HtmlBodyOverlays
</body>
</html> 

Die folgende Tabelle erläutert die Funktionen der Code-Elemente dieses Templates:

Element Erläuterung
$HtmlStartTag Die Template-Variable enthält das öffnende HTML-Tag sowie ggf. die Angabe des DOCTYPE.
$HtmlMetaTitle Der Seitentitel wird durch diese Template-Variable ausgegeben. Er wird in der Titelleiste bzw. als Tabtitel der meisten Browser angezeigt. Der Seitentitel ist sehr wichtig für Suchfunktionen und das Ranking in Suchmaschinen und sollte daher kurz und treffend gewählt werden.
$HtmlHeadLinkCSSTags Einbindung des CSS. Hier werden die jeweils zutreffenden CSS-Templates eingebunden, bei der Darstellung von Kategorien oder Artikeln z.B. CSSBase und CSSContent, beim Bestellvorgang hingegen CSSBase und CSSOrder.
$HtmlHeadJavaScriptTags Einbindung der in plentymarkets standardmäßig vorhandenen JavaScript-Frameworks: jQuery, jQuery UI, jQuery UI Widget, jQuery UI Mouse, jquery.event.drag, jQuery Tools.
$HtmlHeadMetaTags Durch diese Template-Variable werden Meta-Tags, z.B. Keywords, umgesetzt, die wichtig für die Indizierung der Seite durch Suchmaschinen sind.
$PageDesignContentMainFrame Diese Template-Variable fügt den Inhalt des Templates PageDesignContentMainFrame ein. Dieses Template enthält wiederum die Template-Variable $MainFrame. Daher wird diese nachfolgend ebenfalls erläutert.
$HtmlBodyOverlays Hier werden Overlays umgesetzt, z.B. eine spezielle Warenkorbansicht.

Tab. 1: Elemente des Tabs PageDesignContentHtmlStructure

PageDesignContentMainFrame

Die meisten der seitlich sowie im Kopfbereich einer Seite angeordneten Bereiche sind statische Inhalte. Sie ändern weder ihre Form noch ihre Größe und werden immer an derselben Stelle angezeigt. Sie dienen der Orientierung während des Einkaufs und ermöglichen es dem Besucher, jederzeit zu jedem gewünschten Bereich des Webshops zu gelangen.

Ein Template mit der Endung MainFrame enthält den sichtbaren Inhalt der jeweiligen Seite. Sie finden den Code unseres Beispiels im gleichnamigen Tab des Templates PageDesignContent im Ordner PageDesign (Bild 2). Der sehr vereinfachte Code sieht folgendermaßen aus:

PageDesignContentMainFrame

<div class="page">
    <!-- hier kann der Header und das Menü ergänzt werden -->

    <!-- Hauptdarstellungsbereich -->
    <section class="mainContent">
        $MainFrame
    </section>
    <!-- Ende Hauptdarstellungsbereich -->

    <!-- hier kann der Footer ergänzt werden -->
</div> 

Es würde an dieser Stelle zu weit führen, die Elemente vollständig zu beschreiben. Wir beschränken uns darauf, die wichtigsten Elemente zu erläutern.

Die folgende Tabelle erläutert wichtige Inhalte des obigen Beispiels PageDesignContentMainFrame.

Element Erläuterung
$MainFrame Bildet den jeweiligen dynamischen Hauptinhalt einer Seite, z.B. eine Artikeldetailansicht, ab. Weitere Details siehe nächstes Unterkapitel.
<!-- txt --> Kommentare, die zur Orientierung im Code eingefügt werden, jedoch nicht angezeigt werden. Diese werden z.B. für Listenansichten zur Segmentierung der Iterationsschritte verwendet.

Tab. 2: Elemente des Tabs PageDesignContentMainFrame

Wichtige Inhalte nicht aus Template löschen!

Die Template-Variable $MainFrame ist zwingender Bestandteil eines Templates und darf nicht entfernt werden, da sonst der dynamische Hauptinhalt nicht angezeigt wird. Auch die Kommentare sollten Sie nicht aus den Templates löschen.

Template-Variable MainFrame

Über die Template-Variable $MainFrame werden die dynamischen Inhalte dargestellt, z.B. die Artikeldetailansicht des Templates ItemViewSingleItem oder die Kategorieansicht des Templates ItemViewCategoriesList. Die Template-Variable wird in jedem PageDesign verwendet.

Bild 3: Mögliche Inhalte für MainFrame

Wenn ein Besucher z.B. auf eine Kategorie klickt, wird über die Template-Variable $MainFrame das Template ItemViewCategoriesList angezeigt. Nach Klick auf einen der Artikel wird die Artikeldetailansicht, also das Template ItemViewSingleItem, angezeigt.

Nach oben