Alter Webshop: CMS

Der neue Webshop Ceres

Webshop-Projekte werden ab sofort auf Basis des Webshop-Plugins Ceres umgesetzt. Der neue Webshop nutzt die aktuelle und zukunftssichere Plugin-Technologie und kann einfach und individuell durch zusätzliche Plugins aus dem plentyMarketplace erweitert werden.

Webshops, die mit dem alten CMS erstellt wurden, werden für einen Übergangszeitraum natürlich weiterhin gepflegt, aber funktionell nicht mehr erweitert. Wir empfehlen bei allen geplanten Projekten ab sofort auf Ceres zu setzen.

1. Inhalt dieses Kapitels

In diesem Kapitel erhalten Sie einen Überblick darüber, wie Sie Ihren Webshop gestalten und das Design nach Ihren Vorstellungen verändern können. Erläuterungen dazu finden Sie im Kapitel Webdesign.
Weiterhin wird die Verwendung der Bilder-Galerie erklärt. In die Bilder-Galerie laden Sie Bilder, die in Ihrem Webshop angezeigt werden sollen. Diese können Sie dort in Ordnern strukturiert verwalten.

Mit dem Webspace-Tool hinterlegen Sie u.a. die Elemente für Ihr Design, z.B. Bilder, Logos oder JavaScript-Dateien. Diese verwalten Sie dort auf Datei-Ebene.

Eine weitere Möglichkeit, Ihren Kunden Dateien zur Verfügung zu stellen, wird auf der Seite Dokumente erklärt. Hier erfahren Sie, wie Sie Dokumente per Upload hinterlegen, die dann für den Versand per E-Mail zur Verfügung stehen.

Wenn Sie in Ihrem Onlineshop einen Blog einrichten möchten, erhalten Sie auf der Seite Blog die nötigen Informationen.

Die Seite FAQ zeigt Ihnen die Einrichtung eines Bereichs in Ihrem Webshop, der Frequently Asked Questions, häufig gestellte Fragen, beantwortet.

Die Konfiguration von Newslettern, die Sie automatisch versenden und mit denen Sie viele potentielle Käufer erreichen können, erklären wir Ihnen ebenfalls in diesem Kapitel.

2. Webdesign in plentymarkets

Sie lernen, mit dem integrierten Content-Management-System zu arbeiten und damit Inhalte, wie z.B verschiedene Templates, anzupassen, die das Design Ihres Onlineshops bestimmen. Außerdem erfahren Sie, wie Sie mit Platzhaltern verschiedene Inhalte in Ihren Webshop einfügen, die dann dynamisch angepasst werden. Dazu gehört z.B. die Anzeige von Preisen und Verfügbarkeiten. Mit if-Abfragen fügen Sie Fallunterscheidungen nach dem Wenn-dann-Prinzip ein und steuern Aktionen anhand von Bedingungen.

Mit CSS steuern Sie übergreifende Formatierungen und passen Ihre Styles mit wenigen Mausklicks an.

Weitere Details zum Thema erhalten Sie auf der Handbuchseite Webdesign.

3. Videotutorials

Erfahren Sie mehr zum Menü CMS im folgenden Videotutorial:

4. Einstellungen

System » CMS

4.1. Inhalt dieses Kapitels

In diesem Kapitel erhalten Sie Informationen zu Grundeinstellungen für Kategorien, Newsletter, das Forum oder den Bereich Blog.

4.2. Videotutorials

Erfahren Sie mehr zum neuen CMS im folgenden Videotutorial:

4.3. Formulare

System » CMS » Formulare

4.3.1. Allgemeine Informationen zu Formularen

In diesem Menü legen Sie Formulare an und bearbeiten sie. Ein Beispiel für ein Formular ist das Kontaktformular in Ihrem Webshop. Dort können Webshop-Besucher Adressdaten eingeben und einen Hinweis oder eine Frage per E-Mail an die jeweils im Menü System » Mandant » Mandant wählen » E-Mail » Zugangsdaten hinterlegte E-Mail-Adresse schicken. Ein Formular wird mit der Template-Variable {% Form(X) %} in Ihren Webshop eingebunden.

4.3.2. Ein Formular anlegen

Wenn Sie das Menü öffnen, können Sie direkt ein neues Formular anlegen. Wenn Sie ein Formular durch Klick in der Übersicht FORMULARE links oben im Menü geöffnet haben und ein neues Formular anlegen möchten, müssen Sie das Menü zunächst neu laden, um auf die erste Ansicht zurückzukehren.

Bild 1. Neues Formular anlegen

Neues Formular anlegen:

Öffnen Sie das Menü System » CMS » Formulare.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu Tabelle 1.
Speichern Sie die Einstellungen.
→ Das neue Formular ist ggf. erst in der Übersicht FORMULARE sichtbar, wenn Sie das Menü neu geladen haben.

Tabelle 1. Neues Formular anlegen
Einstellung	Erläuterung
ID	Die ID eines Formulars wird vom System vergeben und kann nicht geändert werden. Die ID wird benötigt, um ein Formular in den Webshop einzubinden.
Formularname	Einen Namen für das Formular eintragen.
E-Mail-Betreff	Einen E-Mail-Betreff eintragen. Der Text wird als Betreff in den E-Mails, die durch das Formular versendet werden, angezeigt. Bei Verwendung unterschiedlicher Formulare ist so leicht erkennbar, von welchem Formular eine E-Mail stammt. Wichtig: Wenn das Formular in das Ticketsystem eingelesen werden soll, ist die Angabe des Betreffs Pflicht. Wenn kein Betreff vorhanden ist, wird die E-Mail-Adresse des Kunden nicht am Ticket hinterlegt und dann werden E-Mails u.U. per Ereignisaktion an Ihre eigene Adresse gesendet.
CC E-Mail-Adresse	Eine E-Mail-Adresse eintragen. Die Einträge des Formulars werden zusätzlich (=CC) an diese Adresse gesendet.
Tickettyp	Einen Typ wählen, wenn das Formular als Ticket in das System importiert werden soll.
Ticketstatus	Einen Status wählen, wenn das Formular als Ticket ins System importiert werden soll.
Feldname	Die Feldnamen für das Formular eintragen, z. B. Firma, Name, Vorname, E-Mail usw.
Typ	Den Datentyp für das Datenfeld wählen. Der Typ bestimmt einerseits, wie das Eingabefeld im Formular dargestellt wird, z.B. als einzeiliges Eingabefeld, mehrzeiliges Textfeld oder als Checkbox. Andererseits erkennt das System durch die Auswahl eines Typs, welche Informationen vom Kunden eingetragen wurden, z.B. E-Mail-Adresse, Vorname, Nachname, Telefon. Dies ist für die Zuordnung der Informationen wichtig.
Breite (Pixel)	Die Breite des Datenfeldes in Pixeln eintragen.
Pflichtfeld	Die Einstellung JA wählen, um ein Datenfeld als Pflichtfeld zu kennzeichnen. Pflichtfelder werden im Formular durch Fettschrift hervorgehoben.

E-Mail-Adresse in Formularen

Wenn Sie ein Feld E-Mail-Adresse in ein Formular einfügen, wählen Sie als Typ die Option Textfeld E-Mail-Adresse. Dies ist insbesondere auch für die korrekte Zuordnung im Ticketsystem wichtig.

4.3.3. Formular ändern

Um die Einstellungen eines bereits gespeicherten Formulars zu ändern, gehen Sie wie im Folgenden beschrieben vor.

Formular ändern:

Öffnen Sie das Menü System » CMS » Formulare.
Wählen Sie das Formular, das Sie ändern möchten, aus der Übersicht FORMULARE.
Nehmen Sie die gewünschten Änderungen gemäß Tabelle 1 vor.
Speichern Sie die Einstellungen.

Nach Änderungen Kategorie speichern

Wenn Sie das geänderte Formular in einer Kategorie verwenden, müssen Sie auch die Kategorie einmal speichern, damit die geänderten Inhalte aktualisiert werden.

4.3.4. Formular in eine Kategorie einbinden

Formulare werden in zwei Schritten in eine Kategorie eingebunden. Erstens ermitteln Sie die ID des gewünschten Formulars. Zweitens binden Sie den korrekten Platzhalter und Code in die Kategorie ein. Gehen Sie dazu wie folgt vor.

ID des Formulars ermitteln

Ein Formular wird über die Template-Variable {% Form(X) %} in eine Kategorie eingebunden. Ersetzen Sie dabei X durch die ID des Formulars.

ID des Formulars ermitteln:

Öffnen Sie das Menü System » CMS » Formulare.
Wählen Sie das Formular, das Sie ändern möchten, aus der Übersicht FORMULARE.
Die ID finden Sie in der Zeile ID.

Template-Variable und Code einbinden

Mit einer IF-/ELSE-Abfrage können Sie nach Absenden des Formulars einstellen, dass z. B. die Meldung "Vielen Dank für Ihre Nachricht" angezeigt wird. Es folgt ein Beispiel-Code, der diese Meldung beinhaltet:

<p>
{% if !$ActionPositivResult %}</p>
<h1>
Kontakt</h1>
<p>
Nehmen Sie Kontakt auf, wir werden Ihre Anfrage umgehend bearbeiten.</p>
<p>
<span>{</span>% Form(X) %}</p>
<p>
{% else %}</p>
<h1>
Vielen Dank für Ihre Nachricht.</h1>
<p>
{% endif %}</p>

Formular und Code einbinden:

Öffnen Sie das Menü Artikel » Kategorien.
Wählen Sie in der Dropdown-Liste Sprache die gewünschte Sprache aus, z. B. Deutsch.
Öffnen Sie nun die gewünschte Kategorie.
Kopieren Sie den oben angegebenen Code und fügen Sie den Code an der gewünschten Stelle ein.
Suchen Sie die Template-Variable {% Form(X) %} und ersetzen Sie X durch die ID des Formulars.
Speichern Sie die Einstellungen.

4.3.5. Formulare in weiteren Sprachen anlegen und verknüpfen

Legen Sie Formulare für jede Sprache Ihres Webshop an. Verknüpfen Sie die Formulare mit der Sprachversion der gewünschten Kategorie.

Formular in weiterer Sprache anlegen:

Öffnen Sie das Menü System » CMS » Formulare.
Nehmen Sie die Einstellungen gemäß Tabelle 1 vor.
→ Tragen Sie die Feldnamen in der gewünschten Sprache ein, z. B. Englisch.
→ Tragen Sie in das Feld Formularname einen Namen ein, an dem Sie die Sprache des Formulars erkennen.
Speichern Sie die Einstellungen.

Formular in weiterer Sprache einbinden:

Öffnen Sie das Menü Artikel » Kategorien.
Wählen Sie in der Dropdown-Liste Sprache die gewünschte Sprache, z. B. Englisch.
Öffnen Sie nun die gewünschte Kategorie.
Kopieren Sie den Code und fügen Sie den Code an der gewünschten Stelle ein.
→ Übersetzen Sie den gezeigten Text in die gewünschte Sprache.
Suchen Sie die Template-Variable {% Form(X) %} und ersetzen Sie X durch die ID des Formulars.
Speichern Sie die Einstellungen.

4.4. RSS

System » CMS » RSS

4.4.1. RSS

RSS (Really Simple Syndication, zu deutsch etwa "wirklich einfache Verbreitung") ist ein elektronisches Nachrichtenformat. RSS ermöglicht das Abonnieren von Inhalten einer Website als sogenannte RSS-Feeds. RSS ist ein Service, der ähnlich einem Nachrichtenticker die Überschriften mit einem kurzen Textanriss und einen Link zur Originalseite enthält. Weitere Informationen zur Technologie RSS finden Sie z.B. bei Wikipedia oder unter http://www.techfacts.de/rss-was-genau-ist-das-eigentlich.

Mit plentymarkets können Sie RSS-Feeds erzeugen. Sie können Ihren Besuchern so die neusten Artikel, Sonderangebote oder überarbeitete Content-Seiten als RSS-Feed bzw. Abonnement anbieten. Weiterhin werden RSS-Feeds von Suchmaschinen gut verarbeitet und die Inhalte ausgewertet.

4.4.2. Einen RSS-Feed anlegen

Im Menü System » CMS » RSS können Sie RSS-Feeds anlegen, welche automatisch aktualisiert werden, wenn sie aufgerufen werden, und jeweils eine Stunde gültig sind. Danach werden die RSS-Feeds beim nächsten Aufruf aktualisiert.

Bild 2. Neuen RSS-Feed anlegen

Neuen RSS anlegen:

Öffnen Sie das Menü System » CMS » RSS.
Klicken Sie auf das Tab Neuer RSS-Feed.
Nehmen Sie die Einträge und Einstellungen gemäß Bild 2 vor.
Speichern Sie die Einstellungen.

Bild 3. RSS-Feed bearbeiten

Die folgende Tabelle erläutert die Einstellungen im Menü System » CMS » RSS:

Tabelle 2. Optionen zu **RSS-Feeds**
Einstellung	Erläuterung
Inhalt	Wählen, welche Artikel bzw. Kategorieseiten täglich als RSS angeboten werden sollen.
Mandant	Den entsprechenden Webshop bzw. Mandant (Shop) wählen.
Titel	Einen Titel angegeben, der später auch als Name des Lesezeichens im Browser verwendet wird.
Kurze Beschreibung	Eine kurze Beschreibung des Angebots oder der Seite im Allgemeinen eingeben.
Titel Präfix	Wird dem Artikelnamen bzw. dem Namen der Kategorieseite vorangestellt.
Anzahl	Die Anzahl der Artikel, Kategorieseiten oder Blog-Beiträge wählen, die im RSS bereitgestellt werden sollen. Möglich sind 5, 10, 15 oder 20.
Sprache	Die zutreffende Sprache wählen.
Absolute URL	Die absolute URL des RSS-Feeds. Die URL erscheint erst, nachdem ein neuer RSS-Feed gespeichert wurde.
Relative URL	Die relative URL des RSS-Feeds. Die URL erscheint erst, nachdem ein neuer RSS-Feed gespeichert wurde.

4.4.3. RSS-Feed in Webseite einbauen

Nachdem ein RSS-Feed über das Tab Neuer RSS-Feed erstellt wurde, liegt dieser RSS-Feed unter einer statischen URL vor. Diese URL wird in den Optionen des jeweiligen RSS-Feeds im Tab RSS-Feeds angezeigt.

+ Ein RSS-Feed kann auf zwei Arten in eine Webseite eingebaut werden. Zum einen können Sie einen Link, der direkt auf die URL des RSS-Feeds verweist, z.B. in eine Kategorie einfügen. Alternativ dazu können Sie dem Internetbrowser direkt mitgeteilen, dass für diese Webseite ein RSS-Feed zur Verfügung steht.

+ Um dem Internetbrowser direkt mitzuteilen, dass ein RSS-Feed für diese Webseite verfügbar ist, müssen Sie das Seitenlayout der Webseite ändern.

RSS-Feed in die Website einbauen:

Öffnen Sie das Menü CMS » Webdesign.
Öffnen Sie im linken Bereich unter Layout im Ordner PageDesign das Template PageDesignContent.
Fügen Sie am Ende des Bearbeitungsfensters PageDesignContentMainFrame den nachfolgenden HTML-Code ein. Passen Sie dann Titel und URL des Codes entsprechend an.

<link href="//www.IHR-SHOP.de/?ActionCall=WebActionRSS&rss_id=1" rel="alternate" title="RSS-Feed" type="application/rss+xml" /><link href="//www.IHR-SHOP.de/?ActionCall=WebActionRSS&rss_id=1" rel="alternate" title="RSS-Feed" type="application/rss+xml" />

Sobald diese Änderung korrekt durchgeführt und gespeichert wurde, kann der Besucher direkt den RSS-Feed abonnieren und lesen.

4.4.4. RSS-Feed-Icon im Layout einfügen

Gehen wie nachfolgend beschrieben vor, um ein Icon für Ihren RSS-Feed in Ihrem Webshop einfügen.

RSS-Feed-Icon im Layout einfügen:

Öffnen Sie das Menü CMS » Webspace » layout » Ihr aktives Layout » images.
Klicken Sie auf den Button Dateien hochladen und wählen Sie den Speicherort des Icon.
Wählen Sie die gewünschten Bilder der Icons und klicken Sie auf Öffnen. Alternativ können Sie die Bilder auch per Drag-and-Drop-Funktion in den Ordner einfügen.
→ Das Bild wird hochgeladen.
Öffnen Sie das hochgeladene Bild.
Notieren Sie sich die URL, z.B. /layout/testdesign/images/RSS-Icon.png.
Öffnen Sie das Menü CMS » Webdesign.
Wählen Sie in der Dropdown-Liste Sprache die Sprache des Designs, das Sie bearbeiten möchten, z.B. Deutsch.
Wählen Sie unter Layout und dort im Ordner PageDesign das Template PageDesignContent.
→ Das Template wird in der gewählten Sprache geöffnet.
Fügen Sie den Link-Platzhalter für das Icon an der gewünschten Stelle im Layout ein (siehe Beispiel unten).
Klicken Sie auf Speichern, um Ihre Einstellungen zu sichern.
→ Das Icon wird im deutschsprachigen Webshop angezeigt.

Beispiel:

<a href="/?ActionCall=WebActionRSS&rss_id=2" title="Abonnieren Sie unseren RSS-Feed"><img alt="RSS öffnen" class="pmManScreenshot" src="/layout/machart_studios/images/RSS-Icon.png" />

Bild 4 zeigt ein Beispiel für die Darstellung des RSS-Icon im Webshop.

Bild 4. RSS-Icon im Webshop

4.5. Artikel-Galerie

Im Menü System » CMS » Artikel-Galerie erstellen Sie Artikel-Galerien. Mit Artikel-Galerien präsentieren Sie in Ihrem Webshop Artikel in einer Galerieansicht. Ihre Kunden sehen dann z.B. die neuesten Artikel oder Ihre Top-Artikel. Per Klick öffnen Sie den dargestellten Artikel. Wenn Kunden mit dem Mauszeiger auf ein Artikelbild zeigen, wird dieses Bild leicht vergrößert. Wenn für einen Artikel mehrere Artikelbilder hinterlegt sind, wird das Artikelbild mit der höchsten Priorität angezeigt.

4.5.1. Artikel-Galerie erstellen

Keine Galerieansicht in gesperrten Webshops

In gesperrten Webshops werden Galerieansichten nicht geladen.

Gehen Sie wie unten beschrieben vor, um eine Artikel-Galerie zu erstellen.

Neue Artikel-Galerie erstellen:

Öffnen Sie das Menü System » CMS » Artikel-Galerie.
Klicken Sie auf das Tab Neue Artikel-Galerie.
Nehmen Sie die Einstellungen gemäß Tabelle 3 vor.
Speichern Sie die Einstellungen.

Tabelle 3. Optionen im Tab **Neue Artikel-Galerie**
Einstellung	Erläuterung
Auswahl	Wählen, welche Artikel in der Galerie angezeigt werden sollen.
Artikel-ID-Liste	Bei Wahl der Option Manuelle Auswahl die IDs der gewünschten Artikel durch Kommas getrennt ohne Leerzeichen eintragen.
Mandant	Den Webshop oder Mandanten wählen, in dem die Artikel-Galerie angezeigt werden soll.
Anzahl	Die Anzahl der Artikel wählen, die in der Artikel-Galerie angezeigt werden sollen.

Zeitliche Verzögerung

Wenn Sie Artikelbilder ändern oder Bilder zu einem Artikel hinzufügen, stehen diese Bilder erst nach ca. 1 Stunde in der Artikel-Galerie zur Verfügung.

4.5.2. Flash-Galerie erstellen

Die Einstellungen für eine Flash-Galerie nehmen Sie im Menü Artikel-Galerie im Tab Neue Flash-Galerie vor. Es muss jedoch mindestens eine Artikel-Galerie angelegt sein, bevor Sie eine Flash-Galerie anlegen können, da eine Datenquelle erforderlich ist, aus der die Artikelbilder geladen werden (Tabelle 4).

Neue Flash-Galerie erstellen:

Öffnen Sie das Menü System » CMS » Artikel-Galerie.
Klicken Sie auf das Tab Neue Flash-Galerie.
Nehmen Sie die Einstellungen gemäß Tabelle 4 vor.
Speichern Sie die Einstellungen.

Tabelle 4. Optionen im Tab **Neue Flash-Galerie**
Einstellung	Erläuterung
Name	Name für die Flash-Galerie eintragen.
Datenquelle	Datenquelle aus der Dropdown-Liste wählen. Hier stehen die angelegten Artikel-Galerien zur Verfügung. Diese Artikel-Galerien dienen als Basis für die Flash-Galerie.
Farbverlauf	Hexadezimalwerte für den Farbverlauf eintragen. Der Farbverlauf beginnt oben und verläuft nach unten.
Schriftfarbe	Hexadezimalwert für die Schriftfarbe eintragen.
Schriftgröße; Schriftausrichtung; Schriftschnitt	Wert aus der Dropdown-Liste wählen.
Textabstand zum Bild	Abstand zwischen Artikelnamen und Artikelbild festlegen.
Abstand zwischen Bildern	Abstand zwischen den Artikelbildern festlegen. Tipp: Wenn der Abstand unterschiedlich ausfällt, die Größen der Artikelbilder in den Artikeleinstellungen prüfen. Die Größe der Artikelbilder sollte möglichst identisch sein, da die Abstände sonst möglicherweise nicht symmetrisch sind.
Maximale Bildbreite	Maximale Bildbreite für die angezeigten Artikelbilder in Pixeln festlegen.
Maximale Bildhöhe	Maximale Bildhöhe für die angezeigten Artikelbilder in Pixeln festlegen.
Bildposition	Wert in Pixeln eintragen, der sich aus der maximalen Bildhöhe plus dem gewünschten Mindestabstand zwischen Bild und oberem Rand der Galerie errechnet.
Breite der Galerie	Breite der Galerie in Pixeln wählen.
Höhe der Galerie	Höhe der Galerie in Pixeln wählen.
Quelltextkonstante	Wählen, in welche CMS-Konstante im Menü CMS » Konstanten der Quelltext der Flash-Galerie eingefügt werden soll. Vor Wahl der CMS-Konstante prüfen, dass die CMS-Konstante unbelegt ist.

4.5.3. Artikel-Galerie in Webshop einbinden

Die Artikel-Galerie fügen Sie nun über die CMS-Konstante, die Sie bei der Option Quelltextkonstante gewählt haben, in Ihren Webshop ein. Die CMS-Konstante kann sowohl in Kategorien als auch in Templates eingefügt werden. Unten wird beschrieben, wie Sie die CMS-Konstante in die Kategorie einfügen, die Ihre Startseite enthält.

Artikel-Galerie in das Design Ihres Webshops einfügen:

Öffnen Sie das Menü Artikel » Kategorien.
Öffnen Sie die Kategorie Ihrer Startseite.
Fügen Sie die CMS-Konstante an einer geeigneten Position in die Kategorie ein.
Fügen Sie optional eine Überschrift vor der CMS-Konstante ein und formatieren Sie sie.
Speichern Sie die Einstellungen.

5. Webdesign

CMS » Webdesign

5.1. Video-Tutorials

5.2. Benutzeroberfläche

Diese Seite bietet einen Überblick über die Elemente zur Verwaltung und Bearbeitung Ihres Webshop-Designs im Menü CMS » Webdesign. In den Unterkapiteln gehen wir auf einige der Elemente und Bereiche genauer ein.

5.2.1. Übersicht der Benutzeroberfläche

In diesem Kapitel erhalten Sie eine schnelle Übersicht, damit Sie sich im Menü CMS » Webdesign orientieren können und wissen, welche Elemente zur Bearbeitung Ihres Designs verfügbar sind. Das Kapitel soll Ihnen als Hilfe dienen, die Sie immer wieder zur Orientierung verwenden können. Die einzelnen Elemente und Bereiche werden in den Kapiteln danach genauer erklärt.

Bild 5. Menü Webdesign

Die folgende Tabelle erläutert die Elemente und Bereiche des Menüs CMS » Webdesign:

Tabelle 5. Übersicht: Webdesign konfigurieren
Pos.	Funktion	Erläuterung
1	Design wählen	Das Design aus der Dropdown-Liste wählen. Damit das gewählte Design im Webshop aktiv wird, auf das Zahnrad klicken und den gewünschten Mandant (Shop) wählen. Ein aktives Design ist an der grünen Farbe des Designnamens erkennbar. Bei aktiven Designs wird ein Tooltip mit den verknüpften Mandanten angezeigt.
2	Sprache	Die Sprache für das Design aus der Dropdown-Liste wählen.
3	Auswahl merken	Bei aktiver Funktion (Häkchen gesetzt) merkt sich das System die vom Benutzer zuletzt gewählte Kombination aus Design und Sprache. Bei erneutem Login oder Reload des Menüs wird diese Kombination automatisch wieder eingestellt. Dies ist z.B. sinnvoll, wenn Benutzer eine andere Kombination aus Design und Sprache bearbeiten möchten, als im System aktiv ist.
4	Verwaltungsfunktionen	Hier ein Schnellüberblick über die Verwaltungsfunktionen. Diese Funktionen werden auf der Handbuchseite Webdesign bearbeiten detailliert erläutert. Folgende Funktionen sind konfigurierbar: Einstellungen = Auswahl des Mandant (Shop) und des Bilder-Ordners. Vorschau = Ermöglicht eine Ansicht des Webshops mit dem gewählten Design, ohne das Design zu aktivieren. Die Vorschau ermöglicht auch die Kontrolle bei Anpassungen am Design. Bedingung für eine Vorschau ist die Wahl eines Mandant (Shop) in den Einstellungen. Inline Edit Vorschau = Ermöglicht es, den Code des betreffenden Templates direkt im Frontend des Onlineshops zu bearbeiten. Design veröffentlichen = Aktiviert ein gewähltes Design oder aktualisiert die Dateien des Designs nach Änderungen. Neues Design anlegen = Legt ein neues Design auf Basis eines bestehenden Designs an. Design übertragen = Legt eine Kopie des Design an. Empfohlen, bevor Sie Änderungen vornehmen. Besonders wichtig, wenn das Standard-Design modifiziert werden soll. Design exportieren = Ein Design oder bestimmte Eigenschaften eines Designs exportieren. Design importieren = Ein Standard-Design importieren. Dieses wird dann in der Dropdown-Liste angezeigt. Dropbox: Design exportieren/importieren = Design zur Dropbox exportieren bzw. aus der Dropbox importieren. Einzelne, mehrere Design-Bereiche oder das gesamte Design sind in einer oder allen Sprachen exportierbar. Der Import aus der Dropbox in plentymarkets ist für alle Templates oder nur geänderte Templates eines Designs möglich. Design löschen = Ein in der Dropdown-Liste gewähltes Design löschen. Mit der Option Design löschen wird das Design mit allen Sprachvarianten gelöscht. Mit der Option Ausgewählte Sprache löschen wird nur das Design der gewählten Sprache gelöscht. Ist das betreffende Design in einer weiteren Sprache vorhanden, muss diese Variante, wenn gewünscht, anschließend mit der entsprechenden Spracheinstellung gelöscht werden.
5	Suchfunktion	Templates per Suchfunktion finden.
6	Ordner	Struktur der Templates; Ordner sind an einem Ordnersymbol, Templates an einem Seitensymbol zu erkennen.
7	Speicherhinweis	Die rote Markierung im Tab-Titel zeigt an, dass Änderungen am Template vorgenommen und noch nicht gespeichert wurden. Wichtig: Speichern Sie das Template, damit Ihre Anpassungen nicht verloren gehen.
8	Templates bearbeiten	Folgende Funktionen stehen in diesem Bereich für die Anzeige und Bearbeitung der Templates zur Verfügung: Speichern = Template nach Änderungen speichern. Template-Variablen und -Funktionen = Öffnet eine Übersicht mit den Template-Variablen und Template-Funktionen. Template übertragen = Inhalt des jeweiligen Templates in eine andere Sprachvariante übertragen. Editor vergrößern = Öffnet den Editierbereich des Templates in einem größeren Fenster. Fenster schließen, nachdem Änderungen vorgenommen wurden. Dann in der normalen Ansicht auf Speichern klicken, um die Änderungen zu speichern.
9	Editor-Einstellungen	Folgende Einstellungen sind für den Syntax-Editor aktivierbar; Häkchen setzen = aktiv: Zeige Steuerzeichen = Steuerzeichen im Quellcode des Syntax-Editor anzeigen. Leerzeichen statt Tabs = Statt eines Tabulators werden bei aktiver Funktion im Syntax-Editor mehrere Leerzeichen eingefügt. Vorhandene Tabulatorformatierungen werden nicht verändert.
10	Editor	Folgende Optionen sind verfügbar: Syntax-Editor = Code wird mit farblich hervorgehobener Syntaxstruktur angezeigt. Textfeld = Code wird als reiner Text angezeigt.
11	Unbenutzt	Im Ordner Unbenutzt werden Templates ohne Inhalt automatische durch das System abgelegt.

5.2.2. Wichtige Funktionen im Detail

In diesem Kapitel werden einige Funktionen der Designverwaltung genauer beschrieben.

Suchfunktion

Die Suchfunktion hilft Ihnen, ein Template schnell zu finden. Geben Sie die gesuchte Bezeichnung des Templates in das Textfeld ein (Bild 6, roter Pfeil). Bereits während der Eingabe werden die Suchergebnisse angezeigt.

Bild 6. Suchfunktion

Variablen-Suche

Auch für Template-Variablen und Template-Funktionen steht eine Suchfunktion zur Verfügung.

Template übertragen

Jedes Template ist in eine Sprachvariante des Designs übertragbar. Dabei wird der Code in das Template der Sprache kopiert. Im Beispiel in Bild 7 wird der Inhalt des Templates PageDesignContent in die englische Variante des Designs testtest_green übertragen.

Bild 7. Template übertragen

Template übertragen:

Öffnen Sie das Menü CMS » Webdesign.
Öffnen Sie das Template, dessen Inhalt Sie in eine andere Sprachvariante übertragen möchten.
Klicken Sie auf Template übertragen (Bild 7, Pos. 1).
→ Ein Bearbeitungsfenster wird geöffnet.
Prüfen Sie ggf. das eingestellte Design.
Wählen Sie unter Sprache die Sprache (Bild 7, Pos. 2), auf die der Inhalt des Templates übertragen werden soll (Mehrfachauswahl ist möglich).
Klicken Sie auf Template übertragen (Bild 7, Pos. 3).

Um das Template der Sprache anzuzeigen, wählen Sie das Design und dann über die Dropdown-Liste Sprache (Bild 5, Pos. 2) die Sprache, in die das Template übertragen wurde.

5.3. Syntax

CMS » Webdesign

5.3.1. Inhalt dieses Kapitels

Auf den folgenden Handbuchseiten erhalten Sie erste grundlegende Informationen zu Struktur, Codierung und Syntax der Inhalte Ihres Webshops. Sie erfahren, wie die verschiedenen Elemente aufgebaut sind und wie Sie die Elemente verändern können. Die meisten Strukturen sind im Standard-Design (d.h. der Grundkonfiguration bei Start Ihres Webshops) in plentymarkets bereits vorhanden und konfiguriert. Die Erläuterungen dieser Seiten sollen Ihnen helfen, diese Strukturen zu verstehen und anzupassen. Dazu sind gewisse Grundkenntnisse im Bereich Webdesign nötig. Alternativ sollten Sie gewünschte Anpassungen von einer Agentur vornehmen lassen.

Beachten Sie die folgenden Erläuterungen zu den Handbuchseiten dieses Bereichs sowie die Seite Webdesign bearbeiten, die weitere Hinweise zur Gestaltung Ihres Onlineshops enthält.

Für die Bearbeitung eines Webdesigns sind erweiterte Kenntnisse in den Bereichen HTML und CSS nötig. Auf der folgenden Seite finden Sie Informationen über HTML und CSS zum Selbststudium: selfhtml.

5.3.2. CMS-Syntax

Für die Realisierung eines Webdesigns im plentymarkets CMS ist eine eigene Skriptsprache verfügbar. Im Kapitel CMS-Syntax erhalten Sie eine Übersicht aller Möglichkeiten der Gestaltung. Sie finden dort außerdem Erläuterungen zu den Template-Variablen und -Funktionen sowie zu Operatoren und Kontrollstrukturen.

5.3.3. jQuery

jQuery ist eine umfangreiche JavaScript-Klassenbibliothek, die komfortable Funktionen zur Manipulation und Navigation Ihrer Website anbietet. Informationen dazu finden Sie auf der Handbuchseite jQuery.

5.3.4. Listendarstellung

CMS » Webdesign

Inhalt dieser Seite

Ein Webshop benötigt verschiedene Ansichten zur Darstellung von Übersichten, z.B. von Artikeln. Auf dieser Seite erhalten Sie grundlegende Informationen zu Struktur und Aufbau von Listen im Webdesign.

Artikellisten

Wenn ein Besucher auf eine Kategorie klickt, sollen z.B. die entsprechenden Artikel der Kategorie in einer Übersicht gezeigt werden. Dazu werden Listen verwendet. Die Ansicht für den genannten Fall, die Artikelliste, wird beispielsweise durch das Template ItemViewCategoriesList erzeugt. Die Artikel werden nach Anklicken einer Kategorie angezeigt. Die Artikelliste enthält wiederum die jeweiligen Artikelansichten, die mit dem Template ItemView umgesetzt werden, in denen dann u.a. größere Artikelbilder und die komplette Artikelbeschreibung angezeigt werden. Schließlich darf die Ausgabe einer Artikelsuche nicht fehlen. Diese erfolgt ebenfalls in Listenform mit dem Template ItemViewSearchResultsList.

Das folgende Bild zeigt das Prinzip des Templates ItemViewCategoriesList, das die Kategorien im Webshop anzeigt.

Bild 8. Prinzip des Templates ItemViewCategoriesList

Der Aufbau besteht aus Reihen – in Bild 8 ItemViewCategoriesListRow – und Artikeln – in Bild 8 ItemViewCategoriesListItem. Die Anzahl der Artikel pro Reihe ist im Tab Einstellungen des Templates mit der Option ItemViewCategoriesList_EachRow konfigurierbar.

Zusätzliche Konfigurationen im Code

Zur Darstellung der Artikel pro Reihe sind weitere Konfigurationen im Code nötig. Beachten Sie dazu das folgende Beispiel in Kapitel 2.1.

Zu vielen Artikelansichten stehen mehrere Template-Varianten zur Verfügung. So ist es möglich, eine Artikelliste in verschiedenen Bereichen des Webshops unterschiedlich darzustellen. Sie können die Varianten anhand ihrer Nummerierung am Ende des Namens unterscheiden. Beispiel: ItemViewCategoriesList, ItemViewCategoriesList2, ItemViewCategoriesList3 etc.

Beispiel: ItemViewCategoriesList

Das Template ItemViewCategoriesList erzeugt eine Artikelliste bei Auswahl einer Kategorie im Webshop. Das Ergebnis wird als Artikelliste angezeigt. Dabei wird im Tab Einstellungen des Templates festgelegt, wie viele Artikel pro Zeile und Seite angezeigt werden.

Bild 9. Template-Code ItemViewCategoriesList

Wie oben beschrieben und in Bild 8 als Schema dargestellt besteht der Aufbau aus Reihen – hier im Beispiel ist das der Code ItemViewCategoriesListRow – und Artikeln – hier ItemViewCategoriesListItem. Die Anzahl der Artikel pro Reihe ist im Tab Einstellungen des Templates mit der Option ItemViewCategoriesList_EachRow konfigurierbar. Die Anzahl der Artikel pro Seite wird mit der Option ItemViewCategoriesList_Page festgelegt.

5.3.5. Seitenaufbau

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:

DE CMS Webdesign Grundlagen Seitenaufbau 01 SI

Bild 10. 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 10 dargestellten Templates im Menü Webdesign angeordnet sind und wo sich die Template-Variable $MainFrame befindet. Bild 10 und Bild 11 sollen Ihnen dabei das Verständnis erleichtern.

DE CMS Webdesign Grundlagen Seitenaufbau 02 SI

Bild 11. Anordnung des 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 11). 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:

Tabelle 6. Elemente des Tabs **PageDesignContentHtmlStructure**
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. Die Variable $MainFrame wird nachfolgend ebenfalls erläutert.
$HtmlBodyOverlays	Hier werden Overlays umgesetzt, z.B. eine spezielle Warenkorbansicht.

PageDesignContentMainFrame

Die meisten der seitlich sowie im Kopfbereich einer Seite angeordneten Bereiche sind statische Inhalte. Sie ändern weder Form noch Größe und werden immer an derselben Stelle angezeigt. Die statischen Inhalte 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 11). Der sehr vereinfachte Code sieht folgendermaßen aus:

PageDesignContentMainFrame

<section class="mainContent">
$MainFrame
</section>

</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.

Tabelle 7. Elemente des Tabs **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.

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.

DE CMS Webdesign Grundlagen Seitenaufbau 03 SI

Bild 12. 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.

PageDesign

5.3.6. jQuery

CMS » Webdesign

Inhalt dieser Seite

Auf dieser Seite erhalten Sie Informationen zu jQuery.

Wichtiges zu 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.

Vor Einbindung prüfen!

Kompatibilität

Sollten Sie beabsichtigen, mit anderen JavaScript-Klassenbibliotheken wie z.B. Prototype zu arbeiten, informieren Sie sich vorher über die Kompatiblität beider Bibliotheken und berücksichtigen Sie mögliche Konfliktpotentiale.

Bibliotheken

Binden Sie keine der genannten Bibliotheken in Ihrem Layout neu ein. Dies könnte unabsehbare Auswirkungen auf die Funktion der Bibliotheken haben.

Tutorial

Ein Tutorial zu jQuery finden Sie über den Link http://www.very-clever.com/jquery-tutorial.php.

5.4. Werkzeuge

CMS » Webdesign

5.4.1. Editor

plentymarkets enthält einen integrierten WYSIWYG-Editor. Sie können damit Texte und z.B. Tabellen in Content-Seiten direkt bearbeiten oder Formatierungen, wie z.B. Überschriften, Nummerierungen oder Listen, anwenden. Sie sehen bei diesem Editor direkt das Ergebnis. Sie können die Inhalte auch im Quellcode bearbeiten. Erfahren Sie mehr dazu auf der Handbuchseite Editor.

5.4.2. Syntax-Editor

Zur Bearbeitung von HTML-Inhalten, wie Artikelbeschreibungen, Templates und E-Mail-Vorlagen steht Ihnen neben dem bekannten Editor und dem herkömmlichen Textfeld der neue Syntax-Editor zur Verfügung. Vereinfacht gesagt ist dieser die professionelle Alternative zum Textfeld, da der Syntax-Editor neben Syntax-Highlighting weitere Funktionen mit sich bringt, die den Komfort und die Produktivität für die Bearbeitung von HTML enorm erhöhen. Details dazu erfahren Sie auf der Handbuchseite Syntax-Editor.

5.4.3. Editor

CMS » Webdesign

CMS-Editoren

In plentymarkets sind verschiedene Editoren zur Bearbeitung der Inhalte integriert. Mit dem Editor können Sie Texte und z.B. Tabellen in Kategorien direkt bearbeiten oder Formatierungen, wie z.B. Überschriften, Nummerierungen oder Listen anwenden. Sie sehen bei diesem Editor direkt das Ergebnis (WYSIWYG). Sie können die Inhalte bei diesem Editor auch im Quellcode bearbeiten. Alternativ steht der Editor Textfeld, ein HTML-Editor, zur Verfügung, mit dem Sie ausschließlich im HTML-Code arbeiten. Außerdem wurde noch der Syntax-Editor integriert, mit dem die Inhalte strukturiert und übersichtlich als Code angezeigt werden.

Wahl des Editors

Wir empfehlen, sich für eine Editor-Variante zu entscheiden. Bei Wechsel des Editors können andernfalls unerwünschte HTML-Elemente in Ihre Seiten oder z.B. Ihre Artikelbeschreibungen eingefügt werden. Dieser Effekt kann z.B. auftreten, wenn Sie einen Text mit dem Textfeld-Editor eintragen und dann zum Editor wechseln. Wenn Sie ganz sicher gehen wollen, deaktivieren Sie den Editor im Menü System » Einstellungen » Editoren.

Die Editoren kommen in den folgenden Bereichen zum Einsatz:

Artikelbeschreibung
Listingbeschreibung
Kategorien
Newsletter

Editor-Verfügbarkeit

Wenn Sie im Menü System » Einstellungen » Editoren für bestimmte Bereiche den Editor deaktiviert haben, steht der Editor in der Dropdown-Liste dieser Bereiche nicht zur Auswahl.

Der Editor

In plentymarkets wird der CKEditor, ein weit verbreiteter Webeditor, der auch professionellen Ansprüchen entspricht und vielfältige Funktionalitäten bereitstellt, eingesetzt. Sie können damit Kategorieseiten wie in einem Textverarbeitungsprogramm bearbeiten, auch wenn Sie nicht über Programmier- bzw. HTML-Kenntnisse verfügen. Allerdings sind solche Kenntnisse von Vorteil, da der Editor auch die Bearbeitung des Quelltextes ermöglicht und Sie darin z.B. unklare Formatierungen korrigieren oder Formatierungen einfügen können, die nicht über die Editorfunktionen zur Verfügung stehen.

Bild 13. Benutzeroberfläche des Editors

Allgemeine Informationen zur Erstellung und Konfiguration von Kategorien finden Sie auf der Handbuchseite Kategorien.

HTML-Editor

Mit der Einstellung Textfeld kommt der HTML-Editor zum Einsatz. Damit werden die Inhalte als HTML-Code bzw. CSS-Formatierung angezeigt.

Bild 14. Nur-Text bzw. HTML-Editor Textfeld

Systemvoraussetzungen

Über die korrekte Funktionsweise des Editors und die Verwendung entscheidet nicht so sehr das Betriebssystem, sondern der Webbrowser.

Systemvoraussetzungen

Beachten Sie bezüglich der Systemvorraussetzungen die Angaben auf der Webseite des Editors.

Bedienung

Die nachfolgenden Erläuterungen zeigen nur die wichtigsten Funktionen, die in der Praxis benötigt werden. Viele Funktionen sind zudem aus den einschlägigen Textverarbeitungsprogrammen bekannt und benötigen keine Erläuterung. Die Funktion der Buttons wird übrigens angezeigt, wenn Sie mit dem Mauszeiger darauf zeigen.

Je nach Browser zeigen manche Funktionen unterschiedliche Verhaltensweisen. Es kann auch zu browserspezifischen Einschränkungen oder ungewollten Effekten kommen. So wird z.B. in manchen Browsern die Formatierung geändert oder eine unerwünschte Formatierung eingefügt, wenn Sie Text kopieren oder einfügen. Sie erhalten auf dieser Seite Tipps zum Umgang mit diesen Funktionen.

Funktionsübersicht

Nachfolgend erhalten Sie grundlegende Informationen zu den Funktionen des Editors.

Bild 15. Übersicht über die Funktionen des Editors

Die folgende Tabelle erläutert die Funktionen des Editors im Detail.

Tabelle 8. Die Funktionen des Editors im Detail
Pos.	Einstellung	Erläuterung
1	Editor	Den gewünschten Editor aus der Dropdown-Liste wählen: Editor = Der WYSIWYG-Editor CKEditor Textfeld = HTML-Editor Textarea oder den Syntax-Editor = Beachten Sie dazu das Kapitel 1 dieser Seite.
2	Format	Ein Format für eine Überschrift, den Fließtext etc. wählen durch Setzen des Cursors in eine Zeile und Wahl des gewünschten Formates. Bei der Strukturierung der Überschriften eine sinnvolle Reihenfolge festlegen, was besonders wichtig ist, wenn eine automatische Nummerierungsfunktion verwendet wird. Aus Gründen der Übersichtlichkeit für den Fließtext nur mit einer Standard-Schriftgröße arbeiten und Überschriften durch Auswahl der entsprechenden Absatzformatierung (Heading 1-4) formatieren.
3	Schriftschnitt	Den Schnitt, die Farbe und die Ausrichtung von Texten oder einzelnen Worten anpassen.
4	Text unformatiert einfügen	Über ein Textfenster Texte unformatiert in die Seite einfügen, der sich nach Klick auf den Button öffnet. Text dann bei Bedarf noch anpassen. Nach Klick auf OK wird der Text dann eingefügt.
5	Liste	Formatiert einen Text bzw. eine Zeile als Liste, d.h. es wird ein Blickpunkt eingefügt und die Zeile wird eingerückt.
6	Nummerierung	Formatiert einen Text bzw. eine Zeile als nummerierte Liste. Die Nummerierung wird automatisch vorgenommen, der Startwert und die Formatierung der Nummerierung kann ggf. auch angepasst werden. Dazu mit der rechten Maustaste in die betreffende Zeile klicken und dann die Option Nummerierte Listen-Eigenschaften wählen.
7	Einzug	Über diese Icons den Einzug eines Abschnitts erhöhen oder verringern.
8	Link einfügen	Öffnet das Fenster Link, in das Links eingefügt werden, z.B. eine Template-Funktion (siehe [bild-verlinkung-per-template]) oder eine URL, um damit auf das betreffende Ziel zu verlinken. .Verlinkung per Template-Funktion einfügen image::omni-channel/online-shop/webshop-einrichten/_cms/webdesign/werkzeuge/assets/DE-CMS-Webdesign-Werkzeuge-Editor-04-SI.png[] Konfiguration: Link-Typ = Art der Verlinkung, z.B. URL, die Einstellung wählen Sie z.B. auch für eine Template-Funktion. Ein Beispiel für einen Anker zeigt Pos. 13. Protokoll = Für die URL einer verschlüsselten Webseite z.B. https:// wählen. Für eine Template-Funktion die Einstellung andere wählen. URL = Die betreffende URL oder die Template-Funktion eintragen. Wichtig: Bei Einfügen der URL einer verschlüsselten Webseite sowie der Einstellung https:// für die Option Protocol wird dieser Präfix automatisch aus der URL entfernt.
9	Anker einfügen	Im Text einen Anker hinterlegen mit einer Nummer oder einem Namen. Über den Button Link einfügen wird der Anker verlinkt, z.B. in einer Überschrift, um dann von dieser Überschrift zu dem Anker zu springen. .Anker als Verlinkungsziel wählen image::omni-channel/online-shop/webshop-einrichten/_cms/webdesign/werkzeuge/assets/DE-CMS-Webdesign-Werkzeuge-Editor-05-SI.png[] Konfiguration: Link-Typ = Anker in dieser Seite wählen. Anker auswählen = Den betreffenden Anker entweder nach Name oder nach Id (ID) wählen.
10	Tabelle	Fügt eine Tabelle ein. Die Anzahl der Zeilen und Spalten ist wählbar, sowie einige weitere Formatierungen. Tipp: Alternativ eine Tabelle per HTML-Code im Quellcode bzw. über den Syntax-Editor einfügen.
11	Bild	Über dieses Icon werden Bilder wie unten beschrieben konfiguriert und in die Seite eingefügt. Ein neues Bild einfügen: den Cursor an die betreffende Stelle im Text setzen und auf dieses Icon klicken. Ein schon bestehendes Bild erneut bearbeiten: erst auf das Bild klicken und dann auf dieses Icon. Alternativ mit der rechten Maustaste auf das Bild klicken und die Option Bild-Eigenschaften auswählen. Wichtig: Um ein Bild einfügen zu können, muss das Bild zuvor auf den Server, in die Bilder-Galerie oder das Tab Dokumente einer Kategorie geladen werden und somit per URL erreichbar sein. Bilder können Sie über das Menü CMS » Bilder-Galerie bzw. über das Icon im CMS oder über Ihren FTP-Zugang auf den Server laden. .Bild-Eigenschaften konfigurieren image::omni-channel/online-shop/webshop-einrichten/_cms/webdesign/werkzeuge/assets/DE-CMS-Webdesign-Werkzeuge-Editor-06-SI.png[] Konfiguration: URL = Bild-URL einfügen. Diese sollte mit der relativen URL verknüpft werden, da bei Verwendung einer absoluten URL (vollständiger Pfad) das Bild bei Änderung des Domainnamens nicht mehr verfügbar wäre. Die URL können Sie aus der Bildergalerie oder aus dem Tab Dokumente durch Copy & Paste übernehmen. Schloss-Icon = Wenn das Schloss geöffnet ist, sind die Bilddaten nicht aktualisiert und es kann zu einer falschen Bilddarstellung kommen (Verzerrung). In diesem Fall auf das Reload-Icon klicken und dann auf das Schloss-Icon. Wenn das Schloss geschlossen bleibt, ist das Bild in Ordnung. Weitere Parameter = Wenn Sie z.B. die Breite und die Höhe des Bildes ändern möchten, wird das Schloss wieder geöffnet, weil die realen Daten den geänderten Werten nicht entsprechen. Sie können das im Bedarfsfall lassen, dürfen allerdings nicht auf das geöffnete Schloss-Icon klicken, da die Originalwerte dann bei Speichern wieder hergestellt werden.
12	Sonderzeichen	Hier stehen Sonderzeichen zur Verfügung, die ausgewählt und per Klick auf OK an der Cursorposition eingefügt werden.
13	Quellcode	Inhalte im Quellcode bearbeiten.
14	Rechtschreibprüfung	Rechtschreibprüfung ein- bzw. ausschalten.

Tastenkombination für Copy & Paste

Die folgende Tabelle erläutert die Möglichkeiten für Copy & Paste-Funktionen:

Tabelle 9. **Copy & Paste**-Funktionen
Funktion	Aktion
Kopieren	Strg (cmd) + C Kopiert einen markierten Text in die Zwischenablage.
Ausschneiden	Strg (cmd) + X Entfernt einen markierten Text aus der Seite und fügt ihn in die Zwischenablage ein.
Einfügen	Strg (cmd) + V Fügt einen markierten Text aus der Zwischenablage an der Cursorposition ein.

Text unformatiert einfügen

Wenn Sie Texte unformatiert einfügen möchten, verwenden Sie die folgende Tastenkombination beim Einfügen von Texten aus der Zwischenablage:

Tabelle 10. Tastenkombination für **unformatiert einfügen**
Funktion	Aktion
Text unformatiert einfügen	Umsch + Strg (cmd) + V

Zeilenvorschub / Neue Zeile

Wird bei der Texteingabe die Taste Enter zum Einfügen einer neuen Zeile gedrückt, beginnt der Editor dabei einen neuen Absatz. Je nach Seitenlayout wird zwischen Absätzen ein größerer Abstand angezeigt, als zwischen zwei Zeilen.
Soll nur eine Zeile eingefügt werden, dann drücken Sie bitte Umschalt bzw. Shift + Enter (= soft return).

Bei einem "großen" Zeilenumbruch mit Enter wird ein p-Tag mit Leerzeichencode eingefügt:

Bild 16. p-Tag mit Leerzeichencode

5.4.4. Syntax-Editor

CMS » Webdesign

CMS-Editoren

Ab der plentymarkets-Version 5.1 gibt es zur Bearbeitung von HTML-Inhalten wie Artikelbeschreibungen, Templates, Kategorien des Typs Content und E-Mail-Vorlagen neben dem bekannten Editor (CKEditor) und dem herkömmlichen Textfeld den neuen Syntax-Editor. Vereinfacht gesagt ist der Syntax-Editor die professionelle Alternative zum Textfeld, da der Syntax-Editor neben Syntax-Highlighting weitere Funktionen enthält, die den Komfort und die Produktivität bei der Bearbeitung von HTML-Inhalten enorm erhöhen.

Syntax-Editor-Verfügbarkeit

Wenn Sie im Menü System » Einstellungen » Editoren für bestimmte Bereiche den Syntax-Editor deaktiviert haben, steht der Syntax-Editor in der Dropdown-Liste dieser Bereiche nicht zur Auswahl.

Wer sollte den Syntax-Editor benutzen und warum?

Der Syntax-Editor ist für jeden Anwender das ideale Werkzeug, der Wert auf ein sauber strukturiertes HTML legt. Beim Bearbeiten von HTML-Inhalten mit dem Editor, wie anspruchsvolleren Kombinationen aus HTML und Template-Variablen und -Funktionen, kann es z.B. beim Einfügen von Inhalten zu ungewollten Veränderungen kommen. Außerdem kann die Formatierung verloren gehen oder verändert werden. Der Editor liefert im Gegenzug valides HTML, um dessen Aufbau man sich nicht weiter kümmern braucht. Er ist daher für Anwendungsfälle gedacht, bei denen die HTML-Struktur nicht weiter wichtig ist, nicht ausreichend Fachwissen durch den Anwender vorhanden ist oder man sich schlicht nicht mit der Komplexität von HTML beschäftigen möchte.

Wer bisher Wert auf Detailtreue bei der Wiedergabe und dem Speichern von HTML-Inhalten gelegt hat, musste bis plentymarkets 5.0 mit dem Textfeld arbeiten. Das waren vor allem Agenturen, Webdesigner, Webentwickler und Benutzer, die sich Fachwissen angeeignet haben. Diese Anwender werden den neuen Syntax-Editor begrüßen.

Funktionen

Nachfolgend erhalten Sie eine Übersicht der Kern-Funktionen, die dann im Folgenden genauer erklärt werden.

Übersicht

Der Syntax-Editor bietet die folgenden Features:

Syntax-Highlighting
Einfache Strukturierung
Rückgängig machen und wiederholen
Suchen und Ersetzen
Kopieren / Duplizieren von Zeilen und Code-Blöcken
Verschieben von Zeilen und Code-Blöcken
Einfaches Aus- und Einkommentieren von Code-Blöcken
Multi-Cursor (gleichzeitiges Schreiben an mehreren Stellen gleichzeitig)
Code-Generierung mit Emmet
Viele helfende Tastenkombinationen

Syntax-Highlighting

HTML wird schlechter lesbar, je mehr Sie davon schreiben. Syntax-Highlighting hilft dabei, den Überblick zu behalten, indem Tags und Attribute verschiedenfarbig dargestellt werden.

DE CMS Webdesign Werkzeuge Syntax Editor 01 SI

Bild 17. Syntax-Highlighting durch den Syntax-Editor

Strukturierung

Die Codestruktur lässt sich einfacher erkennen und bearbeiten, wenn man bestimmte Teile des Codes mit der Tab-Taste ein- oder ausrückt. Es ist möglich, mehrere Zeilen auszuwählen und gleichzeitig ein- und auszurücken.

Tabelle 11. Code **ein**- oder **ausrücken**
Funktion	Aktion
Einrücken	Tab-Taste
Ausrücken	Shift + Tab-Taste

Einstellung: Leerzeichen statt Tabs

Über das Zahnrad (Bild 17, links oben) können Sie wählen, ob anstelle von Tabs 4 Leerzeichen für Einrückungen eingefügt werden sollen.

Rückgängig machen und wiederholen

Jede Handlung kann - auch nach dem Speichern - rückgängig gemacht oder wiederholt werden.

Tabelle 12. Bearbeitungsschritte **rückgängig machen** oder **wiederholen**
Funktion	Aktion
Rückgängig	Strg (cmd) + Z
Wiederholen	Shift + Strg (cmd) + Z

Nicht bei Wechsel des Editors

Diese Funktion ist nur möglich, wenn Sie durchgehend mit dem Syntax-Editor arbeiten. Bei Wechsel zu einem anderen Editor sind gespeicherte Informationen bzw. Änderungen verloren.

Suchen

Die Suchfunktion ermöglicht die gezielte Textsuche, wobei die Ergebnisse farblich hervorgehoben werden. Ein roter Rahmen um das Suchfeld zeigt an, dass es zu einer Sucheingabe kein Ergebnis gibt.

DE CMS Webdesign Werkzeuge Syntax Editor 02 SI

Bild 18. Suchfunktion im Syntax-Editor

Die folgende Tabelle erläutert die Suchfunktionen des Syntax-Editors:

Tabelle 13. Bearbeitungsschritte **Suchen**, **Weitersuchen** oder **Suche schließen**
Funktion	Aktion
Suchen	Strg (cmd) + F
Weitersuchen	Enter-Taste drücken oder im Suchfenster den Pfeil nach unten klicken
Rückwärts suchen	Shift + Enter drücken oder im Suchfenster den Pfeil nach oben klicken
Suche schließen	Esc-Taste oder im Suchfenster auf x klicken

Suchen und Ersetzen

Der Syntax-Editor bietet auch eine Ersetzen-Funktion. Damit können Sie Wörter oder Textteile und somit z.B. auch Formatierungen suchen und durch die gewünschte Ersetzung austauschen. Die Ersetzenfunktion rufen Sie aus der Suchfunktion auf.

DE CMS Webdesign Werkzeuge Syntax Editor 03 SI

Bild 19. Suchen und Ersetzen mit dem Syntax-Editor

Die folgende Tabelle enthält eine Übersicht der Funktionen, wobei sich die drei unteren Optionen auf die Icons unten rechts im Suchfenster beziehen:

Tabelle 14. **Suchen** und **Ersetzen** mit dem Syntax-Editor
Funktion	Aktion
Ersetzen-Funktion aufrufen	Strg (cmd) + F Bei geöffneter Suche nochmals eingeben oder 2 mal eingeben, wenn Suche nicht geöffnet ist
Suchwort eingeben	Die gesuchte Bezeichnung, den Textteil oder das gesuchte Element eingeben.
Ersetzen	Die Bezeichnung, den Textteil oder das Element eingeben, das die gefundenen Elemente ersetzen soll. Im Beispiel in Bild 19 werden strong-Formatierungen gesucht, die dann durch b-Formatierungen ersetzt werden sollen (= bold).
Replace	Durch Klick auf diesen Button wird nur das markierte Element ersetzt.
All	Durch Klick auf diesen Button werden alle Elemente der Seite oder des Textbereichs ersetzt.
.*	Suche mit regulärem Ausdruck: Es wird anhand eines regulären Ausdrucks gesucht. Kann sich beim Suchen und Ersetzen komplizierter Ausdrücke und großen Inhalten auszahlen. Für die normale Anwendung nicht geeignet.
Aa	Groß- und Kleinschreibung berücksichtigen: Es werden nur Begriffe gefunden, die der Groß- und Kleinschreibung exakt entsprechen.
\b	Ganzes Wort: Es wird nur das vollständige Wort gesucht und keine Textteile.

Kopieren von Zeilen und Blöcken

Die aktuelle Zeile oder die ausgewählten Zeilen können entweder verdoppelt werden oder nach oben oder unten kopiert werden.

Tabelle 15. Bearbeitungsschritte **Verdoppeln**, **Nach oben kopieren** oder **Nach unten kopieren**
Funktion	Aktion
Verdoppeln	Shift + Strg (cmd) + D
Nach oben kopieren	Alt + Strg (cmd) + Pfeiltaste nach unten
Nach unten kopieren	Alt + Strg (cmd) + Pfeiltaste nach oben

Verschieben von Zeilen und Blöcken

Die aktuelle Zeile oder die ausgewählten Zeilen können zeilenweise nach oben oder nach unten verschoben werden.

Tabelle 16. Bearbeitungsschritte **Nach oben verschieben** oder **Nach unten verschieben**
Funktion	Aktion
Nach oben verschieben	Alt + Pfeiltaste nach oben
Nach unten verschieben	Alt + Pfeiltaste nach unten

Auswahl aus- oder einkommentieren

Sie können eine Auswahl aus- oder einkommentieren.

Tabelle 17. Bearbeitungsschritte **Auskommentieren** oder **Einkommentieren**
Funktion	Aktion
Auskommentieren	Shift + Strg (cmd) + 7
Einkommentieren	Shift + Strg (cmd) + 7

Multi-Cursor

Text kann an mehreren Stellen gleichzeitig geschrieben, geändert oder gelöscht werden.

Emmet-Plugin

Emmet ist eine Syntax-Sprache, die CSS-ähnliche Anweisungen in HTML-Code übersetzt. Es können damit sowohl einfache, als auch komplexe HTML-Strukturen sehr schnell erzeugt werden. Die Syntax muss ggf. erlernt werden. Für Benutzer, die sich mit CSS oder jQuery auskennen, wird es nicht viel neues sein. Wenn Sie oft und viel HTML schreiben müssen, lohnt es sich auf jeden Fall, wenn Sie sich das einmal ansehen!

Funktionsweise Emmet

Sie geben eine Emmet-Anweisung direkt in den Syntax-Editor ein und drücken die Tab-Taste. Der HTML-Code wird generiert.

Praxis-Beispiele

Die folgende Tabelle zeigt einige praktische Beispiele mit dem Emmet-Plugin im Syntax-Editor:

Tabelle 18. Bearbeitungsbeispiele **Emmet**
Eingabe	Ergebnis
div>ul>li	<div> <ul> <li></li> </ul> </div>
*div>ul>li>5**	<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
*div>ul#meineListe>li.meineCSSKlasse$5**	<div> <ul id="meineListe"> <li class="meineCSSKlasse1"></li> <li class="meineCSSKlasse2"></li> <li class="meineCSSKlasse3"></li> <li class="meineCSSKlasse4"></li> <li class="meineCSSKlasse5"></li> </ul> </div>

Syntax-Dokumentation

Mehr Beispiele und die Syntax für komplexere Beispiele finden Sie hier: http://docs.emmet.io/abbreviations/syntax/

Tastenkombinationen

Neben den hier genannten Tastenkombinationen bietet plentymarkets weitere nützliche Tastenkombinationen, die benutzerspezifisch eingerichtet und genutzt werden können. Details dazu finden Sie unter Benutzer bearbeiten.

5.4.5. Inline-Editor

CMS » Webdesign

Allgemeines

Der Inline-Editor ermöglicht die direkte Anpassung des Designs Ihres Onlineshops ohne den Umweg über das Menü CMS. Zu einem gewählten Bereich können Sie das entsprechende Template direkt aus dem Webshop heraus öffnen und es anpassen. Darüber hinaus ist es möglich, für die Konfiguration von Kategorien oder Artikeln direkt in das jeweilige Bearbeitungsmenü zu wechseln.

Beispiele für Bereiche, die mit dem Inline-Editor angepasst werden können:

Design ändern
Sprache ändern
Design (Layout) einer Seite anpassen
Kategorienavigation anpassen
Artikeldetailansicht anpassen
Warenkorbvorschau anpassen
Kategoriebearbeitung
Artikelbearbeitung

Bearbeitungsfunktionen

Im Folgenden werden die Funktionen des Inline-Editors erklärt.

Webshop zur Bearbeitung öffnen

Artikel, Kategorien und Blogbeiträge öffnen Sie über den Inline-Editor direkt zur Bearbeitung im plentymarkets-System.

Bild 20. Webshop zum Bearbeiten öffnen

Startseite zur Bearbeitung öffnen:

Klicken Sie im plentymarkets Backend auf Webseite (Bild 20, Weltkugel).
Wählen Sie die Option Webshop zum Bearbeiten öffnen.
→ Die Startseite des Webshops öffnet sich mit verschiedenen Optionen zur Bearbeitung Ihrer Artikel, Kategorien oder Blogs (Bild 21).

Bereich über das Icon öffnen:

Klicken Sie während der Bearbeitung einer Kategorie oder eines Designs im CMS auf das folgende Icon: image::omni-channel/online-shop/webshop-einrichten/_cms/webdesign/werkzeuge/assets/DE-Inline-Editor-Icon-SI.png[]

→ Die Kategorie bzw. das Template öffnet sich zur Bearbeitung im Webshop.

Der Inline-Editor wird im geöffneten Webshop wie in Bild 21 gezeigt dargestellt.

Bild 21. Inline-Editor im Webshop

Die folgende Tabelle erläutert die Buttons des Inline-Editors im Webshop:

Tabelle 19. Inline-Editor; **Buttons**
Einstellung	Erläuterung
Design:	Das ausgewählte Design wird angezeigt. Für Änderungen das gewünschte Design aus der Dropdown-Liste wählen.
Sprache	Die Sprache wird angezeigt und kann geändert werden.
Auswahl merken	Häkchen setzen = Merkt sich die vorgenommene Auswahl für die nächste Bearbeitung. Kein Häkchen = Lädt bei erneuter Bearbeitung das Standard-Design. Wichtig: Diese Option ändert das Design des Webshops nicht dauerhaft. Um das Standard-Design für den Webshop zu ändern, beachten Sie die Handbuchseite Webdesign bearbeiten.
Seite aktualisieren	Aktualisiert die Seite und zeigt z.B. Änderungen an, die im Backend vorgenommen wurden. Wichtig: Ihren Webshop mit geöffnetem Inline-Editor nicht über den Browser neu laden. Hierbei wird das plentymarkets Backend neu geladen. Alle Tabs und der Webshop werden geschlossen.
Kategorie bearbeiten	Öffnet die aktuell angezeigte Seite bzw. Kategorie zur Bearbeitung im Backend.
Link	Zeigt die Template-Funktion der aktuell angezeigten Seite bzw. Kategorie an (Bild 21, blauer Pfeil). Diese wird benötigt, um von anderen Kategorieseiten auf die Gezeigte zu verlinken. Die Template-Funktion kann hier kopiert werden.
SetCategoryId	Gibt innerhalb eines anderen Bereiches des Webshops den Inhalt der geöffneten Kategorie aus. Weitere Details dazu finden Sie auf der Handbuchseite SetCategoryId.
plentymarkets-Backend	Wechselt zurück in das plentymarkets-Backend (Bild 21, grüner Pfeil).

Inhalte im Webshop bearbeiten

Mit dem Inline-Editor bearbeiten Sie Inhalte wie Artikeldetailansichten, Kategorien, Blogs etc. direkt im Webshop. Ihre Möglichkeiten werden im Folgenden am Beispiel Artikel erläutert.

Bild 22. Artikelbearbeitung im Webshop öffnen

Bearbeitung des Artikels im Webshop öffnen:

Öffnen Sie den Webshop zum Bearbeiten (Bild 20).
Wählen Sie im Webshop den Artikel aus, den Sie bearbeiten möchten.
Zeigen Sie mit der Maus auf den Artikel.
→ Oben links wird ein Stift angezeigt (Bild 22).
Klicken Sie auf den Stift (Bild 22, roter Pfeil).
→ Der Inline-Editor öffnet das Template in einem Fenster zur direkten Bearbeitung des Artikels.

Bild 23. Artikelbearbeitung im Webshop; Template ItemViewSingleItem

Da wir uns in der Detailansicht eines Artikels befinden, wird das Template ItemViewSingleItem geöffnet. Sie können das Template nun wie gewohnt anpassen. Änderungen werden nach dem Speichern direkt angezeigt.

Die folgende Tabelle erläutert die Buttons im Bearbeitungsfenster des Inline-Editors:

Tabelle 20. Inline-Editor; **Buttons im Bearbeitungsfenster**
Einstellung	Erläuterung
Speichern	Änderungen im Template speichern. Dieser Button wird erst aktiv, wenn Änderungen vorgenommen wurden.
Template-Variablen und -Funktionen	Öffnet eine Liste aller im System verfügbaren Template-Variablen und Template-Funktionen. Diese können über den Menübaum gefunden und in das Template kopiert werden.
Template übertragen	Überträgt das Template in eine andere Sprache Ihrer Wahl. Weitere Details dazu finden Sie auf der Handbuchseite Benutzeroberfläche.
Editor einrichten	Öffnet ein Fenster zur Einrichtung des Editors. Über Häkchen setzen wählen, ob im Editor Steuerzeichen angezeigt werden und ob Leerzeichen statt Tabs angezeigt werden.

Bearbeitung im Backend über den Webshop öffnen

Wenn Sie die Artikel- oder andere Kategorien nicht direkt im Webshop bearbeiten möchten, können Sie die Bearbeitung im Backend wie unten beschrieben öffnen.

Bild 24. Bearbeitung im Backend über den Webshop öffnen

Bearbeitung im Backend aus dem Webshop öffnen:

Wählen Sie im Webshop den zu bearbeitenden Artikel.
Klicken Sie oben auf den Button mit der Bezeichnung des Artikels (Bild 24, blauer Pfeil) oder der Bezeichnung der Kategorie (Bild 24, grüner Pfeil).
→ Der Artikel oder die Kategorie wird zur Bearbeitung im plentymarkets System geöffnet.

5.5. Bearbeiten

CMS » Webdesign

5.5.1. Aufbau des Designs

Das Design in plentymarkets basiert auf einem Template-System. Als Template wird eine HTML-Vorlage bezeichnet, die das Aussehen eines ganz bestimmten Bereichs festlegt. Zum Beispiel gibt es Templates für die Artikelansicht, zur Gestaltung von Artikelsuchergebnissen und für die Kategorieansichten. Die Darstellung der Inhalte wird unter Verwendung von HTML und CSS sowie Einbindung von Template-Variablen und Template-Funktionen vorgenommen.

Ein Template kann aus nur einem oder aus mehreren HTML-Fragmenten bestehen. Mehrere HTML-Fragmente sind erforderlich, wenn Inhalte in einer Schleife (Loop) ausgegeben werden sollen, z.B. in Form einer Listenansicht. Diese Iterationen kommen z.B. für die Darstellung von Artikellisten zum Einsatz, bei der wiederholt die gleichen HTML-Fragmente ausgegeben werden.

5.5.2. Bereiche

Im Menü CMS » Webdesign » Layout sind die verschiedenen Templates für Artikel- und Kategorieansichten, zur Seitengestaltung und zur Navigation in Ordner sortiert. Wir beschreiben, wie die Template-Struktur aufgebaut ist und wo Sie den Code finden und anpassen. Außerdem beschreiben wir, wie Sie die verfügbaren Template-Variablen und -Funktionen finden und in den Code einfügen. Sie finden auch Hinweise zum Umgang mit CSS-Formaten und wie Sie if-Abfragen in Ihre Templates einbauen.

Als Template wird eine HTML-Vorlage bezeichnet, die das Aussehen eines ganz bestimmten Bereichs festlegt. So gibt es z.B. Templates für Artikelansichten und zur Definition von Artikelsuchergebnissen.
Das Template PageDesignContentMainFrame ist der grafische Layout-Rahmen Ihres Webshops. In diesem Template befinden sich Template-Variablen und -Funktionen, die wiederum auf andere Templates verweisen. Anstelle der Variablen bzw. Funktion wird auf der Webseite der Inhalt des Templates angezeigt, auf das verwiesen wird.

5.5.3. Hinweise für Webentwickler

Beachten Sie die Erläuterungen der folgenden Handbuchseiten, wenn Sie das Design Ihres Webshops anpassen möchten:

Webdesign: Hinweise zur Anpassung des Designs in plentymarkets
Benutzeroberfläche: Details zum Menü Webdesign
Grundlagen der Syntax: Erläuterungen zur HTML-Struktur, zu Listendarstellungen sowie zu Template-Variablen und Template-Funktionen

5.5.4. Design-Verwaltungsfunktionen

Die Funktionen für die Designverwaltung werden in diesem Kapitel beschrieben.

Anzahl der Designs

In Ihrem plentymarkets-System können Sie im Menü CMS » Webdesign bis zu 30 Designs verwalten. Pro zusätzlichem Mandant (Shop) erhöht sich die Anzahl um bis zu 5 zusätzliche Designs.

Design-Einstellungen

Die Design-Einstellungen rufen Sie über das blaue Zahnrad auf (Bild 25, Pos. 3). Es wird dann ein Bearbeitungsfenster geöffnet mit verschiedenen Tabs, die nachfolgend erläutert werden.

Design mit Mandanten verknüpfen

Mit den nachfolgend beschriebenen Schritten verknüpfen Sie ein Design mit einem oder mehreren Ihrer Onlineshops.

Bild 25. Design mit Mandanten verknüpfen

Design mit einem oder mehreren Mandanten verknüpfen:

Öffnen Sie das Menü CMS » Webdesign.
Wählen Sie das gewünschte Design aus der Dropdown-Liste (Bild 25, Pos. 1).
Wählen Sie die gewünschte Sprache aus der Dropdown-Liste (Bild 25, Pos. 2).
Klicken Sie auf das blaue Zahnrad, um die Einstellungen zu öffnen (Bild 25, Pos. 3).
→ Das Fenster Design-Einstellungen wird geöffnet.
Wählen Sie im Tab Einstellungen (Bild 25) unter Mandant (Shop) den Webshop, für den das Design gelten soll. Sie können auch mehrere Mandanten oder ALLE wählen.
Wenn Sie die Bilder für das Design in einem bestimmten Ordner hinterlegen möchten, wählen Sie unter Bilder-Ordner einen Ordner.
Speichern Sie die Einstellungen.

Grüne Schrift = aktives Design

Das aktive Design erkennen Sie an der grünen Schriftfarbe des Designnamens (Bild 25, Pos. 1).

Kategorieseiten verknüpfen

Verknüpfen Sie nun die Kategorieseiten. Hierbei handelt es sich um Seiten, die in fast jedem Webshop enthalten sein müssen. Ein Beispiel sind rechtliche Angaben. Die Seiten verknüpfen Sie für jeden Mandanten und für jedes Design separat. Es müssen alle Seiten mit einer Kategorie verknüpft werden. Gehen Sie dazu wie unten beschrieben vor.

Designspezifische Kategorieverknüpfungen haben Vorrang

Kategorieseiten verknüpfen Sie auch im Menü System » Mandant » Mandant wählen » Webshop » Seiten. Die dort vorgenommenen Verknüpfungen gelten für alle Designs eines Mandanten. Wenn Sie für ein Design wie unten beschrieben Kategorieseiten verknüpfen, haben die designspezifischen Verknüpfungen Vorrang.

Bild 26. Zuordnung der Kategorien des Webshops

Kategorieseiten zuordnen:

Öffnen Sie das Menü CMS » Webdesign.
Wählen Sie das gewünschte Design aus der Dropdown-Liste.
Wählen Sie die gewünschte Sprache aus der Dropdown-Liste.
Klicken Sie auf das blaue Zahnrad, um die Einstellungen zu öffnen.
→ Das Fenster Design-Einstellungen (Bild 26) wird geöffnet.
Klicken Sie auf das Tab Mandanten.
Wählen Sie links den Mandanten, für den Sie Kategorieseiten zuordnen möchten.
Klicken Sie neben der Seite, der Sie eine Kategorieseite zuordnen möchten, auf die Lupe.
→ Eine Liste der verfügbaren Kategorieseiten wird angezeigt.
Wählen Sie die Kategorie, die Sie der Seite zuordnen möchten. Beachten Sie dabei die Erläuterungen in Tabelle 21.
Wiederholen Sie die beschriebenen Schritte für alle weiteren Seiten.
Speichern Sie die Einstellungen.

Die folgende Tabelle erläutert die verknüpfbaren Kategorieseiten:

Tabelle 21. Zuordnung der Kategorieseiten
Einstellungen	Erläuterung
Startseite	Eine Kategorieseite wählen, die bei Aufrufen des Webshops als Startseite angezeigt wird.
AGB	Eine Kategorieseite für die Allgemeinen Geschäftsbedingungen wählen.
Datenschutz	Eine Kategorieseite für die Datenschutzrichtlinien wählen.
Widerrufsrecht	Eine Kategorieseite für das Widerrufsrecht wählen.
Hilfe	Eine Kategorieseite für die Hilfeseite des Webshops wählen.
404	Eine Kategorieseite wählen, um diese Seite statt der Standard-404-Seite anzuzeigen. Die Standard-404-Seite enthält einen Hinweis, dass die Seite nicht verfügbar ist oder verschoben wurde.
Versandkosten	Eine Kategorieseite für Angaben zu Versandkosten wählen.
Artikel nicht gefunden	Eine Kategorieseite wählen, um diese Seite statt der Standard-Meldung anzuzeigen, wenn ein Artikel nicht gefunden wird.
Zahlungsarten	Eine Kategorieseite für Informationen zu Zahlungen und Zahlungsarten wählen.
Kontakt	Eine Kategorieseite wählen, auf der die Kontaktdaten des Unternehmens angegeben sind. Die Seite ist auch als Seite 404 sinnvoll, damit Besucher des Webshops bei einem Fehler direkt Kontakt zu Ihnen aufnehmen kann.
Impressum	Eine Kategorieseite für das Impressum wählen. Das Impressum ist in den meisten Fällen eine Pflichtangabe. Das Impressum sollte unter diesem Namen und leicht auffindbar sein.
Bankdaten	Eine Kategorieseite für Bankdaten wählen. Die Angaben auf der Seite Bankdaten werden für die Zahlungsarten Vorkasse und Rechnung benötigt. Die Seite sollte Ihre Bankverbindung sowie ggf. einen Hinweis zum Verwendungszweck enthalten.

Die Kategorieverknüpfungen eines Designs werden beim Export und Import eines Designs berücksichtigt. Beim Import eines Designs werden fehlende Kategorien automatisch in einem Ordner mit dem Namen des Designs neu angelegt. Passen Sie die Inhalte der Kategorien entsprechend an.

Bestellschritte konfigurieren

Für die Konfiguration von Bestellschritten für den individuellen Bestellvorgang benötigen Sie Kategorien des Typs Container. Beachten Sie dazu die vorstehend verlinkten Handbuchseiten.

Seiten-Layout verknüpfen

Für die Gestaltung der Webshopbereiche (Bild 27) sind die Bereiche jeweils im Standard mit bestimmten Templates verknüpft. Diese Einstellung können Sie bei Bedarf ändern.

Bild 27. Verknüpfung des Seiten-Layouts

Design veröffentlichen

Mit der Funktion Design veröffentlichen veröffentlichen Sie ein neu erstelltes oder importiertes Design. Auch wenn Sie Änderungen am bestehenden Design vorgenommen haben, müssen Sie es über diese Funktion neu veröffentlichen. Löschen Sie nach einer Neuveröffentlichung wie weiter unten beschrieben den Datei-Cache, um die Änderungen sofort anzuzeigen. Um den Veröffentlichungsvorgang zu beschleunigen, haben Sie die Möglichkeit, das gewählte Design vollständig zu veröffentlichen oder nur einzelne Bereiche zu wählen. Gehen Sie wie unten beschrieben vor, um ein Design zu veröffentlichen.

Design veröffentlichen:

Öffnen Sie das Menü CMS » Webdesign.
Wählen Sie in der Dropdown-Liste das gewünschte Design.
Wählen Sie die gewünschte Sprache.
Klicken Sie auf die Weltkugel, um die Veröffentlichung zu starten.
→ Das Fenster Design veröffentlichen wird geöffnet.
Wählen Sie in der linken Spalte des Fensters die Bereiche des Designs, die veröffentlicht werden sollen. Beachten Sie dazu Tabelle 22.
Klicken Sie auf Gewählte Bereiche veröffentlichen, um das Design zu veröffentlichen.
→ Die gewählten Bereiche des Designs werden veröffentlicht. Je nach Umfang dauert der Vorgang mehrere Minuten.

Tabelle 22. Optionen für die Design-Veröffentlichung
Einstellung	Erläuterung
Alle	Wählen, um das vollständige Design inklusive aller Kategorien und Blog-Einträge zu veröffentlichen. Dieser Vorgang kann mehrere Minuten dauern.
Templates & CSS	Wählen, um nur die Templates und das CSS zu veröffentlichen.
Kategorien	Wählen, um noch nicht veröffentlichte, z.B. über Schnittstellen oder Importformate importierte Kategorien zu veröffentlichen. Änderungen an bereits veröffentlichten Kategorien werden sofort übernommen, ein erneutes Veröffentlichen der Kategorien ist nicht erforderlich.
Blog	Wählen, um noch nicht veröffentlichte, z.B. über Schnittstellen oder Importformate importierte Blogs zu veröffentlichen. Änderungen an bereits veröffentlichten Blogs werden sofort übernommen, ein erneutes Veröffentlichen der Blogs ist nicht erforderlich. Blogs können alternativ auch im Menü CMS » Blog » Tab: Blog veröffentlichen veröffentlicht werden.

Datei-Cache zurücksetzen

Um die statischen Inhalte Ihres Webshops, d.h. CSS, JavaScript und Bilder, schnell anzuzeigen, werden diese Dateien im Datei-Cache des Webservers zwischengespeichert. Mit der Option Datei-Cache zurücksetzen leeren Sie diesen Cache. Wenn Sie wie oben beschrieben Änderungen an einem Design vorgenommen und veröffentlicht haben, sollten Sie den Datei-Cache zurücksetzen, damit Ihre Änderungen sofort angezeigt werden.

Datei-Cache zurücksetzen:

Öffnen Sie das Menü CMS » Webdesign.
Wählen Sie das gewünschte Design.
Wählen Sie die gewünschte Sprache.
Klicken Sie auf die Weltkugel.
→ Das Fenster Design veröffentlichen wird geöffnet.
Wählen Sie in der rechten Spalte des Fensters die Bereiche des Designs, die geändert wurden. Beachten Sie dazu Tabelle 23.
Klicken Sie auf Datei-Cache zurücksetzen.

Tabelle 23. Optionen für das Zurücksetzen des Datei-Caches
Einstellung	Erläuterung
Alle	Wählen, um alle CSS-, JavaScript- und Bilddateien aus dem Datei-Cache zu löschen.
CSS	Wählen, um nur CSS-Dateien aus dem Datei-Cache zu löschen.
JavaScript	Wählen, um nur JavaScript-Dateien aus dem Datei-Cache zu löschen.
Bilder	Wählen, um nur Bilddateien aus dem Datei-Cache zu löschen.

Neues Design anlegen

Ein neues Design wird auf der Basis eines bestehenden Designs angelegt. So erhalten Sie gleichzeitig eine Sicherheitskopie. Sie passen das neu angelegte Design an. Falls ein Fehler auftritt, haben Sie so noch das Basisdesign und können auf dessen Grundlage ein neues Design anlegen.

Sicherheitskopie

Legen Sie bei umfangreicheren Designänderungen grundsätzlich ein neues Design auf der Basis des aktuellen Designs an und bearbeiten Sie das neue Design.

Wählen Sie für das neue Design eine Bezeichnung, die sich vom Basisdesign unterscheidet.

Tipp: Bezeichnungen für neue Designs

Damit Sie den Überblick behalten, besonders wenn Sie häufig Änderungen vornehmen, wählen Sie für Ihre Designvarianten Bezeichnungen mit einer aufsteigenden Nummerierung oder einem Datum.

Beispiel:

DesignWebshop_01

DesignWebshop_02

oder

DesignWebshop_2014-05-07

DesignWebshop_2014-05-12

Design übertragen

Mit der Funktion Design übertragen übertragen Sie einige oder alle Eigenschaften eines Designs auf ein anderes Design. Dabei können Sie die Bereiche, die übertragen werden sollen, individuell wählen.

Folgende Bereiche sind wählbar:

PageDesign (Seitenansichten)
Navigation
CategoryView (Kategorieansichten)
ItemView (Artikelansichten)
Misc (Verschiedenes)
BlogDesign
CSS
Bestellvorgang
Mein Konto
Buttons

Gehen Sie wie unten beschrieben vor, um die Eigenschaften eines Designs zu übertragen.

Bild 28. Design übertragen

Eigenschaften eines Designs übertragen:

Öffnen Sie das Menü CMS » Webdesign.
Klicken Sie auf das Symbol Design übertragen (Bild 28, roter Pfeil).
Wählen Sie unter Quelle das Design, von dem Eigenschaften übernommen werden sollen, sowie die Sprache.
Wählen Sie unter Ziel das Design, auf das die Eigenschaften übertragen werden sollen, und dessen Sprache.
Wählen Sie die Bereiche, die von der Quelle auf das Ziel übertragen werden sollen (Häkchen setzen).
Klicken Sie auf Design übertragen.

Design exportieren

Mit der Funktion Design exportieren exportieren Sie ein Design oder Teile eines Designs in einer ZIP-Datei. Diese Datei speichern Sie dann auf einem Datenträger Ihres Rechners. Gehen Sie wie unten beschrieben vor, um ein Design zu exportieren.

Design exportieren:

Öffnen Sie das Menü CMS » Webdesign.
Klicken Sie auf das Symbol Design exportieren.
→ Das Fenster Design exportieren wird angezeigt.
Wählen Sie das Design, das exportiert werden soll.
Wählen Sie die Sprache, die exportiert werden soll.
Wählen Sie die Bereiche, die exportiert werden sollen (Häkchen setzen).
Klicken Sie auf Design exportieren.
Speichern Sie die Datei auf einem Datenträger Ihres Rechners.

Design importieren

Mit der Funktion Design importieren importieren Sie die ZIP-Datei eines Designs, das auf einem Datenträger Ihres Rechners gespeichert ist.

Vor dem Import prüfen, ob bereits ein Design mit dieser Bezeichnung vorhanden ist

Ein Design mit gleicher Bezeichnung wird nicht überschrieben. Sollte ein Design gleicher Bezeichnung bereits vorhanden sein, ändern Sie die Bezeichnung des zu importierenden Designs vor dem Import.

Dropbox: Design exportieren/importieren

Mit der Option Dropbox: Design exportieren/importieren (Bild 29, roter Pfeil) öffnen Sie ein Popup-Fenster, über das Sie Designs aus plentymarkets in einen Dropbox-Ordner exportieren bzw. Templates aus einem Dropbox-Ordner in plentymarkets importieren können. Gehen Sie dazu wie unten beschrieben vor.

Bild 29. Dropbox-Export/Import

Anhand des Status können Sie erkennen, ob der jeweilige Prozess in Arbeit oder abgeschlossen ist oder ein Fehler aufgetreten ist.

Dropbox-Konto verknüpfen und Basis-Ordner festlegen

Um Daten zwischen Dropbox und plentymarkets auszutauschen, muss Ihr Dropbox-Konto im Menü System » Mandant » Global » Dienste » Dropbox mit plentymarkets verknüpft sein.

Design in Dropbox-Ordner exportieren

Mit der Funktion Design exportieren exportieren Sie ein Design oder einzelne Templates eines Designs in den Ordner Ihres Dropbox-Kontos, den Sie im Menü System » Mandant » Global » Dienste » Dropbox als Basis-Ordner hinterlegt haben. Gehen Sie wie unten beschrieben vor, um die gewählten Design-Bereiche in den Basis-Ordner zu exportieren.

Design in Dropbox-Ordner exportieren:

Öffnen Sie das Menü CMS » Webdesign.
Wählen Sie aus der Dropdown-Liste das Design, das aus plentymarkets in den Dropbox-Ordner exportiert werden soll.
Klicken Sie auf das Symbol Dropbox: Design exportieren/importieren (Bild 29, roter Pfeil).
→ Das Fenster Dropbox wird angezeigt.
Klicken Sie auf Design exportieren.
→ Das Fenster Design exportieren wird angezeigt.
Wählen Sie die Sprache, die exportiert werden soll.
Wählen Sie die Bereiche, die exportiert werden sollen (Häkchen setzen).
Klicken Sie auf Design exportieren.
→ Im Basis-Ordner Ihres Dropbox-Kontos werden die Design-Bereiche pro Sprache gespeichert. Je nach Datenvolumen kann der Export mehrere Minuten dauern.

Templates aus Dropbox-Ordner importieren

Mit der Funktion Templates importieren importieren Sie Templates aus dem Ordner Ihres Dropbox-Kontos, den Sie im Menü System » Mandant » Global » Dienste » Dropbox als Basis-Ordner hinterlegt haben. Wahlweise werden nur geänderte oder alle Templates aus dem Dropbox-Ordner in plentymarkets importiert. Gehen Sie wie unten beschrieben vor, um Templates aus dem Basis-Ordner in plentymarkets zu importieren.

Templates aus Dropbox-Ordner importieren:

Öffnen Sie das Menü CMS » Webdesign.
Wählen Sie das Design, in das Templates importiert werden sollen, aus der Dropdown-Liste.
Klicken Sie auf das Symbol Dropbox: Design exportieren/importieren (Bild 29, roter Pfeil).
→ Das Fenster Dropbox wird angezeigt.
Klicken Sie auf Design importieren.
→ Das Fenster Dropbox wird angezeigt.
Wählen Sie entweder Nur geänderte Templates importieren oder Alle Templates importieren.
→ Die Dateien werden aus dem Basis-Ordner Ihres Dropbox-Kontos in plentymarkets importiert. Je nach Datenvolumen kann der Import mehrere Minuten dauern.

Design löschen

Designs, die mit mindestens einem Mandanten (Shop) verknüpft sind, können nicht gelöscht werden. Wenn Sie ein aktives Design löschen möchten, deaktivieren Sie zunächst in den *Design-Einstellungen*die Verknüpfung mit den Mandanten (Shops).

Design löschen:

Wählen Sie das gewünschte Design aus der Dropdown-Liste.
Wählen Sie die gewünschte Sprache aus der Dropdown-Liste.
Klicken Sie auf Löschen.
Bestätigen Sie die Sicherheitsabfrage.
→ Das Design wird aus dem System gelöscht.

5.5.5. Templates bearbeiten

Wie Sie Templates bearbeiten, wird auf den weiteren Unterseiten dieses Kapitels beschrieben. Wie Sie ein Template in andere Sprachvarianten eines Designs übertragen, lesen Sie auf der Handbuchseite Benutzeroberfläche im Kapitel Template übertragen.

5.5.6. CSS

CSS (Cascading Style Sheets) bezeichnet eine Auszeichnungssprache für strukturierte Dokumente. Während Sie mit HTML den reinen Inhalt gestalten, bietet Ihnen CSS die Möglichkeit, auf übergreifende Formatierungen zur Gestaltung des Inhalts sowie des Designs einer Webseite Einfluss zu nehmen. Einer der Vorteile ist, dass Sie z.B. Formate im CSS festlegen können, die für alle Bereiche gelten und im CSS auch zentral anpassbar sind. Dies ist zeitsparend, minimiert Fehler und ermöglicht eine übergreifend einheitliche Gestaltung. Lesen Sie mehr dazu auf der Handbuchseite CSS.

5.5.7. PageDesign

CMS » Webdesign » Layout » PageDesign

Inhalt dieser Seite

Diese folgenden Kapitel beschreiben die Seitenansichten in plentymarkets, also den Seitenaufbau anhand der im Bereich PageDesign verfügbaren Templates. Sie erhalten einige Grundinformationen zur Verwendung der Templates sowie zur HTML-Struktur. Weitere Details werden in Anwendungsbeispielen ausführlicher behandelt.

Grundstrukturen im plentymarkets-CMS

Wir weisen darauf hin, dass Sie zur Bearbeitung der Templates im plentymarkets-CMS über gewisse Grundkenntnisse im Bereich HTML und CSS verfügen sollten. Darüber hinaus empfehlen wir Ihnen, die grundlegenden Erläuterungen des Kapitels Webdesign sorgfältig zu lesen. Beachten Sie besonders das Kapitel Grundlagen der Syntax, bevor Sie Templates anpassen. Die Handbuchseite Seitanaufbau gibt Ihnen einen Überblick zur Templatestruktur in plentymarkets.

Allgemeines zum Seiten-Layout

Die Templates des Bereichs CMS » Webdesign » Layout » PageDesign steuern den Seitenaufbau und die Gestaltung der verschiedenen Bereiche des Webshops. Unter Page-Design verstehen wir den Design-Rahmen Ihres Webshops, der alle Inhalte einschließt. Dargestellt werden alle Inhalte, wie Artikel, Kategorien, Bilder, Kategorieseiten (Typ: Content) oder der Bestellvorgang in jeweils eigenen Templates. Dazu sind in den Templates zur Darstellung der verschiedenen Bereiche jeweils Standard-Inhalte hinterlegt, die Sie jedoch nach Belieben ändern oder z.B. durch einen Dienstleister anpassen lassen können.

Sehr häufig erscheint das Layout in der folgenden Form: Der mittlere Bereich ist dynamisch, d.h. die Inhalte wechseln abhängig davon, welche Links bzw. Objekte angeklickt werden. Neben der Ansicht der Artikel erscheinen dort die Inhalte der Kategorieseiten, also die verschiedenen Informationsseiten, zum Beispiel AGB, Impressum oder Kontakt. Bereiche wie Artikelsuche oder Kategorien sind ebenfalls dynamische Inhalte, denn bei Klick auf einen Button erscheinen z.B. bei den Kategorien die verfügbaren Unterpunkte.

Die meisten der seitlich angeordneten Bereiche sind statische Inhalte, die weder Form noch Größe ändern und immer an derselben Stelle angezeigt werden. Die statischen Inhalte dienen der Orientierung während des Einkaufs und ermöglichen es Besuchern, jederzeit zu jedem gewünschten Bereich des Webshops zu gelangen.

Seiten-Layout: Templates

Für die Gestaltung der Seiten-Designs sind die in den folgenden Unterkapiteln beschriebenen Templates verfügbar.

PageDesignContent

Dieses Seiten-Layout kommt bei der Darstellung von Kategorien und Artikeln zur Anwendung. Sie können pro Kategorie auch ein abweichendes Seiten-Layout wählen. Dies konfigurieren Sie in der jeweiligen Kategorie im Tab Einstellungen. Genauso ist es möglich, dieses Template auch für die Bereiche Checkout und MyAccount zu verwenden.

PageDesignCheckout

Das Template wird automatisch geladen, wenn der Bereich Kaufabwicklung aufgerufen wird. Wir empfehlen Ihnen, das Template so zu gestalten, dass der Hauptdarstellungsbereich sich über die gesamte Breite des Webshops erstreckt. So werden keine weiteren Elemente angezeigt, wie z.B. bei einem mehrspaltigen Aufbau im PageDesign. Dadurch wird die Aufmerksamkeit des Besuchers ganz auf diesen Bereich konzentriert. Dies ist in der Kaufabwicklung besonders wichtig, um Kaufabbrüche zu verhindern.

PageDesignMyAccount

Das Template wird automatisch geladen, wenn der Bereich Mein Konto aufgerufen wird. Wir empfehlen Ihnen, das Template so zu gestalten, dass sich der Hauptdarstellungsbereich über die gesamte Breite des Webshops erstreckt. So werden keine weiteren Elemente angezeigt, wie etwa bei einem mehrspaltigen Aufbau im PageDesign. Dadurch wird die Aufmerksamkeit des Besuchers ganz auf diesen Bereich konzentriert.

PageDesignCustom

Dieses Seiten-Layout bietet drei Templates, die alternativ zur Darstellung von Kategorien und Artikeln verwendet werden kann. Die Templates können alternativ zum PageDesignContent in den Kategorieeinstellungen als Layout hinterlegt werden.

PageDesignBlog

Das Template wird automatisch geladen, wenn der Bereich Blog aufgerufen wird.

PageDesignForum

Das Template wird automatisch geladen, wenn der Bereich Forum aufgerufen wird.

PageDesignPrepareMainColumn

Gestaltung des Hauptteils der Seitenansicht.

HTML-Struktur

In jedem Seiten-Layout kann die HTML-Struktur im Tab mit der Endung HtmlStructure eingesehen und verändert werden.

Beachten Sie bitte, dass die Platzhalter des folgenden Beispiels nicht entfernt werden, da die Platzhalter für die Funktion von plentymarkets relevant sind.

Das Template enthält den gesamten Inhalt der jeweiligen Seite und gibt der Seite die gewünschte Struktur. Sie finden den Code im Tab PageDesignContentHtmlStructure des Templates PageDesignContent. 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 des Templates PageDesignContent:

Tabelle 24. Elemente des Tabs **PageDesignContentHtmlStructure**
Element	Erläuterung
$HtmlStartTag	Der Platzhalter enthält das öffnende HTML-Tag sowie ggf. die Angabe des DOCTYPE.
$HtmlMetaTitle	Der Seitentitel wird durch diesen Platzhalter 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	Setzt die CSS-Festlegungen für den Kopfbereich um.
$HtmlHeadJavaScriptTags	Umsetzung der JavaScript-Inhalte im Kopfbereich.
$HtmlHeadMetaTags	Durch diesen Platzhalter werden Meta-Tags, z.B. Keywords, umgesetzt, die wichtig für die Indizierung der Seite durch Suchmaschinen sind.
$PageDesignContentMainFrame	Dieser Platzhalter fügt den Inhalt des Templates PageDesignContentMainFrame ein. Dieses Template enthält wiederum den Platzhalter MainFrame, daher wird dieser nachfolgend ebenfalls erläutert.
$HtmlBodyOverlays	Hier werden Overlays umgesetzt, z.B. eine spezielle Warenkorbansicht.

5.5.8. ItemView

CMS » Webdesign » Layout » ItemView

Inhalt dieser Seite

Die folgenden Kapitel beschreiben die Artikelansichten in plentymarkets, also den Seitenaufbau anhand der im Bereich ItemView verfügbaren Templates. Sie erhalten einige Grundinformationen zur Verwendung der Templates sowie zur HTML-Struktur. Weitere Details werden in Anwendungsbeispielen ausführlicher behandelt.

Grundstrukturen im plentymarkets-CMS

Wir weisen darauf hin, dass Sie zur Bearbeitung der Templates im plentymarkets-CMS über gewisse Grundkenntnisse im Bereich HTML und CSS verfügen sollten. Darüber hinaus empfehlen wir Ihnen, die grundlegenden Erläuterungen des Kapitels Webdesign sorgfältig zu lesen. Beachten Sie besonders das Kapitel Grundlagen der Syntax, bevor Sie das Template anpassen. Die Handbuchseite Seitanaufbau gibt Ihnen einen Überblick zur Templatestruktur in plentymarkets.

Allgemeines zu Artikelansichten

Neben dem Template ItemViewSingleItem, dem grundlegenden Template zur Darstellung eines Artikels, enthält der Bereich ItemView eine Fülle an Templates zur Gestaltung von Artikelauflistungen, z.B. wie das Ergebnis einer Artikelsuche im Webshop dargestellt wird oder die Auswahl von Artikeln anhand eines Filters. Auch für die Darstellung von Cross-Selling-Artikeln oder Sonderangeboten gibt es jeweils spezielle Templates.

Das folgende Beispiel zeigt einen Ausschnitt aus der Codestruktur des Templates ItemViewSingleItem, das eine Artikeldetailansicht enthält.

Beispiel Artikeleigenschaften

Hier ein einfaches Beispiel, wie die Artikeleigenschaften Name (Name), Preis (Price) mit Währungssymbol (CurrencySign), Mehrwertsteuerhinweis (VATHint) und MwSt-Anzeige (VAT) sowie einem Link auf die Versandkostenseite im Code umgesetzt werden können:

<span class="price">$Price$CurrencySign</span>
<span class="smallText">$VATHint$VAT% <a href="{% Link_ShippingCosts() %}" title="Versandkosten">Versandkosten</a>

Die verschiedenen Parameter des Artikels, wie Name oder Preis, werden mit den entsprechenden Template-Variablen umgesetzt.

Artikelansichten: Templates

Für die Gestaltung der Artikelansichten ist eine Fülle an unterschiedlichen Templates verfügbar, von denen nachfolgend beispielhaft die wichtigsten genannt werden. Detailinformationen zu den Templates finden Sie im Kapitel CMS-Syntax unter der Handbuchseite ItemView.

ItemViewSingleItem

Darstellung der Artikeldetailansicht im Webshop.

ItemViewSearchResultsList

Stellt das Ergebnis einer Artikelsuche im Webshop in Form einer Listenansicht dar.

ItemViewFilterResultsList

Darstellung einer Liste der mit einer Filterfunktion gefundenen Artikel. Ein Beispiel ist ein Merkmalfilter.

ItemViewCategoriesList

Auflistung der Artikel einer im Webshop gewählten Kategorie.

ItemViewCrossSellingItemsList

Auflistung der Cross-Selling-Artikel.

ItemViewTopSellersList

Auflistung der Top-Seller-Artikel.

ItemViewSpecialOffersList

Auflistung von Sonderangeboten.

ItemViewLatestItemsList

Auflistung der zuletzt zum Webshop hinzugefügten Artikel.

ItemViewItemsByPositionList

Liste der meistverkauften Artikel. Wird über Nacht aktualisiert.

ItemViewLastSeenList

Auflistung der zuletzt betrachteten Artikel.

ItemViewRandomList

Auflistung vom System zufällig ausgewählter Artikel.

ItemViewItemImagesList

Darstellung von Artikelbildern in Listenform.

Maßeingabe

System » Artikel » Freitextfelder

Allgemeines zur Maßeingabe

In der Artikelansicht $ItemViewSingleItem besteht für den Käufer die Möglichkeit, durch die Eingabe von Breiten- und/oder Längenangaben flächige Produkte auf den Quadratmillimeter genau zu bestellen. Dabei wird der Preis automatisch berechnet.

Tipp

Der betreffende Artikel muss im Webshop sichtbar sein.

Artikel für Maßeingabe konfigurieren

Die Konfiguration besteht aus drei Schritten, die im Folgenden beschrieben werden.

Freitextfeld anlegen

Legen Sie zunächst wie im Folgenden beschrieben ein Freitextfeld an.

Bild 30. Parameter des Freitextfeldes Maßeingabe

Freitextfeld anlegen:

Öffnen Sie das Menü System » Artikel » Freitextfelder.
Tragen Sie in ein freies Freitextfeld die Bezeichnung Maßeingabe ein.
Wählen Sie unter Datentyp die Einstellung kleine Zahl (-127 bis 127).
Tragen Sie unter Zeichenlänge die Ziffer 1 ein.
Speichern Sie die Einstellungen.

In das daraus generierte Freitextfeld tragen Sie später bei den Artikeln, die eine Maßeingabe seitens des Käufers erlauben sollen, eine Ziffer ein (siehe Kapitel 2.3 Ziffer eintragen).

Freitextfeld am nächsten Tag verfügbar

Das Freitextfeld steht erst am folgenden Tag in der jeweiligen Artikelbearbeitung zur Verfügung.

Maßangaben eintragen

Nun konfigurieren Sie die Maßangaben des Artikels. Das sind die Optionen, die für die Maßeingabe benötigt werden.

Bild 31. Parameter der Artikelbearbeitung

Maßangaben beim Artikel konfigurieren:

Öffnen Sie das Bearbeitungsmenü eines Artikels im Tab Base.
→ Dort finden Sie die Felder Breite, Länge und Höhe (Bild 31).
Geben Sie die maximalen Werte für die Preisberechnung und die Dimensionen des Artikels gemäß der Erläuterungen in Tabelle 25 ein.
→ Am Beispielbild und der Einheit Quadratzentimeter sind somit für die Breite 500 cm und für die Länge 200 cm als maximale Werte eingetragen.

Die folgende Tabelle erläutert die Parameter für die Maßangaben im Tab Base eines Artikels:

Tabelle 25. Maßangaben für Artikel bestimmen
Eintrag	Erläuterung
Einheit	Einheit eintragen, im Beispiel Quadratzentimeter. Den wichtigen Hinweis unter der Tabelle beachten.
Inhalt	Menge eintragen, auf die sich die Preisberechnung beziehen soll, im Beispiel pro 100 Quadratzentimeter.
Länge	Maximal bestellbare Länge eintragen.
Breite	Maximal bestellbare Breite eintragen.

Eingabegenauigkeit beachten: Nur ganze Zahlen möglich!

Für beide Felder (Breite und Länge) sind nur ganze Zahlen als Eingabe erlaubt. Deshalb hängen die Möglichkeiten bezüglich der Eingabegenauigkeit des Käufers davon ab, welche Einheit Sie für den Artikel gewählt haben. Bei der Einheit Quadratmeter wäre eine Bestellung eines Stoffes von 2,5 m Breite und 4,3 m Länge nicht möglich! Für diesen Fall müssten Sie Quadratzentimeter als Einheit hinterlegen und entsprechend den Wert unter Inhalt in Relation zum hinterlegten Preis anpassen. Dann kann der Käufer für die Breite 250 und die Länge 430 eingeben. Entsprechend müssen Sie die Einheit in Quadratmillimeter ändern, wenn noch kleinere Maßangaben nötig sind.

Ziffer eintragen

Hinterlegen Sie in dem Freitextfeld eine Ziffer, um zu bestimmen, was dem Kunden im Bestellvorgang angezeigt wird.

Ziffer für Eingabefelder eintragen:

Klicken Sie auf das Tab Felder in der jeweiligen Artikelbearbeitung.
→ Das Freitextfeld Maßeingabe (siehe Freitextfeld) wird hier angezeigt.
Geben Sie in dieses Freitextfeld eine Ziffer zur Steuerung der Anzeige der Eingabefelder im Layout ein.
Folgende Definition gilt für unsere Beispielkonfiguration:
1: Es soll nur das Feld für die Eingabe der Breite angezeigt werden.
2: Es soll nur das Feld für die Eingabe der Länge angezeigt werden.
3: Es sollen beide Felder angezeigt werden.
Speichern Sie die Einstellungen.

Tipp

Die Ziffer für das Freitextfeld kann in der Artikelsuche über die Gruppenfunktion für mehrere Artikel gleichzeitig gesetzt werden.

Datenaustausch

Die Angaben für Breite, Länge und Höhe können sowohl über den dynamischen Import ins System importiert werden (Datenformate Item und ItemPrice), als auch über die plentymarkets-API und das Format ArticleBasicXML.

Design für Maßeingabe konfigurieren

Nun tragen Sie an einer passenden Position im CMS, z. B. unter dem Code für das Eingabefeld der Menge, den HTML-Code ein.

HTML-Code einfügen:

Öffnen Sie das Menü CMS » Webdesign » Ordner: Layout » Ordner: ItemView.
Wählen Sie das Template ItemViewSingleItem aus.
Fügen Sie den folgenden HTML-Code ein.
Speichern Sie die Einstellungen.

{% if $Free[10]>0 %}
<table>
<tbody>
{% if $Free[10]==1 %}
<tr>
<th>Breite (nur)</th>
<td>$InputWidth $InputMeasureUnit <input id="input_length" name="input_length" value="$Length" class="PlentyOrder_InputLength" type="hidden" /></td>
</tr>
{% endif %}
{% if $Free[10]==2 %}
<tr>
<th>Länge (nur)</th>
<td>$InputLength $InputMeasureUnit <input id="input_width" name="input_width" value="$Width" class="PlentyOrder_InputWidth" type="hidden" /></td>
</tr>
{% endif %}
{% if $Free[10]==3 %}
<tr>
<th>Breite</th>
<td>$InputWidth $InputMeasureUnit</td>
</tr>
<tr>
<th>Länge</th>
<td>$InputLength $InputMeasureUnit</td>
</tr>
{% endif %}
</tbody>
</table>
{% endif %}

Ziffer ersetzen

Ersetzen Sie bei den Template-Variablen $Free[10] in obigem Code die Ziffer 10 ggf. durch die für Ihre Konfiguration zutreffende Ziffer Ihres Freitextfeldes.

Hier werden folgende neue Template-Variablen benutzt, die es nur in der Ansicht ItemViewSingleItem gibt:

$InputWidth: Erzeugt das Eingabeformular für die Breite mit der CSS-Klasse PlentyOrder_InputWidth
$InputLength: Erzeugt das Eingabeformular für die Länge mit der CSS-Klasse PlentyOrder_InputLength
$InputMeasureUnit: Gibt die Einheit für die Eingabe zurück. Die Werte können 'm', 'cm' oder 'mm' sein, abhänging von der Einheit, die am Artikelpreis definiert wurde (am obigen Beispiel ist die Einheit am Artikelpreis Quadratzentimeter, also liefert$InputMeasureUnit’cm').

Neu sind auch die Template-Variablen $Width und $Length für die im Artikel angegebenen Werte Breite und Länge.

Der generierte HTML-Code sieht im Browser für die Beispielkonfiguration für die Ziffer 3 im Freitextfeld folgendermaßen aus:

<table>
<tbody>
<tr>
<th>Breite</th>
<td><input class="PlentyOrder_InputWidth" id="input_width" name="input_width" type="text" value="0" /> cm</td>
</tr>
<tr>
<th>Länge</th>
<td><input class="PlentyOrder_InputLength" id="input_length" name="input_length" type="text" value="0" /> cm</td>
</tr>
</tbody>
</table>

Bild 32 zeigt die daraus generierte Ansicht in Ihrem Webshop:

Bild 32. Eingabefelder für Maßeingabe im Webshop

Eingabefeld verbergen

Wichtig für verborgene Felder

Wenn Sie nur ein Eingabefeld benutzen möchten (nur Breite oder nur Länge), so muss die andere Dimension trotzdem angegeben werden, damit die Flächen und damit auch die Preise korrekt berechnet werden können. Es reicht dabei, die Hidden-Felder wie am nachfolgenden Beispiel-Code zu hinterlegen (vgl. Bild 32, Code für Ziffer 1 und 2).

Wenn z. B. nur die Breite eingegeben werden soll, weil Ihr Produkt eine feste Länge hat, die nicht unterteilt werden kann oder soll, so muss die Länge folgendermaßen verborgen hinterlegt werden:

<input class="PlentyOrder_InputLength" id="input_length" name="input_length" type="hidden" value="$Length" />

Variablen-Funktion

Die Template-Variable $Length gibt automatisch die unter Länge in den Artikeldaten hinterlegte Länge aus.
Das selbe gilt unter Eingabe der Template-Variable $Width im umgekehrten Fall, dass die Breite festgelegt ist und nur die Länge eingegeben werden soll.

5.5.9. Misc

CMS » Webdesign » Layout » Misc

Allgemeines

Die Templates dieses Bereichs steuern die Gestaltung von Terminen, FAQs und der Kundenregistrierung im Webshop. Die Konfiguration erfolgt in zwei Schritten. Zunächst entscheiden Sie, welche Informationen die Template-Variablen ausgeben sollen und nehmen die entsprechenden Einstellungen vor. Dann entscheiden Sie, an welcher Stelle im Webshop die Informationen angezeigt werden sollen und binden die Template-Variable an dieser Stelle der Kategorieseite bzw. des Layout-Templates ein. Im Folgenden beschreiben wir, wie Sie Termine, FAQs und die Kundenregistrierung konfigurieren.

Grundstrukturen im plentymarkets-CMS

Wir weisen darauf hin, dass Sie zur Bearbeitung der Templates im plentymarkets-CMS über gewisse Grundkenntnisse im Bereich HTML und CSS verfügen sollten. Darüber hinaus empfehlen wir Ihnen, die grundlegenden Erläuterungen des Kapitels Webdesign sorgfältig zu lesen. Beachten Sie besonders das Kapitel Syntax, bevor Sie Templates anpassen. Die Handbuchseite Seitenaufbau gibt Ihnen einen Überblick über die Template-Struktur in plentymarkets.

Misc: Templates

Für die Gestaltung der Designs dieser Bereiche sind die in den folgenden Unterkapiteln beschriebenen Templates verfügbar.

Tipp

Die Standard-Templates unserer Systeme enthalten bereits die wichtigsten Template-Variablen, -Funktionen und Konfigurationen. Die hinterlegten Einstellungen können je nach Template variieren. Passen Sie die Einstellungen jeweils für Ihren Online-Shop an.

MiscDatesList

Möchten Sie aktuelle Termine auf Ihrer Homepage präsentieren? Neue Termine erstellen und Ihre aktuellen Termine bearbeiten Sie im Menü CMS » Termine. Das Template wird mit der Template-Variable $Container_MiscDatesList angezeigt.

Termine formatieren

Gehen Sie wie unten beschrieben vor, um Ihre Termine im CMS zu formatieren.

Termine formatieren:

Öffnen Sie das Menü CMS » Webdesign » Layout » Misc.
Öffnen Sie das Template MiscDatesList.
→ Der Code wird im Bearbeitungsfenster angezeigt.
Passen Sie den Code Ihren Anforderungen entsprechend an. Fügen Sie z.B. wie unten beschrieben weitere Template-Variablen (Tabelle 26) ein.
Speichern Sie die Einstellungen.

Template-Variablen

Die für dieses Template relevanten Template-Variablen können über das Icon Template-Variablen und -Funktionen oberhalb des Bearbeitungsfensters des Templates aufgerufen und kopiert werden.

Die folgende Tabelle erläutert die Template-Variablen des Templates MiscDatesList:

Tabelle 26. **Template-Variablen** des Templates **MiscDatesList**
Template-Variable	Erläuterung
$MiscDatesListRow	Bestimmt den Layoutrahmen pro Termin.
$MiscDatesListItem	Darstellung bzw. Gestaltung eines Termins.
$City	Ort des Termins.
$Date	Anzeige des Datums des Termins.
$DateEnd	Anzeige des Enddatums des Termins bei mehrtägigen Terminen.
$Lang	Eingestellte Sprache des Termins.
$Preview	Vorschau des Textes. Es wird der erste Teil des Textes angezeigt, bis zu dem Punkt, der im Code durch die Template-Variable $PreviewBreak markiert ist.
$Text	Anzeige des Textes des Newseintrags.
$Time	Uhrzeit des Termins.
$TimeEnd	Anzeige der Uhrzeit des Terminendes.
$Title	Titel bzw. Überschrift des Termins.
$URL	URL des Termins.

Template-Variable einbinden

Sie binden Ihre Termine über die Template-Variable $Container_MiscDatesList in Ihren Webshop ein. Diese Template-Variable können Sie entweder in eine Kategorie oder in ein Template einfügen. Gehen Sie dazu wie unten beschrieben vor:

Template-Variable in eine Kategorie einbinden:

Öffnen Sie das Menü Artikel » Kategorien.
Öffnen Sie die gewünschte Kategorie.
Fügen Sie die Template-Variable $Container_MiscDatesList an der gewünschten Stelle der Kategorie ein.
Klicken Sie auf Speichern, um die Änderung zu sichern.
Alternativ fügen Sie die Template-Variable in ein Template ein, z.B. im PageDesignContent.

Template-Variable in ein Template einbinden:

Öffnen Sie das Menü CMS » Webdesign » Layout.
Öffnen Sie das gewünschte Template, z.B. PageDesignContent.
Fügen Sie die Template-Variable $Container_MiscDatesList an der gewünschten Stelle des Templates ein.
Klicken Sie auf Speichern, um die Änderung zu sichern.

MiscFAQsList

Mit diesem Template zeigen Sie eine FAQ-Liste in Ihrem Webshop an. Die FAQ-Punkte erstellen und bearbeiten Sie im Menü CMS » FAQ. Das Template wird mit der Template-Variable $Container_MiscFAQsList angezeigt.

Bild 33. Anzeige einer FAQ im Webshop

FAQs formatieren

Gehen Sie wie unten beschrieben vor, um Ihre FAQs im CMS zu formatieren.

FAQs formatieren:

Öffnen Sie das Menü CMS » Webdesign » Layout » Misc.
Öffnen Sie das Template MiscFAQsList.
→ Der Code wird im Bearbeitungsfenster angezeigt.
Passen Sie den Code Ihren Anforderungen entsprechend an. Fügen Sie z.B. wie unten beschrieben weitere Template-Variablen (Tabelle 27) ein.
Speichern Sie die Einstellungen.

Template-Variablen

Die für dieses Template relevanten Template-Variablen können über das Icon Template-Variablen und -Funktionen oberhalb des Bearbeitungsfensters des Templates aufgerufen und kopiert werden.

Die folgende Tabelle erläutert die Template-Variablen des Templates MiscFAQsList:

Tabelle 27. **Template-Variablen** des Templates **MiscFAQsList**
Template-Variable	Erläuterung
$MiscFAQsListRow	Bestimmt den Layoutrahmen pro FAQ.
$MiscFAQsListItem	Darstellung bzw. Gestaltung eines FAQ-Eintrags.
$Answer	Antwort einer FAQ.
$FaqID	ID einer FAQ.
$FaqNum	Name einer FAQ.
$FolderID	ID des Ordners einer FAQ.
$FolderName	Name des Ordners einer FAQ.
$Question	Frage einer FAQ.

Template-Variable einbinden

Sie binden Ihre FAQs über die Template-Variable $Container_MiscFAQsList in Ihren Webshop ein. Diese Template-Variable können Sie entweder in eine Kategorie oder in ein Template einfügen. Gehen Sie dazu wie unten beschrieben vor:

Template-Variable in eine Kategorie einbinden:

Öffnen Sie das Menü Artikel » Kategorien.
Öffnen Sie die gewünschte Kategorie.
Fügen Sie die Template-Variable $Container_MiscFAQsList an der gewünschten Stelle der Kategorie ein.
Klicken Sie auf Speichern, um die Änderung zu sichern.
Alternativ fügen Sie die Template-Variable in ein Template ein, z.B. im PageDesignContent.

Template-Variable in ein Template einbinden:

Öffnen Sie das Menü CMS » Webdesign » Layout.
Öffnen Sie das gewünschte Template, z.B. PageDesignContent.
Fügen Sie die Template-Variable $Container_MiscFAQsList an der gewünschten Stelle des Templates ein.
Klicken Sie auf Speichern, um die Änderung zu sichern.

MiscCustomerRegistrationForm

Das Template MiscCustomerRegistrationForm ist ein individuelles Kundenregistrierungsformular, das mit der Template-Variable $Container_MiscCustomerRegistrationForm an einer beliebigen Stelle im Webshop eingebunden werden kann.

Kundenregistrierungsformular formatieren

Zunächst fügen Sie im CMS den Code ein und nehmen weitere Einstellungen vor. Dabei legen Sie z.B. fest, welche Seite als Landingpage nach der Registrierung angezeigt wird. Diese Optionen finden Sie im Tab Einstellungen des Templates MiscCustomerRegistrationForm.

Kundenregistrierung konfigurieren:

Öffnen Sie das Menü CMS » Webdesign » Layout » Misc » MiscCustomerRegistrationForm.
Klicken Sie auf die Registerkarte MiscCustomerRegistrationFormContent.
Fügen Sie den gewünschten Code ein.
→ Dies kann der Beispiel-Code weiter unten auf dieser Seite oder ein selbst erstellter Code sein.
Nehmen Sie die Konfiguration im Tab Einstellungen gemäß Tabelle 28 vor.
Speichern Sie die Einstellungen.
Prüfen Sie das Ergebnis im Webshop und passen Sie den Code bzw. die Einstellungen bei Bedarf an.

Die folgende Tabelle erläutert die Einstellungen des Templates MiscCustomerRegistrationForm:

Tabelle 28. Einstellungen des Templates **MiscCustomerRegistrationForm**
Einstellung	Erläuterung
MiscCustomerRegistrationForm_ContentpageSelect	Die Seite wählen, auf die der Kunde nach der Registrierung (bei Erfolg oder im Fehlerfall) gelangt. Wird keine Seite gewählt, wird auf die Startseite verlinkt.
MiscCustomerRegistrationForm_AutomaticLoginAfterRegistration	Bei der Einstellung Ja wird der Anmeldevorgang nach der Registrierung automatisch ausgeführt. Bei Nein muss der Kunde sich nach der Registrierung separat einloggen.
ValidateName	Eingabe und Schreibweise des Namens des Kunden werden geprüft.
ValidateAddress	Eingabe und Schreibweise der Adresse des Kunden werden geprüft.
ValidateEmail	Eingabe und Schreibweise der E-Mail-Adresse des Kunden werden geprüft. Pflichtfeld für die Registrierung.
ValidatePhoneNumber, ValidateMobileNumber, ValidateFaxNumber	Eingabe, Schreibweise und Struktur der Telefonnummer, Mobilfunknummer und Faxnummer des Kunden werden geprüft.
ValidateVatNumber	Die Umsatzsteuer-Identifikationsnummer (USt-IdNr.) des Kunden wird geprüft.
ValidateFreeVars	Bei Bedarf die Zusatzfelder wählen, die geprüft werden sollen (Mehrfachauswahl möglich mit Strg bzw. cmd + Mausklick).
ValidatePostnumber	Die DHL-PostNummer wird geprüft.

Nachfolgend ein Beispiel eines HTML-Codes im Template MiscCustomerRegistrationForm:

{% if $CustomerID == 0 %} $FormOpen_CustomerRegistration {% if $ValidateName == 1 %}

{% else %} {% endif %}
<table>
<tbody>
<tr>
<th style="color:red;">Vorname</th>
<td>$Firstname</td>
</tr>
<tr>
<th style="color:red;">Nachname</th>
<td>$Lastname</td>
</tr>
<tr>
<th>Vorname</th>
<td>$Firstname</td>
</tr>
<tr>
<th>Nachname</th>
<td>$Lastname</td>
</tr>
<tr>
<th>Email</th>
<td>$Email</td>
</tr>
<tr>
<th>Email wiederholen</th>
<td>$EmailRepeat</td>
</tr>
<tr>
<th>Passwort</th>
<td>$Password</td>
</tr>
<tr>
<th>Passwort wiederholen</th>
<td>$PasswordRepeat</td>
</tr>
<tr
<th>Telefon</th>
<td>$PhoneNumber</td>
</tr>
<tr>
<th>Mobil</th>
<td>$MobileNumber</td>
</tr>
<tr>
<th>Fax</th>
<td>$FaxNumber</td>
</tr>
<tr>
<th>Land</th>
<td>$CountrySelect</td>
</tr>
<tr>
<th>Free 1</th>
<td>$FreeText1</td>
</tr>
<tr>
<th>Free 2</th>
<td>$FreeText2</td>
</tr>
<tr>
<th>Free 3</th>
<td>$FreeText3</td>
</tr>
<tr>
<th>Free 4</th>
<td>$FreeText4</td>
</tr>
<tr>
<th>Free 5</th>
<td>$FreeText5</td>
</tr>
<tr>
<th>Free 6</th>
<td>$FreeText6</td>
</tr>
<tr>
<th>Free 7</th>
<td>$FreeText7</td>
</tr>
<tr>
<th>Free 8</th>
<td>$FreeText8</td>
</tr>
<tr>
<th>PostIdent</th>
<td>$PostIdent</td>
</tr>
</tbody>
</table>
$Button_CustomerRegistration $FormClose_CustomerRegistration {% else %} Sie haben sich bereits registriert! {% endif %}

Das nachfolgende Bild zeigt eine Standardansicht eines Registrierungsformulars mit Dropdown-Liste zur Einstellung des Landes.

Bild 34. Standardansicht eines Registrierungsformulars

Template-Variablen

Die für dieses Template relevanten Template-Variablen können über das Icon Template-Variablen und -Funktionen oberhalb des Bearbeitungsfensters des Templates aufgerufen und kopiert werden.

Die folgende Tabelle erläutert die Template-Variablen für das Template MiscCustomerRegistrationForm:

Tabelle 29. **Template-Variablen** des Templates **MiscCustomerRegistrationForm**
Template-Variable	Erläuterung
$MiscCustomerRegistrationForm_AutomaticLoginAfterRegistration	Automatischer Login nach Registrierung
$MiscCustomerRegistrationForm_ContentpageSelect	Landingpage
$MiscCustomerRegistrationFormContent	Inhalt des Registrierungsformulars
$IsValidAddressSaved	Abfrage, ob eine gültige E-Mail-Adresse hinterlegt ist
$FormOpen_CustomerRegistration	Öffnet das Registrierungsformular
$FormClose_CustomerRegistration	Schließt das Registrierungsformular
$Button_CustomerRegistration	Button zur Registrierung
$SalutationSelect	Anrede
$Company	Firma
$Firstname	Vorname
$Lastname	Nachname
$Street, $HouseNo	Straße, Hausnummer
$AddressAdditional	Adresszusatz
$ZIP, $City	PLZ, Ort
$CountrySelect	Land, per Dropdown-Liste auswählbar (Bild 34)
$Email, $EmailRepeat	E-Mail-Adresse, E-Mail-Adresse wiederholen
$Password, $PasswordRepeat	Passwort, Passwort wiederholen
$PhoneNumber, $FaxNumber, $MobileNumber	Telefonnummer, Faxnummer, Handynummer
$BirthDay, $BirthMonth, $BirthYear	Geburtsdatum: Tag, Monat, Jahr
$VATNumber	USt.-IdNr.
$PostIdent	Postnummer
$FreeText1 bis $FreeText8	Freitextfelder 1 bis 8
$ValidateAddress	Adresse prüfen
$ValidateEmail	E-Mail-Adresse prüfen
$ValidateFaxNumber	Faxnummer prüfen
$ValidateFreeVars	Freitextfelder prüfen
$ValidateMobileNumber	Handynummer prüfen
$ValidateName	Name prüfen
$ValidatePhoneNumber	Telefonnummer prüfen
$ValidatePostnumber	Postnummer prüfen
$ValidateVatNumber	USt.-IdNr. prüfen

Template-Variable einbinden

Gehen Sie wie unten beschrieben vor, um die Template-Variable $Container_MiscCustomerRegistrationForm an der gewünschten Stelle einer Kategorieseite oder eines Layout-Templates einzufügen.

Bild 35. Template-Variable in eine Kategorieseite einbinden

Template-Variablen in eine Kategorieseite einbinden:

Öffnen Sie das Menü Artikel » Kategorien.
Öffnen Sie die Kategorie, mit der Sie das Kundenregistrierungsformular anzeigen wollen.
Fügen Sie die Template-Variable $Container_MiscCustomerRegistrationForm an der gewünschten Stelle im Quellcode ein.
Speichern Sie die Einstellungen.

Template-Variablen in ein Template einbinden:

Öffnen Sie das Menü CMS » Webdesign.
Öffnen Sie das Template, mit dem Sie das Kundenregistrierungsformular anzeigen wollen.
Fügen Sie die Template-Variable $Container_MiscCustomerRegistrationForm an der gewünschten Stelle im Quellcode ein.
Speichern Sie die Einstellungen.

5.5.10. Bestellvorgang

CMS » Webdesign » Bestellvorgang

Inhalt dieser Seite

In den folgenden Kapiteln erhalten Sie allgemeine Informationen zum Webdesign sowie zu wichtigen Aspekten dieses Bereichs im Webshop.

Struktur des Bestellvorgangs

Der Bestellvorgang bezeichnet den Prozess des Kaufens im Webshop von dem Augenblick an, in dem der Kunde einen Artikel in den Warenkorb legt, bis zu dem Moment, in dem der Kunde die Bestellung abschickt. Dieser Prozess wird in 3 Bereiche unterteilt, den Warenkorb, die anschließende Kaufabwicklung und die abschließende Bestellbestätigung. Diese Bereiche sind auch hier im Bereich Layout abgebildet. Sie haben hinsichtlich der Gestaltung vielfältige Möglichkeiten, die wir in diesem Kapitel beschreiben.

Gesetzliche Anforderungen

Beachten Sie die seit 1.8.2012 geltenden gesetzlichen Anforderungen für den Bestellvorgang. Sie finden auf der Handbuchseite Kaufabwicklung in den Kapiteln 2 und 3 sowie auf der Seite Anpassung an die Button-Lösungweitere Hinweise dazu. Hier finden Sie auch Details zu den Möglichkeiten, die Sie mit plentymarkets diesbezüglich haben. Beachten Sie dazu auch unseren Blog.

Grundeinstellungen

Sie können den Bereich Bestellvorgang individuell konfigurieren und z.B. entscheiden, welche Elemente dort angezeigt bzw. welche Funktionen aktiv sein sollen. Diese Einstellungen nehmen Sie im Menü System » Mandant » Mandant wählen » Bestellvorgang » Einstellungen vor. In der Grundeinstellung Ihres Webshops ist bereits eine Standardkonfiguration hinterlegt.

jQuery

In diesem Bereich sind jQuery-Funktionen integriert. Wenn Sie diese Funktionen anpassen oder erweitern möchten, beachten Sie die Hinweise auf der Handbuchseite jQuery.

Tracking-Funktionen

Durch die Integration von Tracking-Funktionen über Template-Variablen in Verbindung mit Tracking-Dienstleistern können Sie sich mit Hilfe detaillierter Statistiken einen Überblick zum Nutzungsverhalten der Besucher Ihres Webshops verschaffen und daraus geeignete Rückschlüsse für die Gestaltung und Entwicklung Ihres Webshops ziehen.

Nutzen Sie den Service von Google Analytics oder anderen Tracking-Dienstleistern, wie etracker, um diese Funktionen in Ihren Webshop zu integrieren.

Warenkorb

CMS » Webdesign » Bestellvorgang » Warenkorb

Inhalt dieser Seite

Der Warenkorb bildet den ersten Bereich des Bestellvorgangs, den der Kunde im Webshop durchläuft. Dieser Bereich enthält bereits Standard-Einträge und -konfigurationen, bietet jedoch vielfältige Änderungsmöglichkeiten. Die entsprechenden Einstellungen sind in den übersichtlich gestalteten Untermenüs sehr einfach möglich.

Übersicht zur Konfiguration

Die nachfolgend beschriebenen Bereiche können Sie im Tab Warenkorb individuell anpassen.

Tab: Warenkorb

Das Tab Warenkorb öffnen Sie, indem Sie im Menü CMS » Webdesign auf den Ordner Bestellvorgang und dann auf Warenkorb klicken.

CSS-Formatierungen

Die CSS-Formatierungen im Bestellvorgang bis plentymarkets-Version 5.0 wurden in der Reihenfolge der Untermenüs dieser Bereiche in das neue Tab CSSOrder migriert. Das CSS für den Bereich Warenkorb befindet sich somit unter CMS » Webdesign » Ordner: Layout » Ordner: CSS » Template: CSSOrder. Dort sind die CSS-Formatierungen in der Reihenfolge der Untermenüs des Bereichs Warenkorb enthalten.

Titel
Dieser Bereich gestaltet den oberen Bereich des Warenkorbs. Der Käufer erhält Informationen zum Warenkorb sowie zur Vorgehensweise. Für den ersten Hinweistext ist unter Text vor ein Mustertext eingetragen, den Sie ändern können. Dieser erste Hinweistext erscheint oberhalb des Weiter-Buttons, im Standard ist das der Button Zur Kasse, den Sie im Tab Buttons anpassen können. Sie können den Titel ändern und einstellen, ob der Weiter-Button angezeigt werden soll oder nicht. Ein zweiter Hinweis wird, wenn benötigt, unter Text nach hinterlegt und erscheint am Ende dieses oberen Bereichs des Warenkorbs.

Artikel
Auflistung der Artikel im Warenkorb. Zwei Hinweistexte können eingetragen bzw. geändert werden. Der erste erscheint oberhalb der Artikelauflistung und der zweite unterhalb der Artikelauflistung, d.h. die Informationen werden in der Reihenfolge dargestellt wie Sie auch hier zu erkennen ist. Sie können u.a. einstellen, welche Artikeldetails im Warenkorb angezeigt werden sollen, ob Sie die Möglichkeit verwenden möchten, Artikel aus dem Warenkorb auf die Merkliste zu setzen und ob der Button Warenkorb aktualisieren angezeigt werden soll und an welcher Position.

Attributauswahl
Die Attributauswahl erscheint nur bei Artikeln, die über Attribute verfügen. Die Attribute werden zur Auswahl in Dropdown-Listen angezeigt, so dass der Kunde sich hier noch einmal für eine andere Variante entscheiden kann. Der hier eingetragene Hinweistext erscheint im Warenkorb des Kunden oberhalb dieser Dropdown-Listen.

Bestellmerkmal
Artikel können so konfiguriert werden, dass von Webshopbesuchern im Bestellvorgang Texte hinterlegt und Dateien hochgeladen werden können. Der Kunde kann damit z.B. einen Text zu einem Bestellwunsch hinterlegen. Oder eine Datei hochladen, z.B. ein Foto für die Bedruckung eines Artikels. Dazu müssen Merkmale konfiguriert werden.

Lieferdatum
Im Warenkorb wird der Link Lieferdatum ändern angezeigt. Der Kunde kann diesen Link anklicken und ein Lieferdatum eintragen. Hat der Kunde bereits ein Lieferdatum eingetragen, wird dieses Lieferdatum angezeigt. Sie können die Standardtexte Lieferdatum ändern und Lieferdatum ändern und zusätzlich einen Hinweis hinterlegen. Die Konfiguration des Lieferdatums für den Bestellvorgang nehmen Sie unter System » Mandant » Mandant wählen » Bestellvorgang » Einstellungen vor. Details dazu finden Sie auf der Handbuchseite Grundeinstellungen. Dort finden Sie auch den Code, den Sie ins CMS einfügen, damit die Lieferdatumsfunktion angezeigt wird.

Abonnement
Mit dieser Option können Sie Artikel in Ihrem Webshop als Abonnement anbieten. Damit ein Kunde in Ihrem Webshop die Abo-Funktionen wählen kann, müssen Sie die entsprechenden Template-Variablen und -Funktionen in das Layout Ihres Webshops einfügen. Details dazu finden Sie auf der Handbuchseite Scheduler. Die Lieferintervalle sowie die Anzahl der Lieferungen, die Sie Ihren Kunden im Webshop zur Auswahl geben möchten, legen Sie im Scheduler-Bereich fest.

Lieferland
Das Standard-Lieferland ist vorausgewählt, kann jedoch geändert werden, wenn Sie einstellen, dass dieser Bereich angezeigt werden soll. Soll die Auswahl angezeigt werden, können Sie einstellen, ob die Auswahl direkt zu sehen ist oder erst nach einem Klick auf die Bereichsüberschrift.

Fehlermeldung konfigurieren

Wenn für ein gewähltes Lieferland kein Versandprofil verfügbar ist, wird eine Fehlermeldung angezeigt. In diesem Fall muss der Kunde ein anderes Lieferland wählen oder die Bestellung abbrechen. Die Fehlermeldung ist im Menü System » Mandant » Global » Sprachpakete hinterlegt. Sie können die Fehlermerldung dort anpassen und z.B. den Hinweis ergänzen, dass der Kunde den Webshop kontaktieren soll. Wenn das Fehlen des Versandprofils für das betreffende Lieferland ein Fehler ist, korrigieren Sie diesen Fehler und stellen ein Versandprofil dafür bereit.

Zahlungsart
Anzeige der Zahlungsarten mit Wahlmöglichkeit. Es werden jeweils die Kosten der Zahlungsarten angezeigt, wenn Zusatzkosten anfallen. Sie können einstellen, ob der Bereich sich erst nach dem Klicken auf den Titel öffnen soll. Beachten Sie den Hinweis zur Option Lieferland. Dieser gilt auch für die Zahlungsart.

Versandart
Anzeige der Versandarten mit Wahlmöglichkeit. Die Versandart mit der höchsten Priorität Ihrer Versandprofile ist vorausgewählt. Sie können einstellen, ob der Bereich sich erst nach dem Klicken auf den Titel öffnen soll.

Summen
Sie können einen Hinweistext eintragen, der oben links in diesem Bereich angezeigt wird.

Gutschein
In diesem Bereich kann der Kunde einen Gutschein-Code eingeben. Sie können einstellen, ob dieser Bereich angezeigt werden soll oder nicht. Auch optional ist, ob der Bereich sich erst nach dem Klicken auf den Titel öffnen soll.

Fußzeile
Hier können Sie Hinweistexte eintragen, die im unteren Bereich des Warenkorbs angezeigt werden. Der erste Hinweistext wird unter Hinweis vor hinterlegt und wird im Warenkorb über dem Zur Kasse-Button(Weiter-Button) angezeigt. Sie können einstellen, ob der Zur Kasse-Button angezeigt werden soll oder nicht. Ein zweiter Hinweis wird unter Hinweis nach hinterlegt und wird dann im Warenkorb unter dem Zur Kasse-Button angezeigt.

Tool zur Identifizierung von Elementen

Wir empfehlen die Verwendung eines Tools zur Untersuchung der Elemente, die Sie verändern möchten, wie z.B. Firebug. Damit ist es relativ einfach, Elemente zu identifizieren, wenn Sie nicht genau wissen, welcher Bezeichnung im Code ein Element jeweils zuzuordnen ist.

Beispiel für die Anpassung eines Bereichs im Warenkorb

Wir beschreiben nun die Vorgehensweise anhand des Untermenüs Titel. Sie erfahren, wie Sie die Elemente dieses Bereichs verändern oder ggf. ausblenden.

Orientierung

Die Elemente, die nachfolgend beschrieben werden, sind in Bild 36 nummeriert. In Bild 37 können Sie diese Elemente anhand der Nummerierung leicht wiederfinden und sehen, wo die Elemente im Warenkorb angezeigt werden.

Optionen für die Anpassung im Untermenü: Titel

Bild 36 zeigt Standard-Einstellungen dieses Untermenüs:

DE CMS Webdesign Bearbeiten Bestellvor Warenkorb 01

Bild 36. Warenkorb; Optionen im Untermenü Titel

In der Tabelle finden Sie weitere Infos zu den Optionen im Untermenü Titel:

Tabelle 30. Warenkorb; Optionen im Untermenü **Titel**
Pos.	Einstellung	Erläuterung
1	Bilder-Galerie	Die Bilder-Galerie enthält alle Bilder für das Webshop-Design. Sie können über die Bilder-Galerie ein Bild in einen Bereich laden, indem Sie die URL des Bildes einfügen. Bild 36 zeigt ein Beispiel für den HTML-Code (Pfeil). Ergebnis: Bild 37, Pos. 1. Legen Sie in der Bilder-Galerie individuelle Ordner für die verschiedenen Bereiche des Designs an.
2	Template-Variablen und -Funktionen	Öffnet eine Übersicht mit den Template-Variablen und -Funktionen des Templates sowie weiteren Template-Variablen- und -Funktionslisten.
3	Editor	Folgende Optionen sind verfügbar: WYSIWYG-Editor = Editor mit umfangreicher Werkzeugleiste zur Bearbeitung. CK-Editor = Leistungsfähiger Editor, der auch in anderen Bereichen verwendet wird. Syntax-Editor = Code wird mit farblich hervorgehobener Syntaxstruktur angezeigt. Textfeld = Code wird als reiner Text angezeigt.
4	Text vor	Der Hinweistext informiert den Webshopbesucher über wichtige Punkte zur Vorgehensweise beim Bestellvorgang. Je nach Design bzw. Template ist ein Standardtext voreingetragen. Sie können diesen Text bearbeiten oder ergänzen. Es ist auch möglich, ein Bild zu hinterlegen durch Einfügen des entsprechenden HTML-Codes inklusive der URL des Bildes (Bild 36, Pfeil).
5	Titel	Hier wird die Bezeichnung für den Titel hinterlegt, in diesem Fall die Bezeichnung Warenkorb (Bild 36, Pos. 5).
6	Weiter-Button	Der Weiter-Button bewirkt den Übergang aus dem Warenkorb zum Bestellvorgang. Der Kunde kann dazu diesen Button verwenden oder einen zweiten (gleichen) Button am Ende der Seite. Der Button steht im Standard auf anzeigen (Bild 36, Pos. 6) und wird mit nicht anzeigen ausgeblendet. *Tipp: Verbergen Sie den Button durch Wahl der Option Nicht anzeigen*, wenn Sie möchten, dass der Kunde nicht an dieser Stelle den Warenkorb verlässt, sondern zunächst die ganze Seite prüft und dann den Button am Ende der Seite anklickt. Die Buttons sowie Texte der Buttons bearbeiten Sie im gleichnamigen Tab.
7	Text nach	Hier bei Bedarf einen weiteren Hinweistext eintragen, der unten im Titelfeld angezeigt wird (Bild 36, Pos. 7).

Ansicht der Einstellungen im Webshop

Anhand der Positionsnummern, die denen in Bild 36 bzw. der Tabelle 30 entsprechen, können Sie nun in Bild 37 erkennen, wo die verschiedenen Elemente im Webshop erscheinen. Die Ansicht kann je nach verwendetem Design abweichen.

DE CMS Webdesign Bearbeiten Bestellvor Warenkorb 02

Bild 37. Warenkorb; Umsetzung der Einstellungen im Untermenü Titel

Template-Variablen im Bereich Warenkorb

Eine Übersicht aller in diesem Bereich verwendbaren Template-Variablen und -Funktionen öffnen Sie, wenn Sie auf das Icon Template-Variablen und -Funktionen klicken (Bild 36, Pos. 2). Wenn Sie eine Variable bzw. Funktion z.B. in einen Hinweistext oder in das CSS kopieren, wird der Inhalt während der Kaufabwicklung angezeigt.

Beispiel: Template-Variablen und -Funktionen für unterschiedliche Trennzeichen

Template-Variablen wie $ItemAmountNetDot dienen der Darstellung von Zahlenwerten (Preisen). Der letzte Teil der Template-Variable, hier Dot, gibt das Trennzeichen vor z.B. dem Centbetrag an. Sie können somit diese Template-Variablen nutzen, um für die jeweilige Sprache die Anzeige der Preise, Versandkosten etc. anzupassen. Sie könnten so für das deutsche Layout die Kommaseparierung und für das englische Layout die Punktseparierung bei Geldbeträgen umsetzen.

Dot-Template-Variablen

Wenn Sie diese Template-Variablen an anderer Stelle zur Übertragung von Daten verwenden möchten, müssen Sie die Dot-Variablen verwenden, die als einzige Variablen für eine Datenübertragung geeignet sind.

Die folgende Tabelle erläutert wichtige Template-Variablen für den Warenkorb.

Tabelle 31. Template-Variablen im Warenkorb-Bereich
Variablenname	Erläuterung
$CompanyCEO	Geschäftsführer der Firma; global verwendbare Variable
$CompanyCity	Ort des Firmensitzes; global verwendbare Variable
$CompanyCountry	Land des Firmensitzes; global verwendbare Variable
$CompanyEmail	E-Mail-Adresse der Firma; global verwendbare Variable
$CompanyFon	Telefonnummer der Firma; global verwendbare Variable
$CompanyHotline	Hotline der Firma; global verwendbare Variable
$CouponCampaign	Gutscheinkampagne; global verwendbare Variable
$CouponCampaignID	ID der Gutscheinkampagne; global verwendbare Variable
$CouponCode	Gutschein-Code; global verwendbare Variable
$Currency	Währung; global verwendbare Variable
$CustomerEmail	E-Mail-Adresse des Kunden; global verwendbare Variable
$CustomerID	Kunden-ID; global verwendbare Variable
$CustomerName	Name des Kunden; global verwendbare Variable
$GtcTransAsync	Auftrags- und Artikelparameter Herkömmlicher Tracking-Code von Google Analytics Beim asynchronen Tracking-Code von Google Analytics handelt es sich um ein verbessertes JavaScript-Code-Snippet, bei dem der Tracking-Code ga.js im Hintergrund geladen wird. Zu den Vorteilen gehört u.a. eine kürzere Ladezeit. Details direkt von Google.
$ItemAmountGrossDot	Artikelwert brutto; Nachkommazahlen werden durch einen Punkt getrennt.
$ItemAmountNetComma	Artikelwert netto; Nachkommazahlen werden durch ein Komma getrennt.
$ItemAmountNetDot	Artikelwert netto; Nachkommazahlen werden durch einen Punkt getrennt.
$ItemIDListComma	Auflistung der Artikel-IDs; zwischen den IDs steht ein Komma als Trennzeichen.
$ItemIDListPipe	Auflistung der Artikel-IDs; zwischen den IDs steht ein senkrechter Strich als Trennzeichen.
$ItemQuantity	Anzahl der Artikel
$IsNet	Diese global verwendbare Variable liefert die Werte TRUE, wenn der Inhalt des Warenkorbs zu einer Netto-Bestellung wird (abhängig von den Einstellungen des Systems), und FALSE, wenn es eine Brutto-Bestellung wird.
$MethodOfPayment	Zahlungsart
$MethodOfPaymentID	ID der Zahlungsart
$ReferrerID	Herkunfts-ID; global verwendbare Variable
$ReferrerName	Herkunftsname; global verwendbare Variable
$ShippingCostsGrossComma	Versandkosten brutto; Nachkommazahlen werden durch ein Komma getrennt.
$ShippingCostsGrossDot	Versandkosten brutto; Nachkommazahlen werden durch einen Punkt getrennt.
$ShippingCostsNetComma	Versandkosten netto; Nachkommazahlen werden durch ein Komma getrennt.
$ShippingCostsNetDot	Versandkosten netto; Nachkommazahlen werden durch einen Punkt getrennt.
$ShippingCountry	Lieferland
$ShippingCountryID	ID des Lieferlandes
$ShippingProfile	Versandprofil
$ShippingProfileID	ID des Versandprofils
$ShippingProvider	Versanddienstleister
$ShippingProviderID	ID des Versanddienstleisters
$TotalAmountGrossComma	Gesamtsumme brutto; Nachkommazahlen werden durch ein Komma getrennt.
$TotalAmountGrossDot	Gesamtsumme brutto; Nachkommazahlen werden durch einen Punkt getrennt.
$TotalAmountNetComma	Gesamtsumme netto; Nachkommazahlen werden durch ein Komma getrennt.
$TotalAmountNetDot	Gesamtsumme netto; Nachkommazahlen werden durch einen Punkt getrennt.

Tracking

Mit Tools wie Google Analytics oder etracker richten Sie ein Tracking Ihrer Webshop-Besuche ein. Dabei ist es möglich, im Bereich des Warenkorbs einen Tracking-Code zu hinterlegen, der Ihnen detaillierte Informationen zu den Einkäufen Ihrer Kunden, den Aufträgen und den darin enthaltenen Artikeln liefert.

Beachten Sie dazu die Handbuchseite Google Analytics.

Individueller Bestellvorgang

Der Bestellvorgang bezeichnet den Prozess des Kaufens im Online-Shop von dem Augenblick an, in dem der Kunde einen Artikel in den Warenkorb legt, bis zu dem Moment, in dem der Kunde die Bestellung abschickt. In Callisto Light ist der Individuelle Bestellvorgang standardmäßig eingestellt. Der Individuelle Bestellvorgang ermöglicht Ihnen volle Kontrolle über das Aussehen, den Funktionsumfang und den Verlauf des Kaufprozesses. Sie legen in bis zu zehn Schritten fest, wie Kunden Ihren persönlichen Bestellvorgang durchlaufen sollen. Zusätzlich gestalten Sie die Schritte Login, Logout, Kundenregistrierung, Passwort vergessen und Bestellbestätigung.
Diese Handbuchseite beschreibt den Aufbau des Individuellen Bestellvorgangs sowie Konfigurations- und Einstellungsmöglichkeiten.
Die aufgeführten Einstellungen für den Bestellvorgang werden für jedes Design separat und dort pro Mandant (Shop) vorgenommen. Auch die Anzahl und den Inhalt der einzelnen Schritte des Bestellvorgangs gestalten Sie pro Mandant.

Wechsel auf den Individuellen Bestellvorgang

Ein Wechsel vom Standard-Bestellvorgang auf den Individuellen Bestellvorgang kann aus technischen Gründen nicht mehr rückgängig gemacht werden.

Bestandteile des Individuellen Bestellvorgangs in Callisto Light

Der Aufbau des Individuellen Bestellvorgangs wird im Folgenden in den Kapiteln Kategorien, Bestellschritte, Kopfzeile Kasse und Zusätzliche Seiten erläutert.

Kategorien

Mit dem Individuellen Bestellvorgang wurden Kategorien des Typs Container eingeführt. Kategorien dieses Typs können auf alle globalen Template-Variablen und -Funktionen der Checkout-Templates des Bereichs CMS » Webdesign » Layout » Checkout zugreifen. Über globale Template-Variablen und -Funktionen ist wiederum ein Zugriff von den Kategorien des Typs Container auf Template-spezifische, d.h. nicht globale Variablen und Funktionen möglich. Der gesamte Bestellvorgang kann so vollständig in Kategorien abgebildet werden. Die Verwendung von Templates ist im Individuellen Bestellvorgang somit nicht mehr zwingend erforderlich. Die Kategorien von Callisto Light finden Sie in plentymarkets unter Artikel » Kategorien im Ordner Ihres Designs. Dort gestalten Sie die Inhalte der Bestellschritte. Um von einer Kategorie auf eine andere Kategorie zu verlinken, nutzen Sie die Link-Funktionen. Es stehen Ihnen vordefinierte Funktionen zur Verfügung:

Tabelle 32. Vordefinierte Template-Funktionen
Funktionsaufruf	Zurückgelieferter Link
Link_CustomerRegistration()	Kundenregistrierung
Link_LostPassword()	Passwort vergessen
Link_OrderConfirmation()	Bestellbestätigung
Link_Checkout(1)	Anmeldung
Link_Checkout(2)	Warenkorb
Link_Checkout(3)	Kasse
Link_Checkout(4)	Bestelldetails
Link_Checkout(5)	Anschrift
Link_Checkout(x)	x: Nummer des Bestellschritts im Bestellvorgang

Kategorien, z.B. für Kundenregistrierung und Bestellbestätigung, können Sie mit Hilfe von Anchor-Tags an beliebiger Stelle im Bestellvorgang verlinken.

# Erzeugung eines Anchor-Tags der als Button gestaltet ist und je nach Kundenstatus zu den Bestelldetails oder zur Kundenregistrierung führt.
<a class="btn btn-primary btn-lg btn-block-xs" href="{% if ( $CustomerID ) { Link_CustomerRegistration() } else { Link_Checkout(3); } %}">
	<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>Zur Kasse
</a>

Codebeispiel 1: Code für Button *Zur Kasse*

Codebeispiel 1 stammt aus der Kategorie Warenkorb von Callisto Light. Kunden wird darüber der Button Zur Kasse angezeigt (Bild 38). Im Code wird auch geprüft, ob der Kunde im System angemeldet ist. Ist der Kunde nicht angemeldet, wird für das href-Attribut des Buttons die Funktion Link_CustomerRegistration() hinterlegt. Der Kunde wird bei Klick auf den Button Zur Kasse zur Kundenregistrierung geleitet. Dort kann sich der Kunde im System anmelden oder ein neues Kundenkonto erstellen. Ist der Kunde bereits im System angemeldet, führt der Link zum Bestellschritt Bestelldetails, d.h. dem ersten Bestellschritt der Kopfzeile Kasse, da für diesen Fall die Template-Funktion Link_Checkout(3) hinterlegt wurde.

Bild 38. Button Zur Kasse, der durch Codebeispiel 1 erzeugt wird

Bestellschritte

Für die acht Bestellschritte des Individuellen Bestellvorgangs in Callisto Light sind in den Design-Einstellungen Kategorien verknüpft (Bild 39).

In Callisto Light sind für den Bestellvorgang acht Schritte hinterlegt:

Warenkorb
Anmeldung
Kasse
Bestelldetails
Anschrift
Zahlung & Versand
Bestellübersicht & Kaufabschluss
Bestellvorgang

Diese acht Schritte werden über Kategorien des Typs Container dargestellt. Die Kategorien von Callisto Light finden Sie in plentymarkets unter Artikel » Kategorien im Ordner Ihres Designs. Zusätzlich stehen zwei weitere Bestellschritte (9. Bestellschritt und 10. Bestellschritt) zur Verfügung. Insgesamt lassen sich im Individuellen Bestellvorgang also zehn Bestellschritte einrichten (Bild 39). Außerdem besteht die Möglichkeit, fünf zusätzliche Seiten anzulegen (Bild 39).

Bild 39. Voreingestellte Bestellschritte in Callisto Light

Die folgende Tabelle zeigt die zehn konfigurierbaren Bestellschritte des Individuellen Bestellvorgangs und verdeutlicht deren Funktion im Frontend, d.h. im Online-Shop.

Tabelle 33. Bestellschritte des Individuellen Bestellvorgangs
Nr.	Schritt im Backend	Funktion im Frontend
1	Warenkorb	Übersicht aller Artikel, die der Kunde kaufen möchte.
2	Anmeldung	Kunden entscheiden, ob sie als Gast oder als registrierte Benutzer zur Kasse gehen.
3	Kasse	Dient als Kopfzeile für die folgenden Bestellschritte (Bild 40): * Bestelldetails * Anschrift * Zahlung & Versand * Übersicht & Vertragsabschluss
4	Bestelldetails	Wird im Frontend als Tab Bestelldetails der logischen Einheit Kasse dargestellt.
5	Anschrift	Wird im Frontend als Tab Anschrift der logischen Einheit Kasse dargestellt.
6	Zahlung & Versand	Wird im Frontend als Tab Zahlung & Versand der logischen Einheit Kasse dargestellt.
7	Bestellübersicht & Kaufabschluss	Wird im Frontend als Tab Übersicht & Vertragsabschluss der logischen Einheit Kasse dargestellt.
8	Bestellvorgang	Stellt zur Auswahl, wohin der Kunde als Nächstes navigieren kann: * Warenkorb * Kasse * Anmeldung Hinweis: Bestellschritt ist namensgleich mit dem Bestellvorgang als Ganzes. Diese Namensgleichheit beruht auf technischen Begebenheiten.
9	Frei	Nicht in Benutzung. Kann konfiguriert werden.
10	Frei	Nicht in Benutzung. Kann konfiguriert werden.

Kopfzeile Kasse

Der dritte Bestellschritt, die Kategorie Kasse, stellt einen Sonderfall dar, da dieser Schritt die in Tabelle 33 beschriebenen vier Bestellschritte beinhaltet. In der Kategorie Kasse wird die Abfolge dieser vier Bestellschritte geregelt. Die Kasse wird im individuellen Bestellvorgang von Callisto Light als Kopfzeile und Fortschrittsanzeige genutzt, anhand derer Kunden ihren Fortschritt ablesen können (Bild 40).

Bild 40. Bestellschritte der Kategorie Kasse

Tabelle 34. Bestellschritte der Kopfzeile **Kasse**
Bestellschritte der Kategorie Kasse	Inhalt
1. Bestelldetails	Eingabefelder: * Ihr Zeichen * Hinweise & Sonderwünsche * Gutschein-Codes
2. Anschrift	Rechnungsanschrift Angabe abweichender Lieferanschrift Optionale Felder: * Fax * Mobile * Postnummer * USt-IdNr.
3. Zahlung & Versand	Auswahl der Zahlungsarten Auswahl des Versanddienstleisters
4. Übersicht & Vertragsabschluss	Zusammenfassung der Bestellung AGB-Einwilligung Newsletter-Anmeldung

In Callisto Light werden die Schritte des Bestellvorgangs mit Hilfe von JavaScript dynamisch ein- und ausgeblendet. Die Daten in den vier Bestellschritten der Kopfzeile Kasse (Bild 40) werden mit Hilfe von REST-Calls im Hintergrund mit dem Server ausgetauscht und aktuell gehalten. Den Code für die Darstellung der Kopfzeile Kasse finden Sie in plentymarkets im Ordner Ihres Designs unter Artikel » Kategorien » Kasse.

In der Kategorie Kasse wird der Code der vier Bestellschritte über die Funktion CategoryContentBody($_id) geladen. Sie finden die Bestellschritte am einfachsten über die HTML-Kommentare in der Kategorie:

Tabelle 35. Bestellschritte in der Kategorie **Kasse**
Bestellschritt	HTML-Kommentar
Bestelldetails	STEP 1: Order details
Anschrift	STEP 2: Addresses
Zahlung & Versand	STEP 3: Shipping & Payment
Übersicht & Vertragsabschluss	STEP 4: Overview & Confirmation

Codebeispiel 2 zeigt, wie der Inhalt der Kopfzeile Kasse mit den Bestellschritten Bestelldetails, Anschrift, Zahlung & Versand und Übersicht & Vertragsabschluss in Callisto Light geladen wird.

Codebeispiel 2 stammt aus der Kategorie Kasse und beinhaltet die oben aufgeführten Bestellschritte. In Zeile 7 des Codebeispiels 2 wird mit der Anweisung $_id= CheckoutStepPageID(4) die ID für den Bestellschritt Bestelldetails in der Variablen $_id gespeichert. Die Ziffern in der Klammer von CheckoutStepPageID entsprechen der Nummerierung der Bestellschritte in den Design-Einstellungen (Bild 39). In diesem Fall wird in der Variablen $_id also die ID der Kategorie gespeichert, die dem 4. Bestellschritt zugeordnet ist. In Bild 39 ist diese ID die ID 109. In Zeile 8 erhält das Attribut data-plenty-checkout-content den Wert, der in $_id hinterlegt ist. Der Ausdruck data-plenty-checkout-content="$_id" wird also zu data-plenty-checkout-content="109". Mit dem Ausdruck CategoryContentBody($_id) wird in Zeile 13 der in der Kategorie Bestelldetails hinterlegte Inhalt abgerufen.

# Anpassbarer Code für die Darstellung der Kopfzeile Kasse in den Design-Einstellungen.
<div class="checkout checkout-content checkout-tabpanel" data-plenty-checkout="container">
   {% if GetGlobal("ShowTabDetails") %}
   <!-- STEP 1: Order details -->
   # Hier beginnt Schritt 1 Bestelldetails.

   {% $_id = CheckoutStepPageID(4) %}
   # In die Variable $_id wird die ID des vierten Bestellschritts mit Hilfe der Funktion CheckoutStepPageID(4) geschrieben.

   	<div class="container" data-plenty-checkout-id="details" id="checkoutPanelOrderDetails" aria-labelledby="checkoutTabOrderDetails" role="tabpanel" data-plenty-checkout-content="$_id">
   	# Dieser Container definiert das Aussehen des Bestellschritts

		{% CategoryContentBody($_id) %}
		# Der Inhalt der Kategorie Bestelldetails wird aufgerufen

	</div>
	{% endif %}

Codebeispiel 2: Bestellschritte der Kategorie Kasse

Zusätzliche Seiten

Im Individuellen Bestellvorgang ist es möglich, neben den zehn Bestellschritten die folgenden fünf weiteren Seiten über Kategorien selbst zu gestalten:

Login
Logout
Kundenregistrierung
Passwort vergessen
Bestellbestätigung

Inhalte der Bestellschritte

Die HTML-Struktur der einzelnen Bestellschritte des Individuellen Bestellvorgangs wird über globale Template-Funktionen geladen. Diese Template-Funktionen liefern das Grundgerüst, mit dessen Hilfe Bestelldaten dargestellt werden. Durch das Einsetzen von REST-Calls findet ein ständiger Austausch von Bestelldaten zwischen Client und Server statt. Dies stellt eine aktuelle und innerhalb der Bestellschritte konsistente Datenbasis sicher.

Im Template PageDesignPrepareMainColumn wird festgelegt, welche Elemente in den Bestellschritten geladen werden sollen.

HTML-Gerüst

Die Checkout-Templates zur Darstellung von Bestelldaten in den Bestellschritten bestehen aus HTML-Code, der für die Strukturierung des Inhalts der Bestellschritte sorgt. Die Templates befinden sich im Menü CMS » Webdesign » Layout » Checkout. In Tabelle 36 sind Bestellschritte mit den verwendeten Checkout-Templates aufgelistet. Im Bestellschritt Warenkorb wird beispielsweise mit der Anweisung Container_CheckoutBasketItemsList() das HTML-Gerüst für die Artikelübersicht im Warenkorb geladen. Das Template finden Sie unter CMS » Webdesign » Layout » Checkout » CheckoutBasketItemsList.

Tabelle 36. Verfügbare Checkout-Templates
Kategorie	Container
Warenkorb	Container_CheckoutBasketItemsList() Container_CheckoutTotals() Container_CheckoutCoupon()
Bestelldetails	Container_CheckoutCoupon()
Anschrift	Container_CheckoutCustomerInvoiceAddress() Container_CheckoutCustomerShippingAddress()
Zahlung & Versand	Container_CheckoutMethodsOfPaymentList() Container_CheckoutShippingProfilesList()
Bestellübersicht & Kaufabschluss	Container_CheckoutMethodsOfPaymentList() Container_CheckoutShippingProfilesList()

Laden einzelner Elemente

Im Template PageDesignPrepareMainColumn unter CMS » Webdesign » Layout » PageDesign werden globale Variablen mit Hilfe der Template-Funktion setGlobal festgelegt. Sie nehmen auf diese Weise Einfluss auf die Sichtbarkeit von Elementen, z.B. den Eingabefeldern von Formularen. Mit den Angaben unter dem Kommentar # CHECKOUT VALIDATION & APPEARANCE regeln Sie die Darstellung von Elementen im Individuellen Bestellvorgang (Tab. 6).

Tabelle 37. Template-Funktionen für die Bestelldetails
Funktion	Standard-Wert	Erklärung
SetGlobal("ShowTabDetails", true);	true	Tab Bestelldetails wird in Kopfzeile Kasse angezeigt.
SetGlobal("ShowCustomerSign", true);	true	Zeigt das Eingabefeld Ihr Zeichen.
SetGlobal("ValidateCustomerSign", false);	false	Validiert das Eingabefeld Ihr Zeichen.
SetGlobal("ShowCustomerNotice", true);	true	Zeigt das Eingabefeld Ihre Hinweise & Sonderwünsche.
SetGlobal("ShowCouponInDetails", true);	true	Zeigt das Eingabefeld Gutschein-Code.

Ausgabe der Zahlungsarten

Im Ordner Ihres Designs (z.B. callisto_light_3) in der Kategorie Zahlung & Versand wird die globale Funktion Container_CheckoutMethodsOfPaymentList aufgerufen. Um alle verfügbaren Zahlungsarten auszugeben, wird in Callisto Light das Template CheckoutMethodsOfPaymentList in CMS » Webdesign » Layout » Checkout verwendet. Es wird eine HTML-Liste mit Radio-Buttons erzeugt, über die Kunden eine Zahlungsart auswählen können (Codebeispiel 3).

# Die For-Schleife erzeugt eine Liste mit Radio-Buttons, mit der sich eine Zahlungsart auswählen lässt.
{% for $_payment in GetCheckoutMethodsOfPaymentList() %}
	{% if $_payment->MethodOfPaymentID > 0 %}

		{% $_pID = $_payment->MethodOfPaymentID %}
			<li class="radio clearfix">
				<label>
					<input type="radio" name="MethodOfPaymentID" value="$_pID"{% if $CheckoutMethodOfPaymentID == $_pID %} checked="checked"{% endif %}>
					$_payment->MethodOfPaymentName

					{% if $_payment->MethodOfPaymentExternalInfo %}
						<span class="payment-information">
							$_payment->MethodOfPaymentExternalInfo
							{% Link_MethodOfPaymentInfoPage($_payment->MethodOfPaymentID) %}
						</span>
					{% endif %}
				</label>


				<span class="pull-right">{% FormatMonetaryValue($_payment->MethodOfPaymentPrice, false, false) %} $CurrencySign</span>
								{% if $_payment->MethodOfPaymentID == 3 %}
					<div class="muted" data-plenty-is="edit-bank-account"{% if ! ( $_bankDetails->BankDetailsBankName && ( $_bankDetails->BankDetailsIBAN || $_bankDetails->BankDetailsAccountNumber ) ) %} style="display: none;"{% endif %}>
						<span data-plenty-is="bank-account-wrapper">
							<span data-plenty-is="bank-name">$_bankDetails->BankDetailsBankName</span>,
							{% if $_bankDetails->BankDetailsIBAN %}
								{% $_bank = substr($_bankDetails->BankDetailsIBAN, 0, 4) %}
								{% $_kto = substr($_bankDetails->BankDetailsIBAN, -4) %}
								<span data-plenty-is="iban-anonymized">$_bank&nbsp;XXXX&nbsp;XXXX&nbsp;XXXX&nbsp;$_kto</span>
							{% elseif $_bankDetails->BankDetailsAccountNumber %}
								{% $_kto = substr($_bankDetails->BankDetailsAccountNumber, -4) %}
								<span data-plenty-is="account-number-anonymized">XXX&nbsp;XXX&nbsp;$_kto</span>
							{% endif %}
						</span>
						<br>
						<a class="btn btn-default btn-xxs{% if $CheckoutMethodOfPaymentID != $_pID %} disabled{% endif %}" href="javascript:plenty.CheckoutService.editBankDetails();"><span class="glyphicon glyphicon-pencil"></span> ändern</a>
					</div>
				{% endif %}

	</li>
	{% endif %}
{% endfor %}

Codebeispiel 3: Template *CheckoutMethodsOfPaymentList*

Beim Auswählen der Zahlungsart wird ein change-Event ausgelöst, das sich um die Kommunikation mit dem Server kümmert. Das Event überträgt die vom Kunden ausgewählte Zahlungsart über den Funktionsaufruf plenty.CheckoutService.setMethodOfPayment. Die Funktion ist Bestandteil der plentymarketsCMStools und führt die REST-Calls für das change-Event aus. Der folgende Code ist ein Ausschnitt des Templates CheckoutMethodsOfPayment und zeigt das change-Event mit dem Funktionsaufruf plenty.CheckoutService.setMethodOfPayment.

# Change-Event, dass die Funktion setMethodOfPayment() auslöst.
<script>
	$('input[name="MethodOfPaymentID"]').change(function() {
		plenty.CheckoutService.setMethodOfPayment();
		$('[data-plenty-checkout-form="methodOfPayment"] .radio .btn').addClass('disabled');
		$('[data-plenty-checkout-form="methodOfPayment"] input[type="radio"]:checked').parents('.radio').find('.btn').removeClass('disabled');
	});
</script>

Codebeispiel 4: Change-Event im Template *CheckoutMethodsOfPayment*

Prüfung der Bestelldaten

Mit den Validatoren des plentymarkets CMS werden die Eingaben Ihrer Kunden im Bestellprozess auf Richtigkeit geprüft. Alle eingegebenen Daten werden vom Server validiert, bevor die Daten in der Datenbank abgelegt werden. Beispielsweise werden E-Mail-Adressen auf die Richtigkeit ihres Formats hin untersucht und Eingabefelder wie Straße und Hausnummer auf sinnvolle Ziffern- oder Buchstabenfolgen geprüft. Die Validatoren finden Sie in Ihrem plentymarkets System unter CMS » Webdesign » Layout » Validator. Folgende Validatoren sind für den Bestellvorgang relevant:

Tabelle 38. Validatoren für den Bestellvorgang
Validator-Template	Erläuterung
ValidatorCustomerInvoiceAddress	Validiert Eingaben für die Rechnungsadresse.
ValidatorCustomerShippingAddress	Validiert Eingaben für die Lieferanschrift.
ValidatorPlaceOrder	Validiert Eingaben für den letzten Bestellschritt Übersicht & Vertragsabschluss.

Im Template ValidatorPlaceOrder wird unter anderem geprüft, ob Checkboxen für Allgemeine Geschäftsbedingungen (AGB), Datenschutzerklärung oder Newsletter gesetzt sind. In den Templates der Validatoren kann eingestellt werden, welche Daten überprüft werden sollen und welche Meldungen im Fehlerfall angezeigt werden. Nachfolgender Code prüft, ob bei den Allgemeinen Geschäftsbedingungen (engl. Terms and Conditions) vom Kunden ein Haken in der Checkbox gesetzt wurde. Bei gesetztem Häkchen wird der Boolean $TermsAndConditionsCheck auf den Wert 1 gesetzt. Mit dem Aufruf AddError(16) wird dafür gesorgt, dass im Fehlerfall, also $TermsAndConditionsCheck!= 1, die Meldung mit dem Fehlercode 16 ausgegeben wird.

# Es wird geprüft, ob der Haken bei der Checkbox für die Allgemeinen Geschäftsbedingungen (AGB) vom Nutzer gesetzt ist.
# Wenn dem nicht so ist, wird dem Nutzer durch die Funktion AddError(16) eine Fehlermeldung angezeigt.
{%
	if ( GetGlobal("ValidateTermsAndConditionsCheck") == true ) {
		if ( $TermsAndConditionsCheck != 1 )
		{
			AddError(16);
		}
	}
%}

Codebeispiel 5: Template *ValidatorPlaceOrder*

Google reCAPTCHA für Kundenregistrierung einrichten

Richten Sie Google reCAPTCHA für die Kundenregistrierung im Webshop ein. Registrieren Sie Ihren Webshop zunächst für die Verwendung von Google reCAPTCHA. Geben Sie anschließend den Websiteschlüssel und den Geheimen Schlüssel für Ihren Webshop ein.

Google reCAPTCHA einrichten:

Öffnen Sie das Menü System » Mandant » Mandant wählen » Webshop » Einstellungen.
Wählen Sie Ja unter Google reCAPTCHA in Registrierung abfragen.
Geben Sie den Google reCAPTCHA Websiteschlüssel ein.
Geben Sie den Google reCAPTCHA Geheimer Schlüssel ein.
Speichern Sie die Einstellungen.

Kategorie Kundenregistrierung anpassen

Fügen Sie anschließend die Template-Funktion GetCaptcha() sowie das nachfolgende Code-Beispiel in der Kategorie Registrierung ein.

Parameter für die Funktion GetCaptcha()

Folgende Parameter stehen Ihnen für die Funktion GetCaptcha() zur Verfügung:

GetCaptcha('normal'): Standardwert für das normale Google reCAPTCHA.
GetCaptcha('compact'): Parameter für das kompakte Google reCAPTCHA.
GetCaptcha('invisible'): Parameter für das unsichtbare Google reCAPTCHA.

Kategorie Kundenregistrierung für normales oder kompaktes Google reCAPTCHA anpassen:

Öffnen Sie das Menü Artikel » Kategorien.
Öffnen Sie den Ordner des Designs, das Sie bearbeiten möchten, z.B. Callisto Light 3.
Öffnen Sie die Kategorie Registrierung.
Wechseln Sie in das Tab Beschreibung 1.
Fügen Sie die Template-Funktion {% GetCaptcha('normal') %} bzw. {% GetCaptcha('compact') %} oberhalb des Buttons Registrierung abschließen ein.
Suchen Sie den Code plenty.AuthenticationService.registerCustomer();.
Ersetzen Sie den Code durch registration();.
Suchen Sie nach <script>.
Fügen Sie innerhalb des Script-Bereichs das folgende Code-Beispiel ein.
Speichern Sie die Einstellungen.

function registration(){
    var res = plenty.AuthenticationService.registerCustomer();

    if(typeof res !== 'undefined'){

        if(res.status == 400 && typeof grecaptcha !== 'undefined'){
            grecaptcha.reset();
        }

    }
    return false;
}

Kategorie Kundenregistrierung für unsichtbares Google reCAPTCHA anpassen:

Öffnen Sie das Menü Artikel » Kategorien.
Öffnen Sie den Ordner des Designs, das Sie bearbeiten möchten, z.B. Callisto Light 3.
Öffnen Sie die Kategorie Registrierung.
Wechseln Sie in das Tab Beschreibung 1.
Fügen Sie die Template-Funktion {% GetCaptcha('invisible') %} oberhalb des Buttons Registrierung abschließen ein.
Suchen Sie den Code plenty.AuthenticationService.registerCustomer();.
Ersetzen Sie den Code durch grecaptcha.execute();.
Suchen Sie nach <script>.
Fügen Sie innerhalb des Script-Bereichs das folgende Code-Beispiel ein.
Speichern Sie die Einstellungen.

function registration(){
    var res = plenty.AuthenticationService.registerCustomer();

    if(typeof res !== 'undefined'){

        if(res.status == 400 && typeof grecaptcha !== 'undefined'){
            grecaptcha.reset();
        }

    }
    return false;
}

Google reCAPTCHA für Gastbestellung einrichten

Sie können Google reCAPTCHA auch für Gastbestellungen im Webshop einrichten.

CheckoutCustomerInvoiceAddress anpassen

Nehmen Sie dafür zunächst Änderungen am Template CheckoutCustomerInvoiceAddress vor.

CheckoutCustomerInvoiceAddress für normales oder kompaktes Google reCAPTCHA anpassen:

Öffnen Sie das Menü CMS » Webdesign » Layout » Checkout » CheckoutCustomerInvoiceAddress.
Suchen Sie nach </form>.
Fügen Sie die Template-Funktion {% GetCaptcha('normal') %} oder {% GetCaptcha('compact') %} oberhalb des </form>-Tags ein.
Speichern Sie die Einstellungen.

CheckoutCustomerInvoiceAddress für unsichtbares Google reCAPTCHA anpassen:

Öffnen Sie das Menü CMS » Webdesign » Layout » Checkout » CheckoutCustomerInvoiceAddress.
Suchen Sie nach </form>.
Fügen Sie die Template-Funktion {% GetCaptcha('invisible') %} oberhalb des </form>-Tags ein.
Speichern Sie die Einstellungen.

Kategorie Anschrift anpassen

Passen Sie anschließend die Kategorie Anschrift an.

Kategorie Anschrift für normales oder kompaktes Google reCAPTCHA anpassen:

Öffnen Sie das Menü Artikel » Kategorien.
Öffnen Sie den Ordner des Designs, das Sie bearbeiten möchten, z.B. Callisto Light 3.
Öffnen Sie die Kategorie Anschrift.
Wechseln Sie in das Tab Beschreibung 1.
Suchen Sie den Code plenty.CheckoutService.registerGuest().done(function().
Ersetzen Sie den 4-zeiligen Code-Block durch das nachfolgende Code-Beispiel.
Speichern Sie die Einstellungen.

plenty.CheckoutService.registerGuest().done(function() {
    // change tab if success
    plenty.NavigatorService.continueChange( targetContainer );

    }).fail(function(){

    if(typeof grecaptcha !== 'undefined'){
        grecaptcha.reset();
    }

});

Kategorie Anschrift für unsichtbares Google reCAPTCHA anpassen:

Öffnen Sie das Menü Artikel » Kategorien.
Öffnen Sie den Ordner des Designs, das Sie bearbeiten möchten, z.B. Callisto Light 3.
Öffnen Sie die Kategorie Anschrift.
Wechseln Sie in das Tab Beschreibung 1.
Suchen Sie den Code plenty.CheckoutService.registerGuest().done(function().
Ersetzen Sie den Code durch grecaptcha.execute();.
Suchen Sie nach <script>.
Fügen Sie innerhalb des Script-Bereichs das folgende Code-Beispiel ein.
Speichern Sie die Einstellungen.

function registration() {

    plenty.CheckoutService.registerGuest().done(function() {
    // change tab if success

        var targetContainer = {id:"shipping-payment", index:2};

        plenty.NavigatorService.continueChange(targetContainer);


    }).fail(function(){

        if(typeof grecaptcha !== 'undefined'){
            grecaptcha.reset();
        }

    });

}

Kaufabwicklung

CMS » Webdesign » Bestellvorgang » Kaufabwicklung

Kaufabwicklung

Die Kaufabwicklung bildet den zweiten Bereich des Bestellvorgangs. Kunden gelangen in diesen Bereich, indem sie zur Kasse gehen.

Gesetzliche Anforderungen

Beachten Sie die seit 1.8.2012 geltenden gesetzlichen Anforderungen für den Bestellvorgang. Sie finden in den Kapiteln 2 und 3 weitere Hinweise dazu. Hier finden Sie auch Details zu den Möglichkeiten, die Sie mit plentymarkets diesbezüglich haben. Beachten Sie dazu auch unseren Blog-Eintrag.

Kaufabwicklung: Design bearbeiten

Dieser Bereich ist bereits vorkonfiguriert. Sie haben jedoch vielfältige Änderungsmöglichkeiten.

Folgende Bereiche können Sie im Menü Kaufabwicklung anpassen:

Kundenregistrierung
Hier können Sie einstellen, welche Felder ein Kunde bei der Registrierung ausfüllen muss, welche Angaben optional sind und ob bestimmte Felder überhaupt angezeigt werden. Dieser Bereich der Kundenregistrierung ist z.B. für B2B-Kunden gedacht und wird mit einer Template-Funktion angezeigt.
Login
In diesen Bereich gelangt der Kunde direkt, nachd Klick auf Zur Kasse. Der Kunde kann wählen, als Gast zur Kasse zu gehen, sich zu registrieren oder, wenn der Kunde bereits registriert ist, sich anzumelden. Mit den Hinweistextfeldern können Sie dem Kunden Hinweise zu diesen Möglichkeiten mitteilen.
Passwort vergessen
Klickt der Kunde im Bereich Login (Wie möchten Sie zur Kasse gehen?) auf Passwort vergessen, gelangt der Kunde in diesen Bereich.
Rechnungsanschrift
Hierhin gelangt der Kunde, nach dem Klick auf Weiter im Login-Bereich. Welche Felder dem Kunden angezeigt werden, hängt davon ab, ob sich der Kunde registrieren möchte oder als Gast den weiteren Bestellvorgang durchläuft. Sie wählen, ob die Straße und die Hausnummer in 2 Zeilen, d.h. untereinander, oder in einer Zeile, d.h. nebeneinander, dargestellt werden. Auch die Postleitzahl und den Ort können in einer oder in zwei Zeilen dargestellt werden. Mittels CSS können Sie außerdem festlegen, wo z.B. die Felder Straße und Hausnummer dargestellt werden. Sie können z.B. für das englischsprachige Layout definieren, dass das Feld Hausnummer vor der Straße angezeigt wird. Tragen Sie dazu an der entsprechenden Stelle im CSS statt float: left; einfach float: right; ein. Tragen Sie auch in das Feld selbst House number + Street ein, damit der Kunde weiß, welches Feld für welche Informationen gedacht ist. Beachten Sie weiter unten die Hinweise zum Adresszusatz.
Lieferanschrift
Es werden die gleichen Felder wie im Bereich Rechnungsanschrift mit den dort hinterlegten Informationen angezeigt. Die Felder Packstation, PostIdent-Nr. und Packstations-Nr. werden nur angezeigt, wenn Sie Packstationen als Lieferadresse erlauben und der Kunde eine Versandart gewählt hat, bei der eine Packstation ein mögliches Lieferziel ist. Beachten Sie weiter unten die Hinweise zum Adresszusatz.
DHL-Postfinder
In diesem Untermenü konfigurieren Sie die Einstellungen zum DHL-Postfinder.
Zahlungsart
Der Kunde hat bereits im Warenkorb die Möglichkeit, eine Zahlungsart zu wählen. Stellen Sie hier ein, dass diese Zahlungsart nicht noch einmal angezeigt werden soll. Passen Sie dann jedoch die Nummerierung der nachfolgenden Überschriften an. Wenn Sie hier die Option Nicht anzeigen wählen und der Kunde die vorhergehenden Angaben so stark ändert, dass die vom Kunden im Warenkorb gewählte Zahlungsart nicht mehr möglich ist, wird Ihre Einstellung überschrieben. Der Kunde gelangt dann trotzdem automatisch zu diesem Schritt der Kaufabwicklung.
Dies gilt auch für die Optionen Bankinformationen, MPay 24 Kreditkarte, MPay 24 Kreditkarte und MPay 24 Mobile, da hier zusätzlich Informationen von Kunden benötigt werden.
Versandart
Der Kunde hat bereits im Warenkorb die Möglichkeit, eine Versandart zu wählen, so dass Sie hier einstellen können, dass die Versandart nicht noch einmal angezeigt werden soll. Sie sollten dann jedoch unbedingt die Nummerierung der nachfolgenden Überschriften anpassen. Wählen Sie hier die Option Nicht anzeigen und der Kunde die Angaben so stark ändert, dass die im Warenkorb gewählte Versandart nicht mehr möglich ist, wird Ihre Einstellung überschrieben. Der Kunde gelangt dann trotzdem automatisch zu diesem Schritt der Kaufabwicklung.
Bestellübersicht
Der Kunde sieht hier noch einmal alle Angaben in einer Übersicht und kann durch Klicken auf Zahlungspflichtig bestellen die Bestellung abschließen. Der Auftrag wird in Ihrem System angelegt. Der Bereich Bestellübersicht enthält die Option Position, anhand derer Sie die Position in der Übersicht bestimmen können.

Adresszusatz nicht an alle Versanddienstleister übertragbar

Dieses Feld ist für Zusatzangaben zur Adresse vorgesehen, z.B. Appartment 12 a. Ein Kunde kann diese Angabe auch selbst im Bestellvorgang und im Mein-Konto-Bereich hinterlegen. Manche Versanddienstleister verarbeiten dieses Feld allerdings nicht, was bedeutet, dass es nicht auf dem Etikett erscheint. Dies kann dazu führen, dass eine Sendung nicht zugestellt werden kann.

Zu folgenden Versanddienstleistern wird der Adresszusatz derzeit nicht übermittelt:

DHL Freight
DHL Supply Chain
Swiss Post

Um Ihre Kunden diesbezüglich zu informieren, können Sie in den genannten Bereichen z.B. einen Hinweis hinterlegen oder einblenden. Oder Sie blenden das Feld fallabhängig einfach aus, z.B. mit einem JavaScript.

Tipp: Artikeldetails

Im Bereich Artikel stellen Sie individuelle Details zu den Artikeln ein. Dies ist im Zusammenhang mit dem nachfolgenden Hinweis zum Gesetz zum Verbraucherschutz im elektronischen Geschäftsverkehr ein wichtiger Baustein. Sie können die Artikeldetails nicht nur genau bezeichnen, sondern auch einstellen, welches Detail angezeigt werden soll und welches nicht (Bild 41 Pos. 10).

Button: Zahlungspflichtig bestellen

Am 01.08.2012 trat eine Gesetzesänderung zur Verbesserung des Verbraucherschutzes vor Kostenfallen im Internet in Kraft. Danach muss der Text eines Kaufen-Buttons so formuliert sein, dass die Kostenpflicht eindeutig erkennbar ist. Der Text Kaufen ist demnach nicht mehr ausreichend. Der Gesetzesartikel (siehe § 312j BGB, Absatz 3) empfiehlt die Formulierung Zahlungspflichtig bestellen oder eine Formulierung mit vergleichbar eindeutiger Aussage. Wir haben den Button place_order entsprechend angepasst. Nehmen Sie Änderungen des Textes mit Vorsicht vor und fragen Sie ggf. Ihren Rechtsberater.

Beispiel: Menüeinstellungen und Ansicht im Webshop

Wir beschreiben nun die Vorgehensweise anhand des Untermenüs Bestellübersicht. Sie erfahren, wie Sie die Elemente dieses Bereichs verändern oder ggf. entfernen.

Die Elemente, die nachfolgend beschrieben werden, sind in Bild 41 nummeriert. In Bild 42 sehen Sie diese Elemente in der Bestellübersicht des Webshops. Anhand der Nummerierung finden Sie das Element, auf das sich die Einstellung in Bild 41 bezieht.

Bild 41. Kaufabwicklung; Optionen im Untermenü Bestellübersicht

Einstellungen im Untermenü Bestellübersicht

Die in Bild 41 verwendeten blauen Positionsnummern finden Sie auch in Bild 42. So können Sie die Darstellung im Webshop mit den Angaben im Backend vergleichen. Lediglich die Nummern 9 und 12 finden Sie nicht in Bild 42. Nummer 9 ist nicht dargestellt, da es sich bei den Artikeln in Bild 42 nicht um Abo-Artikel handelt. Nummer 12 ist nicht dargestellt, da es sich um eine Ausfuhrlieferung und nicht um eine EU-Lieferung handelt. Nummer 12 würde anstelle von Nummer 13 abgebildet.

Tabelle 39. Kaufabwicklung; Optionen im Untermenü **Bestellübersicht**
Pos. im Bild	Einstellung	Erläuterung
1	Titel	Der hier eingetragene Titel erscheint als Bereichsüberschrift.
2 - 10	Position	Mit den Positionen wird die Anordnung der Elemente in der Bestellübersicht verändert. Wenn ein Element in der Bestellübersicht nicht angezeigt werden soll, erfolgt die Einstellung im Bereich CSS. Dazu wird {display:none;} an der entsprechenden Stelle im Code eingetragen. Tipp: Den CSS-Code prüfen, wenn Elemente nicht angezeigt werden, und für diese Elemente ggf. den Befehl {display:none;} aus dem Code löschen. *Wichtig: Dem Abschnitt Artikel* die Position 9 bzw. eine Position am Ende der Bestellübersicht in unmittelbarer Nähe zum Kaufen-Button geben. Dies wird insbesondere auch in der sogenannten Button-Lösung gefordert. Wurde das Design des Webshops individuell angepasst, darauf achten, die Positionen entsprechend zu vergeben.
10	Artikel	Überschrift der Artikelübersicht in der Bestellübersicht.
10	Artikelüberschriften	Überschriften der Bereiche in der Artikelübersicht. Die Überschriften werden durch Überschreiben der Einträge in den Textfeldern geändert.
10	Artikeldetails	Die Artikeldetails, die in der Bestellübersicht angezeigt werden sollen, mit einem Häkchen markieren. In der Grundeinstellung sind alle Details markiert. Details zu Artikeln können auch über Merkmale realisiert werden.
11	Text nach Summen	Der eingetragene Text erscheint unmittelbar unterhalb der Gesamtsumme des Auftrags. Auch allgemeine Hinweise z.B. zu Zusatzkosten oder anderen Themen, wie der Button-Lösung, können eingetragen werden. Der eingetragene Text wird unabhängig vom Lieferland immer dargestellt.
12	Hinweis EU-Lieferungen	Der eingetragene Text erscheint unterhalb der Gesamtsumme des Auftrags. Wenn etwas bei Text nach Summen eingetragen ist, dann erscheint der Hinweis EU-Lieferungen darunter. Auch allgemeine Hinweise zu z.B. Zusatzkosten oder anderen Themen, wie der Button-Lösung, können eingetragen werden. Nur wenn es sich bei dem Lieferland um ein EU-Mitgliedsland handelt, wird der eingetragene Text dargestellt. Dies bei der Formulierung beachten.
13	Hinweis Ausfuhrlieferungen	Der eingetragene Text wird unterhalb der Gesamtsumme des Auftrags angezeigt. Wenn etwas bei Text nach Summen eingetragen ist, wird der Hinweis EU-Lieferungen darunter angezeigt. Auch allgemeine Hinweise zu z.B. Zusatzkosten oder anderen Themen, wie der Button-Lösung, können eingetragen werden. Nur wenn es sich bei dem Lieferland nicht um ein EU-Mitgliedsland handelt, wird der eingetragene Text dargestellt. Dies bei der Formulierung beachten.
14	Text vor Button	Hier z.B. einen Hinweis eintragen, der den Kunden noch einmal auffordert, die angegebenen Daten zu prüfen.
15	Text nach	Der eingetragene Text wird unterhalb der Bestellübersicht angezeigt.

Ansicht der Einstellungen im Webshop

Bild 42. Kaufabwicklung; Umsetzung der Einstellungen im Untermenü Bestellübersicht

Kundenregistrierung einrichten (B2B)

Besonders für B2B-Webshops ist eine Registrierung für Händler interessant. Der Händler füllt dazu ein Formular aus. Dadurch wird ein Kundenkonto angelegt. Der Shopbetreiber ordnet dem Kundenkonto später manuell nur noch eine Kundenklasse zu, damit der Händler zu den gewünschten Rabattsätzen einkaufen kann.

Die Registrierung ist im Webshop über eine URL erreichbar, die durch die Template-Variable $BaseURL4Links-OrderShowQQCustomerRegistration/ ausgegeben wird. Fügen Sie diese Template-Variable anstelle einer URL in einen Link ein.

<a href="{% Link_CustomerRegistration() %}" title="Registrierung">HIER REGISTRIEREN</a>

Das Design der Registrierungsseite können Sie im Untermenü Kundenregistrierung unter CMS » Webdesign » Bestellvorgang » Kaufabwicklung konfigurieren.

Tipp: Template-Funktion nutzen

Alternativ können Sie auch die Template-Funktion {% Link_CustomerRegistration() %} in das Template einfügen und die Kundenregistrierung wird darüber aufgerufen. Sie finden diese Funktionen über das Symbol Template-Variablen und -Funktionen (Bild 44, grüner Pfeil) unter Global und dort im Ordner PageDesignFunctions.

Bild 43. Kaufabwicklung; Untermenü Kundenregistrierung

Sie können in diesem Untermenü Pflichtfelder festlegen, die dann ausgefüllt werden müssen.

Pflichtfeld Telefonnummer

Die Angabe der Telefonnummer ist z.B. bei Rückfragen oder Rückmeldungen wichtig. Bei fehlender Telefonnummer kommt es bei Auslandsbestellungen bzw. Sendungen zu einer Fehlermeldung bei der Datenübergabe an DHL Intraship, da dort bei Auslandsversand die Telefonnummer eine Pflichtangabe ist.

Bilder-Galerie und Template-Variablen und -Funktionen

Bild 44. Kaufabwicklung; Template-Variablen und -Funktionen

Bilder-Galerie

Durch Klick auf Bilder-Galerie (Bild 44, blauer Pfeil) öffnen Sie die Bilder-Galerie. Hier wählen Sie die Bilder, die Sie in dem Bereich hinterlegen möchten.

Weitere Informationen zum Einbinden von Bildern aus der Bilder-Galerie finden Sie in der Tabelle auf der Handbuchseite Warenkorb.

Template-Variablen und -Funktionen

Eine Übersicht aller in diesem Bereich verwendbaren Template-Variablen und -Funktionen öffnen Sie, indem Sie auf das Symbol klicken (Bild 44, grüner Pfeil). Wenn Sie eine Template-Variable oder -Funktion in einen Hinweistext oder in das CSS einfügen, wird der Inhalt während der Kaufabwicklung angezeigt.

Beispiel: Darstellung von Preisen

Template-Variablen wie $ItemAmountNetDot dienen der Darstellung von Zahlenwerten (Preisen). Der letzte Teil der Variablen, hier Dot, gibt das Trennzeichen, z.B. vor einem Centbetrag, an. Sie können somit diese Template-Variablen nutzen, um für die jeweilige Sprache die Anzeige der Preise, Versandkosten etc. anzupassen. So können Sie für das deutsche Design die Kommaseparierung und für das englische Design die Punktseparierung bei Geldbeträgen umsetzen.

Dot-Variablen

Die Template-Variablen und -Funktionen finden Sie unter CMS » Webdesign nach Klick auf das Icon Template-Variablen und -Funktionen. Im Ordner Basket befinden sich Unterordner der entsprechenden Bereiche der Kaufabwicklung mit den verfügbaren Funktionen und Variablen.

Design-Beispiel

Nachfolgend finden Sie ein Design-Beispiel für die Kaufabwicklung Ihres Webshops sowie den entsprechenden CSS-Code.

Kaufabwicklung als Tabs

Mit dem folgenden CSS-Code werden die Schritte der Kaufabwicklung, die im Standard-Layout als Untermenüs angezeigt werden, in Tabs dargestellt (Bild 45).

Bild 45. Kaufabwicklung; Darstellung in Tabs

Die Breite der Tabs ist im Standard-Layout nicht hinterlegt, sondern wird durch den folgenden CSS-Code festgelegt. Aufgrund dieser Festlegung ist nur eine bestimmte Zeichenlänge für die Titel der Tabs möglich. Passen Sie die Titeltexte ggf. entsprechend an. Die Bezeichnungen bzw. Texte der Tabs sind in den Untermenüs unter CMS » Webdesign » Bestellvorgang » Kaufabwicklung hinterlegt und können dort geändert werden. Passen Sie dazu die Textzeile Titel wie gewünscht an (siehe auch Bild 45).

CSS-Code für Tab-Darstellung einfügen:

Kopieren Sie den folgenden Code
Öffnen Sie das Menü CMS » Webdesign.
Öffnen Sie das Untermenü Layout » CSS » CSSOrder.
Fügen Sie den Code anschließend an den bestehenden Code ein.
Speichern Sie die Einstellungen.

Code für die Darstellung der Kaufabwicklung als Tabs:

/* TAB CHECKOUT */

/* parent container */
#PlentyOrderCheckoutAccordion {
position: relative;
padding-top: 1px;
}
/* anchors */
#PlentyOrderCheckoutAccordion > a {
position: absolute;
top: 0;
left: 0;
}
/* tabs */
.AccordionTitle {
position: absolute;
top: 0;
white-space: nowrap;
overflow: hidden;
background: #ffffff !important;
border: 1px solid #eeeeee;
border-bottom: 2px solid #CCCCCC;
font-size: 12px;
line-height: 26px;
padding: 5px 10px;
/*text-align: center;*/
}
/* tabs hover */
.AccordionTitle:hover {
background: #f9f9f9 !important;
}
/* individual tabs */
#PlentyOrderWebLoginTitle { left: 0; width: 138px; }
#PlentyOrderWebInvoiceDetailsTitle { left: 140px; width: 158px; }
#PlentyOrderWebShippingDetailsTitle { left: 290px; width: 118px; }
#PlentyOrderWebPaymentMethodTitle { left: 420px; width: 108px; }
#PlentyOrderWebShippingMethodTitle { left: 530px; width: 98px; }
#PlentyOrderWebOrderOverviewTitle { left: 630px; width: 78px; }
/* current tab */
.CurrentAccordionTitle {
background: #cccccc !important;
border: 1px solid #CCCCCC !important;
border-bottom: 2px solid #CCCCCC !important;
}
/* tabs hover */
.CurrentAccordionTitle:hover {
background: #CCCCCC !important;
}
/* content */
#PlentyOrderCheckoutAccordion > .AccordionPane {
margin-top: 43px;
} <font face="Times"<span style="white-space: normal;"
</span></font>

DHL-Postfinder

CMS » Webdesign » Bestellvorgang » Kaufabwicklung » Untermenü: DHL-Postfinder

Allgemeines zum DHL-Postfinder

Mit dem DHL-Postfinder steht Ihnen eine komfortable Suchhilfe zur Verfügung. Mit diesem Feature werden Ihnen im Mein Konto-Bereich bzw. der Kaufabwicklung anhand der Postleitzahl die jeweils in der Nähe liegenden Postfilialen und Packstationen angezeigt. Sie können die gewünschte Auswahl dann direkt in die Lieferanschrift übernehmen.

Konfiguration

Zur Konfiguration des DHL-Postfinders sind die nachfolgend beschriebenen Schritte nötig.

CSS Bestellvorgang

Nachfolgend das CSS für das optimierte Layout des DHL-Postfinders.

/* WEBSHOP OVERLAY */
.PlentyWebshopOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: 0.5;
}

/* POSTFINDER TRIGGER */
a.PostfinderTrigger {
position: relative;
display: block;
margin-top: 10px;
padding: 25px 10px 0;
border: 1px solid #999;
background: #FFCD00;
color: #666;
text-decoration: none;
cursor: pointer;
}
/* in checkout */
#PlentyWebShippingDetailsForm a.PostfinderTrigger {
}
/* in myaccount */
.PlentyWebMyAccountPopupContainer .PostfinderTrigger {
}
.PostfinderTriggerImgLabel1,
.PostfinderTriggerImgLabel2 {
position: absolute;
display: block;
top: 6px;
background-image: url("/tpl/global/images/dhl_packstation_postfiliale-direkt_sprite.png");
background-repeat: no-repeat;
}
.PostfinderTriggerImgLabel1 {
left: 10px;
width: 97px;
height: 11px;
background-position: -4px -4px;
}
.PostfinderTriggerImgLabel2 {
left: 130px;
width: 89px;
height: 18px;
background-position: -4px -20px;
}
.PostfinderTriggerTextLabel {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
clear: both;
height: 34px;
margin: 4px 0;
padding: 3px 5px;
border-color: #c00;
background-color: #c00;
text-decoration: none;
line-height: 26px;
color: #fff;
}
a.PostfinderTrigger:hover > .PostfinderTriggerTextLabel,
a.PostfinderTrigger:focus > .PostfinderTriggerTextLabel {
color: #e0e0e0;
}

/* POSTFINDER POPUP */
.WebPostfinderGetPackstationsPopup {
position: absolute;
width: 600px;
left: 50%;
margin-left: -304px;
border: 4px solid #EEE;
padding: 0 10px;
background: #FFF;

-moz-box-shadow: 1px 2px 6px 1px rgba(38, 43, 55, 0.3);
-webkit-box-shadow: 1px 2px 6px 1px rgba(38, 43, 55, 0.3);
box-shadow: 1px 2px 6px 1px rgba(38, 43, 55, 0.3);
}
.WebPostfinderGetPackstationsPopup .PlentyWebshopPopupBottomButtonContainer {
padding: none;
}
.WebPostfinderGetPackstationsPopup .PlentyWebshopPopupBottomButtonContainer:after {
content: "";
display: table;
clear: both;
}
.PlentyWebshopPopupButtonRightContainer:first-child {
text-align: right;
}

/* header */
.PlentyWebshopPopupHeader {
color: #444444;
font-size: 18px;
font-weight: 400;
line-height: 26px;
border-bottom: 1px solid #000000;
padding: 7px 1px 3px;
}
/* content */
.WebPostfinderGetPackstationsPopup .PlentyWebshopPopupContent {
padding-top: 10px;
}

/* text */
.WebPostfinderTextBefore {
margin-bottom: 10px;
}

/* table */
.PlentyWebshopTable {
display: table;
}
.PlentyWebshopTableRow {
display: table-row;
}
.PlentyWebshopTableCell {
display: table-cell;
}
.WebPostfinderGetPackstationsPopup .PlentyWebshopTableCell {
border-bottom: 1px solid #eee;
padding: 3px 5px;
}
.PlentyWebshopTableHeaderRow > .PlentyWebshopTableCell {
background: #eee;
border-color: #000;
}
.PlentyWebshopTableCell:first-child {
vertical-align: middle;
}

/* scroll */
.PlentyWebshopTableWrapper {
max-height: 450px;
overflow-y: auto;
}

/* buttons */
.PlentyWebshopPopupButtonLeftContainer {
float: left;
width: 50%;
text-align: right;
}
.PlentyWebshopPopupButtonRightContainer {
float: right;
width: 50%;
}
.PlentyWebshopPopupButtonLeftContainer,
.PlentyWebshopPopupButtonRightContainer {
padding: 10px 0;
}
.PlentyWebshopPopupButtonLeftContainer > *,
.PlentyWebshopPopupButtonRightContainer > * {
margin: 0 5px;
}

CSS für den Bestellvorgang konfigurieren:

Öffnen Sie das Menü CMS » Webdesign » Layout » CSS » CSSOrder.
Fügen Sie den CSS-Code am Ende des Bearbeitungsfensters im Tab CSSOrder ein.
Speichern Sie das CSS.

CSS Mein Konto

Für die Ansicht im Mein Konto-Bereich muss der z*-index* im CSS angepasst werden.

DE CMS Bestell Kaufab DHL Postfinder 01 SI

Bild 46. Z-Index anpassen

CSS für Mein Konto konfigurieren:

Öffnen Sie das Menü CMS » Webdesign » Layout » CSS » CSSMyAccount.
Suchen Sie die Zeile (Suchfunktion des Browsers): "z-index: 400010;".
Wichtig: Wählen Sie dazu in der Toolbar oben rechts die Editor-Einstellung Textfeld.
Passen Sie die Zeile wie folgt an "z-index: 40010;".
Speichern Sie das CSS.

Texte

Für die Anzeige im Webshop und im Mein Konto-Bereich nehmen Sie folgende Anpassungen der Texte vor.

DE CMS Bestell Kaufab DHL Postfinder 02 SI

Bild 47. Texte anpassen, Beispiel Mein Konto » Untermenü: Lieferanschrift ändern

Texte konfigurieren:

Öffnen Sie das Menü CMS » Webdesign » Bestellvorgang » Kaufabwicklung » Untermenü: Lieferanschrift.
Passen Sie folgende Texte an:
Postnummer: Tragen Sie Postnummer ein.
Packstation/Postfiliale suchen: Tragen Sie Packstation oder Postfiliale suchen ein.
Speichern Sie die Einstellungen.
Öffnen Sie das Menü CMS » Webdesign » Mein Konto » Untermenü: Lieferanschrift ändern.
Passen Sie folgende Texte an:
Adresszusatz: Tragen Sie Adresszusatz ein.
Postnummer: Tragen Sie Postnummer ein.
Packstation/Postfiliale suchen: Tragen Sie Packstation oder Postfiliale suchen ein.
Speichern Sie die Einstellungen.

Fehlermeldungen

Passen Sie die Fehlermeldungen in den Sprachpaketen an.

DE CMS Bestell Kaufab DHL Postfinder 03 SI

Bild 48. Fehlermeldungen anpassen

Fehlermeldungen konfigurieren:

Öffnen Sie das Menü System » Mandant » Global » Sprachpakete.
Wählen Sie oben die Sprache (Standard: de) und den Bereich Fehlermeldungen.
Klicken Sie auf die Lupe.
→ Die Fehlermeldungen werden angezeigt.
Passen Sie die Fehlermeldungen Nr. 89 und Nr. 93 an: Ändern Sie die Bezeichnung PostIdent Nummer in: Postnummer.
Speichern Sie die Einstellungen.

Menü: DHL-Packstation

Die Funktion muss nun noch im Menü aktiviert werden.

DE CMS Bestell Kaufab DHL Postfinder 04 SI

Bild 49. Menü DHL-Packstation

DHL-Packstation aktivieren:

Öffnen Sie das Menü System » Mandant » Mandant wählen » Bestellvorgang » DHL-Packstation.
Wählen Sie für Packstationen in Lieferadressen erlauben die Einstellung Ja.
Speichern Sie die Einstellungen.

Funktion

Wird im Bestellprozess nun eine Packstation oder Postfiliale als Lieferanschrift gewünscht, klickt der Kunde beim Schritt Rechnungsinformation auf die Option An andere Adresse versenden.

Es wird ein leeres Adressfeld mit der Postfinder-Funktion eingeblendet:

DE CMS Bestell Kaufab DHL Postfinder 05 SI

Bild 50. DHL-Postfinder in der Kaufabwicklung

Hier kann nun die gewünschte Postleitzahl oder der Ort eingetragen werden.
Es sind bei der PLZ auch nur die ersten drei oder 4 Ziffern möglich oder beim Ort nur ein Teil des Ortsnamens. Wenn die Auswahl an Packstationen bzw. Postfilialen zu hoch ist, kommt eine Fehlermeldung von DHL und man muss etwas genauer sein (bei PLZ z.B. die vollständige PLZ angeben).

DE CMS Bestell Kaufab DHL Postfinder 06 SI

Bild 51. Anzeige der gefunden Postfilialen bzw. Packstationen

Wenn der Kunde nun eine Postleitzahl eingibt und auf Packstation oder Postfiliale suchen klickt, werden die Postfilialen und Packstationen im Umfeld dieser PLZ mit Entfernungsangabe angezeigt. Der Kunde wählt eine Option aus und klickt auf Speichern. Damit wird die jeweilige Station in die Lieferanschrift übernommen.

Tipp: Titel des Popup-Fensters

Den Text des Titels, im Beispiel Packstationen und Postfilialen in Ihrer Nähe (Bild 51, oben) passen Sie im Untermenü DHL-Postfinder an.

Bestellbestätigung

CMS » Webdesign » Bestellvorgang » Bestellbestätigung

Allgemeines

Die Bestellbestätigung bildet den Abschluss des Bestellvorgangs.

Bestellbestätigung: Design bearbeiten

Dieser Bereich ist bereits vorkonfiguriert. Sie haben jedoch vielfältige Änderungsmöglichkeiten. Die entsprechenden Einstellungen sind in dem neu gestalteten Menü jetzt einfacher möglich. Darüber hinaus bieten die neu gestalteten Menüs u.a. auch die Option, CSS-Anpassungen vorzunehmen, wobei auch hier in einigen Menüs bereits vorkonfigurierte CSS-Regeln hinterlegt sind.

Folgende Bereiche können Sie im Tab Bestellbestätigung individuell anpassen:

Tracking

Das Untermenü Tracking verfügt über die Felder Head und Body. Die Informationen, die Sie hier eintragen, bilden jeweils den Head- und Bodybereich der Bestellbestätigung und aller zahlungsartspezifischen Bestellbestätigungen (der nachfolgenden Untermenüs).

Bestellbestätigung

Es kann für die Bestellbestätigung die Zeit konfiguriert werden, nach der man in den Mein-Konto-Bereich weitergeleitet wird. Die Option finden Sie unter Weiterleitung Mein-Konto. Standardmäßig ist dort der Wert Nie eingestellt. Das heißt, man gelangt nur durch einen Klick zum Auftrag in den Mein-Konto-Bereich. Sie können dort eine Zeit wählen: 5, 10 oder 20 Sekunden.

Zahlungsarten

Alle nachfolgend aufgeführten Zahlungsarten verfügen über die gleichen Felder. Dies sind Text vor, Text nach und CSS. In das Feld Text vor können Sie Text eintragen, der vor dem Inhalt der Zahlungsart-Schnittstelle angezeigt werden soll. Entsprechend dient das Feld Text nach zum Eintragen von Hinweisen, die nach dem Inhalt der Zahlungsart-Schnittstelle erscheinen sollen.

Bestellbestätigung
PayPal Express
Es ist möglich, die Weiterleitungsart von PayPal Express bei der Bestellbestätigung auf JavaScript zu ändern. Damit wird ein korrektes Tracking sichergestellt. Die Einstellung finden Sie im Untermenü PayPal Express unter der Option Weiterleitungsart.
PayPal
Sofortüberweisung
Moneybookers
Klarna
ClickAndBuy
Paymorrow
iclear
Heidelpay
ExperCash
EOS
Santander Consumer Bank (vorher CCBank)
Das Untermenü Santander Consumer Bank beinhaltet 3 Felder, die bei den anderen Zahlungsarten nicht vorhanden sind. Dies sind die Felder Händlernummer, Linkinhalt und Fehlertext. Da bei der Einrichtung der Zahlungsart Santander im Menü System » Aufträge » Zahlung » Zahlungsarten keine Schnittstelle zur Santander Consumer Bank eingerichtet wird, müssen Sie hier Ihre Händlernummer eintragen. Bei Linkinhalt tragen Sie ein, was dann als Linktext in der Bestellbestätigung angezeigt werden soll und bei Fehlertext hinterlegen Sie eine Nachricht, die dem Kunden im Fehlerfall angezeigt werden soll bzw. wenn die Zahlungsart nicht nutzbar ist.
Beachten Sie dazu die Handbuchseite Santander Consumer Bank.
SixCardSaferpay
QPAY
MasterPayment

Template-Variablen und -Funktionen in der Bestellbestätigung

Eine Übersicht aller in diesem Bereich verwendbaren Template-Variablen und -Funktionen öffnen Sie, wenn Sie auf Template-Variablen und -Funktionen klicken. Kopieren Sie die gewünschte Template-Variable bzw. -Funktion z.B. in einen Hinweistext oder in das CSS. Der Inhalt wird dann in der Bestellbestätigung angezeigt.

Tipp

Template-Variablen wie $ItemAmountNetDot dienen der Darstellung von Zahlenwerten (Preisen). Der letzte Teil der Template-Variable, hier Dot, gibt das Trennzeichen vor z.B. dem Centbetrag an. Sie können somit diese Template-Variablen nutzen, um für Sprachen die Anzeige der Preise, Versandkosten etc. anzupassen. So setzen Sie für das deutsche Layout die Kommaseparierung und für das englische Layout die Punktseparierung bei Geldbeträgen um.
Wenn Sie Daten übertragen möchten, verwenden Sie die Dot-Variablen, die als einzige Variablen für eine Datenübertragung geeignet sind.

Template-Variable Auftragsherkunft

Die Template-Variablen $LastOrderReferrerID und $LastOrderReferrerName sind seit plentymarkets Version 4.4 verfügbar. Wenn ein Kunde über einen externen Link mit dem Parameter ReferrerID in den Webshop gelangt, hat der Kunde als Herkunft den Wert von ReferrerID. Dieser Wert ist auch in der Template-Variable$ReferrerIDhinterlegt. Diese Herkunft wird auch für den daraufhin abzuschließenden Auftrag genutzt. Nachdem der Auftrag angelegt wurde, wird die Herkunft auf "Webshop" ($ReferrerID= 1) zurückgesetzt. Möchten Sie nun in den Vorlagen der Bestellbestätigung auf die ursprüngliche Herkunft (vor der Auftragsanlage) zugreifen, liefert$ReferrerIDden falschen Wert, denn dieser wurde auf 1 zurückgesetzt. Dafür gibt es in den Vorlagen der Bestellbestätigung die Template-Variablen $LastOrderReferrerID und $LastOrderReferrerName, die als Inhalt den Wert der Herkunft zum Zeitpunkt der vorhergehenden Auftragsanlage enthalten.

Liste aller Template-Variablen im Bereich Bestellbestätigung

Die folgende Tabelle erläutert die Template-Variablen für die Bestellbestätigung:

Tabelle 40. Template-Variablen in der Bestellbestätigung
Template-Funktion/-Variable	Erläuterung
{% Container_ItemViewBasketItemsList() %} bis {% Container_ItemViewBasketItemsList2() %}	Damit werden die Artikel angezeigt, die sich im Warenkorb befinden.
{% Container_ItemViewCrossSellingItemsList2() %} und {% Container_ItemViewCrossSellingItemsList3() %}	Im Bestellvorgang CrossSelling-Artikel der Artikel anzeigen, die sich im Warenkorb befinden. Dazu muss im Menü CMS » Webdesign » Layout im Template ItemViewCrossSellingItemsList2 bzw. ItemViewCrossSellingItemsList2 im Tab Einstellungen für die Funktion ItemViewCrossSellingItemsList2_FromBasket bzw. ItemViewCrossSellingItemsList3_FromBasket die Einstellung JA gewählt werden.
$Currency	Währung
$CustomerEmail	E-Mail-Adresse des Kunden
$CustomerID	Kunden-ID
$CustomerName	Name des Kunden
$GtcTrans	Auftrags- und Artikelparameter Herkömmlicher Tracking-Code von Google Analytics
$GtcTransAsync	Auftrags- und Artikelparameter, Asynchroner Code Beim asynchronen Tracking-Code von Google Analytics handelt es sich um ein verbessertes JavaScript-Code-Snippet, bei dem der Tracking-Code ga.js im Hintergrund geladen wird. Zu den Vorteilen gehört u.a. eine kürzere Ladezeit.
$ItemAmountGrossComma	Artikelwert brutto; Nachkommazahlen werden durch ein Komma getrennt.
$ItemAmountGrossDot	Artikelwert brutto; Nachkommazahlen werden durch einen Punkt getrennt.
$ItemAmountNetComma	Artikelwert netto; Nachkommazahlen werden durch ein Komma getrennt.
$ItemAmountNetDot	Artikelwert netto; Nachkommazahlen werden durch einen Punkt getrennt.
$ItemIDListComma	Auflistung der Artikel-IDs; zwischen den IDs steht ein Komma als Trennzeichen.
$ItemIDListPipe	Auflistung der Artikel-IDs; zwischen den IDs steht ein senkrechter Strich als Trennzeichen.
$ItemQuantity	Anzahl der Artikel
$IsNet	Diese Template-Variable liefert die Werte TRUE, wenn der Inhalt des Warenkorbes zu einer Netto-Bestellung wird (abhängig von den Einstellungen des Systems), und FALSE, wenn es eine Brutto-Bestellung wird.
$LastOrderReferrerID	ID der vorhergehenden bzw. ursprünglichen Herkunft
$LastOrderReferrerName	Name der vorhergehenden bzw. ursprünglichen Herkunft
$OrderID	Auftrags-ID
$MethodOfPayment	Zahlungsart
$MethodOfPaymentID	ID der Zahlungsart
$ReferrerID	Herkunfts-ID
$ReferrerName	Herkunftsname
$ShippingCostsGrossComma	Versandkosten brutto; Nachkommazahlen werden durch ein Komma getrennt.
$ShippingCostsGrossDot	Versandkosten brutto; Nachkommazahlen werden durch einen Punkt getrennt.
$ShippingCostsNetComma	Versandkosten netto; Nachkommazahlen werden durch ein Komma getrennt.
$ShippingCostsNetDot	Versandkosten netto; Nachkommazahlen werden durch einen Punkt getrennt.
$ShippingCountry	Lieferland
$ShippingCountryID	ID des Lieferlandes
$ShippingProfile	Versandprofil
$ShippingProfileID	ID des Versandprofils
$ShippingProvider	Versanddienstleister
$ShippingProviderID	ID des Versanddienstleisters
$TotalAmountGrossComma	Gesamtsumme brutto; Nachkommazahlen werden durch ein Komma getrennt.
$TotalAmountGrossDot	Gesamtsumme brutto; Nachkommazahlen werden durch einen Punkt getrennt.
$TotalAmountNetComma	Gesamtsumme netto; Nachkommazahlen werden durch ein Komma getrennt.
$TotalAmountNetDot	Gesamtsumme netto; Nachkommazahlen werden durch einen Punkt getrennt.

5.5.11. Mein Konto

CMS » Webdesign » Mein Konto

Inhalt dieses Kapitels

In diesem Kapitel erhalten Sie detaillierte Erläuterungen zur Anpassung des Bereichs Mein Konto im Webshop.

Mein Konto bezeichnet den Bereich im Webshop, in den nur registrierte Kunden gelangen. Hier können Kunden alle bisher getätigten Käufe sowie angegebene Informationen wie z.B. Kontaktdaten sehen.

Der Mein Konto-Bereich im Menü CMS bietet Ihnen individuelle Möglichkeiten, das Frontend zu gestalten. Übersichtliche Untermenüs ermöglichen eine sehr genaue Konfiguration.

Grundeinstellungen

Das Menü System » Mandant » Mandant wählen » Mein Konto » Einstellungen enthält wichtige Grundeinstellungen für den Mein Konto-Bereich Ihres Webshops. So können Sie hier z.B. einige fakultative Kontobereiche aktivieren bzw. deaktivieren.

Mein Konto: Design bearbeiten

Dieser Bereich ist bereits vorkonfiguriert. Sie haben jedoch vielfältige Änderungsmöglichkeiten.

CSS-Anpassung

Sie können das CSS anpassen. In plentymarkets sind jedoch auch vorkonfigurierte CSS-Regeln hinterlegt. Sie finden diese im Templateordner Layout unter CSS. Die CSS-Regeln sind im Ordner CSS und dort unter CSSMyAccount hinterlegt und können in dem entsprechenden Tab einfach angepasst werden.

Folgende Bereiche können Sie im Tab Mein Konto in den entsprechenden Unterordnern individuell anpassen:

Login
Mein Konto
Kundendaten
Persönliche Daten
Kontaktinformationen
Bankinformationen
Passwort ändern
Newsletter
Auftragshistorie
Bestellübersicht
Lieferanschrift ändern
Versandart ändern
Zahlungsart ändern
Artikel ändern
Retoure
Abonnementhistorie
Abonnementübersicht
Abonnement ändern
Artikel ändern
Merkliste
Wunschzettel
Tickets
Gutscheine
Zeitkonto
Dokumente
Datenexport

Einige Felder und Einstellungen tauchen in mehreren der oben genannten Menüs und Untermenüs auf und werden nachfolgend erläutert. Spezielle Funktionen finden sich in den Erläuterungen zum jeweiligen Menü.

Wiederkehrende Einstellungen

Hier werden Einstellungen erläutert, die in mehreren Untermenüs des Mein Konto-Bereichs auftauchen. Einige dieser Einstellungen kommen auch im Bereich Bestellvorgang vor und sind Ihnen vielleicht schon bekannt.

Tabelle 41. Erläuterungen zu mehrfach vorkommenden Einstellungen der Untermenüs
Einstellung	Erläuterung
Titel	Die Menü-Überschrift, die Kunden im Webshop angezeigt werden soll.
Text vor & Text nach	Hinweise oder Begrüßungstexte passend zum Menü hinterlegen. Diese beiden Felder schließen jeweils alle Punkte eines Menüs ein, d.h. Text vor steht direkt unter dem Titel und Text nach erst nach allen anderen Menüpunkten.
Position (Hauptmenüpunkt)	Die Reihenfolge der Menüs in der Hauptebene durch Auswahl der Positionsnummer aus der Dropdown-Liste festlegen.
Position (Untermenü)	Container 1: Wird links in der Bestellübersicht angezeigt. Container 2: Wird rechts in der Bestellübersicht angezeigt. Mit den Positionsnummern die Reihenfolge festlegen. Werden z.B. für alle Elemente Container 1 und fortlaufende Positionsnummern gewählt, erscheinen die Elemente links untereinander in der durch die Positionsnummern bestimmten Reihenfolge. Beide Container nutzen, um Elemente nebeneinander zu positionieren.
Position (Untermenü Artikel)	Das Untermenü Artikel unten oder oben positionieren. Oben = über den weiteren Untermenüs des Bereichs Unten = unter diesen Untermenüs
Darstellung	Direkte Anzeige = Der gesamte Inhalt eines Menüpunkts wird im Webshop angezeigt. Das Menü ist ausgeklappt. Anzeige nach Klick = Nur der Menütitel wird angezeigt. Wenn der Kunde auf den Menütitel klickt, werden sämtliche Informationen angezeigt.
Details anzeigen	Der hier eingetragene Text ist im Webshop verlinkt und leitet den Kunden zu einer Detailansicht.
Keine Artikel gefunden	Der hier eingetragene Hinweis wird Kunden angezeigt, wenn Kunden z.B. keine Artikel in der Merkliste oder auf dem Wunschzettel haben.

Individuelle Einstellungen der Mein-Konto-Untermenüs

Die Einstellungen in den Untermenüs wurden möglichst selbsterklärend benannt. Der Text, den Sie in die Textfelder eintragen, wird Ihren Kunden im Webshop angezeigt.

Tabelle 42. Erläuterungen zu den Einstellungen der Untermenüs
Menüpunkt	Erläuterung
CSS Mein Konto	In diesem Bereich erfolgt die Gestaltung (Layout) der Kundenkonten per CSS. Eine Standard-CSS-Formatierung legt die allgemeinen CSS-Regeln für Kundenkonten fest. Hier kann auch der gesamte CSS-Code für den Bereich Mein Konto eintragen werden. Alternativ hier nur den allgemein gültigen Teil eintragen. Für mehr Übersichtlichkeit dann in den nachfolgenden Bereichen im Feld CSS die Informationen eintragen, die dann nur für den Bereich gültig sind.
Login	Die hier eingetragenen Informationen sieht der Kunde, nach Klick auf das Tab Mein Konto im Webshop. Eine CSS-Formatierung ist voreingetragen. Wenn die Informationen in diesem Menü anders angeordnet werden sollen, erfolgt die Anpassung mittels CSS. Passwortsicherheit Für das Passwort genügen 6 Zeichen. Die Sicherheitsstufe im Webshop ist nicht so hoch wie im Admin-Bereich. Daher genügt für das Passwort der Login-Daten die einfache Mischung aus Buchstaben und Ziffern. Siehe Handbuchseite Benutzer anlegen.
Mein Konto	Der Kunde gelangt in diesen Bereich nachdem der Kunde die Login-Daten eingetragen und auf Anmelden geklickt hat. Eine CSS-Formatierung ist voreingetragen. Darüber kann ein Hinweis (Text vor) stehen. Darunter sieht der Kunde sämtliche Bereiche des Kundenkontos. Diese Bereiche sind die Untermenüs der ersten Ebene des Mein Konto-Bereichs, z.B. Kundendaten und Auftragshistorie. Die Informationen können mittels CSS anders angeordnet werden.
Kundendaten	Eine CSS-Formatierung ist voreingetragen. Die hier angezeigten Daten stammen z.B. aus den bisherigen Einkäufen des Kunden und den dort gemachten Angaben. Die Kundendaten gliedern sich wiederum in einige Untermenüs. Unter Persönliche Daten sieht der Kunde die Rechnungsadresse, die der Kunde eingetragen hat, unter Kontaktinformationen die für den Login verwendete E-Mail-Adresse. Diese Daten können vom Kunden durch Klicken auf Ändern bearbeitet werden. Die Fenster, die sich für den Kunden nach dem Klick auf Ändern öffnen, werden in den Kundendaten-Untermenüs bearbeitet. Das Fenster Lieferanschrift wird im gleichnamigen Untermenü der Auftragshistorie bearbeitet.
Newsletter	Titel für den Bereich Newsletter sowie die Position und die Art der Darstellung.
Auftragshistorie	Die Felder Auftrags-ID und Zeitraum wählen gehören zur Auftragssuche im Kundenkonto. Die Felder Auftragsdatum, Empfänger, Details anzeigen, Status und Voraussichtlicher Versand werden für jeden Auftrag in der Historie angezeigt. * Bestellübersicht Die Bestellübersicht ist die Detailansicht eines bestimmten Auftrags mit allen dazugehörigen Daten. * Lieferanschrift In diesem Untermenü werden die Eintragsfelder konfiguriert und benannt, die der Kunde sieht. Diese werden auch für die Kundendaten genutzt. * Versandart In diesem Untermenü werden die Eintragsfelder für den Bereich Versandart konfiguriert und benannt, die der Kunde sieht. * Zahlungsart In diesem Untermenü werden die Eintragsfelder für den Bereich Zahlungsart konfiguriert und benannt, die der Kunde sieht. * Artikel In diesem Untermenü werden die Eintragsfelder für den Bereich Artikel konfiguriert und benannt, die der Kunde sieht. Retoure Sobald ein Auftrag vom Kunden bezahlt und versandt wurde und der Auftrag sich also in Status 7 befindet, wird im Kundenkonto der Button Artikel zurück senden angezeigt. Klickt der Kunde darauf, wird das Menü geöffnet, das hier konfiguriert wird. Das Feld Grund der Retoure ist eine Dropdown-Liste. Die dort wählbaren Gründe werden im System unter System » Aufträge » Auftragstypen » Retouren angelegt.
Abonnementhistorie	Nur sichtbar, wenn diese Funktion aktiviert ist. Die Felder Auftragsnummer und Zeitraum wählen dienen der Abonnementsuche im Kundenkonto. Die Felder Empfänger, Erste Versendung etc. werden für jedes Abonnement angezeigt. Über Details anzeigen gelangt der Kunde in die Einzelansicht eines bestimmten Abonnements. Abonnementübersicht Die Abonnementübersicht ist die Detailansicht eines bestimmten Abonnements. Hier werden die Position und der Titel der einzelnen Untermenüs, wie Versandart und Artikel, dieses Bereichs angepasst. Die eigentlichen Felder für die Einträge werden in den Untermenüs der Bestellübersicht konfiguriert.
Merkliste	Die Funktion Merkliste wird im Menü System » Mandant » Mandant wählen » Mein-Konto » Grundeinstellungen aktiviert. Mit der Funktion Merkliste stellen Kunden mit Benutzerkonto im Webshop eine Liste der Artikel zusammen, die sich Kunden merken bzw. evtl. kaufen möchten. Eine Position verschwindet erst von der Merkliste, wenn die Position gelöscht oder in den Warenkorb verschoben wird. Merkliste-Button Wenn die Funktion Merkliste nicht aktiviert wird, sollte auch der Merkliste-Button aus dem Webshoplayout entfernt werden. Dazu das Menü CMS » Webdesign » Ordner: Layout öffnen und ItemViewSingleItem aus den ItemView-Templates wählen. Den entsprechenden Code entfernen.
Wunschzettel	Die Funktion Wunschzettel wird im Menü System » Mandant » Mandant wählen » Mein-Konto » Grundeinstellungen aktiviert. Mit der Funktion können Kunden mit Benutzerkonto im Webshop eine Liste von Artikeln zusammenstellen, die Kunden evtl. kaufen, sich schenken lassen oder sich aus anderen Gründen merken möchten. Ein Wunschzettel wird meist angelegt, um ihn anderen zu zeigen. Eine Position verschwindet erst vom Wunschzettel, wenn die Position gelöscht oder in den Warenkorb verschoben wird. Wunschzettel-Button Wenn die Funktion Wunschzettel nicht aktiviert wird, sollte auch der Wunschzettel-Button aus dem Webshop-Layout entfernt werden. Dazu das Menü CMS » Webdesign » Ordner: Layout öffnen und ItemViewSingleItem aus den ItemView-Templates wählen. Den entsprechenden Code entfernen.
Tickets	Dieser Menüpunkt wird nur angezeigt, wenn das Ticketsystem als Erweiterung gebucht wurde. Das plentymarkets-Modul "Ticketsystem STARTER" ist kostenlos buchbar. In diesem Menü die für den Kunden sichtbaren Eintragsfelder des Bereichs Tickets konfigurieren und benennen.
Gutscheine	Die Funktion Gutschein wird im Menü System » Mandant » Mandant wählen » Mein-Konto » Grundeinstellungen aktiviert.
Dokumente	In diesem Menü sieht der Kunde Dokumente, die im Menü CMS » Dokumente hochgeladen wurden und bei denen unter Berechtigung die Einstellung Kunden gewählt wurde.
Datenexport	Mit dieser Funktion wird z.B. für Firmenkunden eine Artikelliste zur Verfügung gestellt. Dazu unter Daten » Dynamischer Export ein neues Datenformat konfigurieren. In den Filtereinstellungen für das Datenformat ein Häkchen vor Export für Kundenklasse setzen, um den Filter zu aktivieren. Unter Wert die Kundenklasse wählen, für die das Datenformat zur Verfügung stehen soll. Je nach Kundenklasse sieht der Kunde die entsprechenden Daten im Menü Datenexport des Kundenkontos.

jQuery

In diesem Bereich sind jQuery-Funktionen integriert. Wenn Sie diese Funktionen anpassen oder erweitern möchten, beachten Sie die Hinweise auf der Handbuchseite jQuery.

5.5.12. Buttons

CMS » Webdesign » Buttons

Allgemeines zu Buttons

Sie haben 3 Möglichkeiten, Ihre Webshop-Buttons zu gestalten. Sie können den Button-Editor nutzen und so auf eine große Auswahl an Button-Hintergründen zurückgreifen. Ein Button-Text ist bereits verfügbar oder Sie können einen eigenen Text formulieren. Eine weitere Option ist ein Eigener Button, bei der Sie einen eigenen Button hochladen. Schließlich können Sie die Option HTML-Button verwenden. Bei Wahl dieser Option gestalten Sie den Button direkt im CSS.

Die Optionen Button-Editor und Eigener Button werden im Folgenden genauer beschrieben. Für die Option HTML-Button sind lediglich die Auswahl hier und HTML-Kenntnisse nötig, um das CSS anzupassen.

Konfiguration mit dem Button-Editor

In diesem Menü nehmen Sie die grundlegenden Einstellungen eines Buttons vor, wenn Sie mit dem Button-Editor arbeiten. Sie konfigurieren die Eigenschaften des Textes und des Hintergrundes.

Bild 52. Konfiguration des Buttons In den Warenkorb

Buttons konfigurieren:

Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen.
Klicken Sie auf das Plus vor dem Button, den Sie konfigurieren möchten.
Nehmen Sie die Einstellungen im Tab Konfiguration gemäß Tabelle 43 vor.
Speichern Sie die Einstellungen.

Die folgende Tabelle erläutert die Einstellungen im Tab Konfiguration für den Button-Editor:

Tabelle 43. Einstellungen im Tab **Konfiguration**
Einstellung	Erläuterung
Button-Layout	Zwischen folgenden Optionen wählen: Button-Editor = Fertige Hintergründe und Texte für Buttons. HTML-Button = Möglichkeit, im CSS einen Button per HTML-Code zu gestalten. Die weiteren Einstellungen, die in dieser Tabelle beschrieben werden, sind nur bei Wahl des Button-Editors sichtbar.
Vorschau	Zeigt den Button, wie er später im Webshop zu sehen sein wird.
Standard-Bezeichnung verwenden	Häkchen gesetzt = Die Standard-Bezeichung wird verwendet. Ein eigener Text kann nicht eingetragen werden.
Text	Einen eigenen Text für den Button eintragen. Hierfür darf kein Häkchen bei Standardbezeichnung verwenden gesetzt sein.
Textausrichtung	Zwischen Links, Zentriert oder Rechts wählen, damit der Text im Button so ausgerichtet wird.
Schriftgröße	Eine Größe zwischen 8 und 18 Pixeln wählen.
Schriftfarbe	Einen Hexadezimalwert eintragen oder eine Farbe wählen.
Schriftfarbe mouseover	Einen Hexadezimalwert eintragen oder eine Farbe wählen, die der Text hat, wenn sich der Mauszeiger auf dem Button befindet.
Seitenabstand	Abstand des Textes vom Rand des Buttons. Diese Einstellung wird nur bei den Textausrichtungen Links und Rechts berücksichtigt.
Button-Größe	Zwischen S, M, L und XL wählen.
Button-Hintergrund	Aus einem der Tabs einen Hintergrund für den Button wählen. Im Tab uploaded werden Ihre hochgeladenen eigenen Button-Hintergründe angezeigt.
Reset	Setzt alle Einstellungen auf die Standardeinstellungen zurück.

Eine Schriftfarbe einstellen:

Klicken Sie in das Feld Schriftfarbe bzw. Schriftfarbe mouseover.
→ Eine Farbauswahl wird geöffnet.
Wählen Sie im äußeren Kreis einen Farbton-Bereich.
Klicken Sie in das Farbquadrat im Kreis und wählen Sie bei gedrückter Maustaste eine Farbe.
→ Die Farbe sehen Sie im Farbfeld über dem Farbkreis.
Klicken Sie einmal außerhalb des Farbkreises, um die Farbe zu übernehmen.
→ Die Farbauswahl wird geschlossen.
Speichern Sie die Einstellungen.

Button-Texte und rechtliche Aspekte

Achten Sie bei der Wahl der Bezeichnung auf gesetzliche Vorgaben, z.B. auf Gesetze zum Verbraucherschutz. So heißt es z.B. in §312j des BGB "Erfolgt die Bestellung über eine Schaltfläche, ist die Pflicht des Unternehmers aus Satz 1 nur erfüllt, wenn diese Schaltfläche gut lesbar mit nichts anderem als den Wörtern „zahlungspflichtig bestellen“ oder mit einer entsprechenden eindeutigen Formulierung beschriftet ist." In plentymarkets wurde diesem Gesetz Rechnung getragen. Die Standard-Bezeichnung lautet Zahlungspflichtig bestellen.

Beachten Sie zu diesem Thema auch die Handbuchseite Anpassung an die Button-Lösung.

Template-Funktionen und -Variablen

In jedem plentmarkets-System finden Sie standardmäßig die für einen Webshop notwendigen Buttons. Einige dieser Buttons werden mit Template-Funktionen ins Design eingefügt. Diese Template-Funktionen (Tabelle 44) finden Sie in den Templates unter CMS » Webdesign. Allgemeine Beispiele und Beschreibungen zu Template-Funktionen und Template-Variablen finden Sie im Handbuch unter CMS-Syntax.

In der folgenden Tabelle sind die verfügbaren Template-Funktionen für Buttons aufgeführt:

Tabelle 44. Verfügbare **Template-Funktionen** für Buttons im Menü **CMS**
Button	Template-Funktion	Bereich Template-Funktionen und -Variablen
In den Warenkorb	ButtonAddBasket1(string$_buttonValue) : string	Global » ItemView (verschiedene)
In den Warenkorb (Popup)	ButtonAddBasketOverlay(string$_buttonValue) : string	Global » ItemView (verschiedene)
Löschen (Warenkorb)	ButtonDeleteBasketItem(string$_buttonValue) : void	Global » ItemView » ItemViewBasketPreviewList Basket » BasketItemsList
Anmelden	Button_CustomerRegistration(string$_buttonValue) : void	Misc » MiscCustomerRegistrationForm
Warenkorb öffnen	ButtonOpenBasket(string$_buttonValue) : string	Global » PageDesignFunctions
Zur Kasse	ButtonProceedOrder(string$_buttonValue) : void	Global » BasketFunctions
Weiter einkaufen	ButtonProceedShopping(string$_buttonValue) : void	Global » BasketFunctions
	Individueller Warenkorb (eigene Buttons)
Warenkorb (nach Änderungen) speichern	ButtonBasketSave(string$_buttonValue) : void	Basket » BasketItemsList
Rechnungsadresse im Warenkorb eingeben	Button_SaveBasketCustomerInvoiceAddress(string$_buttonValue) : void	Basket » BasketCustomerInvoiceAddress

Eigener Button

In diesem Bereich laden Sie selbst erstellte Buttons hoch. Die Formate PNG, GIF oder JPG sind zulässig. Die selbst erstellten Buttons sind in plentymarkets nicht mehr änderbar. Der Text, die Farben etc. müssen im Bild enthalten sein und werden genau so dargestellt.

Eigene Buttons einstellen:

Erstellen Sie einen Button und speichern Sie die Datei auf der Festplatte Ihres Rechners.
Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen.
Klicken Sie auf das Untermenü des Buttons.
Öffnen Sie das Tab Eigener Button.
Klicken Sie auf Durchsuchen….
Wählen Sie die gespeicherte Datei des Buttons auf Ihrer Festplatte.
Klicken Sie auf Öffnen.
Klicken Sie auf Speichern, um den Button hochzuladen.

Wenn Sie das Menü neu laden, wird eine Vorschau des Buttons angezeigt. Außerdem wird im Tab Konfiguration der Hinweis Eigener Button ist aktiv! angezeigt.

Gruppenfunktionen

Im Menü Gruppenfunktionen wenden Sie ein bestimmtes Layout auf alle Buttons einer Sprache an. Mit dieser Funktion ändern Sie mit wenigen Mausklicks die Textausrichtung, Schriftgröße, Schriftfarbe, den Seitenabstand und die Hintergrundgrafik aller Buttons eines Webshop-Designs in einer bestimmten Sprache gleichzeitig.

Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen » Gruppenfunktionen.
Wählen Sie die Einstellungen gemäß Tabelle 43.
Speichern Sie die Einstellungen.

Bild 53. Gruppenfunktionen

Buttons mit eigenem Hintergrund

Im Tab Eigener Hintergrund laden Sie eigene Hintergrundgrafiken für Buttons hoch. Diese werden dann unter Hintergrund-Liste angezeigt.

Anschließend wählen Sie den Hintergrund im Tab Konfiguration eines Buttons.

Wichtig dabei ist, dass sowohl das Hintergrundbild insgesamt als auch die einzelnen Buttonfelder die richtigen Maße haben.

Bild 54. Menü Eigener Hintergrund

Das Beispiel in Bild 55 ist ein Muster für eine Hintergrundgrafik und hat die Maße 634 x 63 Pixel. Die einzelnen Button-Felder der Grafik entsprechen den Einstellmöglichkeiten unter Button-Größe im Bearbeitungsfenster (Bild 52). Jedoch ist die Anordnung hier in Bild 55 umgekehrt zur Auswahl im Menü. Die obere Zeile der Button-Felder legt die Farbe der Buttons für die normale Ansicht fest. Die untere Zeile legt die mouseover-Farbe fest. Das ist die Farbe, die angezeigt wird, wenn Sie mit dem Mauszeiger auf den Button zeigen. Das am besten geeignete Datenformat für die Erstellung von Buttons ist PNG. Möglich sind auch JPG und GIF.

Die Buttonfelder haben die folgenden Maße:

Tabelle 45. Größe Buttonfelder
Buttonfeld	Breite	Höhe
XL	245 Pixel	31 Pixel
L	172 Pixel	31 Pixel
M	134 Pixel	31 Pixel
S	80 Pixel	31 Pixel

Der Abstand zwischen den Feldern beträgt jeweils 1 Pixel.

XL L M S

Bild 55. Beispiel für eine Hintergrundgrafik

Für einen Button mit einem eigenen Hintergrund laden Sie den Hintergrund wie nachfolgend beschrieben hoch.

Hintergrundgrafik hochladen:

Erstellen Sie eine Hintergrundgrafik speichern Sie die Grafik auf der Festplatte Ihres Rechners.
Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Eigener Hintergrund.
Klicken Sie auf Durchsuchen….
Wählen Sie die gespeicherte Datei der Hintergrundgrafik auf Ihrer Festplatte.
Klicken Sie auf Öffnen.
Klicken Sie auf Speichern, um den Hintergrund hochzuladen.
→ Der Button-Hintergrund wird im Bereich uploaded als Vorschau angezeigt.

Nachdem Sie einen Hintergrund hochgeladen haben, müssen Sie den Hintergrund im Button einstellen. Gehen Sie dazu wie unten beschrieben vor.

Buttons mit hochgeladener Hintergrundgrafik konfigurieren:

Öffnen Sie das Menü CMS » Webdesign » Buttons.
Klicken Sie auf das Untermenü des Buttons.
Wählen Sie im Tab Konfiguration im Bereich Button-Hintergrund unter uploaded den Hintergrund aus.
Nehmen Sie die weiteren Einstellungen gemäß Tabelle 43 vor.
Speichern Sie die Einstellungen.

Anpassung an die Button-Lösung

CMS » Webdesign » Bestellvorgang » Kaufabwicklung » Untermenü: Bestellübersicht

Button-Lösung

Bei der sogenannten Button-Lösung (engl. auch Shopping cart solution) handelt es sich um neue gesetzliche Anforderungen, mit denen Verbraucher vor dem Abschluss unübersichtlicher Verträge (Kosten- und Abofallen) geschützt werden sollen. Hieraus ergeben sich neue Anforderungen an die Gestaltung von Webshops. Insbesondere ist davon die Gestaltung der gesamten Bestellübersicht am Ende der Kaufabwicklung betroffen und nicht nur, wie der Name vermuten lässt, die eigentliche Schaltfläche (Button), mit der ein Kunde den Kauf bestätigt. Unternehmer müssen nun den Verbraucher unmittelbar vor der Bestellung übersichtlich und verständlich über die wesentlichen Elemente des Vertrages informieren. Solche wesentliche Elemente sind die Ware oder Dienstleistung selbst, der Gesamtpreis einschließlich Steuern und sonstiger Preisbestandteile, Liefer- und Versandkosten und gegebenenfalls die Vertragsdauer. Die gesetzliche Grundlage hierfür bilden § 312 g BGB und Artikel 246 EGBGB.

Welche Informationen müssen neu angegeben werden?

Sie müssen Ihren Kunden die folgenden Informationen zur Verfügung stellen:

Die wesentlichen Merkmale der Ware oder Dienstleistung.
Die Mindestlaufzeit des Vertrages, wenn dieser eine dauernde oder regelmäßig wiederkehrende Leistung zum Inhalt hat.
Den Gesamtpreis der Ware oder Dienstleistung einschließlich aller damit verbundenen Preisbestandteile, sowie alle über den Unternehmer abgeführten Steuern oder, wenn kein genauer Preis angegeben werden kann, die Berechnungsgrundlage, die dem Verbraucher eine Überprüfung des Preises ermöglicht.
Gegebenenfalls zusätzlich anfallende Liefer- und Versandkosten sowie einen Hinweis auf mögliche weitere Steuern oder Kosten, die nicht über den Unternehmer abgeführt oder vom Unternehmer in Rechnung gestellt werden.

Wann und wie müssen die Informationen angegeben werden?

Sie müssen Ihrem Kunden die oben aufgeführten Informationen zur Verfügung stellen, unmittelbar bevor dieser eine Bestellung abgibt. Unmittelbar ist in diesem Zusammenhang sowohl räumlich, als auch zeitlich zu verstehen. Hierbei müssen Sie die Informationen klar und verständlich in hervorgehobener Weise zur Verfügung stellen.

Die Informationen müssen sich somit vom übrigen Text und den Gestaltungselementen Ihres Webshops unterscheiden bzw. abheben.

Weitere Informationen finden Sie u.a. beim Händlerbund.

Anpassung bestehender Systeme

In diesem Abschnitt wird beschrieben, wie Sie das plentymarkets-Standard-Template an die neuen Gegebenheiten anpassen. Zunächst ein kurzer bildlicher Überblick über die alte und neue Bestellübersicht.

Bild 56. Gegenüberstellung alte (links) und neue (rechts) Bestellübersicht

Die Buchstaben zeigen die Anordnung der einzelnen Bestandteile der Bestellübersicht im Vorher-Nachher-Vergleich. Die zuvor vom Kunden gemachten Angaben befinden sich in der neuen Bestellübersicht nun oberhalb der Artikelübersicht. Die Artikelübersicht selbst ist farblich hervorgehoben. Außerdem steht Sie unmittelbar im Zusammenhang mit der Schaltfläche, durch die der Kunde den Kauf bestätigt (Kaufen-Button). Die Schaltfläche ist weiterhin gesondert farblich hervorgehoben.

Feld: Text nach Summen

Im Feld Text nach Summen können Sie für den Vertrag wichtige Informationen angeben (etwaige Zusatzkosten, die nicht Bestandteil der Rechnung sind). Der Text wird unterhalb der Gesamtsumme angezeigt. Bei Verwendung der Zahlungsart Nachnahme sollten Sie dort den nachfolgend gezeigten Hinweis hinterlegen. Da diese Zahlungsart mit Zusatzkosten verbunden ist, ist ein solcher Hinweis bindend. Hier die IF-/ELSE-Abfrage, die Sie ggf. noch anpassen müssen:

{% if $PaymentMethodID==1 %}
<div><b>Zuzüglich 2,00 EUR Inkassogebühr, wird vom Versanddienstleister vor Ort erhoben.</b></div>
{% endif %}

Weitere Felder

Die Felder Hinweis EU-Lieferungen und Hinweis Ausfuhrlieferungen ermöglichen Ihnen, auf Zusatzkosten hinzuweisen. Die dort hinterlegten Texte werden nur bei entsprechenden Aufträgen angezeigt. Positioniert sind die hinterlegten Texte ebenfalls unterhalb der Gesamtsumme.

Anpassung der Bestellübersicht:

Öffnen Sie das Menü CMS » Webdesign » Webdesign bearbeiten » Bestellvorgang » Kaufabwicklung » Untermenü: Bestellübersicht.
Bringen Sie mit der Auswahl Position die Bestandteile der Bestellübersicht (AGBs, Rechnungsanschrift, Artikel, etc.) in die gewünschte Reihenfolge. Wichtig ist dabei, dass der Bereich Artikel an letzter Position (9) steht. Sie können also die Nummerierung einfach von oben nach unten von 1 bis 9 vornehmen. (Diese Reihenfolge wurde sowohl in der oben gezeigten Abbildung als auch für das unten dargestellte CSS verwendet.)
Klicken Sie anschließend in das CSS-Feld der Bestellübersicht und fügen Sie folgenden CSS-Code am Ende des bereits bestehenden CSS-Codes hinzu.
Speichern Sie die Einstellungen.

CSS-Anpassungen nötig?

Abhängig von Ihren individuellen Einstellungen sowie Ihrem Webshop-Design können individuelle Anpassungen des hier dargestellten CSS erforderlich sein.

/* FIX SUM BOX */

#PlentyWebOrderOverviewOrderSumBox {
display: table;
}
#PlentyWebOrderOverviewOrderSumBox > div {
display: table-row;
}
#PlentyWebOrderOverviewOrderSumBox > div > span {
display: table-cell;
vertical-align: top;
padding: 5px 0;
border-bottom: 1px solid #CCCCCC;
}
#PlentyWebOrderOverviewOrderSumBox > div > span.PlentyCurrencyContainer {
padding-left: 30px;
}

/* SHOPPING CART SOLUTION */

/* general */
.PlentyWebClear {
clear: both;
}

/* therms/conditions & privacy */
#PlentyWebOrderOverviewAGBPrivacyContainer {
margin-bottom: 0;
}

/* SHIPPING DETAILS */

/* containers */
#PlentyWebOrderOverviewInvoiceContainer,
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer,
#PlentyWebOrderOverviewPaymentMethodContainer,
#PlentyWebOrderOverviewSchedulerContainer,
#PlentyWebOrderOverviewAGBPrivacyContainer,
#PlentyWebOrderOverviewReferenceContainer,
#PlentyWebOrderOverviewNotesContainer {
border: 1px solid;
border-color: #EEEEEE !important;
margin: 16px 0 0;
min-height: 140px;
}
#PlentyWebOrderOverviewReferenceContainer,
#PlentyWebOrderOverviewNotesContainer {
min-height: 1px;
height: auto;
}
#PlentyWebOrderOverviewAGBPrivacyContainer {
height: auto;
min-height: 0;
}
/* containers half width */
#PlentyWebOrderOverviewInvoiceContainer,
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer,
#PlentyWebOrderOverviewPaymentMethodContainer,
#PlentyWebOrderOverviewSchedulerContainer {
width: 46%;
}
/* containers right */
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer {
float: right;
clear: right;
}
/* individual style */
#PlentyWebOrderOverviewPaymentMethodContainer {
margin-bottom: 16px;
}
#PlentyWebOrderOverviewAGBPrivacyContainer > span > h3 {
font-size: 14px;
font-weight: bold;
}
/* header */
#PlentyWebOrderOverviewInvoiceContainer > span,
#PlentyWebOrderOverviewShippingContainer > span,
#PlentyWebOrderOverviewShippingMethodContainer > span,
#PlentyWebOrderOverviewPaymentMethodContainer > span,
#PlentyWebOrderOverviewSchedulerContainer > span,
#PlentyWebOrderOverviewAGBPrivacyContainer > span,
.PlentyWebItemContainerHeader {
display: block;
background: #F3F3F3;
border-bottom: 1px solid #888888;
color: #444444;
font-size: 14px;
line-height: 17px;
padding: 0;
}
/* header label */
.PlentyWebItemContainerHeaderTitle,
#PlentyWebOrderOverviewAGBandWithdrawal > h3 {
display: inline-block;
padding: 10px 10px 7px;
font-size: 16px;
font-weight: 400;
line-height: 18px;
}
/* button */
.PlentyWebButtonsRightContainer {
display: block !important; /*to overwrite element style*/
float: right;
margin-right: 5px;
padding-bottom: 5px;
position: relative;
top: 1px;
}
/* hide old button */
.PlentyWebOrderOverviewChangeContainerBottom {
display: none;
}
/* content container */
#PlentyWebOrderOverviewInvoiceDataContainer,
#PlentyWebOrderOverviewShippingDataContainer,
#PlentyWebOrderOverviewShippingMethodDataContainer,
#PlentyWebOrderOverviewPaymentMethodDataContainer,
#PlentyWebOrderOverviewSchedulerDataContainer {
margin-top: 20px;
}
/* textarea / input */
#PlentyWebOrderOverviewNotesTextareaBox,
#PlentyWebOrderOverviewReferenceInputBox {
padding: 5px 10px;
}
#PlentyWebOrderOverviewNotesTextareaContainer,
#PlentyWebOrderOverviewReferenceInputContainer {
display: block;
margin: 3px 4px;
}
#PlentyWebOrderOverviewNotesTextareaContainer > textarea,
#PlentyWebOrderOverviewReferenceInputContainer > input {
height: 100px;
width: 100%;
margin-left: -4px;
padding: 2px 3px;
font-family: inherit;
font-size: inherit;
line-height: 16px;
}
#PlentyWebOrderOverviewNotesTextareaContainer > textarea {
height: 100px;
resize: vertical !important;
}

/* ITEMS CONTAINER */

/* background color all container */
#PlentyWebOrderOverviewItemsContainer {
background: #F4F4F4;
}

/* items container */
#PlentyWebOrderOverviewItemsContainer {
min-height: 0;
width: auto;
float: none;
clear: both;
border: 1px solid #CCCCCC;
margin-top: 16px;
padding: 0 10px 10px;
}
/* header */
#PlentyWebOrderOverviewItemsTop {
border: none;
border-bottom: 1px solid #444444;
background: #CCCCCC;
margin: 0 -10px 10px;
padding: 0;
}
/* header label */
#PlentyWebOrderOverviewItems {
display: inline-block;
padding: 10px 10px 7px;
margin-top: 0;
font-size: 16px;
font-weight: bold;
line-height: 18px;
}
/* header button */
#PlentyWebOrderOverviewItemsTop > #PlentyWebOrderOverviewItemsChangeContainer {
display: block;
float: right;
margin-right: 5px;
padding-bottom: 5px;
position: relative;
top: 1px;
}
/* items container */
#PlentyWebOrderOverviewItemsBox {
margin-bottom: 0;
}
/* sum box */
#PlentyWebOrderOverviewOrderSumBox {
margin: 0 0 0 50%;
width: 50%;
padding-bottom: 1px;
text-align: left;
}
/* text after sum */
#PlentyWebOrderOverviewNoticeTotals,
#PlentyWebOrderOverviewNoticeNonEUDelivery,
#PlentyWebOrderOverviewNoticeEUDelivery {
margin: 0 0 0 50%;
}
/* button container */
#PlentyWebOrderOverviewSubmitContainer {
border: none;
background: none;
margin-top: 0;
padding: 8px 0 0;
}

/* ITEMS LIST */

/* main */
#PlentyWebOrderOverviewItemsBox {
border: none;
border-bottom: 1px solid #cccccc;
}
/* header */
#PlentyWebOrderOverviewItemsHeader {
background-color: transparent;
}
/* header cells */
.ItemsHeadline {
border-bottom-color: #888888;
}
/* list container */
#PlentyWebOrderOverviewItemsMain .ItemsRow > div {
border-bottom-color: #cccccc;
}

/* SUM BOX */

/* container */
#PlentyWebOrderOverviewOrderSumBox {
}
/* column width */
#PlentyWebOrderOverviewOrderSumBox > div > span:first-child {
width: 70%;
}
/* price sum */
#PlentyWebOrderTotalAmount {
font-size: 19px;
}
/* note vat */
#PlentyWebOrderOverviewOrderSumBox .PlentyDataAdditional {
font-size: 0.48em; /*.7*/
font-weight: normal;
}
/* note vat scheduler */
#PlentyTotalAmountSubscriptionTitle .PlentyDataAdditional {
font-size: 0.7em;
}
/* line */
#PlentyWebOrderOverviewOrderSumBox > div > span {
border-bottom-color: #E4E4E4;
}
/* no line */
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderOverviewGoodsValueGross > span,
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderOverviewShippingCostsGross > span {
border-bottom: none;
}
/* main line */
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderTotalAmount > span {
border-color: #000000;
}

/* TEXT AFTER SUM BOX */

#PlentyWebOrderOverviewNoticeTotals > div,
#PlentyWebOrderOverviewNoticeNonEUDelivery > div,
#PlentyWebOrderOverviewNoticeEUDelivery > div {
font-size: 0.7em;
line-height: 1.6em;
}
#PlentyWebOrderOverviewNoticeTotals > div:first-child,
#PlentyWebOrderOverviewNoticeNonEUDelivery > div:first-child,
#PlentyWebOrderOverviewNoticeEUDelivery > div:first-child {
margin-top: 8px;
}

5.5.13. CSS

CMS » Webdesign » Layout » CSS

Allgemeines

In diesen Kapiteln erhalten Sie zunächst einige grundlegende Informationen zu CSS. Sie erfahren, was CSS bedeutet und wie Sie damit das Design Ihres Webshops gestalten. Weiterhin erfahren Sie, wie das CSS in plentymarkets aufgebaut ist und wo die Festlegungen der verschiedenen Bereiche hinterlegt sind.

CSS (Cascading Style Sheets) bezeichnet eine Auszeichnungssprache für strukturierte Dokumente. Während Sie mit HTML den reinen Inhalt gestalten, bietet Ihnen CSS mehr Möglichkeiten, auf die Formatierung und Gestaltung des Inhalts sowie das Design einer Webseite Einfluss zu nehmen.

CSS in plentymarkets

In plentymarkets sind die allgemeinen CSS-Festlegungen im Menüpunkt CSSBase hinterlegt, was im Standard im jeweiligen CSS-Bereich immer geladen wird. Die Menüpunkte unterhalb von CSSBase enthalten nur Abweichungen oder Erweiterungen zu den Festlegungen im CSSBase. Zusätzlich wird im Standard ein CSS pro Bereich geladen, z.B. für den Bestellvorgang oder den Bereich Mein Konto. Darüber hinaus besteht die Option, über Template-Funktionen weitere Bereiche in das jeweilige CSS einzubinden (Kapitel 4). Aus der jeweiligen Kombination wird dann jedoch nur eine CSS-Datei pro Bereich erzeugt, d.h., es ist jeweils nur ein URL-Aufruf pro Bereich nötig.

Bereiche im CMS

Die CSS-Formatierungen finden Sie im Menü CMS » Webdesign » Layout » CSS in verschiedenen Menüpunkten, die nun vorgestellt werden.

Bild 57. Ordnerstruktur im Bereich CSS

Unbenutzt

Der Ordner Unbenutzt enthält die CSS-Bereiche, die nicht oder noch nicht konfiguriert wurden oder die aus einem anderen Grund keinen Inhalt haben. Sobald der Inhalt aus einem Bereich entfernt wird, wird der Menüpunkt in diesen Ordner verschoben.

CSSBase

Das CSSBase enthält die allgemeinen CSS-Festlegungen für den gesamten Webshop und wird immer geladen.

CSSContent

CSS-Formatierungen für die Bereiche Kategorien mit dem Template PageDesignContent, für die Artikeldarstellung und die Artikelsuche im Webshop.

CSSOrder

CSS-Formatierungen für den Bestellvorgang.

CSSMyAccount

CSS-Formatierungen für den Bereich Mein Konto.

CSSForum

CSS-Formatierungen für das Forum.

CSSBlog

Hier wird das CSS für einen Blog hinterlegt.

Anwendung

Das CSS wird über die Template-Funktion CSS() im jeweiligen Page-Design eingebunden. Die Standard-Konfiguration, bei der das CSSBase und das CSS des jeweiligen Bereichs in einer CSS-Datei geladen wird, kann durch folgende Funktion erweitert werden:

{% CSS([Content, Forum]) %}

In diesem Beispiel wird der Content-Bereich durch das CSS des Bereichs Forum erweitert. Es werden somit die Festlegungen beider Bereiche angewendet. Der CSS-Bereich, der erweitert werden soll, muss bei einer solchen Template-Funktion immer aufgeführt werden. In diesem Beispiel ist das der Bereich CSSContent. Das obligatorische CSSBase muss nicht im Code enthalten sein, da es immer automatisch mitgeladen wird.

6. Bilder-Galerie

CMS » Bilder-Galerie

6.1. Allgemeines

In die Bilder-Galerie laden Sie alle Bilder, die in Ihrem Webshop enthalten sein sollen. Diese können dort in Ordnern gespeichert werden. Neben dem Ordner Basis (voreingestellt) können Sie beliebig viele weitere Ordner anlegen, um Ihre Bilder strukturiert zu verwalten.

Damit ein Bild, z. B. als Logo, im Layout des Webshops angezeigt werden kann, muss dieses Bild als Ressource über das Internet verfügbar sein. Dazu muss das entsprechende Bild mittels FTP-Transfer oder in der Bilder-Galerie hochgeladen werden.

6.2. Bilder verwalten

Wie Sie in der Bilder-Galerie Bilder hochladen, bearbeiten und wieder löschen finden Sie im Folgenden erklärt.

Bild 58. Menü Bilder-Galerie

Ein Bild hochladen:

Öffnen Sie das Menü CMS » Bilder-Galerie.
Klicken Sie auf den blauen Ordner, in den Sie das Bild hochladen möchten, oder legen Sie über den Button Neuer Ordner einen neuen Ordner an.
Klicken Sie auf den Button Dateien hochladen und wählen Sie die Dateien vom Speicherort der Bilder, z.B. von der Festplatte Ihres Rechners.
Wählen Sie die gewünschten Bilder aus und klicken Sie auf Öffnen. Alternativ können Sie die Bilder auch per Drag- & Drop-Funktion in den Ordner ziehen.
→ Die Bilder werden hochgeladen.

Bilder bearbeiten:

Klicken Sie mit der rechten Maustaste auf das gewünschte Bild.
Klicken Sie auf Vorschau, um die Eigenschaften des Bildes zu sehen und zu bearbeiten.
Klicken Sie auf Löschen, um das Bild aus der Galerie zu entfernen.
Klicken Sie auf Öffnen, um das Bild in einer größeren Ansicht zu betrachten.
Speichern Sie die Einstellungen.

Bild 59. Bilder bearbeiten

6.3. Ordner verwalten

Zum Erstellen neuer und zum Verwalten bestehender Ordner gehen Sie wie folgt vor. Wählen Sie dabei die Namen und die Struktur Ihrer Ordner sorgfältig, um auch bei einer großen Anzahl von Bildern den Überblick zu behalten.

Neuen Ordner anlegen:

Öffnen Sie das Menü CMS » Bilder-Galerie.
Klicken Sie links unten auf Neuer Ordner.
→ Ein Fenster wird geöffnet.
Wenn der neue Ordner ein Unterordner eines bestehenden Ordners sein soll, wählen Sie den bestehenden Ordner aus. Wenn Sie einen neuen Hauptordner erstellen möchten, tragen Sie den Namen des neuen Ordners ein, ohne vorher einen Ordner anzuklicken.
Tragen Sie in das Textfeld einen Namen für den neuen Ordner ein und klicken Sie anschließend auf OK, um den Ordner anzulegen.
→ Die neuen Ordner sind nach erfolgreichem Anlegen sofort in der Ordnerübersicht verfügbar. Falls die Ordner nicht korrekt einsortiert wurden, aktualisieren Sie die Bilder-Galerie (Reload der Seite).

Ordner synchronisieren:

Öffnen Sie das Menü CMS » Bilder-Galerie.
Wählen Sie den betreffenden Ordner aus der Ordnerübersicht aus.
Klicken Sie auf den Button Ordner synchronisieren und aktualisieren Sie die Ansicht (Reload).

Diese Option dient zur Synchronisation von Bildern, die per FTP-Übertragung in bereits bestehende Ordner geladen wurden. Um diese Ordner in Ihrer Bilder-Galerie zur Verfügung zu haben, müssen Sie die hier eingerichtete Funktion ausführen. Außerdem ist die Synchronisation nötig, wenn Bilder nicht korrekt, d.h. ohne Vorschaubild, angezeigt werden. Die Synchronisation muss bei umfangreichem Bildbestand ggf. mehrfach ausgeführt werden, um alle Bilder zu synchronisieren.

Ordner löschen:

Klicken Sie mit der rechten Maustaste auf den gewünschten Ordner.
Klicken Sie auf Löschen, um den Ordner zu entfernen.

Bild 60. Ordner löschen

7. Best Practice

7.1. Inhalt dieses Kapitels

In diesem Kapitel finden Sie Beschreibungen wichtiger Prozesse des Menüs CMS. Sie erfahren, worauf Sie bei der Konfiguration dieses Bereichs achten müssen und wo es Querverbindungen zu anderen Bereichen gibt, die beachtet werden müssen, um optimale Ergebnisse zu erzielen und das ganze System besser zu verstehen. Dies dient als Ergänzung zu den grundlegenden Beschreibungen der Einstellungen und Funktionen.

Workflows

Die beschriebenen Workflows sind sinnvolle und in der Praxis bewährte Möglichkeiten, zu denen es generell Alternativen gibt. Die individuelle Konfiguration hängt u.a. von weiteren Faktoren ab, wie der Größe Ihres Webshops und den Tools, die Sie einsetzen.

7.2. SSL-Verschlüsselung

CMS » Layout

7.2.1. Entscheidung für SSL-Verschlüsselung

Wenn Sie Ihre Website im Interesse einer sicheren Verbindung auf eine SSL-Verschlüsselung umstellen, ist es wichtig, die folgenden Punkte zu beachten und vollständig umzusetzen. Nur so erreichen Sie eine einheitliche Auslieferung Ihrer Website und vermeiden Irritationen bei den Besuchern Ihrer Website oder Ihres Online-Shops.

In diesem Kapitel erfahren Sie, wie Sie Inhalte wie Bilder, CSS- oder JavaScript-Dateien in Ihrem Design hinterlegen, ohne dass es zu Fehlern bei der Auslieferung der Website mit entsprechenden Fehlermeldungen kommt.

Design für SSL vorbereiten

Auch wenn Sie aktuell noch kein SSL-Zertifikat bestellt haben oder verwenden, ist es sinnvoll, das Design bereits von Beginn an daraufhin auszurichten und entsprechend anzulegen.

7.2.2. SSL-Verschlüsselung konfigurieren

Die folgenden Hinweise zeigen beispielhaft, worauf Sie bei der Konfiguration der Inhalte Ihres Webshops achten sollten, und enthalten entsprechende Tipps.

Bilder

Bilder sollten grundsätzlich mit einer relativen URL in das Design eingebunden werden. Vermeiden Sie die Verwendung absoluter URLs.

Beispiel Bilder

Nicht optimal:
<img src="https://www.meinshop.de/images/gallery/Bild_01.png" />

Empfehlung:
<img src="/images/gallery/Bild_01.png" />

CSS-Dateien

Für die Einbindung von CSS-Dateien gilt das gleiche. Auch hier sollte eine relative URL verwendet werden.

Beispiel CSS-Datei

Nicht optimal:
<link rel="stylesheet" type="text/css" href="https://www.meinshop.de/layout/style.css" />

Empfehlung:
<link rel="stylesheet" type="text/css" href="/layout/style.css" />

Bei Einbindung einer externen CSS-Datei lassen Sie das Schema http bzw. https weg, damit das Schema je nach Fall vom Browser eingesetzt wird. Das folgende Beispiel bezieht sich auf den Service Google Fonts.

Beispiel externe CSS-Datei

Nicht optimal:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine" />

Empfehlung:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Tangerine" />

7.2.3. Umleitung

Die Umstellung auf die SSL-Verschlüsselung bedingt eine ausnahmslose Weiterleitung der alten HTTP-URLs auf das HTTPS-Äquivalent via 301-Redirect. Außerdem erfolgt eine konsequente Umstellung der kanonischen Ziele, der internen Verlinkung und der Sitemap auf das neue Protokoll. Dies bedeutet, dass Sie, wenn Sie eine alte URL - http://ihrshop.de/ - aufrufen, direkt auf die neue URL - https://ihrshop.de - weitergeleitet werden.

Die Sitemap-Datei aktueller plentymarkets-Online-Shops enthält ausschließlich die neuen HTTPS-URLs. Wenn Sie innerhalb Ihrer Site mit absoluten Link-Platzhaltern arbeiten, werden die Platzhalter ebenfalls mit https:// statt mit http:// ausgeliefert.

Sitemap-Inhalt löschen

Damit die Sitemap-Datei Ihres Systems mit den neuen verschlüsselten URLs aktualisiert wird, ist es nötig, die Sitemap-Datei nach Installation des SSL-Zertifikats zu löschen. Die Sitemap wird in plentymarkets täglich aktualisiert. Dieser Prozess erfolgt nachts.

Neue Indexierung durch Suchmaschinen

Suchmaschinen benötigen eine gewisse Zeit, um den Wert bzw. die Relevanz der alten URLs auf die neuen URLs zu übertragen. Je nach vorheriger Relevanz Ihrer Seiten kann dieser Prozess schnell oder eben etwas langsamer ablaufen.

7.2.4. Umleitung deaktivieren

Wenn Sie keine direkte Umleitung auf SSL wünschen, können Sie die Funktion im Service-Center deaktivieren. Diese Option ermöglicht, dass beim Aufruf einer http-URL keine direkte Umleitung auf die entsprechende https-URL erfolgt. Die internen Links und die Sitemap enthalten dabei jedoch weiterhin durchgehend https-URLs, um die Umstellung nicht zu gefährden.

Entscheiden Sie zusammen mit Ihrer SEO-Agentur, ob Sie die Umleitung auf SSL aktivieren oder deaktivieren sollten.

SSL-Umleitung deaktivieren:

Öffnen Sie das Menü Start » Service-Center.
Wählen Sie dort das gewünschte plentymarkets System.
Öffnen Sie das Tab Cache.
Scrollen Sie zum Abschnitt Permanente SSL-Umleitung.
Wählen Sie die Option immer inaktiv.
Klicken Sie auf Permanente SSL-Umleitung speichern.

Option < IE 9 inaktiv

Diese Option bezieht sich auf Systeme, die unter Windows XP und Internet Explorer niedriger als Version 9 laufen. Mit dieser Option wird die permanente SSL-Umleitung nur für diese Systeme deaktiviert.

Die Änderung wird beim nächsten Update der Webserver umgesetzt. Aktuell werden alle Einstellungen der Webserver viermal pro Tag aktualisiert.

7.2.5. Korrekte URL anlegen

Beachten Sie die hier beschriebenen Hinweise zur SSL-Verschlüsselung auch in anderen Bereichen wie Google Analytics und Google Webmaster Tools.

8. Webspace

Das Webspace-Tool im Menü CMS » Webspace ermöglicht es Ihnen, Daten auf den plentymarkets Server hochzuladen, die Sie Ihren Kunden zur Verfügung stellen möchten. Dies können Bilder, PDF-Dokumente und andere Dateien sein, die online für alle Besucher verfügbar gemacht werden sollen. Verwenden Sie dieses Tool, wenn Sie Bilder für Ihr Design auf Datei-Ebene verwalten möchten. Legen Sie für jedes Design einen Unterordner des Ordners layout/ an.

8.1. Upload-Einschränkungen

Für Uploads gelten die folgenden Einschränkungen:

PHP-Dateitypen können nicht hochgeladen werden.
Ein Upload ist auf 10 MB pro Vorgang begrenzt.

8.2. Neuen Ordner erstellen

Die vorhandene Ordnerstruktur kann durch Anlegen weiterer Ordner erweitert werden. Gehen Sie dazu wie unten beschrieben vor.

Neuen Ordner erstellen:

Wählen Sie den gewünschten Zielordner bzw. die unterste Ebene (= /).
Klicken Sie dann auf Neuer Ordner.
Tragen Sie einen Namen für den neuen Ordner ein.
Speichern Sie die Einstellungen.

8.3. Dateien hochladen

Gehen Sie wie unten beschrieben vor, um Dateien in einen Ordner hochzuladen.

Datei(en) hochladen:

Wählen Sie den Zielordner.
Klicken Sie auf Dateien hochladen.
Wählen Sie die Datei(en), die Sie hochladen möchten.
Klicken Sie auf Öffnen.

8.4. Alternativen zum Webspace-Upload

Einzelne Bilder können Sie auch über das Menü Bilder-Galerie verwalten. Als weitere Option können Sie Bilder und Dokumente auch direkt dort, wo diese verwendet werden sollen, an der Kategorie im Tab Dokumente, hochladen.

Social Bookmarks sind ein interessantes Instrument, um Ihre Internetpräsenz bekannt zu machen. Es gibt verschiedene Internetanwendungen, bei denen persönliche Favoriten (Bookmarks) hinterlegt werden können. Diese Favoriten stehen dann anderen Besuchern zur Verfügung. Besucher können Favoriten einsehen und hinterlegte Links aufrufen.

9.1. Social Bookmarks in Webshop integrieren

Gehen Sie wie unten beschrieben vor, um Links auf wichtige Social-Bookmarks-Seiten in Ihren Webshop einzufügen.

Social Bookmarks in Ihren Webshop integrieren:

Öffnen Sie das Menü CMS » Webdesign » Layout.
Öffnen Sie das gewünschte Template, z.B. ItemViewSingleItem.
Kopieren Sie den unten aufgeführten HTML-Code.
Fügen Sie den HTML-Code in das Template ein.
Speichern Sie die Einstellungen.

<a href="http://www.webnews.de" onclick="bookThis('webnews'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('Webnews')" src="/images/icons/social_bookmarking/book_webnews.gif" title="Webnews" height="18" border="0" width="18"></a>
<a href="http://www.folkd.com" onclick="bookThis('folkd'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('Folkd')" src="/images/icons/social_bookmarking/book_folkd.gif" title="Folkd" height="18" border="0" width="18"></a>
<a href="http://delicious.com" onclick="bookThis('delicious'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('delicious')" src="/images/icons/social_bookmarking/book_delicious.gif" title="del.icio.us" height="18" border="0" width="18"></a>
<a href="http://linkarena.com" onclick="bookThis('linkarena'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('Linkarena')" src="/images/icons/social_bookmarking/book_linkarena.gif" title="Linkarena" height="18" border="0" width="18"></a>
<a href="http://www.google.com" onclick="bookThis('google'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('Google')" src="/images/icons/social_bookmarking/book_google.gif" title="Google" height="18" border="0" width="18"></a>
<a href="http://yigg.de/" onclick="bookThis('yigg'); return false;"><img alt="YiGG" class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('YiGG')" src="/images/icons/social_bookmarking/book_yigg.gif" height="18" border="0" width="18"></a>

10. Blog (Weblog)

CMS » Blog

10.1. Allgemeines zu Blogs

Mit der Blog-Funktion veröffentlichen Sie Text- und Bild-Beiträge in ihrem Webshop. Blogs sind ein Mittel zur Kommunikation mit Kunden, um z.B über Neuerungen, Änderungen, Probleme oder andere interessante Themen zu informieren. Nehmen Sie die Einstellungen im Menü System » Mandant » Mandant wählen » Module » Blog vor, bevor Sie Ihren ersten Blogbeitrag anlegen und verfassen.

10.2. Neuen Blogbeitrag anlegen

Im Tab Neuer Blog legen Sie einen neuen Blogbeitrag an. Nach dem Speichern finden Sie den Blogbeitrag im Tab Blog bearbeiten.

Bild 61. Tab: Neuer Blog

Neuen Blogbeitrag anlegen:

Öffnen Sie das Menü CMS » Blog.
Wechseln Sie in das Tab Neuer Blog.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 46.
Speichern Sie die Einstellungen.

Tabelle 46. Einstellungen beim Anlegen eines neuen Blogbeitrags
Einstellung	Erläuterung
Titel	Einen Titel eintragen. Der Titel wird als Überschrift des Blogbeitrags angezeigt und für den Aufbau der URL verwendet. *Hinweis:* Der Titel ist ein Pflichteintrag. Wenn kein Titel eingetragen ist und der Blogbeitrag gespeichert wird, geht der Text verloren.
Mandant (Shop)	Einen Mandanten wählen, um den Blogbeitrag in diesem Mandanten anzuzeigen. Der Mandant ist eine Pflichtangabe und muss vor der Sprache gewählt werden.
Sprache	Eine Sprache für den Blogbeitrag wählen. Die Sprache ist eine Pflichtangabe und muss vor der Kategorie gewählt werden. Die Sprachen, die zur Auswahl stehen, werden im Menü System » Mandant » Mandant wählen » Module » Blog angelegt. Die Blogbeiträge können auch anhand der Sprache gefiltert werden.
Kategorie	Eine Kategorie für den Blogbeitrag wählen. Die Kategorie ist eine Pflichtangabe. Blogkategorien werden im Menü System » Mandant » Mandant wählen » Module » Blog erstellt. Die Kategorie möglichst vor dem Erstellen des Blogbeitrags anlegen. Die Zuordnung ist aber auch später änderbar.
Tags	Schlüsselwörter des Blogbeitrags eintragen. Die Schlüsselwörter tragen zur Kategorisierung bei. Wenn nach einem Schlüsselwort gesucht wird, werden alle Artikel mit diesem Schlüsselwort gefunden.
Autor	Als Autor wird automatisch der Benutzer des Systems eingetragen, der eingeloggt ist. Der Autor ist aber änderbar.
Veröffentlichung	Beim Anlegen des Blogbeitrags werden automatisch das Datum und die Uhrzeit eingetragen. Wenn der Beitrag erst später veröffentlicht wird, müssen Datum und Uhrzeit noch einmal angepasst werden, da diese Angaben bei der Veröffentlichung nicht automatisch aktualisiert werden.
Öffentlich	Das Häkchen ist beim Anlegen eines neuen Blogbeitrags automatisch gesetzt. Damit wird der Blogbeitrag nach dem Speichern sofort in die Blogliste aufgenommen. Wenn der Blogbeitrag nicht sofort im Blog erscheinen soll, das Häkchen entfernen. Der Blogbeitrag wird dann nicht indiziert und ist nur über den direkten Aufruf der Blog-URL auffindbar. Das Entfernen des Häkchens ist empfehlenswert, um vor dem Veröffentlichen den fertigen Beitrag prüfen zu können.
Template-Variablen und -Funktionen übersetzen	Zwischen Ja, Nur Link-Template-Variablen und -Funktionen und Nein wählen. Ja = Alle Template-Variablen und -Funktionen werden übersetzt. Nur Link-Template-Variablen und -Funktionen = Nur Link-Template-Variablen und -Funktionen werden übersetzt. Nein = Keine Template-Variablen und -Funktionen werden übersetzt.
Editor	Einen Editor zur Bearbeitung des Blogtextes wählen.

10.3. Blogvorschautext

Das Layout-Template BlogDesignBlogArchiveList bildet den Rahmen für eine Liste von Blogbeiträgen. Die Funktion GetBlogDesignBlogArchivesList liefert die Elemente der Liste, also Ihre Blogs mit einem Vorschautext. Wenn Sie den Vorschautext nicht begrenzen, wird der gesamte Blogtext als Vorschautext angezeigt. Dies ist in vielen Fällen zu unübersichtlich für eine Vorschauliste.

Blogvorschautext bestimmen mit$PreviewBreak

Fügen Sie die Variable $PreviewBreak in den Text ein, z.B. nach einem Satzpunkt oder nach dem ersten Abschnitt. Der davor liegende Text wird als Vorschautext angezeigt (Bild 61).

10.4. Blogbeitrag suchen

Beim Öffnen des Menüs CMS » Blog wird das Tab Blog bearbeiten geöffnet. In diesem Tab werden alle Blogbeiträge nach ID geordnet angezeigt. Jeder Blogbeitrag wird in einer Zeile dargestellt. Ein Blogbeitrag kann hier direkt gelöscht werden. Auch eine Vorschau kann angezeigt werden. Außerdem stehen Ihnen in diesem Tab Filter für die Suche von Blogbeiträgen zur Verfügung.

Sichtbarkeit on Blogbeitragen im Webshop

Beim Anlegen eines Blogbeitrags ist es empfehlenswert, das Häkchen bei öffentlich zu entfernen, um den Blogbeitrag vor dem Veröffentlichen per Vorschau anschauen und prüfen zu können. Damit ein Blogbeitrag im Blog Ihres Webshops aufgeführt wird, muss das Häkchen bei öffentlich gesetzt sein. Erst wenn ein erster Blogbeitrag veröffentlicht wurde, wird auch der Bereich Blog im Webshop sichtbar.

Bild 62. Tab: Übersicht Blogbeiträge und Suchfilter

10.4.1. Blogbeitrag suchen

Wie Sie einen Blogbeitrag suchen, wird im folgenden erläutert. Die Suchfilter sind in Bild 62 zu sehen.

Blogbeitrag suchen:

Öffnen Sie das Menü CMS » Blog.
Nehmen Sie Filtereinstellungen vor. Beachten Sie hierzu Tabelle 47.
Klicken Sie auf die Lupe, um die Suche auszuführen.

Tabelle 47. Filter für die Blogsuche
Einstellung	Erläuterung
Mandant	Einen Mandanten wählen, um nur Blogbeiträge anzuzeigen, die diesem Mandanten zugeordnet sind.
Sprache	Eine Sprache wählen, um nur Blogbeiträge anzuzeigen, die in dieser Sprache veröffentlicht wurden.
ID	Eine ID eintragen, um nur den Blogbeitrag mit dieser ID anzuzeigen.
Titel	Ein Stichwort oder einen ganzen Titel eintragen. Wenn ein Stichwort eingetragen wird, werden alle Blogbeiträge angezeigt, die dieses Wort enthalten. Wenn ein konkreter Titel eingetragen wird, wird nur der Blogbeitrag mit dem Titel angezeigt.

10.5. Blogbeitrag bearbeiten

Ein geöffneter Blogbeitrag hat 2 Tabs, Blog und Upload. In diesen Tabs ändern Sie Blogbeiträge, indem Sie Inhalte und Elemente, z.B. Text, Bilder oder Dateien, hinzufügen oder entfernen.
Im Tab Blog bearbeiten Sie den Text und legen die grundlegenden Einstellungen des Blogbeitrags fest. Die Einstellungen entsprechen denen, die schon einstellbar sind wenn man einen neuen Blogbeitrag anlegt (Tabelle 46).

Bild 63. Tab: Blogbeitrag bearbeiten

10.5.1. Datei hochladen

Im Tab Upload laden Sie Dateien für einen Blogbeitrag hoch. Die Dateien sind nach dem Upload automatisch in diesem Tab gespeichert.

Bild 64. Tab: Upload; absolute und relative URL der Datei

Datei hochladen:

Öffnen Sie das Menü CMS » Blog.
Öffnen Sie einen Blogbeitrag.
Öffnen Sie das Tab Upload.
Klicken Sie auf Durchsuchen (browserabhängig).
→ Ein Fenster zur Dateiauswahl wird geöffnet.
Wählen Sie die Dateien, die Sie hochladen möchten, und klicken Sie auf Öffnen.
Klicken Sie im Tab Upload auf das Upload-Symbol.
→ Die Dateien werden hochgeladen. Warten Sie, bis der Prozess abgeschlossen ist (grünes Häkchen wird angezeigt).

10.5.2. Datei in Blogbeitrag einfügen

Um eine hochgeladene Datei in den Blogbeitrag einzufügen, gehen Sie wie nachfolgend beschrieben vor.

Datei in Blogbeitrag einfügen:

Öffnen Sie das Menü CMS » Blog.
Öffnen Sie einen Blogbeitrag.
Öffnen Sie das Tab Upload.
Kopieren Sie die relative URL der Datei
Wechseln Sie in das Tab Blog.
Fügen Sie ein img-Tag in den Blogbeitrag ein.
Fügen Sie die relative URL in das Tag ein.
Speichern Sie die Einstellungen.

Sie entscheiden, ob Sie die relative oder die absolute URL verwenden. Eine kurze Erläuterung zu den Typen finden Sie auf der Handbuchseite URL-Info.

10.6. Tab: Blog veröffentlichen

Mit dieser Funktion aktualisieren Sie Ihre Blogs. Alle Blogs werden dabei automatisch noch einmal gespeichert. Eventuelle Anzeigeprobleme oder Fehler können dadurch behoben werden. Führen Sie die Aktion daher immer auch bei entsprechenden Problemen im Blogbereich durch.

Blog veröffentlichen

Klicken Sie auf das Zahnrad, um die Aktualisierung durchzuführen.

10.7. Blogbeiträge ins Design einbinden

Zum Anzeigen eines Blogbeitrags nutzen Sie die Funktion Link_Blog(). Anstelle der Funktion wird im Blog dann ein Link zu einem Blogbeitrag angezeigt. Das Design eines einzelnen Blogbeitrags bestimmen Sie z.B. im Template BlogDesignBlogEntry. Um eine Vorschauliste von Blogbeiträgen anzuzeigen, eignet sich das Template BlogDesignPreviewList. In diese Templates fügen Sie die Funktion Link_Blog() ein, damit Links zu Blogbeiträgen angezeigt werden. Die Funktion Link_Blog() ist eine globale Funktion. Sie kann in allen Templates, die für den Blog gedacht sind, eingesetzt werden. Bei Angabe einer konkreten Blog-ID kann die Funktion auch in allen anderen Templates verwendet werden.

10.7.1. Vorschauliste von Blogbeiträgen anlegen

Das Einfügen der Funktion Link_Blog() zusammen mit weiteren Variablen und Funktionen in das Template BlogDesignPreviewList sorgt dafür, dass für die im Tab Einstellungen des Templates angelegte Anzahl an Blogbeiträgen ein Eintrag mit Link etc. erstellt wird. Im folgenden sehen Sie ein Beispiel für eine Vorschauliste von Blogbeiträgen.

Bild 65. Vorschauliste Blogbeiträge

10.7.2. Link zu einem konkreten Blogbeitrag einfügen

Um einen bestimmten Blogbeitrag z.B. in einem anderen Blogbeitrag bzw. in einem Template, das nicht Blog im Namen hat, ausgeben zu lassen, fügen Sie die Funktion Link_Blog() mit einer ID ein. Bei dem Beispiel in Bild 66 beinhaltet die Vorschauliste nur Blog 16, da die ID 16 angegeben wurde.

Bild 66. Vorschauliste mit nur einem Blogbeitrag

Unresolved directive in <stdin> - include::_cms/faq.adoc[leveloffset=1]

11. Dokumente

Im Menü CMS » Dokumente laden Sie Dokumente hoch, um diese Dokumente z.B. als Anhang von E-Mail-Vorlagen automatisch an Ihre Kunden zu senden. Sie können verschiedene Datenformate hochladen, z.B. Bilder oder PDF-Dateien.

11.1. Dokumente hochladen

Gehen Sie wie unten beschrieben vor, um Dokumente im Menü CMS » Dokumente hochzuladen.

Ein Dokument hochladen:

Öffnen Sie das Menü CMS » Dokumente.
Klicken Sie auf Durchsuchen….
Wählen Sie die Datei, die Sie hochladen möchten.
Klicken Sie auf Öffnen.
Wählen Sie eine der Optionen unter Berechtigung.
Tragen Sie einen Ordnernamen ein (optional).
Speichern Sie die Einstellungen.

Tipp

Mit der Berechtigung legen Sie fest, ob das Dokument nur für Kunden, nur für Mitarbeiter oder für alle Besucher des Webshops verfügbar sein sollen (öffentlich).

11.2. Dokumente mit E-Mail-Vorlagen verknüpfen

Sie können hochgeladene Dokumente automatisch an E-Mail-Vorlagen anhängen. Pro E-Mail-Vorlage ist ein Dokument verknüpfbar. Gehen Sie dazu wie unten beschrieben vor.

Dokument mit E-Mail-Vorlage verknüpfen:

Öffnen Sie das Menü System » Mandant » Mandant wählen » E-Mail » Vorlagen.
Öffnen Sie die gewünschte E-Mail-Vorlage.
Wählen Sie in der Dropdown-Liste Dokumentenanhang die Datei, die als Anhang verwendet werden soll.
Klicken Sie auf Speichern, um die Einstellung zu sichern.

12. Termine

Im Menü CMS » Termine erstellen Sie Termine. Diese Termine können z.B. auf einer Kategorie unter der Rubrik News angezeigt werden.

12.1. Neuen Termin erstellen

Gehen Sie wie unten beschrieben vor, um einen neuen Termin zu erstellen.

Einen neuen Termin erstellen:

Öffnen Sie das Menü CMS » Termine.
Klicken Sie auf das grüne Plus, um einen neuen Termin zu erstellen.
→ Das Fenster Neuer Termin wird geöffnet.
Tragen Sie die Daten des Termins ein.
Speichern Sie die Einstellungen.
→ Der Termin wird im Tab Vorschau angezeigt.

12.2. Termine bearbeiten

Bestehende Termine können bearbeitet werden. Gehen Sie dazu wie unten beschrieben vor.

Einen Termin bearbeiten:

Öffnen Sie das Menü CMS » Termine.
Öffnen Sie das Tab Vorschau.
Klicken Sie in der Spalte Aktionen auf den Stift, um einen Termin zu bearbeiten.
→ Das Bearbeitungsfenster des Termins wird geöffnet.
Nehmen Sie die gewünschten Änderungen vor.
Speichern Sie die Einstellungen.

12.3. Termine suchen

Wenn Sie eine große Anzahl von Terminen gespeichert haben, erleichtert es Ihnen die Terminsuche, einzelne Termine zu finden. Gehen Sie wie unten beschrieben vor, um einen Termin zu finden.

Einen Termin suchen:

Öffnen Sie das Menü CMS » Termine.
Öffnen Sie das Tab Suche.
Wählen Sie den Suchzeitraum, indem Sie ein Datum unter von sowie ein Datum unter bis wählen.
Klicken Sie auf die Lupe.
→ Die Termine dieses Zeitraums werden angezeigt.

12.4. Termine löschen

Gehen Sie wie unten beschrieben vor, um Termine zu löschen.

Einen Termin löschen:

Öffnen Sie das Menü CMS » Termine.
Öffnen Sie das Tab Vorschau.
Klicken Sie in der Spalte Aktionen des Termins, den Sie löschen möchten, auf Löschen.
→ Der Termin wird gelöscht.

12.5. Termine ins Webshop-Design einbinden

Die Termine werden über das Template MiscDatesList angezeigt. Dieses Template finden Sie im Menü CMS » Webdesign » Layout » Misc. Sie können den Code im Layout anpassen und z.B. weitere Parameter anzeigen lassen, z.B. den Ort mit der Template-Variable $City.

$Container_MiscDatesList

Die Template-Variable zum Aufruf des Templates ist $Container_MiscDatesList.

13. Konstanten

In die Textfelder des Menüs CMS » Konstanten tragen Sie wiederkehrende Inhalte ein, die in das Design Ihres Webshops eingebunden werden können. Es stehen 25 Konstanten zur Verfügung. Die Verknüpfung über eine Konstante ermöglicht es, Inhalte wiederzuverwenden und zentral in diesem Menü zu bearbeiten anstatt diese Inhalte einzeln im Design anzupassen. Die Inhalte können HTML-Code oder JavaScript-Code enthalten. Auch Artikel-Galerien werden mit Konstanten verknüpft.

13.1. Konstanten definieren

Zunächst hinterlegen Sie einen Wert für die Konstante. Gehen Sie dazu wie unten beschrieben vor. Wenn Sie eine Konstante mit einer Artikel-Galerie verknüpfen, wird automatisch Code als Wert der Konstanten eingefügt. Tragen Sie deshalb für Artikel-Galerien keinen Wert ein.

Konstanten definieren:

Öffnen Sie das Menü CMS » Konstanten.
Tragen Sie die Inhalte in das Textfeld der gewünschten Konstante ein.
Speichern Sie die Einstellungen.
→ Die Inhalte können nun über die Konstante in den Webshop eingebunden werden.

PHP-Skripte einbinden

PHP-Skripte können nicht als Konstante gespeichert werden. Legen Sie PHP-Skripte extern ab, z.B. auf einem FTP-Server. Hinterlegen Sie die Verlinkung zu diesem Skript als Wert der Konstanten, um das Skript so aufzurufen.

13.2. Konstanten in Design einfügen

Binden Sie nun die Konstante in Ihren Webshop ein. Gehen Sie dazu wie unten beschrieben vor.

Konstante in Design einfügen:

Öffnen Sie das Menü CMS » Webdesign » Layout.
Öffnen Sie das gewünschte Template.
Fügen Sie die Konstante an der Position in das Template ein, an der die Inhalte angezeigt werden sollen.
Speichern Sie die Einstellungen.

Analog können Konstanten auch in Kategorien eingebunden werden.

14. Suchen und Ersetzen

Im Menü CMS » Suchen & Ersetzen nehmen Sie global sprachliche Änderungen in Kategorien und/oder im Design vor. Bei Namens- oder terminologischen Änderungen sparen Sie Zeit, da Sie die Stellen, an denen der Begriff verwendet wird, nicht einzeln suchen müssen. Durch Eingabe des bisher verwendeten und des neuen Begriffs wird eine automatische Ersetzung durch das System ausgeführt.

14.1. Suchen und Ersetzen

Gehen Sie wie im Folgenden beschrieben vor, um Suchbegriffe zu ersetzen.

Suchen und Ersetzen:

Öffnen Sie das Menü CMS » Suchen & Ersetzen.
Geben Sie in das erste Feld der Spalte Suchen den zu ersetzenden Begriff ein.
Geben Sie den neuen Begriff in das Feld Ersetzen derselben Zeile ein.
Wiederholen Sie dieses Vorgehen mit allen gewünschten Begriffen.
Wählen Sie, ob die Begriffe nur in den Kategorien, nur im Design oder in den Kategorien und im Design ersetzt werden sollen.
Entscheiden Sie, ob zusätzlich die Kategorien und das Standard-Design veröffentlicht werden sollen.
Klicken Sie auf das Zahnrad, um die Funktion auszuführen.

15. Kunden-Feedback

Im Menü CMS » Kunden-Feedback werden alle Bewertungen aus Ihrem Webshop gesammelt. In der Übersicht werden alle Bewertungen aus allen Bereichen zusammen angezeigt. Nutzen Sie die Suche, um sich z.B. nur Bewertungen eines Typs, eines Zeitraums oder eines bestimmten Kunden anzeigen zu lassen.

15.1. Kunden-Feedback einrichten

Richten Sie das Modul zunächst im Menü System » Mandant » Global » Feedback ein und aktivieren Sie Bewertungen für die gewünschten Bereiche.

15.2. Kunden-Feedback bearbeiten

Bewertungen und Kommentare, die in Ihrem Webshop eingehen, werden im Menü CMS » Kunden-Feedback gelistet. Hier stellen Sie Bewertungen sichtbar oder unsichtbar und bearbeiten Kommentare, falls diese z.B. nicht Ihrer Netiquette entsprechen.

Bewertung bearbeiten:

Öffnen Sie das Menü CMS » Kunden-Feedback.
Klicken Sie in die Zeile eines Feedbacks, um es zu bearbeiten.
Nehmen Sie die gewünschten Änderungen vor.
Speichern Sie die Einstellungen.

Sichtbarkeit einstellen

Klicken Sie in der Übersicht auf das Auge, um eine Bewertung im Webshop sichtbar oder unsichtbar zu stellen. Ist eine Bewertung unsichtbar, ist das Auge mit einem roten X durchgestrichen. In der Bearbeitungsansicht eines Feedbacks kann die Sichtbarkeit über die Dropdown-Liste Sichtbarkeit geändert werden.

15.3. Beispielkonfiguration im CMS

Um das Feature in Ihrem Webshop anzuzeigen, finden Sie im Bereich CMS » Webdesign » Ordner: Layout » Ordner: Form die passenden Templates und Template-Variablen.

15.3.1. Google reCAPTCHA einrichten

Richten Sie Google reCAPTCHA für das Webshop-Formular für die Bewertung von Artikeln ein. Registrieren Sie Ihren Webshop zunächst für die Verwendung von Google reCAPTCHA. Geben Sie anschließend den Websiteschlüssel und den Geheimen Schlüssel für Ihren Webshop ein.

Google reCAPTCHA einrichten:

Öffnen Sie das Menü System » Mandant » Mandant wählen » Webshop » Einstellungen.
Geben Sie den Google reCAPTCHA Websiteschlüssel ein.
Geben Sie den Google reCAPTCHA Geheimer Schlüssel ein.
Speichern Sie die Einstellungen.

15.3.2. Bewertungsformular anzeigen

Das folgende Code-Beispiel zeigt ein Webshop-Formular für die Bewertung von Artikeln im Template FormItemFeedback. Dieses Template fügen Sie dann mit dem Container {% Container_FormItemFeedback($ID) %} zum Beispiel im Template ItemViewSingleItem ein, um das Bewertungsformular bei einzelnen Artikeln anzuzeigen.

Die CSS-Klassen im folgenden Code dienen einer beispielhaften Darstellung. Passen Sie den Code nach Ihren Wünschen an.

<div class= "PlentyFormContainer ItemsDescriptionRating">
	<span class="PlentyFormContainer ItemsDescriptionRatingTitle">
		Artikel bewerten
	</span>
	<div class="PlentyFormContainer ItemsDescriptionRatingDetail">
		$FormOpenItemFeedback
		{% RatingValueSelect(3, "div") %}
		{% if $CustomerID <= 0 %}
			<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentTitle">
				Name
			</span>
			{% CommentAuthorInput() %}
		{% endif %}
		<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentTitle">
			Kommentar
		</span>
		<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentValue">
			{% CommentMessageInput() %}
		</span>
		<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentTitle">
			Sicherheitscode
		</span>
		<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentValue">
			$FeedbackCaptchaSecret
		<span class="item_clear"></span>
		{% FeedbackSubmitButton("Bewertung abgeben") %}
		$FormCloseItemFeedback
	</div>
</div>

15.3.3. Bewertungen als Liste anzeigen

Sie haben auch die Möglichkeit, vorhandene Bewertungen als Liste im Webshop auszugeben. Konfigurieren Sie diese Liste im Template MiscFeedbackList unter CMS » Webdesign » Ordner: Layout » Ordner: Misc. Der Code kann wie im folgenden Beispiel aussehen. Fügen Sie den Container {% Container_MiscFeedbacksList('item',$ID) %} dann an der Stelle in das Template ein, an der Sie die Liste anzeigen möchten, zum Beispiel im Template ItemViewSingleItem.

<table class="article_rating_table" border="0">
    <tbody>
    {% for $_feedback in GetMiscFeedbacksList('item',$CurrentItemId) %}
        <tr>
            <td class="article_rating_column_left" valign="top" align="left">
                <span class="ItemRatingIconContainer ItemRatingContainer_$_feedback->RatingValue">
                    $_feedback->RatingIcon
                </span>
            </td>
            <td class="article_rating_column_right" valign="top" align="left">
                <span class="name">$_feedback->FeedbackAuthor</span>
                <span class="date">$_feedback->FeedbackDateTime</span><br>
                <span class="comment">$_feedback->FeedbackMessage</span>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

16. plentymarkets CMS library

Die plentymarkets CMS library ist ein von plentymarkets entwickeltes Open-Source-Projekt. Das Projekt lagert die logischen JavaScript-Elemente des plentymarkets CMS aus und ermöglicht so eine bessere Trennung von Layout und Logik. Innerhalb des Projekts wurde Wert auf Modularisierung, Testbarkeit, Internationalisierung und Unabhängigkeit von JavaScript-Frameworks gelegt.
Das Projekt liegt auf GitHub.com und kann kostenlos heruntergeladen und weiterentwickelt werden. Hier erfahren Sie, wie Sie neue Versionen der plentymarkets CMS library in Ihr plentymarkets CMS einbinden.

16.1. plentymarketsCMStools Version aktualisieren

Das Projekt plentymarkets CMS library führt die Projektdateien in der JavaScript-Datei plentymarketsCMStools-x.x.x.js zusammen, die Sie im GitHub-Projektordner /dist finden. Dabei steht x.x.x für die Dateiversion. Welche Version Sie aktuell verwenden, prüfen Sie im Menü CMS » Webspace und dort im Ordner layout » Ihr Design » js » plenty. Gehen Sie wie unten beschrieben vor, um eine neue Version der Datei plentymarketsCMStools-x.x.x.js einzubinden.

Kompatibilität

plentymarketsCMStools Versionen 0.9.x sind nicht mit Versionen 1.x.x kompatibel. Wenn Sie bereits ein Design verwenden, das die JavaScript-Datei plentymarketsCMStools-x.x.x.js einbindet, ist es daher nicht möglich, von einer Version 0.9.x auf Versionen 1.x.x zu aktualisieren.

16.1.1. Neue Version herunterladen

Gehen Sie wie unten beschrieben vor, um die neue Version der plentymarketsCMStools-x.x.x.js aus dem GitHub-Repository herunterzuladen.

Neue Version herunterladen:

Öffnen Sie das GitHub-Repository plentymarkets CMS library.
Öffnen Sie den Order dist.
Klicken Sie auf die Datei plentymarketsCMStools-x.x.x.js.
→ Der Inhalt der Datei wird angezeigt.
Rechtsklicken Sie auf Raw.
Wählen Sie die Option Ziel speichern unter…
Speichern Sie die Datei auf Ihrem Rechner.

Laden Sie die Datei * plentymarketsCMStools-x.x.x.min.js analog herunter.

16.1.2. Neue Version hochladen

Gehen Sie wie unten beschrieben vor, um die neue Version der plentymarketsCMStools-x.x.x.js und der plentymarketsCMStools-x.x.x.min.js in den Webspace Ihres plentymarkets Systems hochzuladen.

Neue Version hochladen:

Öffnen Sie das Menü CMS » Webspace.
Öffnen Sie den Ordner layout » Ihr Design » js » plenty.
→ Ordner klappen Sie auf, indem Sie links in der Übersicht auf das kleine Plus klicken.
Klicken Sie auf Dateien hochladen.
Wählen Sie die Datei plentymarketsCMStools-x.x.x.js, die Sie im vorherigen Schritt heruntergeladen haben.
→ Die Datei wird hochgeladen und angezeigt.

Laden Sie die Datei plentymarketsCMStools-x.x.x.min.js analog hoch.

16.1.3. Versionsnummer in der JSON-Datei anpassen

Die Abhängigkeiten des Callisto Light Designs sind in einer JSON-Datei hinterlegt, die sich im selben Ordner wie die Datei plentymarketsCMStools-x.x.x.js befindet. Um die neueste Version der plentymarkets CMS library nutzen zu können, müssen Sie die in dieser Datei gespeicherte Versionnummer aktualisieren. Der Name dieser JSON-Datei lautet aktuell scripts-3.5.json, bei älteren plentymarkets Designs jedoch scripts.json oder dependencies.json. Der Inhalt der Dateien ist identisch. Gehen Sie wie unten beschrieben vor, um die Versionsnummer zu aktualisieren.

Nach diesem Schritt ist es nicht mehr notwendig die Skripte, die in der scripts-3.5.json vorkommen, durch ein script-Tag separat einzubinden. Das Skript ScriptLoader.js erzeugt die notwendigen script-Tags automatisch.

Versionsnummer in der JSON-Datei anpassen:

Öffnen Sie das Menü CMS » Webspace.
Öffnen Sie den Ordner layout » Ihr Design » js » plenty.
→ Ordner klappen Sie auf, indem Sie links in der Übersicht auf das kleine Plus klicken.
Laden Sie die Datei scripts-3.5.json herunter.
Öffnen Sie die Datei in einem Texteditor.
Ändern Sie die Versionsnummer von plentymarketsCMStools-x.x.x.js auf die Version der Datei, die Sie in den Webspace hochgeladen haben.
Speichern Sie die geänderte Datei.
Laden Sie die aktualisierte Datei an derselben Stelle in Ihrem plentymarkets System wieder hoch.
→ Aufgrund des Cachings dauert es bis zu eine Stunde, bis die neue Dateiversion im Webspace angezeigt wird.