
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
Einrichtung » 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.3. Formulare
Einrichtung » 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ü Einrichtung » 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.

Neues Formular anlegen:
-
Öffne das Menü Einrichtung » 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.
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. |
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ü Einrichtung » 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ü Einrichtung » 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ü Einrichtung » 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
Einrichtung » 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ü Einrichtung » 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.

Neuen RSS anlegen:
-
Öffne das Menü Einrichtung » CMS » RSS.
-
Klicke auf das Tab Neuer RSS-Feed.
-
Nimm die Einträge und Einstellungen gemäß Bild 2 vor.
-
Speichere () die Einstellungen.

Die folgende Tabelle erläutert die Einstellungen im Menü Einrichtung » CMS » RSS:
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.

4.5. Artikel-Galerie
Im Menü Einrichtung » 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ü Einrichtung » CMS » Artikel-Galerie.
-
Klicke auf das Tab Neue Artikel-Galerie.
-
Nimm die Einstellungen gemäß Tabelle 3 vor.
-
Speichere () die Einstellungen.
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ü Einrichtung » CMS » Artikel-Galerie.
-
Klicke auf das Tab Neue Flash-Galerie.
-
Nimm die Einstellungen gemäß Tabelle 4 vor.
-
Speichere () die Einstellungen.
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; |
Wert aus der Dropdown-Liste wählen. |
Textabstand zum Bild |
Abstand zwischen Artikelnamen und Artikelbild festlegen. |
Abstand zwischen Bildern |
Abstand zwischen den Artikelbildern festlegen. |
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.
Die folgende Tabelle erläutert die Elemente und Bereiche des Menüs CMS » Webdesign:
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. |
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. |
8 |
Templates bearbeiten |
Folgende Funktionen stehen in diesem Bereich für die Anzeige und Bearbeitung der Templates zur Verfügung: |
9 |
Editor-Einstellungen |
Folgende Einstellungen sind für den Syntax-Editor aktivierbar; Häkchen setzen = aktiv: |
10 |
Editor |
Folgende Optionen sind verfügbar: |
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.

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.

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.

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.

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:

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.

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 $HtmlBodyOverlays |
Die folgende Tabelle erläutert die Funktionen der Code-Elemente dieses Templates:
Element | Erläuterung |
---|---|
$HtmlStartTag |
Die Template-Variable enthält das öffnende HTML-Tag sowie ggf. die Angabe des DOCTYPE. |
$HtmlMetaTitle |
Der Seitentitel wird durch diese Template-Variable ausgegeben. Er wird in der Titelleiste bzw. als Tabtitel der meisten Browser angezeigt. Der Seitentitel ist sehr wichtig für Suchfunktionen und das Ranking in Suchmaschinen und sollte daher kurz und treffend gewählt werden. |
$HtmlHeadLinkCSSTags |
Einbindung des CSS. Hier werden die jeweils zutreffenden CSS-Templates eingebunden, bei der Darstellung von Kategorien oder Artikeln z.B. CSSBase und CSSContent, beim Bestellvorgang hingegen CSSBase und CSSOrder. |
$HtmlHeadJavaScriptTags |
Einbindung der in plentymarkets standardmäßig vorhandenen JavaScript-Frameworks: jQuery, jQuery UI, jQuery UI Widget, jQuery UI Mouse, jquery.event.drag, jQuery Tools. |
$HtmlHeadMetaTags |
Durch diese Template-Variable werden Meta-Tags, z.B. Keywords, umgesetzt, die wichtig für die Indizierung der Seite durch Suchmaschinen sind. |
$PageDesignContentMainFrame |
Diese Template-Variable fügt den Inhalt des Templates PageDesignContentMainFrame ein. Dieses Template enthält wiederum die Template-Variable $MainFrame. 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
<div class="page"> <!-- Hauptdarstellungsbereich --> <!-- hier kann der Footer ergänzt werden --> |
Es würde an dieser Stelle zu weit führen, die Elemente vollständig zu beschreiben. Wir beschränken uns darauf, die wichtigsten Elemente zu erläutern.
Die folgende Tabelle erläutert wichtige Inhalte des obigen Beispiels PageDesignContentMainFrame.
Element | Erläuterung |
---|---|
$MainFrame |
Bildet den jeweiligen dynamischen Hauptinhalt einer Seite, z.B. eine Artikeldetailansicht, ab. Weitere Details siehe nächstes Unterkapitel. |
<!-- txt --> |
Kommentare, die zur Orientierung im Code eingefügt werden, jedoch nicht angezeigt werden. Diese werden z.B. für Listenansichten zur Segmentierung der Iterationsschritte verwendet. |
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.

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.
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ü Einrichtung » Einstellungen » Editoren. |
Die Editoren kommen in den folgenden Bereichen zum Einsatz:
-
Artikelbeschreibung
-
Listingbeschreibung
-
Kategorien
-
Newsletter
Editor-Verfügbarkeit
Wenn du im Menü Einrichtung » 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.

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.

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.

Die folgende Tabelle erläutert die Funktionen des Editors im Detail.
Pos. | Einstellung | Erläuterung |
---|---|---|
1 |
Editor |
Den gewünschten Editor aus der Dropdown-Liste wählen: |
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. |
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. |
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: |
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: |
10 |
Tabelle |
Fügt eine Tabelle ein. Die Anzahl der Zeilen und Spalten ist wählbar, sowie einige weitere Formatierungen. |
11 |
Bild |
Über dieses Icon werden Bilder wie unten beschrieben konfiguriert und in die Seite eingefügt. .Bild-Eigenschaften konfigurieren image::omni-channel/online-shop/webshop-einrichten/_cms/webdesign/werkzeuge/assets/DE-CMS-Webdesign-Werkzeuge-Editor-06-SI.png[] Konfiguration: |
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:
Funktion | Aktion |
---|---|
Kopieren |
Strg (cmd) + C |
Ausschneiden |
Strg (cmd) + X |
Einfügen |
Strg (cmd) + V |
Text unformatiert einfügen
Wenn du Texte unformatiert einfügen möchtest, verwende die folgende Tastenkombination beim Einfügen von Texten aus der Zwischenablage:
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:

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ü Einrichtung » 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.

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

Die folgende Tabelle erläutert die Suchfunktionen des Syntax-Editors:
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.

Die folgende Tabelle enthält eine Übersicht der Funktionen, wobei sich die drei unteren Optionen auf die Icons unten rechts im Suchfenster beziehen:
Funktion | Aktion |
---|---|
Ersetzen-Funktion aufrufen |
Strg (cmd) + F |
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.
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.
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.
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. |
Die folgende Tabelle zeigt einige praktische Beispiele mit dem Emmet-Plugin im Syntax-Editor:
Eingabe | Ergebnis |
---|---|
div>ul>li |
<div> |
div>ul>li>*5 |
<div> |
div>ul#meineListe>li.meineCSSKlasse$*5 |
<div> |
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.

Startseite zur Bearbeitung öffnen:
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.

Die folgende Tabelle erläutert die Schaltflächen des Inline-Editors im Webshop:
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. |
Seite aktualisieren |
Aktualisiert die Seite und zeigt z.B. Änderungen an, die im Backend vorgenommen wurden. |
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.

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.

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

Bearbeitung im Backend aus dem Webshop öffnen:
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.

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ü Einrichtung » 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. |

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:
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. |
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. |
Impressum |
Eine Kategorieseite für das Impressum wählen. |
Bankdaten |
Eine Kategorieseite für Bankdaten wählen. |
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.

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

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.

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ü Einrichtung » 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ü Einrichtung » 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ü Einrichtung » 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 $HtmlBodyOverlays |
Die folgende Tabelle erläutert die Funktionen der Code-Elemente des Templates PageDesignContent:
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: <h1>$Name[1]</h1> <span class="price">$Price$CurrencySign</span> |
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
Einrichtung » 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.
Lege zunächst wie im Folgenden beschrieben ein Freitextfeld an.

Freitextfeld anlegen:
-
Öffne das Menü Einrichtung » 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. |
Nun konfigurierst du die Maßangaben des Artikels. Das sind die Optionen, die für die Maßeingabe benötigt werden.

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

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

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

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:
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 |
Gehe wie unten beschrieben vor, um die Template-Variable $Container_MiscCustomerRegistrationForm an der gewünschten Stelle einer Kategorieseite oder eines Layout-Templates einzufügen.

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ü Einrichtung » 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 Einrichtung » 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ü Einrichtung » 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
|
Bild 36 zeigt Standard-Einstellungen dieses Untermenüs:
In der Tabelle findest du weitere Infos zu den 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. |
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: |
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. |
7 |
Text nach |
Hier bei Bedarf einen weiteren Hinweistext eintragen, der unten im Titelfeld angezeigt wird (Bild 36 , Pos. 7). |
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.

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.
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 |
$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.
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:
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.
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).

Die folgende Tabelle zeigt die zehn konfigurierbaren Bestellschritte des Individuellen Bestellvorgangs und verdeutlicht deren Funktion im Frontend, d.h. im Online-Shop.
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. |
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).

Bestellschritte der Kategorie Kasse | Inhalt |
---|---|
1. Bestelldetails |
Eingabefelder: * Ihr Zeichen * Hinweise & Sonderwünsche * Gutschein-Codes |
2. Anschrift |
Optionale Felder: * Fax * Mobile * Postnummer * USt-IdNr. |
3. Zahlung & Versand |
|
4. Übersicht & Vertragsabschluss |
|
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:
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
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.
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.
Kategorie | Container |
---|---|
Warenkorb |
Container_CheckoutBasketItemsList() |
Bestelldetails |
Container_CheckoutCoupon() |
Anschrift |
Container_CheckoutCustomerInvoiceAddress() |
Zahlung & Versand |
Container_CheckoutMethodsOfPaymentList() |
Bestellübersicht & Kaufabschluss |
Container_CheckoutMethodsOfPaymentList() |
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).
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. |
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 XXXX XXXX XXXX $_kto</span>
{% elseif $_bankDetails->BankDetailsAccountNumber %}
{% $_kto = substr($_bankDetails->BankDetailsAccountNumber, -4) %}
<span data-plenty-is="account-number-anonymized">XXX XXX $_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:
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ü Einrichtung » 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.
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
|
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.
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.
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 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.
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.
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. |
10 |
Artikel |
Überschrift der Artikelübersicht in der Bestellübersicht. |
10 |
Artikelüberschriften |
Überschriften der Bereiche in der Artikelübersicht. |
10 |
Artikeldetails |
Die Artikeldetails, die in der Bestellübersicht angezeigt werden sollen, mit einem Häkchen markieren. |
11 |
Text nach Summen |
Der eingetragene Text erscheint unmittelbar unterhalb der Gesamtsumme des Auftrags. |
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. |
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. |
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. |

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

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

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

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.
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.
Für die Ansicht im Mein Konto-Bereich muss der z*-index* im CSS angepasst werden.

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.
Für die Anzeige im Webshop und im Mein Konto-Bereich nimmst du folgende Anpassungen der Texte vor.

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.
Passe die Fehlermeldungen in den Sprachpaketen an.

Fehlermeldungen konfigurieren:
-
Öffne das Menü Einrichtung » 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.
Die Funktion muss nun noch im Menü aktiviert werden.

DHL-Packstation aktivieren:
-
Öffne das Menü Einrichtung » 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:

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

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ü Einrichtung » 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. |
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.
Die folgende Tabelle erläutert die Template-Variablen für die 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 |
$GtcTransAsync |
Auftrags- und Artikelparameter, Asynchroner Code |
$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ü Einrichtung » 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.
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. |
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. |
Position (Untermenü Artikel) |
Das Untermenü Artikel unten oder oben positionieren. |
Darstellung |
Direkte Anzeige = Der gesamte Inhalt eines Menüpunkts wird im Webshop angezeigt. Das Menü ist ausgeklappt. |
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.
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. |
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. |
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
|
Abonnementhistorie |
Nur sichtbar, wenn diese Funktion aktiviert ist. |
Merkliste |
Die Funktion Merkliste wird im Menü Einrichtung » 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. |
Wunschzettel |
Die Funktion Wunschzettel wird im Menü Einrichtung » 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. |
Tickets |
Dieser Menüpunkt wird nur angezeigt, wenn das Ticketsystem als Erweiterung gebucht wurde. Das plentymarkets-Modul "Ticketsystem STARTER" ist kostenlos buchbar. |
Gutscheine |
Die Funktion Gutschein wird im Menü Einrichtung » 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.
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:
Einstellung | Erläuterung |
---|---|
Button-Layout |
Zwischen folgenden Optionen wählen: |
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:
Button |
Template-Funktion |
Bereich Template-Funktionen |
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 |
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.

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.

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

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

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.

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.

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.

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.

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: Empfehlung: |
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: Empfehlung: |
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: Empfehlung: |
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ü plentymarkets Logo (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.
9. Social Bookmarks
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ü Einrichtung » 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.

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.
Einstellung | Erläuterung |
---|---|
Titel |
Einen Titel eintragen. Der Titel wird als Überschrift des Blogbeitrags angezeigt und für den Aufbau der URL verwendet. |
Mandant (Shop) |
Einen Mandanten wählen, um den Blogbeitrag in diesem Mandanten anzuzeigen. |
Sprache |
Eine Sprache für den Blogbeitrag wählen. |
Kategorie |
Eine Kategorie für den Blogbeitrag wählen. |
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. |
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. |

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

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.

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.

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.

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ü Einrichtung » 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ü Einrichtung » 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ü Einrichtung » 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.