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 erhältst du einen Überblick darüber, wie du deinen Webshop gestaltest und das Design nach deinen Vorstellungen verändern kannst. Erläuterungen dazu findest du im Kapitel Webdesign.
Weiterhin wird die Verwendung der Bilder-Galerie erklärt. In die Bilder-Galerie lädst du Bilder, die in deinem Webshop angezeigt werden sollen. Diese kannst du dort in Ordnern strukturiert verwalten.

Mit dem Webspace-Tool hinterlegst du u.a. die Elemente für dein Design, z.B. Bilder, Logos oder JavaScript-Dateien. Diese verwaltest du dort auf Datei-Ebene.

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

Wenn du in deinem Webshop einen Blog einrichten möchtest, erhältst du auf der Seite Blog die nötigen Informationen.

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

Die Konfiguration von Newslettern, die du automatisch versenden und mit denen du viele potentielle Käufer erreichen kannst, erklären wir dir ebenfalls in diesem Kapitel.

2. Webdesign in plentymarkets

Du lernst, mit dem integrierten Content-Management-System zu arbeiten und damit Inhalte, wie z.B verschiedene Templates, anzupassen, die das Design deines Onlineshops bestimmen. Außerdem erfährst du, wie du mit Platzhaltern verschiedene Inhalte in deinem Webshop einfügst, die dann dynamisch angepasst werden. Dazu gehört z.B. die Anzeige von Preisen und Verfügbarkeiten. Mit if-Abfragen fügst du Fallunterscheidungen nach dem Wenn-dann-Prinzip ein und steuern Aktionen anhand von Bedingungen.

Mit CSS steuerst du übergreifende Formatierungen und passt deine Styles mit wenigen Mausklicks an.

Weitere Details zum Thema erhältst du auf der Handbuchseite Webdesign.

3. Videotutorials

Erfahre mehr zum Menü CMS im folgenden Videotutorial:

4. Einstellungen

System » Systemeinstellungen » CMS

4.1. Inhalt dieses Kapitels

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

4.2. Videotutorials

Erfahre mehr zum neuen CMS im folgenden Videotutorial:

4.3. Formulare

System » Systemeinstellungen » CMS » Formulare

4.3.1. Allgemeine Informationen zu Formularen

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

4.3.2. Ein Formular anlegen

Wenn du das Menü öffnest, kannst du direkt ein neues Formular anlegen. Wenn du ein Formular durch Klick in der Übersicht FORMULARE links oben im Menü geöffnet hast und ein neues Formular anlegen möchtest, musst du das Menü zunächst neu laden, um auf die erste Ansicht zurückzukehren.

Bild 1. Neues Formular anlegen

Neues Formular anlegen:

Öffne das Menü System » Systemeinstellungen » CMS » Formulare.
Nimm die Einstellungen vor. Beachte dazu Tabelle 1.
Speichere die Einstellungen.
→ Das neue Formular ist ggf. erst in der Übersicht FORMULARE sichtbar, wenn du das Menü neu geladen hast.

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 deine 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 du ein Feld E-Mail-Adresse in ein Formular einfügst, wähle 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, gehe wie im Folgenden beschrieben vor.

Formular ändern:

Öffne das Menü System » Systemeinstellungen » CMS » Formulare.
Wähle das Formular, das du ändern möchtest, aus der Übersicht FORMULARE.
Nimm die gewünschten Änderungen gemäß Tabelle 1 vor.
Speichere die Einstellungen.

Nach Änderungen Kategorie speichern

Wenn du das geänderte Formular in einer Kategorie verwendest, musst du 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 ermittelst du die ID des gewünschten Formulars. Zweitens bindest du den korrekten Platzhalter und Code in die Kategorie ein. Gehe dazu wie folgt vor.

ID des Formulars ermitteln

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

ID des Formulars ermitteln:

Öffne das Menü System » Systemeinstellungen » CMS » Formulare.
Wähle das Formular, das du ändern möchtest, aus der Übersicht FORMULARE.
Die ID findest du in der Zeile ID.

Template-Variable und Code einbinden

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

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

Formular und Code einbinden:

Öffne das Menü Artikel » Kategorien.
Wähle in der Dropdown-Liste Sprache die gewünschte Sprache aus, z. B. Deutsch.
Öffne nun die gewünschte Kategorie.
Kopiere den oben angegebenen Code und füge den Code an der gewünschten Stelle ein.
Suche die Template-Variable {% Form(X) %} und ersetze X durch die ID des Formulars.
Speichere die Einstellungen.

4.3.5. Formulare in weiteren Sprachen anlegen und verknüpfen

Lege Formulare für jede Sprache deines Webshop an. Verknüpfe die Formulare mit der Sprachversion der gewünschten Kategorie.

Formular in weiterer Sprache anlegen:

Öffne das Menü System » Systemeinstellungen » CMS » Formulare.
Nimm die Einstellungen gemäß Tabelle 1 vor.
→ Trage die Feldnamen in der gewünschten Sprache ein, z. B. Englisch.
→ Trage in das Feld Formularname einen Namen ein, an dem du die Sprache des Formulars erkennst.
Speichere die Einstellungen.

Formular in weiterer Sprache einbinden:

Öffne das Menü Artikel » Kategorien.
Wähle in der Dropdown-Liste Sprache die gewünschte Sprache, z. B. Englisch.
Öffne nun die gewünschte Kategorie.
Kopiere den Code und füge den Code an der gewünschten Stelle ein.
→ Übersetze den gezeigten Text in die gewünschte Sprache.
Suche die Template-Variable {% Form(X) %} und ersetze X durch die ID des Formulars.
Speichere die Einstellungen.

4.4. RSS

System » Systemeinstellungen » 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 findest du z.B. bei Wikipedia oder unter http://www.techfacts.de/rss-was-genau-ist-das-eigentlich.

Mit plentymarkets kannst du RSS-Feeds erzeugen. Du kannst deinen 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 » Systemeinstellungen » CMS » RSS kannst du 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:

Öffne das Menü System » Systemeinstellungen » CMS » RSS.
Klicke auf das Tab Neuer RSS-Feed.
Nimm die Einträge und Einstellungen gemäß Bild 2 vor.
Speichere die Einstellungen.

Bild 3. RSS-Feed bearbeiten

Die folgende Tabelle erläutert die Einstellungen im Menü System » Systemeinstellungen » 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 kannst du einen Link, der direkt auf die URL des RSS-Feeds verweist, z.B. in eine Kategorie einfügen. Alternativ dazu kannst du 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, musst du das Seitenlayout der Webseite ändern.

RSS-Feed in die Website einbauen:

Öffne das Menü CMS » Webdesign.
Öffne im linken Bereich unter Layout im Ordner PageDesign das Template PageDesignContent.
Füge am Ende des Bearbeitungsfensters PageDesignContentMainFrame den nachfolgenden HTML-Code ein. Passe 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 deinen RSS-Feed in deinem Webshop einfügen.

RSS-Feed-Icon im Layout einfügen:

Öffne das Menü CMS » Webspace » layout » Ihr aktives Layout » images.
Klicke auf die Schaltfläche Dateien hochladen und wähle den Speicherort des Icon.
Wähle die gewünschten Bilder der Icons und klicke auf Öffnen. Alternativ kannst du die Bilder auch per Drag-and-Drop-Funktion in den Ordner einfügen.
→ Das Bild wird hochgeladen.
Öffne das hochgeladene Bild.
Notiere dir die URL, z.B. /layout/testdesign/images/RSS-Icon.png.
Öffne das Menü CMS » Webdesign.
Wähle in der Dropdown-Liste Sprache die Sprache des Designs, das du bearbeiten möchtest, z.B. Deutsch.
Wähle unter Layout und dort im Ordner PageDesign das Template PageDesignContent.
→ Das Template wird in der gewählten Sprache geöffnet.
Füge den Link-Platzhalter für das Icon an der gewünschten Stelle im Layout ein (siehe Beispiel unten).
Klicke auf Speichern, um deine 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 » Systemeinstellungen » CMS » Artikel-Galerie erstellst du Artikel-Galerien. Mit Artikel-Galerien präsentierst du in deinem Webshop Artikel in einer Galerieansicht. Deine Kund*innen sehen dann z.B. die neuesten Artikel oder deine Top-Artikel. Per Klick öffnest du den dargestellten Artikel. Wenn Kund*inenn 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.

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

Neue Artikel-Galerie erstellen:

Öffne das Menü System » Systemeinstellungen » CMS » Artikel-Galerie.
Klicke auf das Tab Neue Artikel-Galerie.
Nimm die Einstellungen gemäß Tabelle 3 vor.
Speichere 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 du Artikelbilder änderst oder Bilder zu einem Artikel hinzufügst, 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 nimmst du im Menü Artikel-Galerie im Tab Neue Flash-Galerie vor. Es muss jedoch mindestens eine Artikel-Galerie angelegt sein, bevor du eine Flash-Galerie anlegen kannst, da eine Datenquelle erforderlich ist, aus der die Artikelbilder geladen werden (Tabelle 4).

Neue Flash-Galerie erstellen:

Öffne das Menü System » Systemeinstellungen » CMS » Artikel-Galerie.
Klicke auf das Tab Neue Flash-Galerie.
Nimm die Einstellungen gemäß Tabelle 4 vor.
Speichere 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ügst du nun über die CMS-Konstante, die du bei der Option Quelltextkonstante gewählt hast, in deinen Webshop ein. Die CMS-Konstante kann sowohl in Kategorien als auch in Templates eingefügt werden. Unten wird beschrieben, wie du die CMS-Konstante in die Kategorie einfügst, die deine Startseite enthält.

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

Öffne das Menü Artikel » Kategorien.
Öffne die Kategorie deiner Startseite.
Füge die CMS-Konstante an einer geeigneten Position in die Kategorie ein.
Füge optional eine Überschrift vor der CMS-Konstante ein und formatiere sie.
Speichere 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 deines 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 erhältst du eine schnelle Übersicht, damit du ich im Menü CMS » Webdesign orientieren kannst und weißt, welche Elemente zur Bearbeitung deines Designs verfügbar sind. Das Kapitel soll dir als Hilfe dienen, die du immer wieder zur Orientierung verwenden kannst. 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 du Änderungen vornimmst. 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: Speichere das Template, damit deine 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 dir, ein Template schnell zu finden. Gib 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:

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

Um das Template der Sprache anzuzeigen, wähle 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 erhältst du erste grundlegende Informationen zu Struktur, Codierung und Syntax der Inhalte deines Webshops. Du erfährst, wie die verschiedenen Elemente aufgebaut sind und wie du die Elemente verändern kannst. Die meisten Strukturen sind im Standard-Design (d.h. der Grundkonfiguration bei Start deines Webshops) in plentymarkets bereits vorhanden und konfiguriert. Die Erläuterungen dieser Seiten sollen dir helfen, diese Strukturen zu verstehen und anzupassen. Dazu sind gewisse Grundkenntnisse im Bereich Webdesign nötig. Alternativ solltest du gewünschte Anpassungen von einer Agentur vornehmen lassen.

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

Für die Bearbeitung eines Webdesigns sind erweiterte Kenntnisse in den Bereichen HTML und CSS nötig. Auf der folgenden Seite findest du 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 erhältst du eine Übersicht aller Möglichkeiten der Gestaltung. Du findest 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 deiner Website anbietet. Informationen dazu findest du 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 erhältst du 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. Beachte 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. Du kannst 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 erhältst du wichtige und grundlegende Informationen zum Seitenaufbau im CMS deines 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 deines Webshops:

DE CMS Webdesign Grundlagen Seitenaufbau 01 SI

Bild 10. Grundlegende Template-Struktur

Das Bild zeigt die Template-Struktur. Du erkennst die Anordnung der Templates und welche Elemente jeweils in welches Template gehören. Diese Struktur findest du 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 dir 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. Du findest 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. Diese ä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. Du findest 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 solltest du 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 erhältst du Informationen zu jQuery.

Wichtiges zu jQuery

jQuery ist eine umfangreiche JavaScript-Klassenbibliothek, die komfortable Funktionen zur Manipulation und Navigation in deiner Website anbietet. Diese ist automatisch in deinem Webshop vorhanden und kann überall in deinem Layout genutzt werden. Zudem bieten wir dir die Zusatz-Bibliotheken jQuery UI und jQuery Tools an.

Vor Einbindung prüfen!

Kompatibilität

Solltest du beabsichtigen, mit anderen JavaScript-Klassenbibliotheken wie z.B. Prototype zu arbeiten, informiere dich vorher über die Kompatiblität beider Bibliotheken und berücksichtige mögliche Konfliktpotentiale.

Bibliotheken

Binde keine der genannten Bibliotheken in deinem Layout neu ein. Dies könnte unabsehbare Auswirkungen auf die Funktion der Bibliotheken haben.

Tutorial

Ein Tutorial zu jQuery findest du ü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. Du kannst damit Texte und z.B. Tabellen in Content-Seiten direkt bearbeiten oder Formatierungen, wie z.B. Überschriften, Nummerierungen oder Listen, anwenden. Du siehst bei diesem Editor direkt das Ergebnis. Du kannst die Inhalte auch im Quellcode bearbeiten. erfährst du mehr dazu auf der Handbuchseite Editor.

5.4.2. Syntax-Editor

Zur Bearbeitung von HTML-Inhalten, wie Artikelbeschreibungen, Templates und E-Mail-Vorlagen steht dir 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 erfährst du 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 kannst du Texte und z.B. Tabellen in Kategorien direkt bearbeiten oder Formatierungen, wie z.B. Überschriften, Nummerierungen oder Listen anwenden. Du siehst bei diesem Editor direkt das Ergebnis (WYSIWYG). Du kannst die Inhalte bei diesem Editor auch im Quellcode bearbeiten. Alternativ steht der Editor Textfeld, ein HTML-Editor, zur Verfügung, mit dem du ausschließlich im HTML-Code arbeitest. 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 deine Seiten oder z.B. deine Artikelbeschreibungen eingefügt werden. Dieser Effekt kann z.B. auftreten, wenn du einen Text mit dem Textfeld-Editor einträgst und dann zum Editor wechselst. Wenn du ganz sicher gehen willst, deaktiviere den Editor im Menü System » Systemeinstellungen » Einstellungen » Editoren.

Die Editoren kommen in den folgenden Bereichen zum Einsatz:

Artikelbeschreibung
Listingbeschreibung
Kategorien
Newsletter

Editor-Verfügbarkeit

Wenn du im Menü System » Systemeinstellungen » Einstellungen » Editoren für bestimmte Bereiche den Editor deaktiviert hast, 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. Du kannst damit Kategorieseiten wie in einem Textverarbeitungsprogramm bearbeiten, auch wenn du nicht über Programmier- bzw. HTML-Kenntnisse verfügst. Allerdings sind solche Kenntnisse von Vorteil, da der Editor auch die Bearbeitung des Quelltextes ermöglicht und du darin z.B. unklare Formatierungen korrigieren oder Formatierungen einfügen kannst, die nicht über die Editorfunktionen zur Verfügung stehen.

Bild 13. Benutzeroberfläche des Editors

Allgemeine Informationen zur Erstellung und Konfiguration von Kategorien findest du 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

Beachte 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 Schaltflächen wird übrigens angezeigt, wenn du mit dem Mauszeiger darauf zeigst.

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 du Text kopierst oder einfügst. Du erhältst auf dieser Seite Tipps zum Umgang mit diesen Funktionen.

Funktionsübersicht

Nachfolgend erhältst du 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 = Beachte 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 die Schaltfläche ö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ählst du 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 die Schaltfläche 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 kannst du über das Menü CMS » Bilder-Galerie bzw. über das Icon im CMS oder über deinen 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 kannst du 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 du z.B. die Breite und die Höhe des Bildes ändern möchtest, wird das Schloss wieder geöffnet, weil die realen Daten den geänderten Werten nicht entsprechen. Du kannst das im Bedarfsfall lassen, darfst allerdings nicht auf das geöffnete Schloss-Icon klicken, da die Originalwerte dann beim 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 du Texte unformatiert einfügen möchtest, verwende 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, drücke 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 du im Menü System » Systemeinstellungen » Einstellungen » Editoren für bestimmte Bereiche den Syntax-Editor deaktiviert hast, 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 erhältst du 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 du davon schreibst. 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) kannst du 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 du durchgehend mit dem Syntax-Editor arbeitest. 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 kannst du Wörter oder Textteile und somit z.B. auch Formatierungen suchen und durch die gewünschte Ersetzung austauschen. Die Ersetzenfunktion rufst du 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 diese Schaltfläche wird nur das markierte Element ersetzt.
All	Durch Klick auf diese Schaltfläche 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

Du kannst 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 du oft und viel HTML schreiben musst, lohnt es sich auf jeden Fall, wenn du dir das einmal ansiehst!

Funktionsweise Emmet

Du gibst eine Emmet-Anweisung direkt in den Syntax-Editor ein und drückst 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 findest du 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 findest du unter Benutzer bearbeiten.

5.4.5. Inline-Editor

CMS » Webdesign

Allgemeines

Der Inline-Editor ermöglicht die direkte Anpassung des Designs deines Onlineshops ohne den Umweg über das Menü CMS. Zu einem gewählten Bereich kannst du 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 öffnest du über den Inline-Editor direkt zur Bearbeitung im plentymarkets-System.

Bild 20. Webshop zum Bearbeiten öffnen

Startseite zur Bearbeitung öffnen:

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

Bereich über das Icon öffnen:

Klicke 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 Schaltflächen 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, beachte die Handbuchseite Webdesign bearbeiten.
Seite aktualisieren	Aktualisiert die Seite und zeigt z.B. Änderungen an, die im Backend vorgenommen wurden. Wichtig: deinen 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 findest du 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 bearbeitest du Inhalte wie Artikeldetailansichten, Kategorien, Blogs etc. direkt im Webshop. Deine Möglichkeiten werden im Folgenden am Beispiel Artikel erläutert.

Bild 22. Artikelbearbeitung im Webshop öffnen

Bearbeitung des Artikels im Webshop öffnen:

Öffne den Webshop zum Bearbeiten (Bild 20).
Wähle im Webshop den Artikel aus, den du bearbeiten möchtest.
Zeige mit der Maus auf den Artikel.
→ Oben links wird ein Stift angezeigt (Bild 22).
Klicke 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. Du kannst das Template nun wie gewohnt anpassen. Änderungen werden nach dem Speichern direkt angezeigt.

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

Tabelle 20. Inline-Editor; **Buttons im Bearbeitungsfenster**
Einstellung	Erläuterung
Speichern	Änderungen im Template speichern. Diese Schaltfläche 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 deiner Wahl. Weitere Details dazu findest du 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 du die Artikel- oder andere Kategorien nicht direkt im Webshop bearbeiten möchtest, kannst du 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ähle im Webshop den zu bearbeitenden Artikel.
Klicke oben auf die Schaltfläche 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 du den Code findest und anpassen kannst. Außerdem beschreiben wir, wie du die verfügbaren Template-Variablen und -Funktionen findest und in den Code einfügst. Du findest auch Hinweise zum Umgang mit CSS-Formaten und wie du if-Abfragen in deine Templates einbaust.

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 deines 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

Beachte die Erläuterungen der folgenden Handbuchseiten, wenn du das Design deines Webshops anpassen möchtest:

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 deinem plentymarkets-System kannst du 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 rufst du ü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üpfst du ein Design mit einem oder mehreren deiner Webshops.

Bild 25. Design mit Mandanten verknüpfen

Design mit einem oder mehreren Mandanten verknüpfen:

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

Grüne Schrift = aktives Design

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

Kategorieseiten verknüpfen

Verknüpfe 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üpfst du für jeden Mandanten und für jedes Design separat. Es müssen alle Seiten mit einer Kategorie verknüpft werden. Gehe dazu wie unten beschrieben vor.

Designspezifische Kategorieverknüpfungen haben Vorrang

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

Bild 26. Zuordnung der Kategorien des Webshops

Kategorieseiten zuordnen:

Öffne das Menü CMS » Webdesign.
Wähle das gewünschte Design aus der Dropdown-Liste.
Wähle die gewünschte Sprache aus der Dropdown-Liste.
Klicke auf das blaue Zahnrad, um die Einstellungen zu öffnen.
→ Das Fenster Design-Einstellungen (Bild 26) wird geöffnet.
Klicke auf das Tab Mandanten.
Wähle links den Mandanten, für den du Kategorieseiten zuordnen möchtest.
Klicke neben der Seite, der du eine Kategorieseite zuordnen möchtest, auf die Lupe.
→ Eine Liste der verfügbaren Kategorieseiten wird angezeigt.
Wähle die Kategorie, die du der Seite zuordnen möchtest. Beachte dabei die Erläuterungen in Tabelle 21.
Wiederhole die beschriebenen Schritte für alle weiteren Seiten.
Speichere 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 dir 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 deine 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. Passe die Inhalte der Kategorien entsprechend an.

Bestellschritte konfigurieren

Für die Konfiguration von Bestellschritten für den individuellen Bestellvorgang benötigst du Kategorien des Typs Container. Beachte 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 kannst du bei Bedarf ändern.

Bild 27. Verknüpfung des Seiten-Layouts

Design veröffentlichen

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

Design veröffentlichen:

Öffne das Menü CMS » Webdesign.
Wähle in der Dropdown-Liste das gewünschte Design.
Wähle die gewünschte Sprache.
Klicke auf die Weltkugel, um die Veröffentlichung zu starten.
→ Das Fenster Design veröffentlichen wird geöffnet.
Wähle in der linken Spalte des Fensters die Bereiche des Designs, die veröffentlicht werden sollen. Beachte dazu Tabelle 22.
Klicke 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 deines 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 leerst du diesen Cache. Wenn du wie oben beschrieben Änderungen an einem Design vorgenommen und veröffentlicht hast, solltest du den Datei-Cache zurücksetzen, damit deine Änderungen sofort angezeigt werden.

Datei-Cache zurücksetzen:

Öffne das Menü CMS » Webdesign.
Wähle das gewünschte Design.
Wähle die gewünschte Sprache.
Klicke auf die Weltkugel.
→ Das Fenster Design veröffentlichen wird geöffnet.
Wähle in der rechten Spalte des Fensters die Bereiche des Designs, die geändert wurden. Beachte dazu Tabelle 23.
Klicke 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 erhältst du gleichzeitig eine Sicherheitskopie. Du passt das neu angelegte Design an. Falls ein Fehler auftritt, hast du so noch das Basisdesign und kannst auf dessen Grundlage ein neues Design anlegen.

Sicherheitskopie

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

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

Tipp: Bezeichnungen für neue Designs

Damit du den Überblick behältst, besonders wenn du häufig Änderungen vornimmst, wähle für deine 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 überträgst du einige oder alle Eigenschaften eines Designs auf ein anderes Design. Dabei kannst du 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

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

Bild 28. Design übertragen

Eigenschaften eines Designs übertragen:

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

Design exportieren

Mit der Funktion Design exportieren exportierst du ein Design oder Teile eines Designs in einer ZIP-Datei. Diese Datei speicherst du dann auf einem Datenträger deines Rechners. Gehe wie unten beschrieben vor, um ein Design zu exportieren.

Design exportieren:

Öffne das Menü CMS » Webdesign.
Klicke auf das Symbol Design exportieren.
→ Das Fenster Design exportieren wird angezeigt.
Wähle das Design, das exportiert werden soll.
Wähle die Sprache, die exportiert werden soll.
Wähle die Bereiche, die exportiert werden sollen (Häkchen setzen).
Klicke auf Design exportieren.
Speichere die Datei auf einem Datenträger deines Rechners.

Design importieren

Mit der Funktion Design importieren importierst du die ZIP-Datei eines Designs, das auf einem Datenträger deines 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, änderst du die Bezeichnung des zu importierenden Designs vor dem Import.

Dropbox: Design exportieren/importieren

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

Bild 29. Dropbox-Export/Import

Anhand des Status kannst du 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 dein Dropbox-Konto im Menü System » Systemeinstellungen » Mandant » Global » Dienste » Dropbox mit plentymarkets verknüpft sein.

Design in Dropbox-Ordner exportieren

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

Design in Dropbox-Ordner exportieren:

Öffne das Menü CMS » Webdesign.
Wähle aus der Dropdown-Liste das Design, das aus plentymarkets in den Dropbox-Ordner exportiert werden soll.
Klicke auf das Symbol Dropbox: Design exportieren/importieren (Bild 29 , roter Pfeil).
→ Das Fenster Dropbox wird angezeigt.
Klicke auf Design exportieren.
→ Das Fenster Design exportieren wird angezeigt.
Wähle die Sprache, die exportiert werden soll.
Wähle die Bereiche, die exportiert werden sollen (Häkchen setzen).
Klicke auf Design exportieren.
→ Im Basis-Ordner deines 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 importierst du Templates aus dem Ordner deines Dropbox-Kontos, den du im Menü System » Systemeinstellungen » Mandant » Global » Dienste » Dropbox als Basis-Ordner hinterlegt hast. Wahlweise werden nur geänderte oder alle Templates aus dem Dropbox-Ordner in plentymarkets importiert. Gehe wie unten beschrieben vor, um Templates aus dem Basis-Ordner in plentymarkets zu importieren.

Templates aus Dropbox-Ordner importieren:

Öffne das Menü CMS » Webdesign.
Wähle das Design, in das Templates importiert werden sollen, aus der Dropdown-Liste.
Klicke auf das Symbol Dropbox: Design exportieren/importieren (Bild 29 , roter Pfeil).
→ Das Fenster Dropbox wird angezeigt.
Klicke auf Design importieren.
→ Das Fenster Dropbox wird angezeigt.
Wähle entweder Nur geänderte Templates importieren oder Alle Templates importieren.
→ Die Dateien werden aus dem Basis-Ordner deines 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 du ein aktives Design löschen möchtest, deaktivierst du zunächst in den Design-Einstellungen die Verknüpfung mit den Mandanten (Shops).

Design löschen:

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

5.5.5. Templates bearbeiten

Wie du Templates bearbeitest, wird auf den weiteren Unterseiten dieses Kapitels beschrieben. Wie du ein Template in andere Sprachvarianten eines Designs überträgst, liest du 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 du mit HTML den reinen Inhalt gestaltest, bietet dir CSS die Möglichkeit, auf übergreifende Formatierungen zur Gestaltung des Inhalts sowie des Designs einer Webseite Einfluss zu nehmen. Einer der Vorteile ist, dass du z.B. Formate im CSS festlegen kannst, 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. Erfahre 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. Du erhältst 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 du zur Bearbeitung der Templates im plentymarkets-CMS über gewisse Grundkenntnisse im Bereich HTML und CSS verfügen solltest. Darüber hinaus empfehlen wir dir, die grundlegenden Erläuterungen des Kapitels Webdesign sorgfältig zu lesen. Beachte besonders das Kapitel Grundlagen der Syntax, bevor du Templates anpasst. Die Handbuchseite Seitanaufbau gibt dir 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 deines 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 du jedoch nach Belieben ändern oder z.B. durch einen Dienstleister anpassen lassen kannst.

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 eine Schaltfläche 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. Du kannst pro Kategorie auch ein abweichendes Seiten-Layout wählen. Dies konfigurierst du 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 dir, 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 dir, 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.

Beachte 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. Du findest 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. Du erhältst 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 du zur Bearbeitung der Templates im plentymarkets-CMS über gewisse Grundkenntnisse im Bereich HTML und CSS verfügen solltest. Darüber hinaus empfehlen wir dir, die grundlegenden Erläuterungen des Kapitels Webdesign sorgfältig zu lesen. Beachte besonders das Kapitel Grundlagen der Syntax, bevor du das Template anpassest. Die Handbuchseite Seitanaufbau gibt dir 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 findest du 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 » Systemeinstellungen » 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

Lege zunächst wie im Folgenden beschrieben ein Freitextfeld an.

Bild 30. Parameter des Freitextfeldes Maßeingabe

Freitextfeld anlegen:

Öffne das Menü System » Systemeinstellungen » Artikel » Freitextfelder.
Trage in ein freies Freitextfeld die Bezeichnung Maßeingabe ein.
Wähle unter Datentyp die Einstellung kleine Zahl (-127 bis 127).
Trage unter Zeichenlänge die Ziffer 1 ein.
Speichere die Einstellungen.

In das daraus generierte Freitextfeld trägst du 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 konfigurierst du 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:

Öffne das Bearbeitungsmenü eines Artikels im Tab Base.
→ Dort findest du die Felder Breite, Länge und Höhe (Bild 31).
Gib 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 du für den Artikel gewählt hast. 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 musst du 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 musst du die Einheit in Quadratmillimeter ändern, wenn noch kleinere Maßangaben nötig sind.

Ziffer eintragen

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

Ziffer für Eingabefelder eintragen:

Klicke auf das Tab Felder in der jeweiligen Artikelbearbeitung.
→ Das Freitextfeld Maßeingabe (siehe Freitextfeld) wird hier angezeigt.
Gib 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.
Speichere 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 trägst du 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:

Öffne das Menü CMS » Webdesign » Ordner: Layout » Ordner: ItemView.
Wähle das Template ItemViewSingleItem aus.
Füge den folgenden HTML-Code ein.
Speichere 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

Ersetze bei den Template-Variablen $Free[10] in obigem Code die Ziffer 10 ggf. durch die für deine Konfiguration zutreffende Ziffer deines 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 deinem Webshop:

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

Eingabefeld verbergen

Wichtig für verborgene Felder

Wenn du nur ein Eingabefeld benutzen möchtest (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 dein 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 entscheidest du, welche Informationen die Template-Variablen ausgeben sollen und nimmst die entsprechenden Einstellungen vor. Dann entscheidest du, an welcher Stelle im Webshop die Informationen angezeigt werden sollen und bindest die Template-Variable an dieser Stelle der Kategorieseite bzw. des Layout-Templates ein. Im Folgenden beschreiben wir, wie du Termine, FAQs und die Kundenregistrierung konfigurierst.

Grundstrukturen im plentymarkets-CMS

Wir weisen darauf hin, dass du zur Bearbeitung der Templates im plentymarkets-CMS über gewisse Grundkenntnisse im Bereich HTML und CSS verfügen solltest. Darüber hinaus empfehlen wir dir, die grundlegenden Erläuterungen des Kapitels Webdesign sorgfältig zu lesen. Beachte besonders das Kapitel Syntax, bevor du Templates anpasst. Die Handbuchseite Seitenaufbau gibt dir 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. Passe die Einstellungen jeweils für deinen Online-Shop an.

MiscDatesList

Möchtest du aktuelle Termine auf deiner Homepage präsentieren? Neue Termine erstellen und deine aktuellen Termine bearbeitest du im Menü CMS » Termine. Das Template wird mit der Template-Variable $Container_MiscDatesList angezeigt.

Termine formatieren

Gehe wie unten beschrieben vor, um deine Termine im CMS zu formatieren.

Termine formatieren:

Öffne das Menü CMS » Webdesign » Layout » Misc.
Öffne das Template MiscDatesList.
→ Der Code wird im Bearbeitungsfenster angezeigt.
Passe den Code deinen Anforderungen entsprechend an. Füge z.B. wie unten beschrieben weitere Template-Variablen (Tabelle 26) ein.
Speichere 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

Du bindest deine Termine über die Template-Variable $Container_MiscDatesList in deinem Webshop ein. Diese Template-Variable kannst du entweder in eine Kategorie oder in ein Template einfügen. Gehe dazu wie unten beschrieben vor:

Template-Variable in eine Kategorie einbinden:

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

Template-Variable in ein Template einbinden:

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

MiscFAQsList

Mit diesem Template zeigst du eine FAQ-Liste in deinem Webshop an. Die FAQ-Punkte erstellen und bearbeitest du im Menü CMS » FAQ. Das Template wird mit der Template-Variable $Container_MiscFAQsList angezeigt.

Bild 33. Anzeige einer FAQ im Webshop

FAQs formatieren

Gehe wie unten beschrieben vor, um deine FAQs im CMS zu formatieren.

FAQs formatieren:

Öffne das Menü CMS » Webdesign » Layout » Misc.
Öffne das Template MiscFAQsList.
→ Der Code wird im Bearbeitungsfenster angezeigt.
Passe den Code deinen Anforderungen entsprechend an. Füge z.B. wie unten beschrieben weitere Template-Variablen (Tabelle 27) ein.
Speichere 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

Du bindest deine FAQs über die Template-Variable $Container_MiscFAQsList in deinem Webshop ein. Diese Template-Variable kannst du entweder in eine Kategorie oder in ein Template einfügen. Gehe dazu wie unten beschrieben vor:

Template-Variable in eine Kategorie einbinden:

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

Template-Variable in ein Template einbinden:

Öffne das Menü CMS » Webdesign » Layout.
Öffne das gewünschte Template, z.B. PageDesignContent.
Füge die Template-Variable $Container_MiscFAQsList an der gewünschten Stelle des Templates ein.
Klicke 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ügst du im CMS den Code ein und nehmen weitere Einstellungen vor. Dabei legst du z.B. fest, welche Seite als Landingpage nach der Registrierung angezeigt wird. Diese Optionen findest du im Tab Einstellungen des Templates MiscCustomerRegistrationForm.

Kundenregistrierung konfigurieren:

Öffne das Menü CMS » Webdesign » Layout » Misc » MiscCustomerRegistrationForm.
Klicke auf die Registerkarte MiscCustomerRegistrationFormContent.
Füge den gewünschten Code ein.
→ Dies kann der Beispiel-Code weiter unten auf dieser Seite oder ein selbst erstellter Code sein.
Nimm die Konfiguration im Tab Einstellungen gemäß Tabelle 28 vor.
Speichere die Einstellungen.
Prüfe das Ergebnis im Webshop und passe 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	Schaltfläche 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

Gehe 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:

Öffne das Menü Artikel » Kategorien.
Öffne die Kategorie, mit der du das Kundenregistrierungsformular anzeigen willst.
Füge die Template-Variable $Container_MiscCustomerRegistrationForm an der gewünschten Stelle im Quellcode ein.
Speichere die Einstellungen.

Template-Variablen in ein Template einbinden:

Öffne das Menü CMS » Webdesign.
Öffne das Template, mit dem du das Kundenregistrierungsformular anzeigen willst.
Füge die Template-Variable $Container_MiscCustomerRegistrationForm an der gewünschten Stelle im Quellcode ein.
Speichere die Einstellungen.

5.5.10. Bestellvorgang

CMS » Webdesign » Bestellvorgang

Inhalt dieser Seite

In den folgenden Kapiteln erhältst du 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. Du hast hinsichtlich der Gestaltung vielfältige Möglichkeiten, die wir in diesem Kapitel beschreiben.

Gesetzliche Anforderungen

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

Grundeinstellungen

Du kannst den Bereich Bestellvorgang individuell konfigurieren und z.B. entscheiden, welche Elemente dort angezeigt bzw. welche Funktionen aktiv sein sollen. Diese Einstellungen nimmst du im Menü System » Systemeinstellungen » Mandant » Mandant wählen » Bestellvorgang » Einstellungen vor. In der Grundeinstellung deines Webshops ist bereits eine Standardkonfiguration hinterlegt.

jQuery

In diesem Bereich sind jQuery-Funktionen integriert. Wenn du diese Funktionen anpassen oder erweitern möchtest, beachte die Hinweise auf der Handbuchseite jQuery.

Tracking-Funktionen

Durch die Integration von Tracking-Funktionen über Template-Variablen in Verbindung mit Tracking-Dienstleistern kannst du dir mit Hilfe detaillierter Statistiken einen Überblick zum Nutzungsverhalten der Besucher deines Webshops verschaffen und daraus geeignete Rückschlüsse für die Gestaltung und Entwicklung deines Webshops ziehen.

Nutze den Service von Google Analytics oder anderen Tracking-Dienstleistern, wie etracker, um diese Funktionen in deinen 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 kannst du im Tab Warenkorb individuell anpassen.

Tab: Warenkorb

Das Tab Warenkorb öffnest du, indem du im Menü CMS » Webdesign auf den Ordner Bestellvorgang und dann auf Warenkorb klickst.

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 du ändern kannst. Dieser erste Hinweistext erscheint oberhalb der Schaltfläche Weiter, im Standard ist das die Schaltfläche Zur Kasse, den du im Tab Buttons anpassen kannst. Du kannst den Titel ändern und einstellen, ob die Schaltfläche Weiter 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 du sie auch hier erkennen kannst. Du kannst u.a. einstellen, welche Artikeldetails im Warenkorb angezeigt werden sollen, ob du die Möglichkeit verwenden möchtest, Artikel aus dem Warenkorb auf die Merkliste zu setzen und ob die Schaltfläche 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. Du kannst die Standardtexte Lieferdatum ändern und Lieferdatum ändern und zusätzlich einen Hinweis hinterlegen. Die Konfiguration des Lieferdatums für den Bestellvorgang nimmst du unter System » Systemeinstellungen » Mandant » Mandant wählen » Bestellvorgang » Einstellungen vor. Details dazu findest du auf der Handbuchseite Grundeinstellungen. Dort findest du auch den Code, den du ins CMS einfügst, damit die Lieferdatumsfunktion angezeigt wird.

Abonnement
Mit dieser Option kannst du Artikel in deinem Webshop als Abonnement anbieten. Damit ein Kunde in deinem Webshop die Abo-Funktionen wählen kann, musst du die entsprechenden Template-Variablen und -Funktionen in das Layout deines Webshops einfügen. Details dazu findest du auf der Handbuchseite Scheduler. Die Lieferintervalle sowie die Anzahl der Lieferungen, die du deinen Kunden im Webshop zur Auswahl geben möchteest, legst du im Scheduler-Bereich fest.

Lieferland
Das Standard-Lieferland ist vorausgewählt, kann jedoch geändert werden, wenn du einstellst, dass dieser Bereich angezeigt werden soll. Soll die Auswahl angezeigt werden, kannst du 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 » Systemeinstellungen » Mandant » Global » Sprachpakete hinterlegt. Du kannst 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, korrigiere diesen Fehler und stelle ein Versandprofil dafür bereit.

Zahlungsart
Anzeige der Zahlungsarten mit Wahlmöglichkeit. Es werden jeweils die Kosten der Zahlungsarten angezeigt, wenn Zusatzkosten anfallen. Du kannst einstellen, ob der Bereich sich erst nach dem Klicken auf den Titel öffnen soll. Beachte 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 deiner Versandprofile ist vorausgewählt. Du kannst einstellen, ob der Bereich sich erst nach dem Klicken auf den Titel öffnen soll.

Summen
Du kannst einen Hinweistext eintragen, der oben links in diesem Bereich angezeigt wird.

Gutschein
In diesem Bereich kann der Kunde einen Gutschein-Code eingeben. Du kannst 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 kannst du Hinweistexte eintragen, die im unteren Bereich des Warenkorbs angezeigt werden. Der erste Hinweistext wird unter Hinweis vor hinterlegt und wird im Warenkorb über der Schaltfläche Zur Kasse (Weiter) angezeigt. Du kannst einstellen, ob die Schaltfläche Zur Kasse angezeigt werden soll oder nicht. Ein zweiter Hinweis wird unter Hinweis nach hinterlegt und wird dann im Warenkorb unter der Schaltfläche Zur Kasse angezeigt.

Tool zur Identifizierung von Elementen

Wir empfehlen die Verwendung eines Tools zur Untersuchung der Elemente, die du verändern möchtest, wie z.B. Firebug. Damit ist es relativ einfach, Elemente zu identifizieren, wenn du nicht genau weißt, 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. Du erfährst, wie du die Elemente dieses Bereichs veränderst oder ggf. ausblendest.

Orientierung

Die Elemente, die nachfolgend beschrieben werden, sind in Bild 36 nummeriert. In Bild 37 kannst du 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 findest du 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. Du kannst über die Bilder-Galerie ein Bild in einen Bereich laden, indem du die URL des Bildes einfügst. Bild 36 zeigt ein Beispiel für den HTML-Code (Pfeil). Ergebnis: Bild 37 , Pos. 1. Lege 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. Du kannst 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	Die Schaltfläche Weiter bewirkt den Übergang aus dem Warenkorb zum Bestellvorgang. Der Kunde kann dazu diese Schaltfläche verwenden oder eine zweite (gleiche) Schaltfläche am Ende der Seite. Die Schaltfläche steht im Standard auf anzeigen (Bild 36 , Pos. 6) und wird mit nicht anzeigen ausgeblendet. *Tipp: Verstecke die Schaltfläche durch Wahl der Option Nicht anzeigen, wenn du möchtest, dass der Kunde nicht an dieser Stelle den Warenkorb verlässt, sondern zunächst die ganze Seite prüft und dann ie Schaltfläche am Ende der Seite anklickt. Die Schaltflächen sowie Texte der Schaltflächen bearbeitest du im Tab Buttons*.
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, kannst du 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 öffnest du, wenn du auf das Icon Template-Variablen und -Funktionen klickst (Bild 36 , Pos. 2). Wenn du eine Variable bzw. Funktion z.B. in einen Hinweistext oder in das CSS kopierst, 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. Du kannst somit diese Template-Variablen nutzen, um für die jeweilige Sprache die Anzeige der Preise, Versandkosten etc. anzupassen. Du könntest so für das deutsche Layout die Kommaseparierung und für das englische Layout die Punktseparierung bei Geldbeträgen umsetzen.

Dot-Template-Variablen

Wenn du diese Template-Variablen an anderer Stelle zur Übertragung von Daten verwenden möchtest, musst du 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 richtest du ein Tracking deiner Webshop-Besuche ein. Dabei ist es möglich, im Bereich des Warenkorbs einen Tracking-Code zu hinterlegen, der dir detaillierte Informationen zu den Einkäufen deiner Kunden, den Aufträgen und den darin enthaltenen Artikeln liefert.

Beachte 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 dir volle Kontrolle über das Aussehen, den Funktionsumfang und den Verlauf des Kaufprozesses. Du legst in bis zu zehn Schritten fest, wie Kunden deinen persönlichen Bestellvorgang durchlaufen sollen. Zusätzlich gestaltest du 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 gestaltest du 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 findest du in plentymarkets unter Artikel » Kategorien im Ordner deines Designs. Dort gestaltest du die Inhalte der Bestellschritte. Um von einer Kategorie auf eine andere Kategorie zu verlinken, nutzt du die Link-Funktionen. Es stehen dir 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, kannst du mit Hilfe von Anchor-Tags an beliebiger Stelle im Bestellvorgang verlinken.

# Erzeugung eines Anchor-Tags der als Schaltfläche 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 Schaltfläche *Zur Kasse*

Codebeispiel 1 stammt aus der Kategorie Warenkorb von Callisto Light. Kunden wird darüber die Schaltfläche 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 der Schaltflächen die Funktion Link_CustomerRegistration() hinterlegt. Der Kunde wird bei Klick auf die Schaltfläche 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. Schaltfläche 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 findest du in plentymarkets unter Artikel » Kategorien im Ordner deines 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 findest du in plentymarkets im Ordner deines Designs unter Artikel » Kategorien » Kasse.

In der Kategorie Kasse wird der Code der vier Bestellschritte über die Funktion CategoryContentBody($_id) geladen. Du findest 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 findest du 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. Du nimmst auf diese Weise Einfluss auf die Sichtbarkeit von Elementen, z.B. den Eingabefeldern von Formularen. Mit den Angaben unter dem Kommentar # CHECKOUT VALIDATION & APPEARANCE regelst du 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 deine Hinweise & Sonderwünsche.
SetGlobal("ShowCouponInDetails", true);	true	Zeigt das Eingabefeld Gutschein-Code.

Ausgabe der Zahlungsarten

Im Ordner deines 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 Optionsfeldern erzeugt, über die Kunden eine Zahlungsart auswählen können (Codebeispiel 3).

# Die For-Schleife erzeugt eine Liste mit Optionsfeldern, 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 deiner 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 findest du in deinem 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

Richte Google reCAPTCHA für die Kundenregistrierung im Webshop ein. Registriere deinen Webshop zunächst für die Verwendung von Google reCAPTCHA. Gib anschließend den Websiteschlüssel und den Geheimen Schlüssel für deinen Webshop ein.

Google reCAPTCHA einrichten:

Öffne das Menü System » Systemeinstellungen » Mandant » Mandant wählen » Webshop » Einstellungen.
Wähle Ja unter Google reCAPTCHA in Registrierung abfragen.
Gib den Google reCAPTCHA Websiteschlüssel ein.
Gib den Google reCAPTCHA Geheimer Schlüssel ein.
Speichere die Einstellungen.

Kategorie Kundenregistrierung anpassen

Füge 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 dir 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:

Öffne das Menü Artikel » Kategorien.
Öffne den Ordner des Designs, das du bearbeiten möchtest, z.B. Callisto Light 3.
Öffne die Kategorie Registrierung.
Wechsle in das Tab Beschreibung 1.
Füge die Template-Funktion {% GetCaptcha('normal') %} bzw. {% GetCaptcha('compact') %} oberhalb der Schaltfläche Registrierung abschließen ein.
Suche den Code plenty.AuthenticationService.registerCustomer();.
Ersetze den Code durch registration();.
Suche nach <script>.
Füge innerhalb des Script-Bereichs das folgende Code-Beispiel ein.
Speichere 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:

Öffne das Menü Artikel » Kategorien.
Öffne den Ordner des Designs, das du bearbeiten möchtest, z.B. Callisto Light 3.
Öffne die Kategorie Registrierung.
Wechsle in das Tab Beschreibung 1.
Füge die Template-Funktion {% GetCaptcha('invisible') %} oberhalb der Schaltfläche Registrierung abschließen ein.
Suche den Code plenty.AuthenticationService.registerCustomer();.
Ersetze den Code durch grecaptcha.execute();.
Suche nach <script>.
Füge innerhalb des Script-Bereichs das folgende Code-Beispiel ein.
Speichere 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

Du kannst Google reCAPTCHA auch für Gastbestellungen im Webshop einrichten.

CheckoutCustomerInvoiceAddress anpassen

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

CheckoutCustomerInvoiceAddress für normales oder kompaktes Google reCAPTCHA anpassen:

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

CheckoutCustomerInvoiceAddress für unsichtbares Google reCAPTCHA anpassen:

Öffne das Menü CMS » Webdesign » Layout » Checkout » CheckoutCustomerInvoiceAddress.
Suche nach </form>.
Füge die Template-Funktion {% GetCaptcha('invisible') %} oberhalb des </form>-Tags ein.
Speichere die Einstellungen.

Kategorie Anschrift anpassen

Passe anschließend die Kategorie Anschrift an.

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

Öffne das Menü Artikel » Kategorien.
Öffne den Ordner des Designs, das du bearbeiten möchtest, z.B. Callisto Light 3.
Öffne die Kategorie Anschrift.
Wechsle in das Tab Beschreibung 1.
Suche den Code plenty.CheckoutService.registerGuest().done(function().
Ersetze den 4-zeiligen Code-Block durch das nachfolgende Code-Beispiel.
Speichere 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:

Öffne das Menü Artikel » Kategorien.
Öffne den Ordner des Designs, das du bearbeiten möchtest, z.B. Callisto Light 3.
Öffne die Kategorie Anschrift.
Wechsle in das Tab Beschreibung 1.
Suche den Code plenty.CheckoutService.registerGuest().done(function().
Ersetze den Code durch grecaptcha.execute();.
Suche nach <script>.
Füge innerhalb des Script-Bereichs das folgende Code-Beispiel ein.
Speichere 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

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

Kaufabwicklung: Design bearbeiten

Dieser Bereich ist bereits vorkonfiguriert. Du hast jedoch vielfältige Änderungsmöglichkeiten.

Folgende Bereiche kannst du im Menü Kaufabwicklung anpassen:

Kundenregistrierung
Hier kannst du 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 kannst du 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. Du wählst, 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 kannst du außerdem festlegen, wo z.B. die Felder Straße und Hausnummer dargestellt werden. Du kannst z.B. für das englischsprachige Layout definieren, dass das Feld Hausnummer vor der Straße angezeigt wird. Trage dazu an der entsprechenden Stelle im CSS statt float: left; einfach float: right; ein. Trage auch in das Feld selbst House number + Street ein, damit der Kunde weiß, welches Feld für welche Informationen gedacht ist. Beachte 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 du Packstationen als Lieferadresse erlaubst und der Kunde eine Versandart gewählt hat, bei der eine Packstation ein mögliches Lieferziel ist. Beachte weiter unten die Hinweise zum Adresszusatz.
DHL-Postfinder
In diesem Untermenü konfigurierst du die Einstellungen zum DHL-Postfinder.
Zahlungsart
Der Kunde hat bereits im Warenkorb die Möglichkeit, eine Zahlungsart zu wählen. Stelle hier ein, dass diese Zahlungsart nicht noch einmal angezeigt werden soll. Passe dann jedoch die Nummerierung der nachfolgenden Überschriften an. Wenn du hier die Option Nicht anzeigen wählst und der Kunde die vorhergehenden Angaben so stark ändert, dass die vom Kunden im Warenkorb gewählte Zahlungsart nicht mehr möglich ist, wird deine 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 du hier einstellen kannst, dass die Versandart nicht noch einmal angezeigt werden soll. Du solltest dann jedoch unbedingt die Nummerierung der nachfolgenden Überschriften anpassen. Wenn du hier die Option Nicht anzeigen wählst und der Kunde die Angaben so stark ändert, dass die im Warenkorb gewählte Versandart nicht mehr möglich ist, wird deine 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 deinem System angelegt. Der Bereich Bestellübersicht enthält die Option Position, anhand derer du die Position in der Übersicht bestimmen kannst.

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 deine Kunden diesbezüglich zu informieren, kannst du in den genannten Bereichen z.B. einen Hinweis hinterlegen oder einblenden. Oder du blendest das Feld fallabhängig einfach aus, z.B. mit einem JavaScript.

Tipp: Artikeldetails

Im Bereich Artikel stellst du 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. Du kannst die Artikeldetails nicht nur genau bezeichnen, sondern auch einstellen, welches Detail angezeigt werden soll und welches nicht (Bild 41 Pos. 10).

Schaltfläche: Zahlungspflichtig bestellen

Am 01.08.2012 trat eine Gesetzesänderung zur Verbesserung des Verbraucherschutzes vor Kostenfallen im Internet in Kraft. Danach muss der Text der Schaltfläche Kaufen 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 die Schaltfläche place_order entsprechend angepasst. Nimm Änderungen des Textes mit Vorsicht vor und frage ggf. deinen Rechtsberater.

Beispiel: Menüeinstellungen und Ansicht im Webshop

Wir beschreiben nun die Vorgehensweise anhand des Untermenüs Bestellübersicht. Du erfährs, wie du die Elemente dieses Bereichs verändern oder ggf. entfernen kannst.

Die Elemente, die nachfolgend beschrieben werden, sind in Bild 41 nummeriert. In Bild 42 siehst du diese Elemente in der Bestellübersicht des Webshops. Anhand der Nummerierung findest du 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 findest du auch in Bild 42. So kannst du die Darstellung im Webshop mit den Angaben im Backend vergleichen. Lediglich die Nummern 9 und 12 findest du 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 zur Schaltfläche Kaufen geben. Dies wird insbesondere auch in der sogenannten Schaltflächen-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 Schaltflächen-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 Schaltflächen-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 Schaltflächen-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 Schaltfläche	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üge diese Template-Variable anstelle einer URL in einen Link ein.

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

Das Design der Registrierungsseite kannst du im Untermenü Kundenregistrierung unter CMS » Webdesign » Bestellvorgang » Kaufabwicklung konfigurieren.

Tipp: Template-Funktion nutzen

Alternativ kannst du auch die Template-Funktion {% Link_CustomerRegistration() %} in das Template einfügen und die Kundenregistrierung wird darüber aufgerufen. Du findest 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

Du kannst 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) öffnest du die Bilder-Galerie. Hier wählst du die Bilder, die du in dem Bereich hinterlegen möchtest.

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

Template-Variablen und -Funktionen

Eine Übersicht aller in diesem Bereich verwendbaren Template-Variablen und -Funktionen öffnest du, indem du auf das Symbol klickst (Bild 44 , grüner Pfeil). Wenn du eine Template-Variable oder -Funktion in einen Hinweistext oder in das CSS einfügst, 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. Du kannst somit diese Template-Variablen nutzen, um für die jeweilige Sprache die Anzeige der Preise, Versandkosten etc. anzupassen. So kannst du 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 findest du 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 findest du ein Design-Beispiel für die Kaufabwicklung deines 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. Passe 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. Passe dazu die Textzeile Titel wie gewünscht an (siehe auch Bild 45).

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

Kopiere den folgenden Code
Öffne das Menü CMS » Webdesign.
Öffne das Untermenü Layout » CSS » CSSOrder.
Füge den Code anschließend an den bestehenden Code ein.
Speichere 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 dir eine komfortable Suchhilfe zur Verfügung. Mit diesem Feature werden dir im Mein Konto-Bereich bzw. der Kaufabwicklung anhand der Postleitzahl die jeweils in der Nähe liegenden Postfilialen und Packstationen angezeigt. Du kannst 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:

Öffne das Menü CMS » Webdesign » Layout » CSS » CSSOrder.
Füge den CSS-Code am Ende des Bearbeitungsfensters im Tab CSSOrder ein.
Speichere 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:

Öffne das Menü CMS » Webdesign » Layout » CSS » CSSMyAccount.
Suche die Zeile (Suchfunktion des Browsers): "z-index: 400010;".
Wichtig: Wähle dazu in der Toolbar oben rechts die Editor-Einstellung Textfeld.
Passe die Zeile wie folgt an "z-index: 40010;".
Speichere das CSS.

Texte

Für die Anzeige im Webshop und im Mein Konto-Bereich nimmst du 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:

Öffne das Menü CMS » Webdesign » Bestellvorgang » Kaufabwicklung » Untermenü: Lieferanschrift.
Passe folgende Texte an:
Postnummer: Trage Postnummer ein.
Packstation/Postfiliale suchen: Trage Packstation oder Postfiliale suchen ein.
Speichere die Einstellungen.
Öffne das Menü CMS » Webdesign » Mein Konto » Untermenü: Lieferanschrift ändern.
Passe folgende Texte an:
Adresszusatz: Trage Adresszusatz ein.
Postnummer: Trage Postnummer ein.
Packstation/Postfiliale suchen: Trage Packstation oder Postfiliale suchen ein.
Speichere die Einstellungen.

Fehlermeldungen

Passe die Fehlermeldungen in den Sprachpaketen an.

DE CMS Bestell Kaufab DHL Postfinder 03 SI

Bild 48. Fehlermeldungen anpassen

Fehlermeldungen konfigurieren:

Öffne das Menü System » Systemeinstellungen » Mandant » Global » Sprachpakete.
Wähle oben die Sprache (Standard: de) und den Bereich Fehlermeldungen.
Klicke auf die Lupe.
→ Die Fehlermeldungen werden angezeigt.
Passe die Fehlermeldungen Nr. 89 und Nr. 93 an: Ändere die Bezeichnung PostIdent Nummer in: Postnummer.
Speichere 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:

Öffne das Menü System » Systemeinstellungen » Mandant » Mandant wählen » Bestellvorgang » DHL-Packstation.
Wähle für Packstationen in Lieferadressen erlauben die Einstellung Ja.
Speichere 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 deiner Nähe (Bild 51, oben) passt tu 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. Du hast 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 kannst du im Tab Bestellbestätigung individuell anpassen:

Tracking

Das Untermenü Tracking verfügt über die Felder Head und Body. Die Informationen, die du hier einträgst, 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 findest du 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. Du kannst 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 kannst du 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 findest du 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 » Systemeinstellungen » Aufträge » Zahlung » Zahlungsarten keine Schnittstelle zur Santander Consumer Bank eingerichtet wird, musst du hier deine Händlernummer eintragen. Bei Linkinhalt trägst du ein, was dann als Linktext in der Bestellbestätigung angezeigt werden soll und bei Fehlertext hinterlegst du eine Nachricht, die dem Kunden im Fehlerfall angezeigt werden soll bzw. wenn die Zahlungsart nicht nutzbar ist.
Beachte 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 öffnest du, wenn du auf Template-Variablen und -Funktionen klickst. Kopiere 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. Du kannst somit diese Template-Variablen nutzen, um für Sprachen die Anzeige der Preise, Versandkosten etc. anzupassen. So setzt du für das deutsche Layout die Kommaseparierung und für das englische Layout die Punktseparierung bei Geldbeträgen um.
Wenn du Daten übertragen möchtest, verwende 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öchtest du 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 erhältst du 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 dir individuelle Möglichkeiten, das Frontend zu gestalten. Übersichtliche Untermenüs ermöglichen eine sehr genaue Konfiguration.

Grundeinstellungen

Das Menü System » Systemeinstellungen » Mandant » Mandant wählen » Mein Konto » Einstellungen enthält wichtige Grundeinstellungen für den Mein Konto-Bereich deines Webshops. So kannst du hier z.B. einige fakultative Kontobereiche aktivieren bzw. deaktivieren.

Mein Konto: Design bearbeiten

Dieser Bereich ist bereits vorkonfiguriert. Du hast jedoch vielfältige Änderungsmöglichkeiten.

CSS-Anpassung

Du kannst das CSS anpassen. In plentymarkets sind jedoch auch vorkonfigurierte CSS-Regeln hinterlegt. Du findest 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 kannst du 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 dir 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 du in die Textfelder einträgst, wird deinen 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 die Schaltfläche 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 » Systemeinstellungen » 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 » Systemeinstellungen » 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. Schaltfläche Merkliste Wenn die Funktion Merkliste nicht aktiviert wird, sollte auch die Schaltfläche Merkliste 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 » Systemeinstellungen » 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. Schaltfläche Wunschzettel Wenn die Funktion Wunschzettel nicht aktiviert wird, sollte auch die Schaltfläche Wunschzettel 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 » Systemeinstellungen » 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 du diese Funktionen anpassen oder erweitern möchtest, beachte die Hinweise auf der Handbuchseite jQuery.

5.5.12. Buttons

CMS » Webdesign » Buttons

Allgemeines zu Buttons

Du hast 3 Möglichkeiten, deine Webshop-Buttons zu gestalten. Du kannst 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 Du kannst einen eigenen Text formulieren. Eine weitere Option ist ein Eigener Button, bei der du einen eigenen Button hochlädst. Schließlich kannst du die Option HTML-Button verwenden. Bei Wahl dieser Option gestaltest du 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ü nimsmt du die grundlegenden Einstellungen eines Buttons vor, wenn du mit dem Button-Editor arbeitest. Du konfigurierst die Eigenschaften des Textes und des Hintergrundes.

Bild 52. Konfiguration des Buttons In den Warenkorb

Buttons konfigurieren:

Öffne das Menü CMS » Webdesign » Buttons » Tab: Einstellungen.
Klicke auf das Plus vor dem Button, den du konfigurieren möchtest.
Nimm die Einstellungen im Tab Konfiguration gemäß Tabelle 43 vor.
Speichere 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 deine hochgeladenen eigenen Button-Hintergründe angezeigt.
Reset	Setzt alle Einstellungen auf die Standardeinstellungen zurück.

Eine Schriftfarbe einstellen:

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

Button-Texte und rechtliche Aspekte

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

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

Template-Funktionen und -Variablen

In jedem plentmarkets-System findest du 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) findest du in den Templates unter CMS » Webdesign. Allgemeine Beispiele und Beschreibungen zu Template-Funktionen und Template-Variablen findest du 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 lädst duselbst 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:

Erstelle einen Button und speicherst du die Datei auf der Festplatte deines Rechners.
Öffne das Menü CMS » Webdesign » Buttons » Tab: Einstellungen.
Klicke auf das Untermenü des Buttons.
Öffne das Tab Eigener Button.
Klicke auf Durchsuchen….
Wähle die gespeicherte Datei des Buttons auf deiner Festplatte.
Klicke auf Öffnen.
Klicke auf Speichern, um den Button hochzuladen.

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

Gruppenfunktionen

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

Öffne das Menü CMS » Webdesign » Buttons » Tab: Einstellungen » Gruppenfunktionen.
Wähle die Einstellungen gemäß Tabelle 43.
Speichere die Einstellungen.

Bild 53. Gruppenfunktionen

Buttons mit eigenem Hintergrund

Im Tab Eigener Hintergrund lädst dueigene Hintergrundgrafiken für Buttons hoch. Diese werden dann unter Hintergrund-Liste angezeigt.

Anschließend wählst du 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 du mit dem Mauszeiger auf den Button zeigst. 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 lädst duden Hintergrund wie nachfolgend beschrieben hoch.

Hintergrundgrafik hochladen:

Erstelle eine Hintergrundgrafik speicherst du die Grafik auf der Festplatte deines Rechners.
Öffne das Menü CMS » Webdesign » Buttons » Tab: Eigener Hintergrund.
Klicke auf Durchsuchen….
Wähle die gespeicherte Datei der Hintergrundgrafik auf deiner Festplatte.
Klicke auf Öffnen.
Klicke auf Speichern, um den Hintergrund hochzuladen.
→ Der Button-Hintergrund wird im Bereich uploaded als Vorschau angezeigt.

Nachdem du einen Hintergrund hochgeladen hast, musst du den Hintergrund im Button einstellen. Gehe dazu wie unten beschrieben vor.

Buttons mit hochgeladener Hintergrundgrafik konfigurieren:

Öffne das Menü CMS » Webdesign » Buttons.
Klicke auf das Untermenü des Buttons.
Wähle im Tab Konfiguration im Bereich Button-Hintergrund unter uploaded den Hintergrund aus.
Nimm die weiteren Einstellungen gemäß Tabelle 43 vor.
Speichere die Einstellungen.

Anpassung an die Schaltflächenlösung

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

Schaltflächenlösung

Bei der sogenannten Schaltflächenlö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, 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?

Du musst deinen 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?

Du musst deinen 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 musst du 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 deines Webshops unterscheiden bzw. abheben.

Weitere Informationen findest du u.a. beim Händlerbund.

Anpassung bestehender Systeme

In diesem Abschnitt wird beschrieben, wie du das plentymarkets-Standard-Template an die neuen Gegebenheiten anpasst. 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). Die Schaltfläche ist weiterhin gesondert farblich hervorgehoben.

Feld: Text nach Summen

Im Feld Text nach Summen kannst du 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 solltest du dort den nachfolgend gezeigten Hinweis hinterlegen. Da diese Zahlungsart mit Zusatzkosten verbunden ist, ist ein solcher Hinweis bindend. Hier die IF-/ELSE-Abfrage, die dfu ggf. noch anpassen musst:

{% 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 dir, 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:

Öffne das Menü CMS » Webdesign » Webdesign bearbeiten » Bestellvorgang » Kaufabwicklung » Untermenü: Bestellübersicht.
Bringe 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. Du kannst 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.)
Klicke anschließend in das CSS-Feld der Bestellübersicht und füge folgenden CSS-Code am Ende des bereits bestehenden CSS-Codes hinzu.
Speichere die Einstellungen.

CSS-Anpassungen nötig?

Abhängig von deinen individuellen Einstellungen sowie deinem 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 erhältst du zunächst einige grundlegende Informationen zu CSS. Du erfährst, was CSS bedeutet und wie du damit das Design deines Webshops gestaltest. Weiterhin erfährst du, 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 du mit HTML den reinen Inhalt gestaltest, bietet dir 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 findest du 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 lädst du alle Bilder, die in deinem Webshop enthalten sein sollen. Diese können dort in Ordnern gespeichert werden. Neben dem Ordner Basis (voreingestellt) kansnt du beliebig viele weitere Ordner anlegen, um deine 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 du in der Bilder-Galerie Bilder hochlädst, bearbeitest und wieder löschen kansnt, findest du im Folgenden erklärt.

Bild 58. Menü Bilder-Galerie

Ein Bild hochladen:

Öffne das Menü CMS » Bilder-Galerie.
Klicke auf den blauen Ordner, in den du das Bild hochladen möchtest, oder lege über die Schaltfläche Neuer Ordner einen neuen Ordner an.
Klicke auf die Schaltfläche Dateien hochladen und wähle die Dateien vom Speicherort der Bilder, z.B. von der Festplatte deines Rechners.
Wähle die gewünschten Bilder aus und klicke auf Öffnen. Alternativ kannst die Bilder auch per Drag- & Drop-Funktion in den Ordner ziehen.
→ Die Bilder werden hochgeladen.

Bilder bearbeiten:

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

Bild 59. Bilder bearbeiten

6.3. Ordner verwalten

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

Neuen Ordner anlegen:

Öffne das Menü CMS » Bilder-Galerie.
Klicke links unten auf Neuer Ordner.
→ Ein Fenster wird geöffnet.
Wenn der neue Ordner ein Unterordner eines bestehenden Ordners sein soll, wähle den bestehenden Ordner aus. Wenn du einen neuen Hauptordner erstellen möchtest, trage den Namen des neuen Ordners ein, ohne vorher einen Ordner anzuklicken.
Trage in das Textfeld einen Namen für den neuen Ordner ein und klicke 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, aktualisiere die Bilder-Galerie (Reload der Seite).

Ordner synchronisieren:

Öffne das Menü CMS » Bilder-Galerie.
Wähle den betreffenden Ordner aus der Ordnerübersicht aus.
Klicke auf die Schaltfläche Ordner synchronisieren und aktualisiere die Ansicht (Reload).

Diese Option dient zur Synchronisation von Bildern, die per FTP-Übertragung in bereits bestehende Ordner geladen wurden. Um diese Ordner in deiner Bilder-Galerie zur Verfügung zu haben, musst du 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:

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

Bild 60. Ordner löschen

7. Best Practice

7.1. Inhalt dieses Kapitels

In diesem Kapitel findest du Beschreibungen wichtiger Prozesse des Menüs CMS. Du erfährst, worauf du bei der Konfiguration dieses Bereichs achten musst 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 deines Webshops und den Tools, die du einsetzt.

7.2. SSL-Verschlüsselung

CMS » Layout

7.2.1. Entscheidung für SSL-Verschlüsselung

Wenn du deine Website im Interesse einer sicheren Verbindung auf eine SSL-Verschlüsselung umstellst, ist es wichtig, die folgenden Punkte zu beachten und vollständig umzusetzen. Nur so erreichst du eine einheitliche Auslieferung deiner Website und vermeidest Irritationen bei den Besucher*innen deiner Website oder deines Online-Shops.

In diesem Kapitel erfährst du, wie du Inhalte wie Bilder, CSS- oder JavaScript-Dateien in deinem Design hinterlegst, ohne dass es zu Fehlern bei der Auslieferung der Website mit entsprechenden Fehlermeldungen kommt.

Design für SSL vorbereiten

Auch wenn du aktuell noch kein SSL-Zertifikat bestellt hast oder verwendest, 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 du bei der Konfiguration der Inhalte deines Webshops achten solltest, und enthalten entsprechende Tipps.

Bilder

Bilder sollten grundsätzlich mit einer relativen URL in das Design eingebunden werden. Vermeide 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 lässt du 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 du, wenn du eine alte URL - http://ihrshop.de/ - aufrufst, direkt auf die neue URL - https://ihrshop.de - weitergeleitet wirst.

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

Sitemap-Inhalt löschen

Damit die Sitemap-Datei deines 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 deiner Seiten kann dieser Prozess schnell oder eben etwas langsamer ablaufen.

7.2.4. Umleitung deaktivieren

Wenn du keine direkte Umleitung auf SSL wünschst, kannst du 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.

Entscheide zusammen mit deiner SEO-Agentur, ob du die Umleitung auf SSL aktivieren oder deaktivieren solltest.

SSL-Umleitung deaktivieren:

Öffne das Menü Start » Service-Center.
Wähle dort das gewünschte plentymarkets System.
Öffne das Tab Cache.
Scrolle zum Abschnitt Permanente SSL-Umleitung.
Wähle die Option immer inaktiv.
Klicke 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

Beachte 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 dir, Daten auf den plentymarkets Server hochzuladen, die du deinen Kunden zur Verfügung stellen möchtest. Dies können Bilder, PDF-Dokumente und andere Dateien sein, die online für alle Besucher verfügbar gemacht werden sollen. Verwende dieses Tool, wenn du Bilder für dein Design auf Datei-Ebene verwalten möchtest. Lege 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. Gehe dazu wie unten beschrieben vor.

Neuen Ordner erstellen:

Wähle den gewünschten Zielordner bzw. die unterste Ebene (= /).
Klicke dann auf Neuer Ordner.
Trage einen Namen für den neuen Ordner ein.
Speichere die Einstellungen.

8.3. Dateien hochladen

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

Datei(en) hochladen:

Wähle den Zielordner.
Klicke auf Dateien hochladen.
Wähle die Datei(en), die du hochladen möchtest.
Klicke auf Öffnen.

8.4. Alternativen zum Webspace-Upload

Einzelne Bilder kannst du auch über das Menü Bilder-Galerie verwalten. Als weitere Option kannst du 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 deine 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

Gehe wie unten beschrieben vor, um Links auf wichtige Social-Bookmarks-Seiten in deinen Webshop einzufügen.

Social Bookmarks in deinen Webshop integrieren:

Öffne das Menü CMS » Webdesign » Layout.
Öffne das gewünschte Template, z.B. ItemViewSingleItem.
Kopiere den unten aufgeführten HTML-Code.
Füge den HTML-Code in das Template ein.
Speichere 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öffentlichst du Text- und Bild-Beiträge in deinem Webshop. Blogs sind ein Mittel zur Kommunikation mit Kund*innen, um z.B über Neuerungen, Änderungen, Probleme oder andere interessante Themen zu informieren. Nimm die Einstellungen im Menü System » Systemeinstellungen » Mandant » Mandant wählen » Module » Blog vor, bevor du deinen ersten Blogbeitrag anlegst und verfasst.

10.2. Neuen Blogbeitrag anlegen

Im Tab Neuer Blog legst du einen neuen Blogbeitrag an. Nach dem Speichern findest du den Blogbeitrag im Tab Blog bearbeiten.

Bild 61. Tab: Neuer Blog

Neuen Blogbeitrag anlegen:

Öffne das Menü CMS » Blog.
Wechsle in das Tab Neuer Blog.
Nimm die Einstellungen vor. Beachte dazu die Erläuterungen in Tabelle 46.
Speichere 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 » Systemeinstellungen » 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 » Systemeinstellungen » 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 deine Blogs mit einem Vorschautext. Wenn du den Vorschautext nicht begrenzt, 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üge 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 dir 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 deines 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 du einen Blogbeitrag suchst, wird im folgenden erläutert. Die Suchfilter sind in Bild 62 zu sehen.

Blogbeitrag suchen:

Öffne das Menü CMS » Blog.
Nimm Filtereinstellungen vor. Beachte hierzu Tabelle 47.
Klicke 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 änderst du Blogbeiträge, indem du Inhalte und Elemente, z.B. Text, Bilder oder Dateien, hinzufügst oder entfernst.
Im Tab Blog bearbeitest du den Text und legst 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 lädst du 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:

Öffne das Menü CMS » Blog.
Öffne einen Blogbeitrag.
Öffne das Tab Upload.
Klicke auf Durchsuchen (browserabhängig).
→ Ein Fenster zur Dateiauswahl wird geöffnet.
Wähle die Dateien, die du hochladen möchtest, und klicke auf Öffnen.
Klicke im Tab Upload auf das Upload-Symbol.
→ Die Dateien werden hochgeladen. Warte 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, gehe wie nachfolgend beschrieben vor.

Datei in Blogbeitrag einfügen:

Öffne das Menü CMS » Blog.
Öffne einen Blogbeitrag.
Öffne das Tab Upload.
Kopiere die relative URL der Datei
Wechsle in das Tab Blog.
Füge ein img-Tag in den Blogbeitrag ein.
Füge die relative URL in das Tag ein.
Speichere die Einstellungen.

Du entscheidest, ob du die relative oder die absolute URL verwenden möchtest. Eine kurze Erläuterung zu den Typen findest du auf der Handbuchseite URL-Info.

10.6. Tab: Blog veröffentlichen

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

Blog veröffentlichen

Klicke auf das Zahnrad, um die Aktualisierung durchzuführen.

10.7. Blogbeiträge ins Design einbinden

Zum Anzeigen eines Blogbeitrags nutzt du die Funktion Link_Blog(). Anstelle der Funktion wird im Blog dann ein Link zu einem Blogbeitrag angezeigt. Das Design eines einzelnen Blogbeitrags bestimmst du z.B. im Template BlogDesignBlogEntry. Um eine Vorschauliste von Blogbeiträgen anzuzeigen, eignet sich das Template BlogDesignPreviewList. In diese Templates fügst du die Funktion Link_Blog() ein, damit Links zu Blogbeiträgen angezeigt werden. Die Funktion Link_Blog() ist eine globale Funktion. Diese 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 siehst du 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ügst du 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 lädst duDokumente hoch, um diese Dokumente z.B. als Anhang von E-Mail-Vorlagen automatisch an deine Kunden zu senden. Du kannst verschiedene Datenformate hochladen, z.B. Bilder oder PDF-Dateien.

11.1. Dokumente hochladen

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

Ein Dokument hochladen:

Öffne das Menü CMS » Dokumente.
Klicke auf Durchsuchen….
Wähle die Datei, die du hochladen möchtest.
Klicke auf Öffnen.
Wähle eine der Optionen unter Berechtigung.
Trage einen Ordnernamen ein (optional).
Speichere die Einstellungen.

Tipp

Mit der Berechtigung legst du 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

Du kannst hochgeladene Dokumente automatisch an E-Mail-Vorlagen anhängen. Pro E-Mail-Vorlage ist ein Dokument verknüpfbar. Gehe dazu wie unten beschrieben vor.

Dokument mit E-Mail-Vorlage verknüpfen:

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

12. Termine

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

12.1. Neuen Termin erstellen

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

Einen neuen Termin erstellen:

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

12.2. Termine bearbeiten

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

Einen Termin bearbeiten:

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

12.3. Termine suchen

Wenn du eine große Anzahl von Terminen gespeichert hast, erleichtert es dir die Terminsuche, einzelne Termine zu finden. Gehe wie unten beschrieben vor, um einen Termin zu finden.

Einen Termin suchen:

Öffne das Menü CMS » Termine.
Öffne das Tab Suche.
Wähle den Suchzeitraum, indem du ein Datum unter von sowie ein Datum unter bis wählst.
Klicke auf die Lupe.
→ Die Termine dieses Zeitraums werden angezeigt.

12.4. Termine löschen

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

Einen Termin löschen:

Öffne das Menü CMS » Termine.
Öffne das Tab Vorschau.
Klicke in der Spalte Aktionen des Termins, den du löschen möchtest, 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 findest du im Menü CMS » Webdesign » Layout » Misc. Du kannst 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 trägst du wiederkehrende Inhalte ein, die in das Design deines 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 hinterlegst du einen Wert für die Konstante. Gehe dazu wie unten beschrieben vor. Wenn du eine Konstante mit einer Artikel-Galerie verknüpfst, wird automatisch Code als Wert der Konstanten eingefügt. Trage deshalb für Artikel-Galerien keinen Wert ein.

Konstanten definieren:

Öffne das Menü CMS » Konstanten.
Trage die Inhalte in das Textfeld der gewünschten Konstante ein.
Speichere 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. Lege PHP-Skripte extern ab, z.B. auf einem FTP-Server. Hinterlege die Verlinkung zu diesem Skript als Wert der Konstanten, um das Skript so aufzurufen.

13.2. Konstanten in Design einfügen

Binde nun die Konstante in deinem Webshop ein. Gehe dazu wie unten beschrieben vor.

Konstante in Design einfügen:

Öffne das Menü CMS » Webdesign » Layout.
Öffne das gewünschte Template.
Füge die Konstante an der Position in das Template ein, an der die Inhalte angezeigt werden sollen.
Speichere die Einstellungen.

Analog können Konstanten auch in Kategorien eingebunden werden.

14. Suchen und Ersetzen

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

14.1. Suchen und Ersetzen

Gehe wie im Folgenden beschrieben vor, um Suchbegriffe zu ersetzen.

Suchen und Ersetzen:

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

15. Kunden-Feedback

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

15.1. Kunden-Feedback einrichten

Richte das Modul zunächst im Menü System » Systemeinstellungen » Mandant » Global » Feedback ein und aktiviere Bewertungen für die gewünschten Bereiche.

15.2. Kunden-Feedback bearbeiten

Bewertungen und Kommentare, die in deinem Webshop eingehen, werden im Menü CMS » Kunden-Feedback gelistet. Hier stellst du Bewertungen sichtbar oder unsichtbar und bearbeiten Kommentare, falls diese z.B. nicht deiner Netiquette entsprechen.

Bewertung bearbeiten:

Öffne das Menü CMS » Kunden-Feedback.
Klicke in die Zeile eines Feedbacks, um es zu bearbeiten.
Nimm die gewünschten Änderungen vor.
Speichere die Einstellungen.

Sichtbarkeit einstellen

Klicke 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 deinem Webshop anzuzeigen, findest du im Bereich CMS » Webdesign » Ordner: Layout » Ordner: Form die passenden Templates und Template-Variablen.

15.3.1. Google reCAPTCHA einrichten

Richte Google reCAPTCHA für das Webshop-Formular für die Bewertung von Artikeln ein. Registriere deinen Webshop zunächst für die Verwendung von Google reCAPTCHA. Gib anschließend den Websiteschlüssel und den Geheimen Schlüssel für deinen Webshop ein.

Google reCAPTCHA einrichten:

Öffne das Menü System » Systemeinstellungen » Mandant » Mandant wählen » Webshop » Einstellungen.
Gib den Google reCAPTCHA Websiteschlüssel ein.
Gib den Google reCAPTCHA Geheimer Schlüssel ein.
Speichere 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ügst du 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. Passe den Code nach deinen 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

Du hast auch die Möglichkeit, vorhandene Bewertungen als Liste im Webshop auszugeben. Konfiguriere diese Liste im Template MiscFeedbackList unter CMS » Webdesign » Ordner: Layout » Ordner: Misc. Der Code kann wie im folgenden Beispiel aussehen. Füge den Container {% Container_MiscFeedbacksList('item',$ID) %} dann an der Stelle in das Template ein, an der du die Liste anzeigen möchtest, 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 erfährst du, wie du neue Versionen der plentymarkets CMS library in dein plentymarkets CMS einbindest.

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 du im GitHub-Projektordner /dist findest. Dabei steht x.x.x für die Dateiversion. Welche Version du aktuell verwendest, prüfst du im Menü CMS » Webspace und dort im Ordner layout » Ihr Design » js » plenty. Gehe 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 du bereits ein Design verwendest, 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

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

Neue Version herunterladen:

Öffne das GitHub-Repository plentymarkets CMS library.
Öffne den Order dist.
Klicke auf die Datei plentymarketsCMStools-x.x.x.js.
→ Der Inhalt der Datei wird angezeigt.
Rechtsklicke auf Raw.
Wähle die Option Ziel speichern unter…
Speichere die Datei auf deinem Rechner.

Lade die Datei * plentymarketsCMStools-x.x.x.min.js analog herunter.

16.1.2. Neue Version hochladen

Gehe 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 deines plentymarkets Systems hochzuladen.

Neue Version hochladen:

Öffne das Menü CMS » Webspace.
Öffne den Ordner layout » Ihr Design » js » plenty.
→ Ordner klappen auf, indem du links in der Übersicht auf das kleine Plus klickst.
Klicke auf Dateien hochladen.
Wähle die Datei plentymarketsCMStools-x.x.x.js, die du im vorherigen Schritt heruntergeladen hast.
→ Die Datei wird hochgeladen und angezeigt.

Lade 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, musst du 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. Gehe 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:

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