Skip to main content

CMS

CMS

1. Inhalt dieses Kapitels

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

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

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

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

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

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

2. Webdesign in plentymarkets

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

Mit CSS steuern Sie übergreifende Formatierungen und können Anpassungen Ihrer Styles mit wenigen Mausklicks durchführen.

Weitere Details zum Thema erhalten Sie auf der Handbuchseite Webdesign.

3. Videotutorials

Erfahren Sie mehr zum Menü CMS im folgenden Videotutorial:

4. Einstellungen

System » CMS

4.1. Inhalt dieses Kapitels

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

4.2. Videotutorials

Erfahren Sie mehr zum neuen CMS im folgenden Videotutorial:

4.3. Formulare

System » CMS » Formulare

4.3.1. Allgemeine Informationen zu Formularen

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

4.3.2. Ein Formular anlegen

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

DE Einstellungen CMS Formulare 01
Bild 1. Neues Formular anlegen

Neues Formular anlegen:

  1. Öffnen Sie das Menü System » CMS » Formulare.

  2. Nehmen Sie die Einstellungen vor. Beachten Sie dazu Tabelle 1.

  3. Speichern Sie die Einstellungen.
    → Das neue Formular ist ggf. erst in der Übersicht FORMULARE sichtbar, wenn Sie das Menü neu geladen haben.

Tabelle 1. Neues Formular anlegen
Einstellung Erläuterung

ID

Die ID eines Formulars wird vom System vergeben und kann nicht geändert werden. Die ID wird benötigt, um ein Formular in den Webshop einzubinden.

Formularname

Einen Namen für das Formular eintragen.

E-Mail-Betreff

Einen E-Mail-Betreff eintragen. Der Text wird als Betreff in den E-Mails, die durch das Formular versendet werden, angezeigt. Bei Verwendung unterschiedlicher Formulare ist so leicht erkennbar, von welchem Formular eine E-Mail stammt.
*Wichtig*: Wenn das Formular in das Ticketsystem eingelesen werden soll, ist die Angabe des Betreffs Pflicht. Wenn kein Betreff vorhanden ist, wird die E-Mail-Adresse des Kunden nicht am Ticket hinterlegt und dann werden E-Mails u.U. per Ereignisaktion an Ihre eigene Adresse gesendet.

CC E-Mail-Adresse

Eine E-Mail-Adresse eintragen. Die Einträge des Formulars werden zusätzlich (=CC) an diese Adresse gesendet.

Tickettyp

Einen Typ wählen, wenn das Formular als Ticket in das System importiert werden soll.

Ticketstatus

Einen Status wählen, wenn das Formular als Ticket ins System importiert werden soll.

Feldname

Die Feldnamen für das Formular eintragen, z. B. Firma, Name, Vorname, E-Mail usw.

Typ

Den Datentyp für das Datenfeld wählen. Der Typ bestimmt einerseits, wie das Eingabefeld im Formular dargestellt wird, z.B. als einzeiliges Eingabefeld, mehrzeiliges Textfeld oder als Checkbox. Andererseits erkennt das System durch die Auswahl eines Typs, welche Informationen vom Kunden eingetragen wurden, z.B. E-Mail-Adresse, Vorname, Nachname, Telefon. Dies ist für die Zuordnung der Informationen wichtig.

Breite (Pixel)

Die Breite des Datenfeldes in Pixeln eintragen.

Pflichtfeld

Die Einstellung JA wählen, um ein Datenfeld als Pflichtfeld zu kennzeichnen. Pflichtfelder werden im Formular durch Fettschrift hervorgehoben.

E-Mail-Adresse in Formularen

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

4.3.3. Formular ändern

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

Formular ändern:

  1. Öffnen Sie das Menü System » CMS » Formulare.

  2. Wählen Sie das Formular, das Sie ändern möchten, aus der Übersicht FORMULARE.

  3. Nehmen Sie die gewünschten Änderungen gemäß Tabelle 1 vor.

  4. Speichern Sie die Einstellungen.

Nach Änderungen Kategorie speichern

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

4.3.4. Formular in eine Kategorie einbinden

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

ID des Formulars ermitteln

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

ID des Formulars ermitteln:

  1. Öffnen Sie das Menü System » CMS » Formulare.

  2. Wählen Sie das Formular, das Sie ändern möchten, aus der Übersicht FORMULARE.

  3. Die ID finden Sie in der Zeile ID.

Template-Variable und Code einbinden

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

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

Formular und Code einbinden:

  1. Öffnen Sie das Menü Artikel » Kategorien.

  2. Wählen Sie im Dropdown-Menü Sprache die gewünschte Sprache aus, z. B. Deutsch.

  3. Öffnen Sie nun die gewünschte Kategorie.

  4. Kopieren Sie den oben angegebenen Code und fügen Sie ihn an der gewünschten Stelle ein.

  5. Suchen Sie die Template-Variable {% Form(X) %} und ersetzen Sie X durch die ID des Formulars.

  6. Speichern Sie die Einstellungen.

4.3.5. Formulare in weiteren Sprachen anlegen und verknüpfen

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

Formular in weiterer Sprache anlegen:

  1. Öffnen Sie das Menü System » CMS » Formulare.

  2. Nehmen Sie die Einstellungen gemäß Tabelle 1 vor.
    → Tragen Sie die Feldnamen in der gewünschten Sprache ein, z. B. Englisch.
    → Tragen Sie in das Feld Formularname einen Namen ein, an dem Sie die Sprache des Formulars erkennen.

  3. Speichern Sie die Einstellungen.

Formular in weiterer Sprache einbinden:

  1. Öffnen Sie das Menü Artikel » Kategorien.

  2. Wählen Sie im Dropdown-Menü Sprache die gewünschte Sprache, z. B. Englisch.

  3. Öffnen Sie nun die gewünschte Kategorie.

  4. Kopieren Sie den Code und fügen Sie ihn an der gewünschten Stelle ein.
    → Übersetzen Sie den gezeigten Text in die gewünschte Sprache.

  5. Suchen Sie die Template-Variable {% Form(X) %} und ersetzen Sie X durch die ID des Formulars.

  6. Speichern Sie die Einstellungen.

4.4. RSS

System » CMS » RSS

4.4.1. RSS

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

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

4.4.2. Einen RSS-Feed anlegen

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

DE Einstellungen CMS RSS 01 SI
Bild 2. Neuen RSS-Feed anlegen

Neuen RSS anlegen:

  1. Öffnen Sie das Menü System » CMS » RSS.

  2. Klicken Sie auf das Tab Neuer RSS-Feed.

  3. Nehmen Sie die Einträge und Einstellungen gemäß Bild 2 vor.

  4. Speichern Sie die Einstellungen.

DE Einstellungen CMS RSS 02 SI
Bild 3. RSS-Feed bearbeiten

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

Tabelle 2. Optionen zu RSS-Feeds
Einstellung Erläuterung

Inhalt

Wählen, welche Artikel bzw. Kategorieseiten täglich als RSS angeboten werden sollen.

Mandant

Den entsprechenden Webshop bzw. Mandant (Shop) wählen.

Titel

Einen Titel angegeben, der später auch als Name des Lesezeichens im Browser verwendet wird.

Kurze Beschreibung

Eine kurze Beschreibung des Angebots oder der Seite im Allgemeinen eingeben.

Titel Präfix

Wird dem Artikelnamen bzw. dem Namen der Kategorieseite vorangestellt.

Anzahl

Die Anzahl der Artikel, Kategorieseiten oder Blog-Beiträge wählen, die im RSS bereitgestellt werden sollen. Möglich sind 5, 10, 15 oder 20.

Sprache

Die zutreffende Sprache wählen.

Absolute URL

Die absolute URL des RSS-Feeds. Die URL erscheint erst, nachdem ein neuer RSS-Feed gespeichert wurde.

Relative URL

Die relative URL des RSS-Feeds. Die URL erscheint erst, nachdem ein neuer RSS-Feed gespeichert wurde.

4.4.3. RSS-Feed in Webseite einbauen

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

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

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

RSS-Feed in die Website einbauen:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Öffnen Sie im linken Bereich unter Layout im Ordner PageDesign das Template PageDesignContent.

  3. Fügen Sie am Ende des Bearbeitungsfensters PageDesignContentMainFrame den nachfolgenden HTML-Code ein. Passen Sie dann Titel und URL des Codes entsprechend an.

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

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

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

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

RSS-Feed-Icon im Layout einfügen:

  1. Öffnen Sie das Menü CMS » Webspace » layout » Ihr aktives Layout » images.

  2. Klicken Sie auf den Button Dateien hochladen und wählen Sie den Speicherort des Icon.

  3. Wählen Sie die gewünschten Bilder der Icons und klicken Sie auf Öffnen. Alternativ können Sie die Bilder auch per Drag-and-Drop-Funktion in den Ordner einfügen.
    → Das Bild wird hochgeladen.

  4. Öffnen Sie das hochgeladene Bild.

  5. Notieren Sie sich die URL, z.B. /layout/testdesign/images/RSS-Icon.png.

  6. Öffnen Sie das Menü CMS » Webdesign.

  7. Wählen Sie im Dropdown-Menü Sprache die Sprache des Designs, das Sie bearbeiten möchten, z.B. Deutsch.

  8. Wählen Sie unter Layout und dort im Ordner PageDesign das Template PageDesignContent.
    → Das Template wird in der gewählten Sprache geöffnet.

  9. Fügen Sie den Link-Platzhalter für das Icon an der gewünschten Stelle im Layout ein (siehe Beispiel unten).

  10. Klicken Sie auf Speichern, um Ihre Einstellungen zu sichern.
    → Das Icon wird im deutschsprachigen Webshop angezeigt.

Beispiel:

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

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

DE Einstellungen CMS RSS 03 SI
Bild 4. RSS-Icon im Webshop

4.5. Artikel-Galerie

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

4.5.1. Artikel-Galerie erstellen

Keine Galerieansicht in gesperrten Webshops

In gesperrten Webshops werden Galerieansichten nicht geladen.

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

Neue Artikel-Galerie erstellen:

  1. Öffnen Sie das Menü System » CMS » Artikel-Galerie.

  2. Klicken Sie auf das Tab Neue Artikel-Galerie.

  3. Nehmen Sie die Einstellungen gemäß Tabelle 1 vor.

  4. Speichern Sie die Einstellungen.

Tabelle 3. Optionen im Tab Neue Artikel-Galerie
Einstellung Erläuterung

Auswahl

Wählen, welche Artikel in der Galerie angezeigt werden sollen.

Artikel-ID-Liste

Bei Wahl der Option Manuelle Auswahl die IDs der gewünschten Artikel durch Kommas getrennt ohne Leerzeichen eintragen.

Mandant

Den Webshop oder Mandanten wählen, in dem die Artikel-Galerie angezeigt werden soll.

Anzahl

Die Anzahl der Artikel wählen, die in der Artikel-Galerie angezeigt werden sollen.

Zeitliche Verzögerung

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

4.5.2. Flash-Galerie erstellen

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

Neue Flash-Galerie erstellen:

  1. Öffnen Sie das Menü System » CMS » Artikel-Galerie.

  2. Klicken Sie auf das Tab Neue Flash-Galerie.

  3. Nehmen Sie die Einstellungen gemäß Tabelle 2 vor.

  4. Speichern Sie die Einstellungen.

Tabelle 4. Optionen im Tab Neue Flash-Galerie

Einstellung

Erläuterung

Name

Name für die Flash-Galerie eintragen.

Datenquelle

Datenquelle aus dem Dropdown-Menü wählen. Hier stehen die angelegten Artikel-Galerien zur Verfügung. Diese Artikel-Galerien dienen als Basis für die Flash-Galerie.

Farbverlauf

Hexadezimalwerte für den Farbverlauf eintragen. Der Farbverlauf beginnt oben und verläuft nach unten.

Schriftfarbe

Hexadezimalwert für die Schriftfarbe eintragen.

Schriftgröße;
Schriftausrichtung;
Schriftschnitt

Wert aus dem Dropdown-Menü wählen.

Textabstand zum Bild

Abstand zwischen Artikelnamen und Artikelbild festlegen.

Abstand zwischen Bildern

Abstand zwischen den Artikelbildern festlegen.
Tipp: Wenn der Abstand unterschiedlich ausfällt, die Größen der Artikelbilder in den Artikeleinstellungen prüfen. Die Größe der Artikelbilder sollte möglichst identisch sein, da die Abstände sonst möglicherweise nicht symmetrisch sind.

Maximale Bildbreite

Maximale Bildbreite für die angezeigten Artikelbilder in Pixeln festlegen.

Maximale Bildhöhe

Maximale Bildhöhe für die angezeigten Artikelbilder in Pixeln festlegen.

Bildposition

Wert in Pixeln eintragen, der sich aus der maximalen Bildhöhe plus dem gewünschten Mindestabstand zwischen Bild und oberem Rand der Galerie errechnet.

Breite der Galerie

Breite der Galerie in Pixeln wählen.

Höhe der Galerie

Höhe der Galerie in Pixeln wählen.

Quelltextkonstante

Wählen, in welche CMS-Konstante im Menü CMS » Konstanten der Quelltext der Flash-Galerie eingefügt werden soll. Vor Wahl der CMS-Konstante prüfen, dass die CMS-Konstante unbelegt ist.

4.5.3. Artikel-Galerie in Webshop einbinden

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

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

  1. Öffnen Sie das Menü Artikel » Kategorien.

  2. Öffnen Sie die Kategorie Ihrer Startseite.

  3. Fügen Sie die CMS-Konstante an einer geeigneten Position in die Kategorie ein.

  4. Fügen Sie optional eine Überschrift vor der CMS-Konstante ein und formatieren Sie sie.

  5. Speichern Sie die Einstellungen.

5. Webdesign

CMS » Webdesign

5.1. Video-Tutorials

5.2. Benutzeroberfläche

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

5.2.1. Übersicht der Benutzeroberfläche

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

DE CMS Webdesign Benutzeroberflaeche 01

Bild 1: Menü *Webdesign*

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

Tabelle 5. Übersicht: Webdesign konfigurieren
Pos. Funktion Erläuterung

1

Design wählen

Das Design aus dem Dropdown-Menü 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 dem Dropdown-Menü wählen.

3

Auswahl merken

Bei aktiver Funktion (Häkchen gesetzt) merkt sich das System die vom Benutzer zuletzt gewählte Kombination aus Design und Sprache. Bei erneutem Login oder Reload des Menüs wird diese Kombination automatisch wieder eingestellt. Dies ist z.B. sinnvoll, wenn Benutzer eine andere Kombination aus Design und Sprache bearbeiten möchten, als im System aktiv ist.

4

Verwaltungsfunktionen

Hier ein Schnellüberblick über die Verwaltungsfunktionen. Diese Funktionen werden auf der Handbuchseite Webdesign bearbeiten detailliert erläutert.
Folgende Funktionen sind konfigurierbar:
Einstellungen = Auswahl des Mandant (Shop) und des Bilder-Ordners.
Vorschau = Ermöglicht eine Ansicht des Webshops mit dem gewählten Design, ohne das Design zu aktivieren. Die Vorschau ermöglicht auch die Kontrolle bei Anpassungen am Design. Bedingung für eine Vorschau ist die Wahl eines Mandant (Shop) in den Einstellungen.
Inline Edit Vorschau = Ermöglicht es, den Code des betreffenden Templates direkt im Frontend des Onlineshops zu bearbeiten.
Design veröffentlichen = Aktiviert ein gewähltes Design oder aktualisiert die Dateien des Designs nach Änderungen.
Neues Design anlegen = Legt ein neues Design auf Basis eines bestehenden Designs an.
Design übertragen = Legt eine Kopie des Design an. Empfohlen, bevor Sie Änderungen vornehmen. Besonders wichtig, wenn das Standard-Design modifiziert werden soll.
Design exportieren = Ein Design oder bestimmte Eigenschaften eines Designs exportieren.
Design importieren = Ein Standard-Design importieren. Dieses wird dann im Dropdown-Menü angezeigt.
Dropbox: Design exportieren/importieren = Design zur Dropbox exportieren bzw. aus der Dropbox importieren. Einzelne, mehrere Design-Bereiche oder das gesamte Design sind in einer oder allen Sprachen exportierbar. Der Import aus der Dropbox in plentymarkets ist für alle Templates oder nur geänderte Templates eines Designs möglich.
Design löschen = Ein im Dropdown-Menü gewähltes Design löschen. Mit der Option Design löschen wird das Design mit allen Sprachvarianten gelöscht. Mit der Option Ausgewählte Sprache löschen wird nur das Design der gewählten Sprache gelöscht. Ist das betreffende Design in einer weiteren Sprache vorhanden, muss diese Variante, wenn gewünscht, anschließend mit der entsprechenden Spracheinstellung gelöscht werden.

5

Suchfunktion

Templates per Suchfunktion finden.

6

Ordner

Struktur der Templates; Ordner sind an einem Ordnersymbol, Templates an einem Seitensymbol zu erkennen.

7

Speicherhinweis

Die rote Markierung im Tab-Titel zeigt an, dass Änderungen am Template vorgenommen und noch nicht gespeichert wurden.
Wichtig: Speichern Sie das Template, damit Ihre Anpassungen nicht verloren gehen.

8

Templates bearbeiten

Folgende Funktionen stehen in diesem Bereich für die Anzeige und Bearbeitung der Templates zur Verfügung:
Speichern = Template nach Änderungen speichern.
Template-Variablen und -Funktionen = Öffnet eine Übersicht mit den Template-Variablen und Template-Funktionen.
Template übertragen = Inhalt des jeweiligen Templates in eine andere Sprachvariante übertragen.
Editor vergrößern = Öffnet den Editierbereich des Templates in einem größeren Fenster. Fenster schließen, nachdem Änderungen vorgenommen wurden. Dann in der normalen Ansicht auf Speichern klicken, um die Änderungen zu speichern.

9

Editor-Einstellungen

Folgende Einstellungen sind für den Syntax-Editor aktivierbar; Häkchen setzen = aktiv:
Zeige Steuerzeichen = Steuerzeichen im Quellcode des Syntax-Editor anzeigen.
Leerzeichen statt Tabs = Statt eines Tabulators werden bei aktiver Funktion im Syntax-Editor mehrere Leerzeichen eingefügt. Vorhandene Tabulatorformatierungen werden nicht verändert.

10

Editor

Folgende Optionen sind verfügbar:
Syntax-Editor = Code wird mit farblich hervorgehobener Syntaxstruktur angezeigt.
Textfeld = Code wird als reiner Text angezeigt.

11

Unbenutzt

Im Ordner Unbenutzt werden Templates ohne Inhalt abgelegt, dies wird automatisch vom System vorgenommen.

5.2.2. Wichtige Funktionen im Detail

In diesem Kapitel werden einige Funktionen der Designverwaltung genauer beschrieben.

Suchfunktion

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

CMS Webdesign BenutzerUI 02 SI

Bild 2: Suchfunktion

Variablen-Suche

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

Template übertragen

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

DE CMS Webdesign BenutzerUI 03 SI

Bild 3: Template übertragen

Template übertragen:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Öffnen Sie das Template, dessen Inhalt Sie in eine andere Sprachvariante übertragen möchten.

  3. Klicken Sie auf Template übertragen (Bild 3, Pos. 1).
    → Ein Bearbeitungsfenster wird geöffnet.

  4. Prüfen Sie ggf. das eingestellte Design.

  5. Wählen Sie unter Sprache die Sprache (Bild 3, Pos. 2), auf die der Inhalt des Templates übertragen werden soll (Mehrfachauswahl ist möglich).

  6. Klicken Sie auf Template übertragen (Bild 3, Pos. 3).

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

5.3. Syntax

CMS » Webdesign

5.3.1. Inhalt dieses Kapitels

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

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

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

5.3.2. CMS-Syntax

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

5.3.3. jQuery

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

5.3.4. Listendarstellung

CMS » Webdesign

Inhalt dieser Seite

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

Artikellisten

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

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

DE CMS Webdesign Syntax Listen 01 SI

Bild 1: Prinzip des Templates *ItemViewCategoriesList*

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

Zusätzliche Konfigurationen im Code

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

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

Beispiel: ItemViewCategoriesList

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

DE CMS Webdesign Syntax Listen 02 SI

Bild 2: Template-Code *ItemViewCategoriesList*

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

5.3.5. Seitenaufbau

CMS » Webdesign

Inhalt dieser Seite

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

Struktur-Übersicht

Das folgende Bild veranschaulicht die grundlegende Struktur Ihres Webshops:

DE CMS Webdesign Grundlagen Seitenaufbau 01 SI

Bild 1: Grundlegende *Template-Struktur*

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

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

DE CMS Webdesign Grundlagen Seitenaufbau 02 SI

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

PageDesignContentHtmlStructure

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

PageDesignContentHtmlStructure

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

$HtmlBodyOverlays
</body>
</html>

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

Tabelle 6. Elemente des Tabs PageDesignContentHtmlStructure
Element Erläuterung

$HtmlStartTag

Die Template-Variable enthält das öffnende HTML-Tag sowie ggf. die Angabe des DOCTYPE.

$HtmlMetaTitle

Der Seitentitel wird durch diese Template-Variable ausgegeben. Er wird in der Titelleiste bzw. als Tabtitel der meisten Browser angezeigt. Der Seitentitel ist sehr wichtig für Suchfunktionen und das Ranking in Suchmaschinen und sollte daher kurz und treffend gewählt werden.

$HtmlHeadLinkCSSTags

Einbindung des CSS. Hier werden die jeweils zutreffenden CSS-Templates eingebunden, bei der Darstellung von Kategorien oder Artikeln z.B. CSSBase und CSSContent, beim Bestellvorgang hingegen CSSBase und CSSOrder.

$HtmlHeadJavaScriptTags

Einbindung der in plentymarkets standardmäßig vorhandenen JavaScript-Frameworks: jQuery, jQuery UI, jQuery UI Widget, jQuery UI Mouse, jquery.event.drag, jQuery Tools.

$HtmlHeadMetaTags

Durch diese Template-Variable werden Meta-Tags, z.B. Keywords, umgesetzt, die wichtig für die Indizierung der Seite durch Suchmaschinen sind.

$PageDesignContentMainFrame

Diese Template-Variable fügt den Inhalt des Templates PageDesignContentMainFrame ein. Dieses Template enthält wiederum die Template-Variable $MainFrame. Daher wird diese nachfolgend ebenfalls erläutert.

$HtmlBodyOverlays

Hier werden Overlays umgesetzt, z.B. eine spezielle Warenkorbansicht.

PageDesignContentMainFrame

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

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

PageDesignContentMainFrame

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

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

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

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

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

Tabelle 7. Elemente des Tabs PageDesignContentMainFrame
Element Erläuterung

$MainFrame

Bildet den jeweiligen dynamischen Hauptinhalt einer Seite, z.B. eine Artikeldetailansicht, ab. Weitere Details siehe nächstes Unterkapitel.

<!-- txt -->

Kommentare, die zur Orientierung im Code eingefügt werden, jedoch nicht angezeigt werden. Diese werden z.B. für Listenansichten zur Segmentierung der Iterationsschritte verwendet.

Wichtige Inhalte nicht aus Template löschen!

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

Template-Variable MainFrame

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

DE CMS Webdesign Grundlagen Seitenaufbau 03 SI

Bild 3: Mögliche Inhalte für *MainFrame*

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

5.3.6. jQuery

CMS » Webdesign

Inhalt dieser Seite

Auf dieser Seite erhalten Sie Informationen zu jQuery.

Wichtiges zu jQuery

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

Vor Einbindung prüfen!

Kompatibilität

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

Bibliotheken

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

Tutorial

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

5.4. Werkzeuge

CMS » Webdesign

5.4.1. Editor

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

5.4.2. Syntax-Editor

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

5.4.3. Editor

CMS » Webdesign

CMS-Editoren

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

Wahl des Editors

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

Die Editoren kommen in den folgenden Bereichen zum Einsatz:

  • Artikelbeschreibung

  • Listingbeschreibung

  • Kategorien

  • Newsletter

Editor-Verfügbarkeit

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

Der Editor

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

DE CMS Webdesign Werkzeuge Editor 01 SI

Bild 1: Benutzeroberfläche des *Editor*

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

HTML-Editor

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

DE CMS Webdesign Werkzeuge Editor 02 SI

Bild 2: Nur-Text bzw. HTML-Editor *Textfeld*

Systemvoraussetzungen

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

Systemvoraussetzungen

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

Bedienung

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

Je nach Browser zeigen manche Funktionen unterschiedliche Verhaltensweisen. Es kann auch zu browserspezifischen Einschränkungen oder ungewollten Effekten kommen. So wird z.B. beim Kopieren und Einfügen von Text in manchen Browsern die Formatierung verändert oder unerwünschte Formatierungen werden mit eingefügt. Sie erhalten auf dieser Seite Tipps zum Umgang mit diesen Funktionen.

Funktionsübersicht

Nachfolgend erhalten Sie grundlegende Informationen zu den Funktionen des Editors.

DE CMS Webdesign Werkzeuge Editor 03 SI

Bild 3: Übersicht über die Funktionen des Editors

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

Tabelle 8. Die Funktionen des Editors im Detail
Pos. Einstellung Erläuterung

1

Editor

Den gewünschten Editor aus dem Dropdown-Menü wählen:
Editor = Der WYSIWYG-Editor CKEditor
Textfeld = HTML-Editor Textarea oder den
Syntax-Editor = Beachten Sie dazu das Kapitel 1 dieser Seite.

2

Format

Ein Format für eine Überschrift, den Fließtext etc. wählen durch Setzen des Cursors in eine Zeile und Wahl des gewünschten Formates.
Bei der Strukturierung der Überschriften eine sinnvolle Reihenfolge festlegen, was besonders wichtig ist, wenn eine automatische Nummerierungsfunktion verwendet wird.
Aus Gründen der Übersichtlichkeit für den Fließtext nur mit einer Standard-Schriftgröße arbeiten und Überschriften durch Auswahl der entsprechenden Absatzformatierung (Heading 1-4) formatieren.

3

Schriftschnitt

Den Schnitt, die Farbe und die Ausrichtung von Texten oder einzelnen Worten anpassen.

4

Text unformatiert einfügen

Über ein Textfenster Texte unformatiert in die Seite einfügen, der sich nach Klick auf den Button öffnet. Text dann bei Bedarf noch anpassen. Nach Klick auf OK wird der Text dann eingefügt.

5

Liste

Formatiert einen Text bzw. eine Zeile als Liste, d.h. es wird ein Blickpunkt eingefügt und die Zeile wird eingerückt.

6

Nummerierung

Formatiert einen Text bzw. eine Zeile als nummerierte Liste. Die Nummerierung wird automatisch vorgenommen, der Startwert und die Formatierung der Nummerierung kann ggf. auch angepasst werden.
Dazu mit der rechten Maustaste in die betreffende Zeile klicken und dann die Option Nummerierte Listen-Eigenschaften wählen.

7

Einzug

Über diese Icons den Einzug eines Abschnitts erhöhen oder verringern.

8

Link einfügen

Öffnet das Fenster Link, in das Links eingefügt werden, z.B. eine Template-Funktion (siehe Bild 4) oder eine URL, um damit auf das betreffende Ziel zu verlinken.

+ image::omni-channel/online-shop/_cms/webdesign/werkzeuge/assets/DE-CMS-Webdesign-Werkzeuge-Editor-04-SI.png[]

+ Bild 4: Verlinkung per Template-Funktion einfügen

+ Konfiguration:
Link-Typ = Art der Verlinkung, z.B. URL, die Einstellung wählen Sie z.B. auch für eine Template-Funktion. Ein Beispiel für einen Anker zeigt Pos. 13.
Protokoll = Für die URL einer verschlüsselten Webseite z.B. https:// wählen. Für eine Template-Funktion die Einstellung andere wählen.
URL = Die betreffende URL oder die Template-Funktion eintragen.
Wichtig: Bei Einfügen der URL einer verschlüsselten Webseite sowie der Einstellung https:// für die Option Protocol wird dieser Präfix automatisch aus der URL entfernt.

9

Anker einfügen

Im Text einen Anker hinterlegen mit einer Nummer oder einem Namen. Über den Button Link einfügen wird der Anker verlinkt, z.B. in einer Überschrift, um dann von dieser Überschrift zu dem Anker zu springen.

+ image::omni-channel/online-shop/_cms/webdesign/werkzeuge/assets/DE-CMS-Webdesign-Werkzeuge-Editor-05-SI.png[]

+ Bild 5: Anker als Verlinkungsziel wählen

+ Konfiguration:
Link-Typ = Anker in dieser Seite wählen.
Anker auswählen = Den betreffenden Anker entweder nach Name oder nach Id (ID) wählen.

10

Tabelle

Fügt eine Tabelle ein. Die Anzahl der Zeilen und Spalten ist wählbar, sowie einige weitere Formatierungen.
Tipp: Alternativ eine Tabelle per HTML-Code im Quellcode bzw. über den Syntax-Editor einfügen.

11

Bild

Über dieses Icon werden Bilder wie unten beschrieben konfiguriert und in die Seite eingefügt.
Ein neues Bild einfügen: den Cursor an die betreffende Stelle im Text setzen und auf dieses Icon klicken.
Ein schon bestehendes Bild erneut bearbeiten: erst auf das Bild klicken und dann auf dieses Icon. Alternativ mit der rechten Maustaste auf das Bild klicken und die Option Bild-Eigenschaften auswählen.
Wichtig: Um ein Bild einfügen zu können, muss dieses zuvor auf den Server, in die Bilder-Galerie oder das Tab Dokumente einer Kategorie geladen werden und somit per URL erreichbar sein. Bilder können Sie über das Menü CMS » Bilder-Galerie bzw. über das Icon im CMS oder über Ihren FTP-Zugang auf den Server laden.

+ image::omni-channel/online-shop/_cms/webdesign/werkzeuge/assets/DE-CMS-Webdesign-Werkzeuge-Editor-06-SI.png[]

+ Bild 6: Bild-Eigenschaften konfigurieren

+ Konfiguration:
URL = Bild-URL einfügen. Diese sollte mit der relativen URL verknüpft werden, da bei Verwendung einer absoluten URL (vollständiger Pfad) das Bild bei Änderung des Domainnamens nicht mehr verfügbar wäre. Die URL können Sie aus der Bildergalerie oder aus dem Tab Dokumente durch Copy & Paste übernehmen.
Schloss-Icon = Wenn das Schloss geöffnet ist, sind die Bilddaten nicht aktualisiert und es kann zu einer falschen Bilddarstellung kommen (Verzerrung). In diesem Fall auf das Reload-Icon klicken und dann auf das Schloss-Icon. Wenn das Schloss geschlossen bleibt, ist das Bild in Ordnung.
Weitere Parameter = Wenn Sie z.B. die Breite und die Höhe des Bildes ändern möchten, wird das Schloss wieder geöffnet, weil die realen Daten den geänderten Werten nicht entsprechen. Sie können das im Bedarfsfall lassen, dürfen allerdings nicht auf das geöffnete Schloss-Icon klicken, da die Originalwerte dann bei Speichern wieder hergestellt werden.

12

Sonderzeichen

Hier stehen Sonderzeichen zur Verfügung, die ausgewählt und per Klick auf OK an der Cursorposition eingefügt werden.

13

Quellcode

Inhalte im Quellcode bearbeiten.

14

Rechtschreibprüfung

Rechtschreibprüfung ein- bzw. ausschalten.

Tastenkombination für Copy & Paste

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

Tabelle 9. Copy & Paste-Funktionen
Funktion Aktion

Kopieren

Strg (cmd) + C
Kopiert einen markierten Text in die Zwischenablage.

Ausschneiden

Strg (cmd) + X
Entfernt einen markierten Text aus der Seite und fügt ihn in die Zwischenablage ein.

Einfügen

Strg (cmd) + V
Fügt einen markierten Text aus der Zwischenablage an der Cursorposition ein.

Text unformatiert einfügen

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

Tabelle 10. Tastenkombination für unformatiert einfügen
Funktion Aktion

Text unformatiert einfügen

Umsch + Strg (cmd) + V

Zeilenvorschub / Neue Zeile

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

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

DE CMS Webdesign Werkzeuge Editor 07 SI

Bild 7: p-Tag mit *Leerzeichencode*

5.4.4. Syntax-Editor

CMS » Webdesign

CMS-Editoren

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

Syntax-Editor-Verfügbarkeit

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

Wer sollte den Syntax-Editor benutzen und warum?

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

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

Funktionen

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

Übersicht

Der Syntax-Editor bietet die folgenden Features:

  • Syntax-Highlighting

  • Einfache Strukturierung

  • Rückgängig machen und wiederholen

  • Suchen und Ersetzen

  • Kopieren / Duplizieren von Zeilen und Code-Blöcken

  • Verschieben von Zeilen und Code-Blöcken

  • Einfaches Aus- und Einkommentieren von Code-Blöcken

  • Multi-Cursor (gleichzeitiges Schreiben an mehreren Stellen gleichzeitig)

  • Code-Generierung mit Emmet

  • Viele helfende Tastenkombinationen

Syntax-Highlighting

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

DE CMS Webdesign Werkzeuge Syntax Editor 01 SI

Bild 1: Syntax-Highlighting durch den Syntax-Editor

Strukturierung

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

Tabelle 11. Code ein- oder ausrücken
Funktion Aktion

Einrücken

Tab-Taste

Ausrücken

Shift + Tab-Taste

Einstellung: Leerzeichen statt Tabs

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

Rückgängig machen und wiederholen

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

Tabelle 12. Bearbeitungsschritte rückgängig machen oder wiederholen
Funktion Aktion

Rückgängig

Strg (cmd) + Z

Wiederholen

Shift + Strg (cmd) + Z

Nicht bei Wechsel des Editors

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

Suchen

Die Suchfunktion ermöglicht die gezielte Textsuche, wobei die Ergebnisse farblich hervorgehoben werden. Wenn es zu einer Sucheingabe kein Ergebnis gibt, wird dies durch einen roten Rahmen um das Suchfeld dargestellt.

DE CMS Webdesign Werkzeuge Syntax Editor 02 SI

Bild 2: Suchfunktion im Syntax-Editor

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

Tabelle 13. Bearbeitungsschritte Suchen, Weitersuchen oder Suche schließen
Funktion Aktion

Suchen

Strg (cmd) + F

Weitersuchen

Enter-Taste drücken oder im Suchfenster den Pfeil nach unten klicken

Rückwärts suchen

Shift + Enter drücken oder im Suchfenster den Pfeil nach oben klicken

Suche schließen

Esc-Taste oder im Suchfenster auf x klicken

Suchen und Ersetzen

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

DE CMS Webdesign Werkzeuge Syntax Editor 03 SI

Bild 3: Suchen und Ersetzen mit dem Syntax-Editor

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

Tabelle 14. Suchen und Ersetzen mit dem Syntax-Editor
Funktion Aktion

Ersetzen-Funktion aufrufen

Strg (cmd) + F
Bei geöffneter Suche nochmals eingeben oder 2 mal eingeben, wenn Suche nicht geöffnet ist

Suchwort eingeben

Die gesuchte Bezeichnung, den Textteil oder das gesuchte Element eingeben.

Ersetzen

Die Bezeichnung, den Textteil oder das Element eingeben, das die gefundenen Elemente ersetzen soll. Im Beispiel in Bild 3 werden strong-Formatierungen gesucht, die dann durch b-Formatierungen ersetzt werden sollen (= bold).

Replace

Durch Klick auf diesen Button wird nur das markierte Element ersetzt.

All

Durch Klick auf diesen Button werden alle Elemente der Seite oder des Textbereichs ersetzt.

.*

Suche mit regulärem Ausdruck: Es wird anhand eines regulären Ausdrucks gesucht. Kann sich beim Suchen und Ersetzen komplizierter Ausdrücke und großen Inhalten auszahlen. Für die normale Anwendung nicht geeignet.

Aa

Groß- und Kleinschreibung berücksichtigen: Es werden nur Begriffe gefunden, die der Groß- und Kleinschreibung exakt entsprechen.

\b

Ganzes Wort: Es wird nur das vollständige Wort gesucht und keine Textteile.

Kopieren von Zeilen und Blöcken

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

Tabelle 15. Bearbeitungsschritte Verdoppeln, Nach oben kopieren oder Nach unten kopieren
Funktion Aktion

Verdoppeln

Shift + Strg (cmd) + D

Nach oben kopieren

Alt + Strg (cmd) + Pfeiltaste nach unten

Nach unten kopieren

Alt + Strg (cmd) + Pfeiltaste nach oben

Verschieben von Zeilen und Blöcken

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

Tabelle 16. Bearbeitungsschritte Nach oben verschieben oder Nach unten verschieben
Funktion Aktion

Nach oben verschieben

Alt + Pfeiltaste nach oben

Nach unten verschieben

Alt + Pfeiltaste nach unten

Auswahl aus- oder einkommentieren

Sie können eine Auswahl aus- oder einkommentieren.

Tabelle 17. Bearbeitungsschritte Auskommentieren oder Einkommentieren
Funktion Aktion

Auskommentieren

Shift + Strg (cmd) + 7

Einkommentieren

Shift + Strg (cmd) + 7

Multi-Cursor

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

Emmet-Plugin

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

Funktionsweise Emmet

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

Praxis-Beispiele

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

Tabelle 18. Bearbeitungsbeispiele Emmet
Eingabe Ergebnis

div>ul>li

<div>
<ul>
<li></li>
</ul>
</div>

div>ul>li>*5

<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

div>ul#meineListe>li.meineCSSKlasse$*5

<div>
<ul id="meineListe">
<li class="meineCSSKlasse1"></li>
<li class="meineCSSKlasse2"></li>
<li class="meineCSSKlasse3"></li>
<li class="meineCSSKlasse4"></li>
<li class="meineCSSKlasse5"></li>
</ul>
</div>

Syntax-Dokumentation

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

Tastenkombinationen

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

5.4.5. Inline-Editor

CMS » Webdesign

Allgemeines

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

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

  • Design ändern

  • Sprache ändern

  • Design (Layout) einer Seite anpassen

  • Kategorienavigation anpassen

  • Artikeldetailansicht anpassen

  • Warenkorbvorschau anpassen

  • Kategoriebearbeitung

  • Artikelbearbeitung

Bearbeitungsfunktionen

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

Webshop zur Bearbeitung öffnen

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

DE Inline Editor 01 SI

Bild 1: *Webshop zum Bearbeiten öffnen*

Startseite zur Bearbeitung öffnen:

  1. Klicken Sie im plentymarkets-Backend auf Webseite (Bild 1, Weltkugel).

  2. Wählen Sie die Option Webshop zum Bearbeiten öffnen.
    → Die Startseite des Webshops öffnet sich mit verschiedenen Optionen zur Bearbeitung Ihrer Artikel, Kategorien oder Blogs (Bild 2).

Bereich über das Icon öffnen:

  1. Klicken Sie während der Bearbeitung einer Kategorie oder eines Designs im CMS auf das folgende Icon: image::omni-channel/online-shop/_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 2 gezeigt dargestellt.

DE Inline Editor 02 SI

Bild 2: Inline-Editor im Webshop

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

Tabelle 19. Inline-Editor; Buttons
Einstellung Erläuterung

Design:

Das ausgewählte Design wird angezeigt. Für Änderungen das gewünschte Design aus dem Dropdown-Menü wählen.

Sprache

Die Sprache wird angezeigt und kann geändert werden.

Auswahl merken

Häkchen setzen = Merkt sich die vorgenommene Auswahl für die nächste Bearbeitung.
Kein Häkchen = Lädt bei erneuter Bearbeitung das Standard-Design.
Wichtig: Diese Option ändert das Design des Webshops nicht dauerhaft. Um das Standard-Design für den Webshop zu ändern, beachten Sie die Handbuchseite Webdesign bearbeiten.

Seite aktualisieren

Aktualisiert die Seite und zeigt z.B. Änderungen an, die im Backend vorgenommen wurden.
Wichtig: Ihren Webshop mit geöffnetem Inline-Editor nicht über den Browser neu laden. Hierbei wird das plentymarkets Backend neu geladen. Alle Tabs und der Webshop werden geschlossen.

Kategorie bearbeiten

Öffnet die aktuell angezeigte Seite bzw. Kategorie zur Bearbeitung im Backend.

Link

Zeigt die Template-Funktion der aktuell angezeigten Seite bzw. Kategorie an (Bild 2, blauer Pfeil). Diese wird benötigt, um von anderen Kategorieseiten auf die Gezeigte zu verlinken. Die Template-Funktion kann hier kopiert werden.

SetCategoryId

Gibt innerhalb eines anderen Bereiches des Webshops den Inhalt der geöffneten Kategorie aus. Weitere Details dazu finden Sie auf der Handbuchseite SetCategoryId.

plentymarkets-Backend

Wechselt zurück in das plentymarkets-Backend (Bild 2, grüner Pfeil).

Inhalte im Webshop bearbeiten

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

DE Inline Editor 03 SI

Bild 3: Artikelbearbeitung im Webshop öffnen

Bearbeitung des Artikels im Webshop öffnen:

  1. Öffnen Sie den Webshop zum Bearbeiten (Bild 1).

  2. Wählen Sie im Webshop den Artikel aus, den Sie bearbeiten möchten.
    Zeigen Sie mit der Maus auf den Artikel.
    → Oben links wird ein Stift angezeigt (Bild 3).

  3. Klicken Sie auf den Stift (Bild 3, roter Pfeil).
    → Der Inline-Editor öffnet das Template in einem Fenster zur direkten Bearbeitung des Artikels.

DE Inline Editor 04 SI

Bild 4: Artikelbearbeitung im Webshop; Template *ItemViewSingleItem*

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

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

Tabelle 20. Inline-Editor; Buttons im Bearbeitungsfenster
Einstellung Erläuterung

Speichern

Änderungen im Template speichern. Dieser Button wird erst aktiv, wenn Änderungen vorgenommen wurden.

Template-Variablen und -Funktionen

Öffnet eine Liste aller im System verfügbaren Template-Variablen und Template-Funktionen. Diese können über den Menübaum gefunden und in das Template kopiert werden.

Template übertragen

Überträgt das Template in eine andere Sprache Ihrer Wahl. Weitere Details dazu finden Sie auf der Handbuchseite Benutzeroberfläche.

Editor einrichten

Öffnet ein Fenster zur Einrichtung des Editors. Über Häkchen setzen wählen, ob im Editor Steuerzeichen angezeigt werden und ob Leerzeichen statt Tabs angezeigt werden.

Bearbeitung im Backend über den Webshop öffnen

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

DE Inline Editor 05 SI

Bild 5: Bearbeitung im Backend über den Webshop öffnen

Bearbeitung im Backend aus dem Webshop öffnen:

  1. Wählen Sie im Webshop den zu bearbeitenden Artikel.

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

5.5. Bearbeiten

CMS » Webdesign

5.5.1. Aufbau des Designs

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

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

5.5.2. Bereiche

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

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

5.5.3. Hinweise für Webentwickler

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

5.5.4. Design-Verwaltungsfunktionen

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

Anzahl der Designs

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

Design-Einstellungen

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

Design mit Mandanten verknüpfen

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

DE CMS Webdesign Bearbeiten 01

Bild 1: Design mit Mandanten verknüpfen

Design mit einem oder mehreren Mandanten verknüpfen:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Wählen Sie das gewünschte Design aus dem Dropdown-Menü (Bild 1, Pos. 1).

  3. Wählen Sie die gewünschte Sprache aus dem Dropdown-Menü (Bild 1, Pos. 2).

  4. Klicken Sie auf das blaue Zahnrad, um die Einstellungen zu öffnen (Bild 1, Pos. 3).
    → Das Fenster Design-Einstellungen wird geöffnet.

  5. Wählen Sie im Tab Einstellungen (Bild 1) unter Mandant (Shop) den Webshop, für den das Design gelten soll. Sie können auch mehrere Mandanten oder ALLE wählen.

  6. Wenn Sie die Bilder für das Design in einem bestimmten Ordner hinterlegen möchten, wählen Sie unter Bilder-Ordner einen Ordner.

  7. Speichern Sie die Einstellungen.

Grüne Schrift = aktives Design

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

Kategorieseiten verknüpfen

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

Designspezifische Kategorieverknüpfungen haben Vorrang

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

DE CMS Webdesign Bearbeiten 02

Bild 2: Zuordnung der Kategorien des Webshops

Kategorieseiten zuordnen:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Wählen Sie das gewünschte Design aus dem Dropdown-Menü.

  3. Wählen Sie die gewünschte Sprache aus dem Dropdown-Menü.

  4. Klicken Sie auf das blaue Zahnrad, um die Einstellungen zu öffnen.
    → Das Fenster Design-Einstellungen (Bild 2) wird geöffnet.

  5. Klicken Sie auf das Tab Mandanten.

  6. Wählen Sie links den Mandanten, für den Sie Kategorieseiten zuordnen möchten.

  7. Klicken Sie neben der Seite, der Sie eine Kategorieseite zuordnen möchten, auf die Lupe.
    → Eine Liste der verfügbaren Kategorieseiten wird angezeigt.

  8. Wählen Sie die Kategorie, die Sie der Seite zuordnen möchten. Beachten Sie dabei die Erläuterungen in Tabelle 1.

  9. Wiederholen Sie die beschriebenen Schritte für alle weiteren Seiten.

  10. Speichern Sie die Einstellungen.

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

Tabelle 21. Zuordnung der Kategorieseiten
Einstellungen Erläuterung

Startseite

Eine Kategorieseite wählen, die bei Aufrufen des Webshops als Startseite angezeigt wird.

AGB

Eine Kategorieseite für die Allgemeinen Geschäftsbedingungen wählen.

Datenschutz

Eine Kategorieseite für die Datenschutzrichtlinien wählen.

Widerrufsrecht

Eine Kategorieseite für das Widerrufsrecht wählen.

Hilfe

Eine Kategorieseite für die Hilfeseite des Webshops wählen.

404

Eine Kategorieseite wählen, um diese statt der Standard-404-Seite anzuzeigen.
Die Standard-404-Seite enthält einen Hinweis, dass die Seite nicht verfügbar ist oder verschoben wurde.

Versandkosten

Eine Kategorieseite für Angaben zu Versandkosten wählen.

Artikel nicht gefunden

Eine Kategorieseite wählen, um diese statt der Standard-Meldung anzuzeigen, wenn ein Artikel nicht gefunden wird.

Zahlungsarten

Eine Kategorieseite für Informationen zu Zahlungen und Zahlungsarten wählen.

Kontakt

Eine Kategorieseite wählen, auf der die Kontaktdaten des Unternehmens angegeben sind.
Die Seite ist auch als Seite 404 sinnvoll, damit Besucher des Webshops bei einem Fehler direkt Kontakt zu Ihnen aufnehmen kann.

Impressum

Eine Kategorieseite für das Impressum wählen.
Das Impressum ist in den meisten Fällen eine Pflichtangabe. Das Impressum sollte unter diesem Namen und leicht auffindbar sein.

Bankdaten

Eine Kategorieseite für Bankdaten wählen.
Die Angaben auf der Seite Bankdaten werden für die Zahlungsarten Vorkasse und Rechnung benötigt. Die Seite sollte Ihre Bankverbindung sowie ggf. einen Hinweis zum Verwendungszweck enthalten.

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

Bestellschritte konfigurieren

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

Seiten-Layout verknüpfen

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

DE CMS Webdesign Bearbeiten 03

Bild 3: Verknüpfung des Seiten-Layouts

Design veröffentlichen

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

Design veröffentlichen:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Wählen Sie im Dropdown-Menü das gewünschte Design.

  3. Wählen Sie die gewünschte Sprache.

  4. Klicken Sie auf die Weltkugel, um die Veröffentlichung zu starten.
    → Das Fenster Design veröffentlichen wird geöffnet.

  5. Wählen Sie in der linken Spalte des Fensters die Bereiche des Designs, die veröffentlicht werden sollen. Beachten Sie dazu Tabelle 2.

  6. Klicken Sie auf Gewählte Bereiche veröffentlichen, um das Design zu veröffentlichen.
    → Die gewählten Bereiche des Designs werden veröffentlicht. Je nach Umfang dauert der Vorgang mehrere Minuten.

Tabelle 22. Optionen für die Design-Veröffentlichung
Einstellung Erläuterung

Alle

Wählen, um das vollständige Design inklusive aller Kategorien und Blog-Einträge zu veröffentlichen. Dieser Vorgang kann mehrere Minuten dauern.

Templates & CSS

Wählen, um nur die Templates und das CSS zu veröffentlichen.

Kategorien

Wählen, um noch nicht veröffentlichte, z.B. über Schnittstellen oder Importformate importierte Kategorien zu veröffentlichen. Änderungen an bereits veröffentlichten Kategorien werden sofort übernommen, ein erneutes Veröffentlichen der Kategorien ist nicht erforderlich.

Blog

Wählen, um noch nicht veröffentlichte, z.B. über Schnittstellen oder Importformate importierte Blogs zu veröffentlichen. Änderungen an bereits veröffentlichten Blogs werden sofort übernommen, ein erneutes Veröffentlichen der Blogs ist nicht erforderlich. Blogs können alternativ auch im Menü CMS » Blog » Tab: Blog veröffentlichen veröffentlicht werden.

Datei-Cache zurücksetzen

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

Datei-Cache zurücksetzen:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Wählen Sie das gewünschte Design.

  3. Wählen Sie die gewünschte Sprache.

  4. Klicken Sie auf die Weltkugel.
    → Das Fenster Design veröffentlichen wird geöffnet.

  5. Wählen Sie in der rechten Spalte des Fensters die Bereiche des Designs, die geändert wurden. Beachten Sie dazu Tabelle 3.

  6. Klicken Sie auf Datei-Cache zurücksetzen.

Tabelle 23. Optionen für das Zurücksetzen des Datei-Caches
Einstellung Erläuterung

Alle

Wählen, um alle CSS-, JavaScript- und Bilddateien aus dem Datei-Cache zu löschen.

CSS

Wählen, um nur CSS-Dateien aus dem Datei-Cache zu löschen.

JavaScript

Wählen, um nur JavaScript-Dateien aus dem Datei-Cache zu löschen.

Bilder

Wählen, um nur Bilddateien aus dem Datei-Cache zu löschen.

Neues Design anlegen

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

Sicherheitskopie

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

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

Tipp: Bezeichnungen für neue Designs

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

Beispiel:

DesignWebshop_01

DesignWebshop_02

oder

DesignWebshop_2014-05-07

DesignWebshop_2014-05-12

Design übertragen

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

Folgende Bereiche sind wählbar:

  • PageDesign (Seitenansichten)

  • Navigation

  • CategoryView (Kategorieansichten)

  • ItemView (Artikelansichten)

  • Misc (Verschiedenes)

  • BlogDesign

  • CSS

  • Bestellvorgang

  • Mein Konto

  • Buttons

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

DE CMS Webdesign Bearbeiten 04

Bild 4: Design übertragen

Eigenschaften eines Designs übertragen:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Klicken Sie auf das Symbol Design übertragen (Bild 4, roter Pfeil).

  3. Wählen Sie unter Quelle das Design, von dem Eigenschaften übernommen werden sollen, sowie die Sprache.

  4. Wählen Sie unter Ziel das Design, auf das die Eigenschaften übertragen werden sollen, und dessen Sprache.

  5. Wählen Sie die Bereiche, die von der Quelle auf das Ziel übertragen werden sollen (Häkchen setzen).

  6. Klicken Sie auf Design übertragen.

Design exportieren

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

Design exportieren:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Klicken Sie auf das Symbol Design exportieren.
    → Das Fenster Design exportieren wird angezeigt.

  3. Wählen Sie das Design, das exportiert werden soll.

  4. Wählen Sie die Sprache, die exportiert werden soll.

  5. Wählen Sie die Bereiche, die exportiert werden sollen (Häkchen setzen).

  6. Klicken Sie auf Design exportieren.

  7. Speichern Sie die Datei auf einem Datenträger Ihres Rechners.

Design importieren

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

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

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

Dropbox: Design exportieren/importieren

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

DE CMS Webdesign Bearbeiten 05

Bild 5: Dropbox-Export/-Import

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

Dropbox-Konto verknüpfen und Basis-Ordner festlegen

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

Design in Dropbox-Ordner exportieren

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

Design in Dropbox-Ordner exportieren:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Wählen Sie aus dem Dropdown-Menü das Design, das aus plentymarkets in den Dropbox-Ordner exportiert werden soll.

  3. Klicken Sie auf das Symbol Dropbox: Design exportieren/importieren (Bild 5, roter Pfeil).
    → Das Fenster Dropbox wird angezeigt.

  4. Klicken Sie auf Design exportieren.
    → Das Fenster Design exportieren wird angezeigt.

  5. Wählen Sie die Sprache, die exportiert werden soll.

  6. Wählen Sie die Bereiche, die exportiert werden sollen (Häkchen setzen).

  7. Klicken Sie auf Design exportieren.
    → Im Basis-Ordner Ihres Dropbox-Kontos werden die Design-Bereiche pro Sprache gespeichert. Je nach Datenvolumen kann der Export mehrere Minuten dauern.

Templates aus Dropbox-Ordner importieren

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

Templates aus Dropbox-Ordner importieren:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Wählen Sie das Design, in das Templates importiert werden sollen, aus dem Dropdown-Menü.

  3. Klicken Sie auf das Symbol Dropbox: Design exportieren/importieren (Bild 5, roter Pfeil).
    → Das Fenster Dropbox wird angezeigt.

  4. Klicken Sie auf Design importieren.
    → Das Fenster Dropbox wird angezeigt.

  5. Wählen Sie entweder Nur geänderte Templates importieren oder Alle Templates importieren.
    → Die Dateien werden aus dem Basis-Ordner Ihres Dropbox-Kontos in plentymarkets importiert. Je nach Datenvolumen kann der Import mehrere Minuten dauern.

Design löschen

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

Design löschen:

  1. Wählen Sie das gewünschte Design aus dem Dropdown-Menü.

  2. Wählen Sie die gewünschte Sprache aus dem Dropdown-Menü.

  3. Klicken Sie auf Löschen.

  4. Bestätigen Sie die Sicherheitsabfrage.
    → Das Design wird aus dem System gelöscht.

5.5.5. Templates bearbeiten

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

5.5.6. CSS

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

5.5.7. PageDesign

CMS » Webdesign » Layout » PageDesign

Inhalt dieser Seite

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

Grundstrukturen im plentymarkets-CMS

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

Allgemeines zum Seiten-Layout

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

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

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

Seiten-Layout: Templates

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

PageDesignContent

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

PageDesignCheckout

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

PageDesignMyAccount

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

PageDesignCustom

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

PageDesignBlog

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

PageDesignForum

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

PageDesignPrepareMainColumn

Gestaltung des Hauptteils der Seitenansicht.

HTML-Struktur

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

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

Das Template enthält den gesamten Inhalt der jeweiligen Seite und gibt der Seite die gewünschte Struktur. Sie finden den Code im Tab PageDesignContentHtmlStructure des Templates PageDesignContent. Der etwas vereinfachte Code sieht folgendermaßen aus:

PageDesignContentHtmlStructure

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

$HtmlBodyOverlays
</body>
</html>

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

Tabelle 24. Elemente des Tabs PageDesignContentHtmlStructure
Element Erläuterung

$HtmlStartTag

Der Platzhalter enthält das öffnende HTML-Tag sowie ggf. die Angabe des DOCTYPE.

$HtmlMetaTitle

Der Seitentitel wird durch diesen Platzhalter ausgegeben. Er wird in der Titelleiste bzw. als Tabtitel der meisten Browser angezeigt. Der Seitentitel ist sehr wichtig für Suchfunktionen und das Ranking in Suchmaschinen und sollte daher kurz und treffend gewählt werden.

$HtmlHeadLinkCSSTags

Setzt die CSS-Festlegungen für den Kopfbereich um.

$HtmlHeadJavaScriptTags

Umsetzung der JavaScript-Inhalte im Kopfbereich.

$HtmlHeadMetaTags

Durch diesen Platzhalter werden Meta-Tags, z.B. Keywords, umgesetzt, die wichtig für die Indizierung der Seite durch Suchmaschinen sind.

$PageDesignContentMainFrame

Dieser Platzhalter fügt den Inhalt des Templates PageDesignContentMainFrame ein. Dieses Template enthält wiederum den Platzhalter MainFrame, daher wird dieser nachfolgend ebenfalls erläutert.

$HtmlBodyOverlays

Hier werden Overlays umgesetzt, z.B. eine spezielle Warenkorbansicht.

5.5.8. ItemView

CMS » Webdesign » Layout » ItemView

Inhalt dieser Seite

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

Grundstrukturen im plentymarkets-CMS

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

Allgemeines zu Artikelansichten

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

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

Beispiel Artikeleigenschaften

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

<h1>$Name[1]</h1>

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

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

Artikelansichten: Templates

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

ItemViewSingleItem

Darstellung der Artikeldetailansicht im Webshop.

ItemViewSearchResultsList

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

ItemViewFilterResultsList

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

ItemViewCategoriesList

Auflistung der Artikel einer im Webshop gewählten Kategorie.

ItemViewCrossSellingItemsList

Auflistung der Cross-Selling-Artikel.

ItemViewTopSellersList

Auflistung der Top-Seller-Artikel.

ItemViewSpecialOffersList

Auflistung von Sonderangeboten.

ItemViewLatestItemsList

Auflistung der zuletzt zum Webshop hinzugefügten Artikel.

ItemViewItemsByPositionList

Liste der meistverkauften Artikel. Wird über Nacht aktualisiert.

ItemViewLastSeenList

ItemViewRandomList

Auflistung vom System zufällig ausgewählter Artikel.

ItemViewItemImagesList

Darstellung von Artikelbildern in Listenform.

Maßeingabe

System » Artikel » Freitextfelder

Allgemeines zur Maßeingabe

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

Tipp

Der betreffende Artikel muss im Webshop sichtbar sein.

Artikel für Maßeingabe konfigurieren

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

Freitextfeld anlegen

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

DE CMS Webdesign IemView Masseingabe 01

Bild 1: Parameter des Freitextfeldes *Maßeingabe*

Freitextfeld anlegen:

  1. Öffnen Sie das Menü System » Artikel » Freitextfelder.

  2. Tragen Sie in ein freies Freitextfeld die Bezeichnung Maßeingabe ein.

  3. Wählen Sie unter Datentyp die Einstellung kleine Zahl (-127 bis 127).

  4. Tragen Sie unter Zeichenlänge die Ziffer 1 ein.

  5. Speichern Sie die Einstellungen.

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

Freitextfeld am nächsten Tag verfügbar

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

Maßangaben eintragen

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

DE CMS Webdesign IemView Masseingabe 02

Bild 2: Parameter der Artikelbearbeitung

Maßangaben beim Artikel konfigurieren:

  1. Öffnen Sie das Bearbeitungsmenü eines Artikels im Tab Base.
    → Dort finden Sie die Felder Breite, Länge und Höhe (Bild 2).

  2. Geben Sie die maximalen Werte für die Preisberechnung und die Dimensionen des Artikels gemäß der Erläuterungen in Tabelle 1 ein.
    → Am Beispielbild und der Einheit Quadratzentimeter sind somit für die Breite 500 cm und für die Länge 200 cm als maximale Werte eingetragen.

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

Tabelle 25. Maßangaben für Artikel bestimmen
Eintrag Erläuterung

Einheit

Einheit eintragen, im Beispiel Quadratzentimeter. Den wichtigen Hinweis unter der Tabelle beachten.

Inhalt

Menge eintragen, auf die sich die Preisberechnung beziehen soll, im Beispiel pro 100 Quadratzentimeter.

Länge

Maximal bestellbare Länge eintragen.

Breite

Maximal bestellbare Breite eintragen.

Eingabegenauigkeit beachten: Nur ganze Zahlen möglich!

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

Ziffer eintragen

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

Ziffer für Eingabefelder eintragen:

  1. Klicken Sie auf das Tab Felder in der jeweiligen Artikelbearbeitung.
    → Das Freitextfeld Maßeingabe (siehe Freitextfeld) wird hier angezeigt.

  2. Geben Sie in dieses Freitextfeld eine Ziffer zur Steuerung der Anzeige der Eingabefelder im Layout ein.
    Folgende Definition gilt für unsere Beispielkonfiguration:
    1: Es soll nur das Feld für die Eingabe der Breite angezeigt werden.
    2: Es soll nur das Feld für die Eingabe der Länge angezeigt werden.
    3: Es sollen beide Felder angezeigt werden.

  3. Speichern Sie die Einstellungen.

Tipp

Das Setzen der Ziffer für das Freitextfeld kann in der Artikelsuche über die Gruppenfunktion für mehrere Artikel zugleich erfolgen.

Datenaustausch

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

Design für Maßeingabe konfigurieren

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

HTML-Code einfügen:

  1. Öffnen Sie das Menü CMS » Webdesign » Ordner: Layout » Ordner: ItemView.

  2. Wählen Sie das Template ItemViewSingleItem aus.

  3. Fügen Sie den folgenden HTML-Code ein.

  4. Speichern Sie die Einstellungen.

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

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

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

  • $InputWidth: Erzeugt das Eingabeformular für die Breite mit der CSS-Klasse PlentyOrder_InputWidth

  • $InputLength: Erzeugt das Eingabeformular für die Länge mit der CSS-Klasse PlentyOrder_InputLength

  • $InputMeasureUnit: Gibt die Einheit für die Eingabe zurück. Die Werte können 'm', 'cm' oder 'mm' sein, abhänging von der Einheit, die am Artikelpreis definiert wurde (am obigen Beispiel ist die Einheit am Artikelpreis Quadratzentimeter, also liefert$InputMeasureUnit’cm').

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

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

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

Bild 3 zeigt die daraus generierte Ansicht in Ihrem Webshop:

DE CMS Webdesign IemView Masseingabe 03

Bild 3: Eingabefelder für Maßeingabe im Webshop

Eingabefeld verbergen
Wichtig für verborgene Felder

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

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

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

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

5.5.9. Misc

CMS » Webdesign » Layout » Misc

Allgemeines

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

Grundstrukturen im plentymarkets-CMS

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

Misc: Templates

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

Tipp

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

MiscDatesList

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

Termine formatieren

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

Termine formatieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout » Misc.

  2. Öffnen Sie das Template MiscDatesList.
    → Der Code wird im Bearbeitungsfenster angezeigt.

  3. Passen Sie den Code Ihren Anforderungen entsprechend an. Fügen Sie z.B. wie unten beschrieben weitere Template-Variablen (Tabelle 1) ein.

  4. Speichern Sie die Einstellungen.

Template-Variablen

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

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

Tabelle 26. Template-Variablen des Templates MiscDatesList
Template-Variable Erläuterung

$MiscDatesListRow

Bestimmt den Layoutrahmen pro Termin.

$MiscDatesListItem

Darstellung bzw. Gestaltung eines Termins.

$City

Ort des Termins.

$Date

Anzeige des Datums des Termins.

$DateEnd

Anzeige des Enddatums des Termins bei mehrtägigen Terminen.

$Lang

Eingestellte Sprache des Termins.

$Preview

Vorschau des Textes. Es wird der erste Teil des Textes angezeigt, bis zu dem Punkt, der im Code durch die Template-Variable $PreviewBreak markiert ist.

$Text

Anzeige des Textes des Newseintrags.

$Time

Uhrzeit des Termins.

$TimeEnd

Anzeige der Uhrzeit des Terminendes.

$Title

Titel bzw. Überschrift des Termins.

$URL

URL des Termins.

Template-Variable einbinden

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

Template-Variable in eine Kategorie einbinden:

  1. Öffnen Sie das Menü Artikel » Kategorien.

  2. Öffnen Sie die gewünschte Kategorie.

  3. Fügen Sie die Template-Variable $Container_MiscDatesList an der gewünschten Stelle der Kategorie ein.

  4. Klicken Sie auf Speichern, um die Änderung zu sichern.

  5. Alternativ fügen Sie die Template-Variable in ein Template ein, z.B. im PageDesignContent.

Template-Variable in ein Template einbinden:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout.

  2. Öffnen Sie das gewünschte Template, z.B. PageDesignContent.

  3. Fügen Sie die Template-Variable $Container_MiscDatesList an der gewünschten Stelle des Templates ein.

  4. Klicken Sie auf Speichern, um die Änderung zu sichern.

MiscFAQsList

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

DE CMS Misc 01 SI

Bild 1: Anzeige einer FAQ im Webshop

FAQs formatieren

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

FAQs formatieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout » Misc.

  2. Öffnen Sie das Template MiscFAQsList.
    → Der Code wird im Bearbeitungsfenster angezeigt.

  3. Passen Sie den Code Ihren Anforderungen entsprechend an. Fügen Sie z.B. wie unten beschrieben weitere Template-Variablen (Tabelle 2) ein.

  4. Speichern Sie die Einstellungen.

Template-Variablen

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

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

Tabelle 27. Template-Variablen des Templates MiscFAQsList
Template-Variable Erläuterung

$MiscFAQsListRow

Bestimmt den Layoutrahmen pro FAQ.

$MiscFAQsListItem

Darstellung bzw. Gestaltung eines FAQ-Eintrags.

$Answer

Antwort einer FAQ.

$FaqID

ID einer FAQ.

$FaqNum

Name einer FAQ.

$FolderID

ID des Ordners einer FAQ.

$FolderName

Name des Ordners einer FAQ.

$Question

Frage einer FAQ.

Template-Variable einbinden

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

Template-Variable in eine Kategorie einbinden:

  1. Öffnen Sie das Menü Artikel » Kategorien.

  2. Öffnen Sie die gewünschte Kategorie.

  3. Fügen Sie die Template-Variable $Container_MiscFAQsList an der gewünschten Stelle der Kategorie ein.

  4. Klicken Sie auf Speichern, um die Änderung zu sichern.

  5. Alternativ fügen Sie die Template-Variable in ein Template ein, z.B. im PageDesignContent.

Template-Variable in ein Template einbinden:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout.

  2. Öffnen Sie das gewünschte Template, z.B. PageDesignContent.

  3. Fügen Sie die Template-Variable $Container_MiscFAQsList an der gewünschten Stelle des Templates ein.

  4. Klicken Sie auf Speichern, um die Änderung zu sichern.

MiscCustomerRegistrationForm

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

Kundenregistrierungsformular formatieren

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

Kundenregistrierung konfigurieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout » Misc » MiscCustomerRegistrationForm.

  2. Klicken Sie auf die Registerkarte MiscCustomerRegistrationFormContent.

  3. Fügen Sie den gewünschten Code ein.
    → Dies kann der Beispiel-Code weiter unten auf dieser Seite oder ein selbst erstellter Code sein.

  4. Nehmen Sie die Konfiguration im Tab Einstellungen gemäß Tabelle 3 vor.

  5. Speichern Sie die Einstellungen.

  6. Prüfen Sie das Ergebnis im Webshop und passen Sie den Code bzw. die Einstellungen bei Bedarf an.

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

Tabelle 28. Einstellungen des Templates MiscCustomerRegistrationForm
Einstellung Erläuterung

MiscCustomerRegistrationForm_ContentpageSelect

Die Seite wählen, auf die der Kunde nach der Registrierung (bei Erfolg oder im Fehlerfall) gelangt. Wird keine Seite gewählt, wird auf die Startseite verlinkt.

MiscCustomerRegistrationForm_AutomaticLoginAfterRegistration

Bei der Einstellung Ja wird der Anmeldevorgang nach der Registrierung automatisch ausgeführt. Bei Nein muss der Kunde sich nach der Registrierung separat einloggen.

ValidateName

Eingabe und Schreibweise des Namens des Kunden werden geprüft.

ValidateAddress

Eingabe und Schreibweise der Adresse des Kunden werden geprüft.

ValidateEmail

Eingabe und Schreibweise der E-Mail-Adresse des Kunden werden geprüft. Pflichtfeld für die Registrierung.

ValidatePhoneNumber, ValidateMobileNumber, ValidateFaxNumber

Eingabe, Schreibweise und Struktur der Telefonnummer, Mobilfunknummer und Faxnummer des Kunden werden geprüft.

ValidateVatNumber

Die Umsatzsteuer-Identifikationsnummer (USt-IdNr.) des Kunden wird geprüft.

ValidateFreeVars

Bei Bedarf die Zusatzfelder wählen, die geprüft werden sollen (Mehrfachauswahl möglich mit Strg bzw. cmd + Mausklick).

ValidatePostnumber

Die DHL-PostNummer wird geprüft.

Nachfolgend ein Beispiel eines HTML-Codes im Template MiscCustomerRegistrationForm:

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

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

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

DE CMS Misc 03 SI

Bild 2: Standardansicht eines Registrierungsformulars

Template-Variablen

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

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

Tabelle 29. Template-Variablen des Templates MiscCustomerRegistrationForm
Template-Variable Erläuterung

$MiscCustomerRegistrationForm_AutomaticLoginAfterRegistration

Automatischer Login nach Registrierung

$MiscCustomerRegistrationForm_ContentpageSelect

Landingpage

$MiscCustomerRegistrationFormContent

Inhalt des Registrierungsformulars

$IsValidAddressSaved

Abfrage, ob eine gültige E-Mail-Adresse hinterlegt ist

$FormOpen_CustomerRegistration

Öffnet das Registrierungsformular

$FormClose_CustomerRegistration

Schließt das Registrierungsformular

$Button_CustomerRegistration

Button zur Registrierung

$SalutationSelect

Anrede

$Company

Firma

$Firstname

Vorname

$Lastname

Nachname

$Street, $HouseNo

Straße, Hausnummer

$AddressAdditional

Adresszusatz

$ZIP, $City

PLZ, Ort

$CountrySelect

Land, per Dropdown-Menü auswählbar (Bild 2)

$Email, $EmailRepeat

E-Mail-Adresse, E-Mail-Adresse wiederholen

$Password, $PasswordRepeat

Passwort, Passwort wiederholen

$PhoneNumber, $FaxNumber, $MobileNumber

Telefonnummer, Faxnummer, Handynummer

$BirthDay, $BirthMonth, $BirthYear

Geburtsdatum: Tag, Monat, Jahr

$VATNumber

USt.-IdNr.

$PostIdent

Postnummer

$FreeText1 bis $FreeText8

Freitextfelder 1 bis 8

$ValidateAddress

Adresse prüfen

$ValidateEmail

E-Mail-Adresse prüfen

$ValidateFaxNumber

Faxnummer prüfen

$ValidateFreeVars

Freitextfelder prüfen

$ValidateMobileNumber

Handynummer prüfen

$ValidateName

Name prüfen

$ValidatePhoneNumber

Telefonnummer prüfen

$ValidatePostnumber

Postnummer prüfen

$ValidateVatNumber

USt.-IdNr. prüfen

Template-Variable einbinden

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

DE CMS Misc 02 SI

Bild 3: Template-Variable in eine Kategorieseite einbinden

Template-Variablen in eine Kategorieseite einbinden:

  1. Öffnen Sie das Menü Artikel » Kategorien.

  2. Öffnen Sie die Kategorie, mit der Sie das Kundenregistrierungsformular anzeigen wollen.

  3. Fügen Sie die Template-Variable $Container_MiscCustomerRegistrationForm an der gewünschten Stelle im Quellcode ein.

  4. Speichern Sie die Einstellungen.

Template-Variablen in ein Template einbinden:

  1. Öffnen Sie das Menü CMS » Webdesign.

  2. Öffnen Sie das Template, mit dem Sie das Kundenregistrierungsformular anzeigen wollen.

  3. Fügen Sie die Template-Variable $Container_MiscCustomerRegistrationForm an der gewünschten Stelle im Quellcode ein.

  4. Speichern Sie die Einstellungen.

5.5.10. Bestellvorgang

CMS » Webdesign » Bestellvorgang

Inhalt dieser Seite

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

Struktur des Bestellvorgangs

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

Gesetzliche Anforderungen

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

Grundeinstellungen

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

jQuery

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

Tracking-Funktionen

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

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

Warenkorb

CMS » Webdesign » Bestellvorgang » Warenkorb

Inhalt dieser Seite

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

Übersicht zur Konfiguration

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

Tab: Warenkorb

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

CSS-Formatierungen

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

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

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

Attributauswahl
Die Attributauswahl erscheint nur bei Artikeln, die über Attribute verfügen. Die Attribute werden zur Auswahl in Dropdown-Menüs 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-Menüs.

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 ihm dieses Lieferdatum angezeigt. Die Standardtexte Lieferdatum ändern und Lieferdatum können Sie ändern und zusätzlich einen Hinweis hinterlegen. Die Konfiguration des Lieferdatums für den Bestellvorgang nehmen Sie unter System » Mandant » Mandant wählen » Bestellvorgang » Einstellungen vor. Details dazu finden Sie auf der Handbuchseite Grundeinstellungen. Dort finden Sie auch den Code, den Sie ins CMS einfügen, damit die Lieferdatumsfunktion angezeigt wird.

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

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

Fehlermeldung konfigurieren

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

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

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

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

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

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

Tool zur Identifizierung von Elementen

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

Beispiel für die Anpassung eines Bereichs im Warenkorb

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

Orientierung

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

Optionen für die Anpassung im Untermenü: Titel

Bild 1 zeigt Standard-Einstellungen dieses Untermenüs:

DE CMS Webdesign Bearbeiten Bestellvor Warenkorb 01

Bild 1: Warenkorb; Optionen im Untermenü *Titel*

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

Tabelle 30. Warenkorb; Optionen im Untermenü Titel

Pos.

Einstellung

Erläuterung

1

Bilder-Galerie

Die Bilder-Galerie enthält alle Bilder für das Webshop-Design. Sie können über die Bilder-Galerie ein Bild in einen Bereich laden, indem Sie die URL des Bildes einfügen. Bild 1 zeigt ein Beispiel für den HTML-Code (Pfeil). Ergebnis: Bild 2, Pos. 1.
Legen Sie in der Bilder-Galerie individuelle Ordner für die verschiedenen Bereiche des Designs an.

2

Template-Variablen und -Funktionen

Öffnet eine Übersicht mit den Template-Variablen und -Funktionen des Templates sowie weiteren Template-Variablen- und -Funktionslisten.

3

Editor

Folgende Optionen sind verfügbar:
WYSIWYG-Editor = Editor mit umfangreicher Werkzeugleiste zur Bearbeitung.
CK-Editor = Leistungsfähiger Editor, der auch in anderen Bereichen verwendet wird.
Syntax-Editor = Code wird mit farblich hervorgehobener Syntaxstruktur angezeigt.
Textfeld = Code wird als reiner Text angezeigt.

4

Text vor

Der Hinweistext informiert den Webshopbesucher über wichtige Punkte zur Vorgehensweise beim Bestellvorgang. Je nach Design bzw. Template ist ein Standardtext voreingetragen. Sie können diesen Text bearbeiten oder ergänzen. Es ist auch möglich, ein Bild zu hinterlegen durch Einfügen des entsprechenden HTML-Codes inklusive der URL des Bildes (Bild 1, Pfeil).

5

Titel

Hier wird die Bezeichnung für den Titel hinterlegt, in diesem Fall die Bezeichnung Warenkorb (Bild 1, Pos. 5).

6

Weiter-Button

Der Weiter-Button bewirkt den Übergang aus dem Warenkorb zum Bestellvorgang. Der Kunde kann dazu diesen Button verwenden oder einen zweiten (gleichen) Button am Ende der Seite. Der Button steht im Standard auf anzeigen (Bild 1, Pos. 6) und wird mit nicht anzeigen ausgeblendet.
Tipp: Verbergen Sie den Button durch Wahl der Option Nicht anzeigen, wenn Sie möchten, dass der Kunde nicht an dieser Stelle den Warenkorb verlässt, sondern zunächst die ganze Seite prüft und dann den Button am Ende der Seite anklickt.
Die Buttons sowie Texte der Buttons bearbeiten Sie im gleichnamigen Tab.

7

Text nach

Hier bei Bedarf einen weiteren Hinweistext eintragen, der unten im Titelfeld angezeigt wird (Bild 1, Pos. 7).

Ansicht der Einstellungen im Webshop

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

DE CMS Webdesign Bearbeiten Bestellvor Warenkorb 02

Bild 2: Warenkorb; Umsetzung der Einstellungen im Untermenü *Titel*

Template-Variablen im Bereich Warenkorb

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

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

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

Dot-Template-Variablen

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

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

Tabelle 31. Template-Variablen im Warenkorb-Bereich
Variablenname Erläuterung

$CompanyCEO

Geschäftsführer der Firma; global verwendbare Variable

$CompanyCity

Ort des Firmensitzes; global verwendbare Variable

$CompanyCountry

Land des Firmensitzes; global verwendbare Variable

$CompanyEmail

E-Mail-Adresse der Firma; global verwendbare Variable

$CompanyFon

Telefonnummer der Firma; global verwendbare Variable

$CompanyHotline

Hotline der Firma; global verwendbare Variable

$CouponCampaign

Gutscheinkampagne; global verwendbare Variable

$CouponCampaignID

ID der Gutscheinkampagne; global verwendbare Variable

$CouponCode

Gutschein-Code; global verwendbare Variable

$Currency

Währung; global verwendbare Variable

$CustomerEmail

E-Mail-Adresse des Kunden; global verwendbare Variable

$CustomerID

Kunden-ID; global verwendbare Variable

$CustomerName

Name des Kunden; global verwendbare Variable

$GtcTransAsync

Auftrags- und Artikelparameter
Herkömmlicher Tracking-Code von Google Analytics
Beim asynchronen Tracking-Code von Google Analytics handelt es sich um ein verbessertes JavaScript-Code-Snippet, bei dem der Tracking-Code ga.js im Hintergrund geladen wird. Zu den Vorteilen gehört u.a. eine kürzere Ladezeit. Details direkt von Google.

$ItemAmountGrossDot

Artikelwert brutto; Nachkommazahlen werden durch einen Punkt getrennt.

$ItemAmountNetComma

Artikelwert netto; Nachkommazahlen werden durch ein Komma getrennt.

$ItemAmountNetDot

Artikelwert netto; Nachkommazahlen werden durch einen Punkt getrennt.

$ItemIDListComma

Auflistung der Artikel-IDs; zwischen den IDs steht ein Komma als Trennzeichen.

$ItemIDListPipe

Auflistung der Artikel-IDs; zwischen den IDs steht ein senkrechter Strich als Trennzeichen.

$ItemQuantity

Anzahl der Artikel

$IsNet

Diese global verwendbare Variable liefert die Werte TRUE, wenn der Inhalt des Warenkorbs zu einer Netto-Bestellung wird (abhängig von den Einstellungen des Systems), und FALSE, wenn es eine Brutto-Bestellung wird.

$MethodOfPayment

Zahlungsart

$MethodOfPaymentID

ID der Zahlungsart

$ReferrerID

Herkunfts-ID; global verwendbare Variable

$ReferrerName

Herkunftsname; global verwendbare Variable

$ShippingCostsGrossComma

Versandkosten brutto; Nachkommazahlen werden durch ein Komma getrennt.

$ShippingCostsGrossDot

Versandkosten brutto; Nachkommazahlen werden durch einen Punkt getrennt.

$ShippingCostsNetComma

Versandkosten netto; Nachkommazahlen werden durch ein Komma getrennt.

$ShippingCostsNetDot

Versandkosten netto; Nachkommazahlen werden durch einen Punkt getrennt.

$ShippingCountry

Lieferland

$ShippingCountryID

ID des Lieferlandes

$ShippingProfile

Versandprofil

$ShippingProfileID

ID des Versandprofils

$ShippingProvider

Versanddienstleister

$ShippingProviderID

ID des Versanddienstleisters

$TotalAmountGrossComma

Gesamtsumme brutto; Nachkommazahlen werden durch ein Komma getrennt.

$TotalAmountGrossDot

Gesamtsumme brutto; Nachkommazahlen werden durch einen Punkt getrennt.

$TotalAmountNetComma

Gesamtsumme netto; Nachkommazahlen werden durch ein Komma getrennt.

$TotalAmountNetDot

Gesamtsumme netto; Nachkommazahlen werden durch einen Punkt getrennt.

Tracking

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

Beachten Sie dazu die Handbuchseite Google Analytics.

Individueller Bestellvorgang

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

Wechsel auf den Individuellen Bestellvorgang

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

Bestandteile des Individuellen Bestellvorgangs in Callisto Light

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

Kategorien

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

Tabelle 32. Vordefinierte Template-Funktionen
Funktionsaufruf Zurückgelieferter Link

Link_CustomerRegistration()

Kundenregistrierung

Link_LostPassword()

Passwort vergessen

Link_OrderConfirmation()

Bestellbestätigung

Link_Checkout(1)

Anmeldung

Link_Checkout(2)

Warenkorb

Link_Checkout(3)

Kasse

Link_Checkout(4)

Bestelldetails

Link_Checkout(5)

Anschrift

Link_Checkout(x)

x: Nummer des Bestellschritts im Bestellvorgang

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

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

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

Codebeispiel 1 stammt aus der Kategorie Warenkorb von Callisto Light. Kunden wird darüber der Button Zur Kasse angezeigt (Bild 1). Im Code wird auch geprüft, ob der Kunde im System angemeldet ist. Ist er nicht angemeldet, wird für das href-Attribut des Buttons die Funktion Link_CustomerRegistration() hinterlegt. Der Kunde wird bei Klick auf den Button Zur Kasse zur Kundenregistrierung geleitet. Dort kann er sich 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.

DE CMS IndividuellerBestellvorgang 01

Bild 1: Button Zur Kasse, der durch Codebeispiel 1 erzeugt wird

Bestellschritte

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

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

  1. Warenkorb

  2. Anmeldung

  3. Kasse

  4. Bestelldetails

  5. Anschrift

  6. Zahlung & Versand

  7. Bestellübersicht & Kaufabschluss

  8. Bestellvorgang

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

DE CMS IndividuellerBestellvorgang 02

Bild 2: Voreingestellte Bestellschritte in *Callisto Light*

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

Tabelle 33. Bestellschritte des Individuellen Bestellvorgangs
Nr. Schritt im Backend Funktion im Frontend

1

Warenkorb

Übersicht aller Artikel, die der Kunde kaufen möchte.

2

Anmeldung

Der Kunde entscheidet, ob er als Gast oder als registrierter Benutzer zur Kasse geht.

3

Kasse

Dient als Kopfzeile für die folgenden Bestellschritte (Bild 3): * Bestelldetails * Anschrift * Zahlung & Versand * Übersicht & Vertragsabschluss

4

Bestelldetails

Wird im Frontend als Tab Bestelldetails der logischen Einheit Kasse dargestellt.

5

Anschrift

Wird im Frontend als Tab Anschrift der logischen Einheit Kasse dargestellt.

6

Zahlung & Versand

Wird im Frontend als Tab Zahlung & Versand der logischen Einheit Kasse dargestellt.

7

Bestellübersicht & Kaufabschluss

Wird im Frontend als Tab Übersicht & Vertragsabschluss der logischen Einheit Kasse dargestellt.

8

Bestellvorgang

Stellt zur Auswahl, wohin der Kunde als Nächstes navigieren kann: * Warenkorb * Kasse * Anmeldung

Hinweis: Bestellschritt ist namensgleich mit dem Bestellvorgang als Ganzes. Diese Namensgleichheit beruht auf technischen Begebenheiten.

9

Frei

Nicht in Benutzung. Kann konfiguriert werden.

10

Frei

Nicht in Benutzung. Kann konfiguriert werden.

Kopfzeile Kasse

Der dritte Bestellschritt, die Kategorie Kasse, stellt einen Sonderfall dar, da er die in Tabelle 2 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 sehen, in welchem Schritt sie sich befinden (Bild 3).

DE CMS IndividuellerBestellvorgang 03

Bild 3: Bestellschritte der Kategorie *Kasse*

Tabelle 34. Bestellschritte der Kopfzeile Kasse
Bestellschritte der Kategorie Kasse Inhalt

1. Bestelldetails

Eingabefelder: * Ihr Zeichen * Hinweise & Sonderwünsche * Gutschein-Codes

2. Anschrift

  • Rechnungsanschrift

  • Angabe abweichender Lieferanschrift

Optionale Felder: * Fax * Mobile * Postnummer * USt-IdNr.

3. Zahlung & Versand

  • Auswahl der Zahlungsarten

  • Auswahl des Versanddienstleisters

4. Übersicht & Vertragsabschluss

  • Zusammenfassung der Bestellung

  • AGB-Einwilligung

  • Newsletter-Anmeldung

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

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

Tabelle 35. Bestellschritte in der Kategorie Kasse
Bestellschritt HTML-Kommentar

Bestelldetails

STEP 1: Order details

Anschrift

STEP 2: Addresses

Zahlung & Versand

STEP 3: Shipping & Payment

Übersicht & Vertragsabschluss

STEP 4: Overview & Confirmation

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

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

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

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

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

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

	</div>
	{% endif %}

Codebeispiel 2: Bestellschritte der Kategorie Kasse

Zusätzliche Seiten

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

  • Login

  • Logout

  • Kundenregistrierung

  • Passwort vergessen

  • Bestellbestätigung

Inhalte der Bestellschritte

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

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

HTML-Gerüst

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

Tabelle 36. Verfügbare Checkout-Templates
Kategorie Container

Warenkorb

Container_CheckoutBasketItemsList()
Container_CheckoutTotals()
Container_CheckoutCoupon()

Bestelldetails

Container_CheckoutCoupon()

Anschrift

Container_CheckoutCustomerInvoiceAddress()
Container_CheckoutCustomerShippingAddress()

Zahlung & Versand

Container_CheckoutMethodsOfPaymentList()
Container_CheckoutShippingProfilesList()

Bestellübersicht & Kaufabschluss

Container_CheckoutMethodsOfPaymentList()
Container_CheckoutShippingProfilesList()

Laden einzelner Elemente

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

Tabelle 37. Template-Funktionen für die Bestelldetails
Funktion Standard-Wert Erklärung

SetGlobal("ShowTabDetails", true);

true

Tab Bestelldetails wird in Kopfzeile Kasse angezeigt.

SetGlobal("ShowCustomerSign", true);

true

Zeigt das Eingabefeld Ihr Zeichen.

SetGlobal("ValidateCustomerSign", false);

false

Validiert das Eingabefeld Ihr Zeichen.

SetGlobal("ShowCustomerNotice", true);

true

Zeigt das Eingabefeld Ihre Hinweise & Sonderwünsche.

SetGlobal("ShowCouponInDetails", true);

true

Zeigt das Eingabefeld Gutschein-Code.

Ausgabe der Zahlungsarten

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

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

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

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


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

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

Codebeispiel 3: Template *CheckoutMethodsOfPaymentList*

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

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

Codebeispiel 4: Change-Event im Template *CheckoutMethodsOfPayment*

Prüfung der Bestelldaten

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

Tabelle 38. Validatoren für den Bestellvorgang
Validator-Template Erläuterung

ValidatorCustomerInvoiceAddress

Validiert Eingaben für die Rechnungsadresse.

ValidatorCustomerShippingAddress

Validiert Eingaben für die Lieferanschrift.

ValidatorPlaceOrder

Validiert Eingaben für den letzten Bestellschritt Übersicht & Vertragsabschluss.

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

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

Codebeispiel 5: Template *ValidatorPlaceOrder*

Google reCAPTCHA für Kundenregistrierung einrichten

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

Google reCAPTCHA einrichten:

  1. Öffnen Sie das Menü System » Mandant » Mandant wählen » Webshop » Einstellungen.

  2. Wählen Sie Ja unter Google reCAPTCHA in Registrierung abfragen.

  3. Geben Sie den Google reCAPTCHA Websiteschlüssel ein.

  4. Geben Sie den Google reCAPTCHA Geheimer Schlüssel ein.

  5. Speichern Sie die Einstellungen.

Kategorie Kundenregistrierung anpassen

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

Kategorie Kundenregistrierung anpassen:

  1. Öffnen Sie das Menü Artikel » Kategorien.

  2. Öffnen Sie den Ordner des Designs, das Sie bearbeiten möchten, z.B. Callisto Light 3.

  3. Öffnen Sie die Kategorie Registrierung.

  4. Wechseln Sie in das Tab Beschreibung 1.

  5. Fügen Sie die Template-Funktion {% GetCaptcha() %} oberhalb des Buttons Registrierung abschließen ein.

  6. Suchen Sie den Code plenty.AuthenticationService.registerCustomer();.

  7. Ersetzen Sie den Code durch registration();.

  8. Suchen Sie nach <script>.

  9. Fügen Sie innerhalb des Script-Bereichs das folgende Code-Beispiel ein.

  10. Speichern Sie die Einstellungen.

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

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

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

    }
    return false;
}
Parameter für die Funktion GetCaptcha()

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

  • GetCaptcha('normal'): Standardwert für das normale Google reCAPTCHA.

  • GetCaptcha('compact'): Parameter für das kompakte Google reCAPTCHA.

  • GetCaptcha('invisible'): Parameter für das unsichtbare Google reCAPTCHA.

Google reCAPTCHA für Gastbestellung einrichten

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

CheckoutCustomerInvoiceAddress anpassen

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

CheckoutCustomerInvoiceAddress anpassen:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout » Checkout » CheckoutCustomerInvoiceAddress.

  2. Suchen Sie nach </form>.

  3. Fügen Sie die Template-Funktion {% GetCaptcha() %} oberhalb des </form>-Tags ein.

  4. Speichern Sie die Einstellungen.

Kategorie Anschrift anpassen

Passen Sie anschließend die Kategorie Anschrift an.

Kategorie Anschrift anpassen:

  1. Öffnen Sie das Menü Artikel » Kategorien.

  2. Öffnen Sie den Ordner des Designs, das Sie bearbeiten möchten, z.B. Callisto Light 3.

  3. Öffnen Sie die Kategorie Anschrift.

  4. Wechseln Sie in das Tab Beschreibung 1.

  5. Suchen Sie den Code plenty.CheckoutService.registerGuest().done(function().

  6. Ersetzen Sie den 4-zeiligen Code-Block durch das nachfolgende Code-Beispiel.

  7. Speichern Sie die Einstellungen.

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

    }).fail(function(){

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

});
Kaufabwicklung

CMS » Webdesign » Bestellvorgang » Kaufabwicklung

Kaufabwicklung

Die Kaufabwicklung bildet den zweiten Bereich des Bestellvorgangs. In diesen gelangt der Kunde, indem er zur Kasse geht.

Gesetzliche Anforderungen

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

Kaufabwicklung: Design bearbeiten

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

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

  • Kundenregistrierung
    Hier können Sie einstellen, welche Felder ein Kunde bei der Registrierung ausfüllen muss, welche Angaben er optional machen kann 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, nachdem er auf Zur Kasse geklickt hat. Der Kunde kann wählen, ob er als Gast zur Kasse geht, sich registriert oder, wenn er bereits registriert ist, sich anmeldet. Mit den Hinweistextfeldern können Sie ihm 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 er in diesen Bereich.

  • Rechnungsanschrift
    Hierhin gelangt der Kunde, nachdem er im Login-Bereich auf Weiter geklickt hat. Welche Felder ihm angezeigt werden, hängt davon ab, ob er sich registrieren möchte oder als Gast den weiteren Bestellvorgang durchläuft. Sie wählen, ob die Straße und die Hausnummer in 2 Zeilen, d.h. untereinander, oder in einer Zeile, d.h. nebeneinander, dargestellt werden. Auch die Postleitzahl und den Ort können in einer oder in zwei Zeilen dargestellt werden. Mittels CSS können Sie außerdem festlegen, wo z.B. die Felder Straße und Hausnummer dargestellt werden. Sie können z.B. für das englischsprachige Layout definieren, dass das Feld Hausnummer vor der Straße angezeigt wird. Tragen Sie dazu an der entsprechenden Stelle im CSS statt float: left; einfach float: right; ein. Tragen Sie auch in das Feld selbst House number + Street ein, damit der Kunde weiß, welches Feld für welche Informationen gedacht ist. Beachten Sie weiter unten die Hinweise zum Adresszusatz.

  • Lieferanschrift
    Es werden die gleichen Felder wie im Bereich Rechnungsanschrift mit den dort hinterlegten Informationen angezeigt. Die Felder Packstation, PostIdent-Nr. und Packstations-Nr. werden nur angezeigt, wenn Sie Packstationen als Lieferadresse erlauben und der Kunde eine Versandart gewählt hat, bei der dies möglich ist. Beachten Sie weiter unten die Hinweise zum Adresszusatz.

  • DHL-Postfinder
    In diesem Untermenü konfigurieren Sie die Einstellungen zum DHL-Postfinder.

  • Zahlungsart
    Der Kunde hat bereits im Warenkorb die Möglichkeit, eine Zahlungsart zu wählen. Stellen Sie hier ein, dass ihm diese Zahlungsart nicht noch einmal angezeigt werden soll. Passen Sie dann jedoch die Nummerierung der nachfolgenden Überschriften an. Wenn Sie hier die Option Nicht anzeigen wählen und der Kunde ändert seine vorhergehenden Angaben so stark, dass die von ihm im Warenkorb gewählte Zahlungsart nicht mehr möglich ist, wird Ihre Einstellung überschrieben. Der Kunde gelangt dann trotzdem automatisch zu diesem Schritt der Kaufabwicklung.
    Dies gilt auch für die Optionen Bankinformationen, MPay 24 Kreditkarte, MPay 24 Kreditkarte und MPay 24 Mobile, da hier zusätzlich Informationen von Kunden benötigt werden.

  • Versandart
    Der Kunde hat bereits im Warenkorb die Möglichkeit, eine Versandart zu wählen, so dass Sie hier einstellen können, dass ihm diese nicht noch einmal angezeigt werden soll. Sie sollten dann jedoch unbedingt die Nummerierung der nachfolgenden Überschriften anpassen. Wählen Sie hier die Option Nicht anzeigen und der Kunde ändert seine Angaben so stark, dass die im Warenkorb gewählte Versandart nicht mehr möglich ist, wird Ihre Einstellung überschrieben. Der Kunde gelangt dann trotzdem automatisch zu diesem Schritt der Kaufabwicklung.

  • Bestellübersicht
    Der Kunde sieht hier noch einmal seine Angaben in einer Übersicht und kann durch Klicken auf Zahlungspflichtig bestellen seine Bestellung beenden. Der Auftrag wird in Ihrem System angelegt. Der Bereich Bestellübersicht enthält die Option Position, anhand derer Sie die Position in der Übersicht bestimmen können.

Adresszusatz nicht an alle Versanddienstleister übertragbar

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

Zu folgenden Versanddienstleistern wird der Adresszusatz derzeit nicht übermittelt:

DHL Freight
DHL Supply Chain
Swiss Post

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

Tipp: Artikeldetails

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

Button: Zahlungspflichtig bestellen

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

Beispiel: Menüeinstellungen und Ansicht im Webshop

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

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

DE CMS Bestell Kaufabwicklung 01

Bild 1: Kaufabwicklung; Optionen im Untermenü *Bestellübersicht*

Einstellungen im Untermenü Bestellübersicht

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

Tabelle 39. Kaufabwicklung; Optionen im Untermenü Bestellübersicht
Pos. im Bild Einstellung Erläuterung

1

Titel

Der hier eingetragene Titel erscheint als Bereichsüberschrift.

2 - 10

Position

Mit den Positionen wird die Anordnung der Elemente in der Bestellübersicht verändert. Wenn ein Element in der Bestellübersicht nicht angezeigt werden soll, wird dies im Bereich CSS realisiert. Dazu wird {display:none;} an der entsprechenden Stelle im Code eingetragen.
Tipp: Den CSS-Code prüfen, wenn Elemente nicht angezeigt werden, und für diese Elemente ggf. den Befehl {display:none;} aus dem Code löschen.
Wichtig: Dem Abschnitt Artikel die Position 9 bzw. eine Position am Ende der Bestellübersicht in unmittelbarer Nähe zum Kaufen-Button geben. Dies wird insbesondere auch in der sogenannten Button-Lösung gefordert.
Wurde das Design des Webshops individuell angepasst, darauf achten, die Positionen entsprechend zu vergeben.

10

Artikel

Überschrift der Artikelübersicht in der Bestellübersicht.

10

Artikelüberschriften

Überschriften der Bereiche in der Artikelübersicht.
Die Überschriften werden durch Überschreiben der Einträge in den Textfeldern geändert.

10

Artikeldetails

Die Artikeldetails, die in der Bestellübersicht angezeigt werden sollen, mit einem Häkchen markieren.
In der Grundeinstellung sind alle Details markiert.
Details zu Artikeln können auch über Merkmale realisiert werden.

11

Text nach Summen

Der eingetragene Text erscheint unmittelbar unterhalb der Gesamtsumme des Auftrags.
Auch allgemeine Hinweise z.B. zu Zusatzkosten oder anderen Themen, wie der Button-Lösung, können eingetragen werden. Wenn ein Text eingetragen wurde, wird er unabhängig vom Lieferland immer dargestellt.

12

Hinweis EU-Lieferungen

Der eingetragene Text erscheint unterhalb der Gesamtsumme des Auftrags. Wenn etwas bei Text nach Summen eingetragen ist, dann erscheint der Hinweis EU-Lieferungen darunter.
Auch allgemeine Hinweise zu z.B. Zusatzkosten oder anderen Themen, wie der Button-Lösung, können eingetragen werden. Nur wenn es sich bei dem Lieferland um ein EU-Mitgliedsland handelt, wird der eingetragene Text dargestellt. Dies bei der Formulierung beachten.

13

Hinweis Ausfuhrlieferungen

Der eingetragene Text wird unterhalb der Gesamtsumme des Auftrags angezeigt. Wenn etwas bei Text nach Summen eingetragen ist, wird der Hinweis EU-Lieferungen darunter angezeigt.
Auch allgemeine Hinweise zu z.B. Zusatzkosten oder anderen Themen, wie der Button-Lösung, können eingetragen werden. Nur wenn es sich bei dem Lieferland nicht um ein EU-Mitgliedsland handelt, wird der eingetragene Text dargestellt. Dies bei der Formulierung beachten.

14

Text vor Button

Hier z.B. einen Hinweis eintragen, der den Kunden noch einmal auffordert, seine Daten zu prüfen.

15

Text nach

Der eingetragene Text wird unterhalb der Bestellübersicht angezeigt.

Ansicht der Einstellungen im Webshop
DE CMS Bestell Kaufabwicklung 02

Bild 2: Kaufabwicklung; Umsetzung der Einstellungen im Untermenü *Bestellübersicht*

Kundenregistrierung einrichten (B2B)

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

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

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

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

Tipp: Template-Funktion nutzen

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

DE CMS Bestell Kaufabwicklung 03

Bild 3: Kaufabwicklung; Untermenü *Kundenregistrierung*

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

Pflichtfeld Telefonnummer

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

Bilder-Galerie und Template-Variablen und -Funktionen
DE CMS Bestell Kaufabwicklung 04

Bild 4: Kaufabwicklung; Template-Variablen und -Funktionen

Bilder-Galerie

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

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

Template-Variablen und -Funktionen

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

Beispiel: Darstellung von Preisen

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

Dot-Variablen

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

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

Design-Beispiel

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

Kaufabwicklung als Tabs

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

DE CMS Bestell Kaufabwicklung 05

Bild 5: Kaufabwicklung; Darstellung in Tabs

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

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

  1. Kopieren Sie den folgenden Code

  2. Öffnen Sie das Menü CMS » Webdesign.

  3. Öffnen Sie das Untermenü Layout » CSS » CSSOrder.

  4. Fügen Sie den Code anschließend an den bestehenden Code ein.

  5. Speichern Sie die Einstellungen.

Code für die Darstellung der Kaufabwicklung als Tabs:

/* TAB CHECKOUT */

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

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

Allgemeines zum DHL-Postfinder

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

Konfiguration

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

CSS Bestellvorgang

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

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

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

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

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

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

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

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

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

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

CSS für den Bestellvorgang konfigurieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout » CSS » CSSOrder.

  2. Fügen Sie den CSS-Code am Ende des Bearbeitungsfensters im Tab CSSOrder ein.

  3. Speichern Sie das CSS.

CSS Mein Konto

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

DE CMS Bestell Kaufab DHL Postfinder 01 SI

Bild 1: Z-Index anpassen

CSS für Mein Konto konfigurieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout » CSS » CSSMyAccount.

  2. Suchen Sie die Zeile (Suchfunktion des Browsers): "z-index: 400010;".
    Wichtig: Wählen Sie dazu in der Toolbar oben rechts die Editor-Einstellung Textfeld.

  3. Passen Sie die Zeile wie folgt an "z-index: 40010;".

  4. Speichern Sie das CSS.

Texte

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

DE CMS Bestell Kaufab DHL Postfinder 02 SI

Bild 2: Texte anpassen, Beispiel *Mein Konto » Untermenü: Lieferanschrift ändern*

Texte konfigurieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Bestellvorgang » Kaufabwicklung » Untermenü: Lieferanschrift.

  2. Passen Sie folgende Texte an:
    Postnummer: Tragen Sie Postnummer ein.
    Packstation/Postfiliale suchen: Tragen Sie Packstation oder Postfiliale suchen ein.

  3. Speichern Sie die Einstellungen.

  4. Öffnen Sie das Menü CMS » Webdesign » Mein Konto » Untermenü: Lieferanschrift ändern.

  5. Passen Sie folgende Texte an:
    Adresszusatz: Tragen Sie Adresszusatz ein.
    Postnummer: Tragen Sie Postnummer ein.
    Packstation/Postfiliale suchen: Tragen Sie Packstation oder Postfiliale suchen ein.

  6. Speichern Sie die Einstellungen.

Fehlermeldungen

Passen Sie die Fehlermeldungen in den Sprachpaketen an.

DE CMS Bestell Kaufab DHL Postfinder 03 SI

Bild 3: Fehlermeldungen anpassen

Fehlermeldungen konfigurieren:

  1. Öffnen Sie das Menü System » Mandant » Global » Sprachpakete.

  2. Wählen Sie oben die Sprache (Standard: de) und den Bereich Fehlermeldungen.

  3. Klicken Sie auf die Lupe.
    → Die Fehlermeldungen werden angezeigt.

  4. Passen Sie die Fehlermeldungen Nr. 89 und Nr. 93 an: Ändern Sie die Bezeichnung PostIdent Nummer in: Postnummer.

  5. Speichern Sie die Einstellungen.

Menü: DHL-Packstation

Die Funktion muss nun noch im Menü aktiviert werden.

DE CMS Bestell Kaufab DHL Postfinder 04 SI

Bild 4: Menü *DHL-Packstation*

DHL-Packstation aktivieren:

  1. Öffnen Sie das Menü System » Mandant » Mandant wählen » Bestellvorgang » DHL-Packstation.

  2. Wählen Sie für Packstationen in Lieferadressen erlauben die Einstellung Ja.

  3. Speichern Sie die Einstellungen.

Funktion

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

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

DE CMS Bestell Kaufab DHL Postfinder 05 SI

Bild 5: DHL-Postfinder in der *Kaufabwicklung*

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

DE CMS Bestell Kaufab DHL Postfinder 06 SI

Bild 6: Anzeige der gefunden Postfilialen bzw. *Packstationen*

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

Tipp: Titel des Popup-Fensters

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

Bestellbestätigung

CMS » Webdesign » Bestellvorgang » Bestellbestätigung

Allgemeines

Die Bestellbestätigung bildet den Abschluss des Bestellvorgangs.

Bestellbestätigung: Design bearbeiten

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

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

Tracking

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

Bestellbestätigung

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

Zahlungsarten

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

  • Bestellbestätigung

  • PayPal Express
    Es ist möglich, die Weiterleitungsart von PayPal Express bei der Bestellbestätigung auf JavaScript zu ändern. Damit wird ein korrektes Tracking sichergestellt. Die Einstellung finden Sie im Untermenü PayPal Express unter der Option Weiterleitungsart.

  • PayPal

  • Sofortüberweisung

  • Moneybookers

  • BillSAFE

  • Klarna

  • ClickAndBuy

  • Paymorrow

  • iclear

  • Heidelpay

  • ExperCash

  • EOS

  • Santander Consumer Bank (vorher CCBank)
    Das Untermenü Santander Consumer Bank beinhaltet 3 Felder, die bei den anderen Zahlungsarten nicht vorhanden sind. Dies sind die Felder Händlernummer, Linkinhalt und Fehlertext. Da bei der Einrichtung der Zahlungsart Santander im Menü System » Aufträge » Zahlung » Zahlungsarten keine Schnittstelle zur Santander Consumer Bank eingerichtet wird, müssen Sie hier Ihre Händlernummer eintragen. Bei Linkinhalt tragen Sie ein, was dann als Linktext in der Bestellbestätigung angezeigt werden soll und bei Fehlertext hinterlegen Sie eine Nachricht, die dem Kunden im Fehlerfall angezeigt werden soll bzw. wenn die Zahlungsart nicht nutzbar ist.
    Beachten Sie dazu die Handbuchseite Santander Consumer Bank.

  • SixCardSaferpay

  • QPAY

  • MasterPayment

Template-Variablen und -Funktionen in der Bestellbestätigung

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

Tipp

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

Template-Variable Auftragsherkunft

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

Liste aller Template-Variablen im Bereich Bestellbestätigung

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

Tabelle 40. Template-Variablen in der Bestellbestätigung
Template-Funktion/-Variable Erläuterung

{% Container_ItemViewBasketItemsList() %} bis {% Container_ItemViewBasketItemsList2() %}

Damit werden die Artikel angezeigt, die sich im Warenkorb befinden.

{% Container_ItemViewCrossSellingItemsList2() %} und {% Container_ItemViewCrossSellingItemsList3() %}

Im Bestellvorgang CrossSelling-Artikel der Artikel anzeigen, die sich im Warenkorb befinden. Dazu muss im Menü CMS » Webdesign » Layout im Template ItemViewCrossSellingItemsList2 bzw. ItemViewCrossSellingItemsList2 im Tab Einstellungen für die Funktion ItemViewCrossSellingItemsList2_FromBasket bzw. ItemViewCrossSellingItemsList3_FromBasket die Einstellung JA gewählt werden.

$Currency

Währung

$CustomerEmail

E-Mail-Adresse des Kunden

$CustomerID

Kunden-ID

$CustomerName

Name des Kunden

$GtcTrans

Auftrags- und Artikelparameter
Herkömmlicher Tracking-Code von Google Analytics

$GtcTransAsync

Auftrags- und Artikelparameter, Asynchroner Code
Beim asynchronen Tracking-Code von Google Analytics handelt es sich um ein verbessertes JavaScript-Code-Snippet, bei dem der Tracking-Code ga.js im Hintergrund geladen wird. Zu den Vorteilen gehört u.a. eine kürzere Ladezeit.

$ItemAmountGrossComma

Artikelwert brutto; Nachkommazahlen werden durch ein Komma getrennt.

$ItemAmountGrossDot

Artikelwert brutto; Nachkommazahlen werden durch einen Punkt getrennt.

$ItemAmountNetComma

Artikelwert netto; Nachkommazahlen werden durch ein Komma getrennt.

$ItemAmountNetDot

Artikelwert netto; Nachkommazahlen werden durch einen Punkt getrennt.

$ItemIDListComma

Auflistung der Artikel-IDs; zwischen den IDs steht ein Komma als Trennzeichen.

$ItemIDListPipe

Auflistung der Artikel-IDs; zwischen den IDs steht ein senkrechter Strich als Trennzeichen.

$ItemQuantity

Anzahl der Artikel

$IsNet

Diese Template-Variable liefert die Werte TRUE, wenn der Inhalt des Warenkorbes zu einer Netto-Bestellung wird (abhängig von den Einstellungen des Systems), und FALSE, wenn es eine Brutto-Bestellung wird.

$LastOrderReferrerID

ID der vorhergehenden bzw. ursprünglichen Herkunft

$LastOrderReferrerName

Name der vorhergehenden bzw. ursprünglichen Herkunft

$OrderID

Auftrags-ID

$MethodOfPayment

Zahlungsart

$MethodOfPaymentID

ID der Zahlungsart

$ReferrerID

Herkunfts-ID

$ReferrerName

Herkunftsname

$ShippingCostsGrossComma

Versandkosten brutto; Nachkommazahlen werden durch ein Komma getrennt.

$ShippingCostsGrossDot

Versandkosten brutto; Nachkommazahlen werden durch einen Punkt getrennt.

$ShippingCostsNetComma

Versandkosten netto; Nachkommazahlen werden durch ein Komma getrennt.

$ShippingCostsNetDot

Versandkosten netto; Nachkommazahlen werden durch einen Punkt getrennt.

$ShippingCountry

Lieferland

$ShippingCountryID

ID des Lieferlandes

$ShippingProfile

Versandprofil

$ShippingProfileID

ID des Versandprofils

$ShippingProvider

Versanddienstleister

$ShippingProviderID

ID des Versanddienstleisters

$TotalAmountGrossComma

Gesamtsumme brutto; Nachkommazahlen werden durch ein Komma getrennt.

$TotalAmountGrossDot

Gesamtsumme brutto; Nachkommazahlen werden durch einen Punkt getrennt.

$TotalAmountNetComma

Gesamtsumme netto; Nachkommazahlen werden durch ein Komma getrennt.

$TotalAmountNetDot

Gesamtsumme netto; Nachkommazahlen werden durch einen Punkt getrennt.

5.5.11. Mein Konto

CMS » Webdesign » Mein Konto

Inhalt dieses Kapitels

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

Mein Konto bezeichnet den Bereich im Webshop, in den der Kunde nur gelangt, wenn er sich registriert hat. Hier kann er all seine bisher getätigten Käufe sowie von ihm eingegebene Informationen wie z.B. seine Kontaktdaten sehen.

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

Grundeinstellungen

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

Mein Konto: Design bearbeiten

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

CSS-Anpassung

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

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

  • Login

  • Mein Konto

  • Kundendaten

  • Persönliche Daten

  • Kontaktinformationen

  • Bankinformationen

  • Passwort ändern

  • Newsletter

  • Auftragshistorie

  • Bestellübersicht

  • Lieferanschrift ändern

  • Versandart ändern

  • Zahlungsart ändern

  • Artikel ändern

  • Retoure

  • Abonnementhistorie

  • Abonnementübersicht

  • Abonnement ändern

  • Artikel ändern

  • Merkliste

  • Wunschzettel

  • Tickets

  • Gutscheine

  • Zeitkonto

  • Dokumente

  • Datenexport

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

Wiederkehrende Einstellungen

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

Tabelle 41. Erläuterungen zu mehrfach vorkommenden Einstellungen der Untermenüs
Einstellung Erläuterung

Titel

Die Menü-Überschrift, wie sie Kunden im Webshop angezeigt werden soll.

Text vor & Text nach

Hinweise oder Begrüßungstexte passend zum Menü hinterlegen.
Diese beiden Felder schließen jeweils alle Punkte eines Menüs ein, d.h. Text vor steht direkt unter dem Titel und Text nach erst nach allen anderen Menüpunkten.

Position (Hauptmenüpunkt)

Die Reihenfolge der Menüs in der Hauptebene durch Auswahl der Positionsnummer aus dem Dropdown-Menü festlegen.

Position (Untermenü)

Container 1: Wird links in der Bestellübersicht angezeigt.
Container 2: Wird rechts in der Bestellübersicht angezeigt.
Mit den Positionsnummern die Reihenfolge festlegen.
Werden z.B. für alle Elemente Container 1 und fortlaufende Positionsnummern gewählt, erscheinen die Elemente links untereinander in der durch die Positionsnummern bestimmten Reihenfolge.
Beide Container nutzen, um Elemente nebeneinander zu positionieren.

Position (Untermenü Artikel)

Das Untermenü Artikel unten oder oben positionieren.
Oben = über den weiteren Untermenüs des Bereichs
Unten = unter diesen Untermenüs

Darstellung

Direkte Anzeige = Der gesamte Inhalt eines Menüpunkts wird im Webshop angezeigt. Das Menü ist ausgeklappt.
Anzeige nach Klick = Nur der Menütitel wird angezeigt. Wenn der Kunde auf den Menütitel klickt, werden sämtliche Informationen angezeigt.

Details anzeigen

Der hier eingetragene Text ist im Webshop verlinkt und leitet den Kunden zu einer Detailansicht.

Keine Artikel gefunden

Der hier eingetragene Hinweis wird dem Kunden angezeigt, wenn er z.B. keine Artikel in der Merkliste oder auf seinem Wunschzettel hat.

Individuelle Einstellungen der Mein-Konto-Untermenüs

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

Tabelle 42. Erläuterungen zu den Einstellungen der Untermenüs
Menüpunkt Erläuterung

CSS Mein Konto

In diesem Bereich erfolgt die Gestaltung (Layout) der Kundenkonten per CSS. Eine Standard-CSS-Formatierung legt die allgemeinen CSS-Regeln für Kundenkonten fest. Hier kann auch der gesamte CSS-Code für den Bereich Mein Konto eintragen werden. Alternativ hier nur den allgemein gültigen Teil eintragen. Für mehr Übersichtlichkeit dann in den nachfolgenden Bereichen im Feld CSS die Informationen eintragen, die dann nur für den Bereich gültig sind.

Login

Die hier eingetragenen Informationen sieht der Kunde, wenn er im Webshop auf das Tab Mein Konto klickt. Eine CSS-Formatierung ist voreingetragen. Wenn die Informationen in diesem Menü anders angeordnet werden sollen, erfolgt dies mittels CSS.
Passwortsicherheit
Für das Passwort genügen 6 Zeichen. Die Sicherheitsstufe im Webshop ist nicht so hoch wie im Admin-Bereich. Daher genügt für das Passwort der Login-Daten die einfache Mischung aus Buchstaben und Ziffern. Siehe Handbuchseite Benutzer anlegen.

Mein Konto

Nachdem der Kunde seine Login-Daten eingetragen und auf Anmelden geklickt hat, gelangt er in diesen Bereich. Eine CSS-Formatierung ist voreingetragen. Darüber kann ein Hinweis (Text vor) stehen. Darunter sieht der Kunde sämtliche Bereiche seines Kontos. 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 von ihm eingetragene Rechnungsadresse, unter Kontaktinformationen seine für den Login verwendete E-Mail-Adresse. Diese Daten können vom Kunden durch Klicken auf Ändern bearbeitet werden.
Die Fenster, die sich für den Kunden nach dem Klick auf Ändern öffnen, werden in den Kundendaten-Untermenüs bearbeitet. Das Fenster Lieferanschrift wird im gleichnamigen Untermenü der Auftragshistorie bearbeitet.

Newsletter

Titel für den Bereich Newsletter sowie die Position und die Art der Darstellung.

Auftragshistorie

Die Felder Auftrags-ID und Zeitraum wählen gehören zur Auftragssuche im Kundenkonto. Die Felder Auftragsdatum, Empfänger, Details anzeigen, Status und Voraussichtlicher Versand werden für jeden Auftrag in der Historie angezeigt. * Bestellübersicht
Die Bestellübersicht ist die Detailansicht eines bestimmten Auftrags mit allen dazugehörigen Daten. * Lieferanschrift
In diesem Untermenü werden die Eintragsfelder konfiguriert und benannt, die der Kunde sieht. Diese werden auch für die Kundendaten genutzt. * Versandart
In diesem Untermenü werden die Eintragsfelder für den Bereich Versandart konfiguriert und benannt, die der Kunde sieht. * Zahlungsart
In diesem Untermenü werden die Eintragsfelder für den Bereich Zahlungsart konfiguriert und benannt, die der Kunde sieht. * Artikel
In diesem Untermenü werden die Eintragsfelder für den Bereich Artikel konfiguriert und benannt, die der Kunde sieht.

  • Retoure
    Sobald ein Auftrag vom Kunden bezahlt und versandt wurde und der Auftrag sich also in Status 7 befindet, wird im Kundenkonto der Button Artikel zurück senden angezeigt. Klickt der Kunde darauf, wird das Menü geöffnet, das hier konfiguriert wird. Das Feld Grund der Retoure ist ein Dropdown-Menü. Die dort wählbaren Gründe werden im System unter System » Aufträge » Auftragstypen » Retouren angelegt.

Abonnementhistorie

Nur sichtbar, wenn diese Funktion aktiviert ist.
Die Felder Auftragsnummer und Zeitraum wählen dienen der Abonnementsuche im Kundenkonto. Die Felder Empfänger, Erste Versendung etc. werden für jedes Abonnement angezeigt. Über Details anzeigen gelangt der Kunde in die Einzelansicht eines bestimmten Abonnements.
Abonnementübersicht
Die Abonnementübersicht ist die Detailansicht eines bestimmten Abonnements. Hier werden die Position und der Titel der einzelnen Untermenüs, wie Versandart und Artikel, dieses Bereichs angepasst. Die eigentlichen Felder für die Einträge werden in den Untermenüs der Bestellübersicht konfiguriert.

Merkliste

Die Funktion Merkliste wird im Menü System » Mandant » Mandant wählen » Mein-Konto » Grundeinstellungen aktiviert. Mit der Funktion Merkliste stellen Kunden mit Benutzerkonto im Webshop eine Liste der Artikel zusammen, die sie sich merken bzw. evtl. kaufen möchten. Eine Position verschwindet erst von der Merkliste, wenn sie gelöscht oder in den Warenkorb verschoben wird.
Merkliste-Button
Wenn die Funktion Merkliste nicht aktiviert wird, sollte auch der Merkliste-Button aus dem Webshoplayout entfernt werden. Dazu das Menü CMS » Webdesign » Ordner: Layout öffnen und ItemViewSingleItem aus den ItemView-Templates wählen. Den entsprechenden Code entfernen.

Wunschzettel

Die Funktion Wunschzettel wird im Menü System » Mandant » Mandant wählen » Mein-Konto » Grundeinstellungen aktiviert. Mit der Funktion können Kunden mit Benutzerkonto im Webshop eine Liste von Artikeln zusammenstellen, die sie evtl. kaufen, sich schenken lassen oder aus anderen Gründen merken möchten. Ein Wunschzettel wird meist angelegt, um ihn anderen zu zeigen. Eine Position verschwindet erst vom Wunschzettel, wenn sie gelöscht oder in den Warenkorb verschoben wird.
Wunschzettel-Button
Wenn die Funktion Wunschzettel nicht aktiviert wird, sollte auch der Wunschzettel-Button aus dem Webshop-Layout entfernt werden. Dazu das Menü CMS » Webdesign » Ordner: Layout öffnen und ItemViewSingleItem aus den ItemView-Templates wählen. Den entsprechenden Code entfernen.

Tickets

Dieser Menüpunkt wird nur angezeigt, wenn das Ticketsystem als Erweiterung gebucht wurde. Das plentymarkets-Modul "Ticketsystem STARTER" ist kostenlos buchbar.
In diesem Menü die für den Kunden sichtbaren Eintragsfelder des Bereichs Tickets konfigurieren und benennen.

Gutscheine

Die Funktion Gutschein wird im Menü System » Mandant » Mandant wählen » Mein-Konto » Grundeinstellungen aktiviert.

Dokumente

In diesem Menü sieht der Kunde Dokumente, die im Menü CMS » Dokumente hochgeladen wurden und bei denen unter Berechtigung die Einstellung Kunden gewählt wurde.

Datenexport

Mit dieser Funktion wird z.B. für Firmenkunden eine Artikelliste zur Verfügung gestellt. Dazu unter Daten » Dynamischer Export ein neues Datenformat konfigurieren. In den Filtereinstellungen für das Datenformat ein Häkchen vor Export für Kundenklasse setzen, um den Filter zu aktivieren. Unter Wert die Kundenklasse wählen, für die das Datenformat zur Verfügung stehen soll. Je nach Kundenklasse, zu der ein Kunde gehört, sieht er die entsprechenden Daten im Menü Datenexport seines Kundenkontos.

jQuery

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

5.5.12. Buttons

CMS » Webdesign » Buttons

Allgemeines zu Buttons

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

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

Konfiguration mit dem Button-Editor

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

DE Layout Buttons 01 SI

Bild 1: Konfiguration des Buttons *In den Warenkorb*

Buttons konfigurieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen.

  2. Klicken Sie auf das Plus vor dem Button, den Sie konfigurieren möchten.

  3. Nehmen Sie die Einstellungen im Tab Konfiguration gemäß Tabelle 1 vor.

  4. Speichern Sie die Einstellungen.

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

Tabelle 43. Einstellungen im Tab Konfiguration
Einstellung Erläuterung

Button-Layout

Zwischen folgenden Optionen wählen:
Button-Editor = Fertige Hintergründe und Texte für Buttons.
HTML-Button = Möglichkeit, im CSS einen Button per HTML-Code zu gestalten.
Die weiteren Einstellungen, die in dieser Tabelle beschrieben werden, sind nur bei Wahl des Button-Editors sichtbar.

Vorschau

Zeigt den Button, wie er später im Webshop zu sehen sein wird.

Standard-Bezeichnung verwenden

Häkchen gesetzt = Die Standard-Bezeichung wird verwendet. Ein eigener Text kann nicht eingetragen werden.

Text

Einen eigenen Text für den Button eintragen. Hierfür darf kein Häkchen bei Standardbezeichnung verwenden gesetzt sein.

Textausrichtung

Zwischen Links, Zentriert oder Rechts wählen, damit der Text im Button so ausgerichtet wird.

Schriftgröße

Eine Größe zwischen 8 und 18 Pixeln wählen.

Schriftfarbe

Einen Hexadezimalwert eintragen oder eine Farbe wählen.

Schriftfarbe mouseover

Einen Hexadezimalwert eintragen oder eine Farbe wählen, die der Text hat, wenn sich der Mauszeiger auf dem Button befindet.

Seitenabstand

Abstand des Textes vom Rand des Buttons. Diese Einstellung wird nur bei den Textausrichtungen Links und Rechts berücksichtigt.

Button-Größe

Zwischen S, M, L und XL wählen.

Button-Hintergrund

Aus einem der Tabs einen Hintergrund für den Button wählen. Im Tab uploaded werden Ihre hochgeladenen eigenen Button-Hintergründe angezeigt.

Reset

Setzt alle Einstellungen auf die Standardeinstellungen zurück.

Eine Schriftfarbe einstellen:

  1. Klicken Sie in das Feld Schriftfarbe bzw. Schriftfarbe mouseover.
    → Eine Farbauswahl wird geöffnet.

  2. Wählen Sie im äußeren Kreis einen Farbton-Bereich.

  3. Klicken Sie in das Farbquadrat im Kreis und wählen Sie bei gedrückter Maustaste eine Farbe.
    → Die Farbe sehen Sie im Farbfeld über dem Farbkreis.

  4. Klicken Sie einmal außerhalb des Farbkreises, um die Farbe zu übernehmen.
    → Die Farbauswahl wird geschlossen.

  5. Speichern Sie die Einstellungen.

Button-Texte und rechtliche Aspekte

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

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

Template-Funktionen und -Variablen

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

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

Tabelle 44. Verfügbare Template-Funktionen für Buttons im Menü CMS

Button

Template-Funktion

Bereich Template-Funktionen
und -Variablen

In den Warenkorb

ButtonAddBasket1(string$_buttonValue) : string

Global » ItemView (verschiedene)

In den Warenkorb (Popup)

ButtonAddBasketOverlay(string$_buttonValue) : string

Global » ItemView (verschiedene)

Löschen (Warenkorb)

ButtonDeleteBasketItem(string$_buttonValue) : void

Global » ItemView » ItemViewBasketPreviewList
Basket » BasketItemsList

Anmelden

Button_CustomerRegistration(string$_buttonValue) : void

Misc » MiscCustomerRegistrationForm

Warenkorb öffnen

ButtonOpenBasket(string$_buttonValue) : string

Global » PageDesignFunctions

Zur Kasse

ButtonProceedOrder(string$_buttonValue) : void

Global » BasketFunctions

Weiter einkaufen

ButtonProceedShopping(string$_buttonValue) : void

Global » BasketFunctions

Individueller Warenkorb (eigene Buttons)

Warenkorb (nach Änderungen) speichern

ButtonBasketSave(string$_buttonValue) : void

Basket » BasketItemsList

Rechnungsadresse im Warenkorb eingeben

Button_SaveBasketCustomerInvoiceAddress(string$_buttonValue) : void

Basket » BasketCustomerInvoiceAddress

Eigener Button

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

Eigene Buttons einstellen:

  1. Erstellen Sie einen Button oder lassen Sie diesen erstellen und speichern Sie die Datei auf der Festplatte Ihres Rechners.

  2. Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen.

  3. Klicken Sie auf das Untermenü des Buttons.

  4. Öffnen Sie das Tab Eigener Button.

  5. Klicken Sie auf Durchsuchen…​.

  6. Wählen Sie die gespeicherte Datei des Buttons auf Ihrer Festplatte.

  7. Klicken Sie auf Öffnen.

  8. Klicken Sie auf Speichern, um den Button hochzuladen.

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

Gruppenfunktionen

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

  1. Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Einstellungen » Gruppenfunktionen.

  2. Wählen Sie die Einstellungen gemäß Tabelle 1.

  3. Speichern Sie die Einstellungen.

DE CMS Webdesign Bearbeiten Buttons 02 SI

Bild 2: *Gruppenfunktionen*

Buttons mit eigenem Hintergrund

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

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

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

DE CMS Webdesign Bearbeiten Buttons 03 SI

Bild 3: Menü *Eigener Hintergrund*

Das Beispiel in Bild 4 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 1). Jedoch ist die Anordnung hier in Bild 4 umgekehrt zur Auswahl im Menü. Die obere Zeile der Button-Felder legt die Farbe der Buttons für die normale Ansicht fest. Die untere Zeile legt die mouseover-Farbe fest. Das ist die Farbe, die angezeigt wird, wenn Sie mit dem Mauszeiger auf den Button zeigen. Das am besten geeignete Datenformat für die Erstellung von Buttons ist PNG. Möglich sind auch JPG und GIF.

Die Buttonfelder haben die folgenden Maße:

Tabelle 45. Größe Buttonfelder
Buttonfeld Breite Höhe

XL

245 Pixel

31 Pixel

L

172 Pixel

31 Pixel

M

134 Pixel

31 Pixel

S

80 Pixel

31 Pixel

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

XL                                                                    L                                                M                                  S

DE Layout Buttons 04

Bild 4: Beispiel für eine *Hintergrundgrafik*

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

Hintergrundgrafik hochladen:

  1. Erstellen Sie eine Hintergrundgrafik oder lassen Sie diese erstellen und speichern Sie diese auf der Festplatte Ihres Rechners.

  2. Öffnen Sie das Menü CMS » Webdesign » Buttons » Tab: Eigener Hintergrund.

  3. Klicken Sie auf Durchsuchen…​.

  4. Wählen Sie die gespeicherte Datei der Hintergrundgrafik auf Ihrer Festplatte.

  5. Klicken Sie auf Öffnen.

  6. Klicken Sie auf Speichern, um den Hintergrund hochzuladen.
    → Der Button-Hintergrund wird im Bereich uploaded als Vorschau angezeigt.

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

Buttons mit hochgeladener Hintergrundgrafik konfigurieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Buttons.

  2. Klicken Sie auf das Untermenü des Buttons.

  3. Wählen Sie im Tab Konfiguration im Bereich Button-Hintergrund unter uploaded den Hintergrund aus.

  4. Nehmen Sie die weiteren Einstellungen gemäß Tabelle 1 vor.

  5. Speichern Sie die Einstellungen.

Anpassung an die Button-Lösung

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

Button-Lösung

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

Welche Informationen müssen neu angegeben werden?

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

  • Die wesentlichen Merkmale der Ware oder Dienstleistung.

  • Die Mindestlaufzeit des Vertrages, wenn dieser eine dauernde oder regelmäßig wiederkehrende Leistung zum Inhalt hat.

  • Den Gesamtpreis der Ware oder Dienstleistung einschließlich aller damit verbundenen Preisbestandteile, sowie alle über den Unternehmer abgeführten Steuern oder, wenn kein genauer Preis angegeben werden kann, seine 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 von ihm in Rechnung gestellt werden.

Wann und wie müssen die Informationen angegeben werden?

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

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

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

Anpassung bestehender Systeme

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

DE alt+neu SI

Bild 1: Gegenüberstellung alte (links) und neue (rechts) *Bestellübersicht*

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

Feld: Text nach Summen

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

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

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

Anpassung der Bestellübersicht:

  1. Öffnen Sie das Menü CMS » Webdesign » Webdesign bearbeiten » Bestellvorgang » Kaufabwicklung » Untermenü: Bestellübersicht.

  2. Bringen Sie mit der Auswahl Position die Bestandteile der Bestellübersicht (AGBs, Rechnungsanschrift, Artikel, etc.) in die gewünschte Reihenfolge. Wichtig ist dabei, dass der Bereich Artikel an letzter Position (9) steht. Sie können also die Nummerierung einfach von oben nach unten von 1 bis 9 vornehmen. (Diese Reihenfolge wurde sowohl in der oben gezeigten Abbildung als auch für das unten dargestellte CSS verwendet.)

  3. Klicken Sie anschließend in das CSS-Feld der Bestellübersicht und fügen Sie folgenden CSS-Code am Ende des bereits bestehenden CSS-Codes hinzu.

  4. Speichern Sie die Einstellungen.

CSS-Anpassungen nötig?

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

/* FIX SUM BOX */

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

/* SHOPPING CART SOLUTION */

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

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

/* SHIPPING DETAILS */

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

/* ITEMS CONTAINER */

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

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

/* ITEMS LIST */

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

/* SUM BOX */

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

/* TEXT AFTER SUM BOX */

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

5.5.13. CSS

CMS » Webdesign » Layout » CSS

Allgemeines

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

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

CSS in plentymarkets

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

Bereiche im CMS

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

DE CMS Webdesign Bearbeiten CSS 01 SI

Bild 1: Ordnerstruktur im Bereich *CSS*

Unbenutzt

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

CSSBase

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

CSSContent

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

CSSOrder

CSS-Formatierungen für den Bestellvorgang.

CSSMyAccount

CSS-Formatierungen für den Bereich Mein Konto.

CSSForum

CSS-Formatierungen für das Forum.

CSSBlog

Hier wird das CSS für einen Blog hinterlegt.

Anwendung

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

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

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

6. Bilder-Galerie

CMS » Bilder-Galerie

6.1. Allgemeines

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

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

6.2. Bilder verwalten

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

CMS BilderGalerie 01 SI

Bild 1: Das Menü *Bilder-Galerie*

Ein Bild hochladen:

  1. Öffnen Sie das Menü CMS » Bilder-Galerie.

  2. Klicken Sie auf den blauen Ordner, in den Sie das Bild hochladen möchten, oder legen Sie über den Button Neuer Ordner einen neuen Ordner an.

  3. Klicken Sie auf den Button Dateien hochladen und wählen Sie die Dateien vom Speicherort der Bilder, z.B. von der Festplatte Ihres Rechners.

  4. Wählen Sie die gewünschten Bilder aus und klicken Sie auf Öffnen. Alternativ können Sie die Bilder auch per Drag- & Drop-Funktion in den Ordner ziehen.
    → Die Bilder werden hochgeladen.

Bilder bearbeiten:

  1. Klicken Sie mit der rechten Maustaste auf das gewünschte Bild.

  2. Klicken Sie auf Vorschau, um die Eigenschaften des Bildes zu sehen und zu bearbeiten.
    Klicken Sie auf Löschen, um das Bild aus der Galerie zu entfernen.
    Klicken Sie auf Öffnen, um das Bild in einer größeren Ansicht zu betrachten.

  3. Speichern Sie die Einstellungen.

CMS BilderGalerie 03 SI

Bild 3: Bilder *bearbeiten*

6.3. Ordner verwalten

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

Neuen Ordner anlegen:

  1. Öffnen Sie das Menü CMS » Bilder-Galerie.

  2. Klicken Sie links unten auf Neuer Ordner.
    → Ein Fenster wird geöffnet.

  3. Wenn der neue Ordner ein Unterordner eines bestehenden Ordners sein soll, wählen Sie den bestehenden Ordner aus. Wenn Sie einen neuen Hauptordner erstellen möchten, tragen Sie den Namen des neuen Ordners ein, ohne vorher einen Ordner anzuklicken.

  4. Tragen Sie in das Textfeld einen Namen für den neuen Ordner ein und klicken Sie anschließend auf OK, um den Ordner anzulegen.
    → Die neuen Ordner sind nach erfolgreichem Anlegen sofort in der Ordnerübersicht verfügbar. Falls diese nicht korrekt einsortiert wurden, aktualisieren Sie die Bilder-Galerie (Reload der Seite).

Ordner synchronisieren:

  1. Öffnen Sie das Menü CMS » Bilder-Galerie.

  2. Wählen Sie den betreffenden Ordner aus der Ordnerübersicht aus.

  3. Klicken Sie auf den Button Ordner synchronisieren und aktualisieren Sie die Ansicht (Reload).

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

Ordner löschen:

  1. Klicken Sie mit der rechten Maustaste auf den gewünschten Ordner.

  2. Klicken Sie auf Löschen, um den Ordner zu entfernen.

CMS BilderGalerie 02 SI

Bild 2: Ordner *löschen*

7. Best Practice

7.1. Inhalt dieses Kapitels

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

Workflows

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

7.2. SSL-Verschlüsselung

CMS » Layout

7.2.1. Entscheidung für SSL-Verschlüsselung

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

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

Design für SSL vorbereiten

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

7.2.2. SSL-Verschlüsselung konfigurieren

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

Bilder

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

Beispiel Bilder

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

CSS-Dateien

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

Beispiel CSS-Datei

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

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

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

Beispiel externe CSS-Datei

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

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

7.2.3. Umleitung

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

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

Sitemap-Inhalt löschen

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

Neue Indexierung durch Suchmaschinen

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

7.2.4. Umleitung deaktivieren

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

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

SSL-Umleitung deaktivieren:

  1. Öffnen Sie das Menü Start » Service-Center.

  2. Wählen Sie dort das gewünschte plentymarkets System.

  3. Öffnen Sie das Tab Cache.

  4. Scrollen Sie zum Abschnitt Permanente SSL-Umleitung.

  5. Wählen Sie die Option immer inaktiv.

  6. Klicken Sie auf Permanente SSL-Umleitung speichern.

Option < IE 9 inaktiv

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

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

7.2.5. Korrekte URL anlegen

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

8. Webspace

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

8.1. Upload-Einschränkungen

Für Uploads gelten die folgenden Einschränkungen:

  • PHP-Dateitypen können nicht hochgeladen werden.

  • Ein Upload ist auf 10 MB pro Vorgang begrenzt.

8.2. Neuen Ordner erstellen

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

Neuen Ordner erstellen:

  1. Wählen Sie den gewünschten Zielordner bzw. die unterste Ebene (= /).

  2. Klicken Sie dann auf Neuer Ordner.

  3. Tragen Sie einen Namen für den neuen Ordner ein.

  4. Speichern Sie die Einstellungen.

8.3. Dateien hochladen

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

Datei(en) hochladen:

  1. Wählen Sie den Zielordner.

  2. Klicken Sie auf Dateien hochladen.

  3. Wählen Sie die Datei(en), die Sie hochladen möchten.

  4. Klicken Sie auf Öffnen.

8.4. Alternativen zum Webspace-Upload

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

9. Social Bookmarks

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

9.1. Social Bookmarks in Webshop integrieren

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

Social Bookmarks in Ihren Webshop integrieren:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout.

  2. Öffnen Sie das gewünschte Template, z.B. ItemViewSingleItem.

  3. Kopieren Sie den unten aufgeführten HTML-Code.

  4. Fügen Sie den HTML-Code in das Template ein.

  5. Speichern Sie die Einstellungen.

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

10. Blog (Weblog)

CMS » Blog

10.1. Allgemeines zu Blogs

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

10.2. Neuen Blogbeitrag anlegen

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

DE CMS Blog 01

Bild 1: Tab: Neuer Blog

Neuen Blogbeitrag anlegen:

  1. Öffnen Sie das Menü CMS » Blog.

  2. Wechseln Sie in das Tab Neuer Blog.

  3. Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 1.

  4. Speichern Sie die Einstellungen.

Tabelle 46. Einstellungen beim Anlegen eines neuen Blogbeitrags
Einstellung Erläuterung

Titel

Einen Titel eintragen. Der Titel wird als Überschrift des Blogbeitrags angezeigt und für den Aufbau der URL verwendet.
Hinweis: Der Titel ist ein Pflichteintrag. Wenn kein Titel eingetragen ist und der Blogbeitrag gespeichert wird, geht der Text verloren.

Mandant (Shop)

Einen Mandanten wählen, um den Blogbeitrag in diesem Mandanten anzuzeigen.
Der Mandant ist eine Pflichtangabe und muss vor der Sprache gewählt werden.

Sprache

Eine Sprache für den Blogbeitrag wählen.
Die Sprache ist eine Pflichtangabe und muss vor der Kategorie gewählt werden. Die Sprachen, die zur Auswahl stehen, werden im Menü System » Mandant » Mandant wählen » Module » Blog angelegt. Die Blogbeiträge können auch anhand der Sprache gefiltert werden.

Kategorie

Eine Kategorie für den Blogbeitrag wählen.
Die Kategorie ist eine Pflichtangabe. Blogkategorien werden im Menü System » Mandant » Mandant wählen » Module » Blog erstellt.
Die Kategorie möglichst vor dem Erstellen des Blogbeitrags anlegen. Die Zuordnung ist aber auch später änderbar.

Tags

Schlüsselwörter des Blogbeitrags eintragen. Die Schlüsselwörter tragen zur Kategorisierung bei. Wenn nach einem Schlüsselwort gesucht wird, werden alle Artikel mit diesem Schlüsselwort gefunden.

Autor

Als Autor wird automatisch der Benutzer des Systems eingetragen, der eingeloggt ist. Der Autor ist aber änderbar.

Veröffentlichung

Beim Anlegen des Blogbeitrags werden automatisch das Datum und die Uhrzeit eingetragen. Wenn der Beitrag erst später veröffentlicht wird, müssen Datum und Uhrzeit noch einmal angepasst werden, da diese Angaben bei der Veröffentlichung nicht automatisch aktualisiert werden.

Öffentlich

Das Häkchen ist beim Anlegen eines neuen Blogbeitrags automatisch gesetzt. Damit wird der Blogbeitrag nach dem Speichern sofort in die Blogliste aufgenommen. Wenn der Blogbeitrag nicht sofort im Blog erscheinen soll, das Häkchen entfernen. Der Blogbeitrag wird dann nicht indiziert und ist nur über den direkten Aufruf der Blog-URL auffindbar. Das Entfernen des Häkchens ist empfehlenswert, um vor dem Veröffentlichen den fertigen Beitrag prüfen zu können.

Template-Variablen und -Funktionen übersetzen

Zwischen Ja, Nur Link-Template-Variablen und -Funktionen und Nein wählen.
Ja = Alle Template-Variablen und -Funktionen werden übersetzt.
Nur Link-Template-Variablen und -Funktionen = Nur Link-Template-Variablen und -Funktionen werden übersetzt.
Nein = Keine Template-Variablen und -Funktionen werden übersetzt.

Editor

Einen Editor zur Bearbeitung des Blogtextes wählen.

10.3. Blogvorschautext

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

Blogvorschautext bestimmen mit$PreviewBreak

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

10.4. Blogbeitrag suchen

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

Sichtbarkeit on Blogbeitragen im Webshop

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

DE CMS Blog 02

Bild 2: Tab: Übersicht Blogbeiträge und Suchfilter

10.4.1. Blogbeitrag suchen

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

Blogbeitrag suchen:

  1. Öffnen Sie das Menü CMS » Blog.

  2. Nehmen Sie Filtereinstellungen vor. Beachten Sie hierzu Tabelle 2.

  3. Klicken Sie auf die Lupe, um die Suche auszuführen.

Tabelle 47. Filter für die Blogsuche
Einstellung Erläuterung

Mandant

Einen Mandanten wählen, um nur Blogbeiträge anzuzeigen, die diesem Mandanten zugeordnet sind.

Sprache

Eine Sprache wählen, um nur Blogbeiträge anzuzeigen, die in dieser Sprache veröffentlicht wurden.

ID

Eine ID eintragen, um nur den Blogbeitrag mit dieser ID anzuzeigen.

Titel

Ein Stichwort oder einen ganzen Titel eintragen. Wenn ein Stichwort eingetragen wird, werden alle Blogbeiträge angezeigt, die dieses Wort enthalten. Wenn ein konkreter Titel eingetragen wird, wird nur der Blogbeitrag mit dem Titel angezeigt.

10.5. Blogbeitrag bearbeiten

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

DE CMS Blog 03

Bild 3: Tab: Blogbeitrag bearbeiten

10.5.1. Datei hochladen

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

DE CMS Blog 04

Bild 4: Tab: Upload; absolute und relative URL der Datei

Datei hochladen:

  1. Öffnen Sie das Menü CMS » Blog.

  2. Öffnen Sie einen Blogbeitrag.

  3. Öffnen Sie das Tab Upload.

  4. Klicken Sie auf Durchsuchen (browserabhängig).
    → Ein Fenster zur Dateiauswahl wird geöffnet.

  5. Wählen Sie die Dateien, die Sie hochladen möchten, und klicken Sie auf Öffnen.

  6. Klicken Sie im Tab Upload auf das Upload-Symbol.
    → Die Dateien werden hochgeladen. Warten Sie, bis der Prozess abgeschlossen ist (grünes Häkchen wird angezeigt).

10.5.2. Datei in Blogbeitrag einfügen

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

Datei in Blogbeitrag einfügen:

  1. Öffnen Sie das Menü CMS » Blog.

  2. Öffnen Sie einen Blogbeitrag.

  3. Öffnen Sie das Tab Upload.

  4. Kopieren Sie die relative URL der Datei

  5. Wechseln Sie in das Tab Blog.

  6. Fügen Sie ein img-Tag in den Blogbeitrag ein.

  7. Fügen Sie die relative URL in das Tag ein.

  8. Speichern Sie die Einstellungen.

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

10.6. Tab: Blog veröffentlichen

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

Blog veröffentlichen

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

10.7. Blogbeiträge ins Design einbinden

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

10.7.1. Vorschauliste von Blogbeiträgen anlegen

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

DE CMS Blog 05

Bild 5: Vorschauliste Blogbeiträge

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

DE CMS Blog 06

Bild 6: Vorschauliste mit nur einem Blogbeitrag

11. FAQ

CMS » FAQ

11.1. FAQ

Sie können sich in diesem Bereich ein FAQ-Archiv anlegen. FAQ bedeutet Frequently Asked Questions und behandelt Fragen, die zu bestimmten Themen häufig gestellt werden. Es empfiehlt sich, für diesen Bereich die Ordner gemäß der Themen anzulegen, zu denen die Fragen gestellt werden.

11.2. Ordnerstruktur anlegen

Erstellen Sie eine Ordnerstruktur mit den Themen, zu denen Sie FAQs anlegen möchten.

DE CMS FAQ 01 SI

Bild 1: FAQ-*Ordnerstruktur*

Neuen Ordner anlegen:

  1. Öffnen Sie das Menü CMS » FAQ » Tab: Neuer Ordner.

  2. Nehmen Sie die Einstellungen gemäß Tabelle 1 vor.

  3. Speichern Sie die Einstellungen.

  4. Laden Sie das Menü neu und prüfen Sie im Tab Ordner, ob der Ordner korrekt angelegt wurde.

  5. Erstellen Sie nach gleichem Muster weitere Ordner bzw. Unterordner.

Die folgende Tabelle erläutert die Einstellungen der FAQ-Ordner:

Tabelle 48. FAQ-Ordnerstruktur anlegen
Einstellung Erläuterung

Name

Eine Bezeichnung für den Ordner eintragen.
Tipp: Die Bezeichnungen für die Ordner gemäß der Themen wählen, zu denen es FAQs gibt.

öffentlich

Die Option sichtbar wählen, wenn der Ordner z.B. auf einer Kategorieseite im Webshop oder auf der Webseite sichtbar sein soll.

Ticketsystem

Sichtbar wählen, wenn die jeweilige FAQ auch im Tab FAQ einer Nachricht oder eines Kommentars eines Tickets sichtbar sein soll.

Oberordner

Wenn der neue Ordner ein Unterordner eines bestehenden Ordners sein soll, den betreffenden Ordner aus dem Dropdown-Menü wählen.

11.3. FAQs anlegen

Erstellen Sie nun im Tab Neue FAQ die FAQs, also Fragen mit Antworten.

DE CMS FAQ 02 SI

Bild 2: Neue FAQ anlegen

Neue FAQ anlegen:

  1. Öffnen Sie das Menü CMS » FAQ » Tab: Neue FAQ (Bild 2).

  2. Nehmen Sie die Einstellungen gemäß Tabelle 2 vor.

  3. Speichern Sie die Einstellungen.

  4. Laden Sie das Menü neu und prüfen Sie, ob die FAQ korrekt angelegt wurde.

  5. Erstellen Sie nach gleichem Muster weitere FAQs.

Die folgende Tabelle erläutert die Einstellungen eines FAQ-Eintrags:

Tabelle 49. Neue FAQ anlegen
Einstellung Erläuterung

Ordner

Den Ordner aus dem Dropdown-Menü wählen, unter dem die FAQ erscheinen soll.

Öffentlich

Die Option sichtbar wählen, wenn die FAQ z.B. auf einer Kategorieseite im Webshop oder auf Ihrer Webseite sichtbar sein soll.
Wichtig: Bei Wahl der Option sichtbar muss der entsprechende Ordner sowie evtl. Unterordner auch als sichtbar eingestellt sein.

Ticketsystem

Sichtbar wählen, wenn die jeweilige FAQ auch im Tab FAQ einer Nachricht oder eines Kommentars eines Tickets sichtbar sein soll.

Frage

Frage eintragen (Bild 2, Pos. 1).

Antwort

Antwort auf die Frage eintragen (Bild 2, Pos. 2).

11.4. Template-Variable

Damit die FAQ-Liste angezeigt wird, fügen Sie die Template-Variable $Container_MiscFAQsList in das entsprechende Template des Designs oder z.B. in eine Kategorieseite ein.

12. Dokumente

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

12.1. Dokumente hochladen

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

Ein Dokument hochladen:

  1. Öffnen Sie das Menü CMS » Dokumente.

  2. Klicken Sie auf Durchsuchen…​.

  3. Wählen Sie die Datei, die Sie hochladen möchten.

  4. Klicken Sie auf Öffnen.

  5. Wählen Sie eine der Optionen unter Berechtigung.

  6. Tragen Sie einen Ordnernamen ein (optional).

  7. Speichern Sie die Einstellungen.

Tipp

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

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

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

Dokument mit E-Mail-Vorlage verknüpfen:

  1. Öffnen Sie das Menü System » Mandant » Mandant wählen » E-Mail » Vorlagen.

  2. Öffnen Sie die gewünschte E-Mail-Vorlage.

  3. Wählen Sie im Dropdown-Menü Dokumentenanhang die Datei, die als Anhang verwendet werden soll.

  4. Klicken Sie auf Speichern, um die Einstellung zu sichern.

13. Termine

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

13.1. Neuen Termin erstellen

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

Einen neuen Termin erstellen:

  1. Öffnen Sie das Menü CMS » Termine.

  2. Klicken Sie auf das grüne Plus, um einen neuen Termin zu erstellen.
    → Das Fenster Neuer Termin wird geöffnet.

  3. Tragen Sie die Daten des Termins ein.

  4. Speichern Sie die Einstellungen.
    → Der Termin wird im Tab Vorschau angezeigt.

13.2. Termine bearbeiten

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

Einen Termin bearbeiten:

  1. Öffnen Sie das Menü CMS » Termine.

  2. Öffnen Sie das Tab Vorschau.

  3. Klicken Sie in der Spalte Aktionen auf den Stift, um einen Termin zu bearbeiten.
    → Das Bearbeitungsfenster des Termins wird geöffnet.

  4. Nehmen Sie die gewünschten Änderungen vor.

  5. Speichern Sie die Einstellungen.

13.3. Termine suchen

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

Einen Termin suchen:

  1. Öffnen Sie das Menü CMS » Termine.

  2. Öffnen Sie das Tab Suche.

  3. Wählen Sie den Suchzeitraum, indem Sie ein Datum unter von sowie ein Datum unter bis wählen.

  4. Klicken Sie auf die Lupe.
    → Die Termine dieses Zeitraums werden angezeigt.

13.4. Termine löschen

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

Einen Termin löschen:

  1. Öffnen Sie das Menü CMS » Termine.

  2. Öffnen Sie das Tab Vorschau.

  3. Klicken Sie in der Spalte Aktionen des Termins, den Sie löschen möchten, auf Löschen.
    → Der Termin wird gelöscht.

13.5. Termine ins Webshop-Design einbinden

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

$Container_MiscDatesList

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

14. Konstanten

In die Textfelder des Menüs CMS » Konstanten tragen Sie wiederkehrende Inhalte ein, um sie in das Design Ihres Webshops einzubinden. 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 statt sie einzeln im Design anzupassen. Die Inhalte können HTML-Code oder JavaScript-Code enthalten. Auch Artikel-Galerien werden mit Konstanten verknüpft.

14.1. Konstanten definieren

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

Konstanten definieren:

  1. Öffnen Sie das Menü CMS » Konstanten.

  2. Tragen Sie die Inhalte in das Textfeld der gewünschten Konstante ein.

  3. Speichern Sie die Einstellungen.
    → Die Inhalte können nun über die Konstante in den Webshop eingebunden werden.

PHP-Skripte einbinden

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

14.2. Konstanten in Design einfügen

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

Konstante in Design einfügen:

  1. Öffnen Sie das Menü CMS » Webdesign » Layout.

  2. Öffnen Sie das gewünschte Template.

  3. Fügen Sie die Konstante an der Position in das Template ein, an der die Inhalte angezeigt werden sollen.

  4. Speichern Sie die Einstellungen.

Analog können Konstanten auch in Kategorien eingebunden werden.

15. Suchen und Ersetzen

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

15.1. Suchen und Ersetzen durchführen

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

Suchen und Ersetzen:

  1. Öffnen Sie das Menü CMS » Suchen & Ersetzen.

  2. Geben Sie in das erste Feld der Spalte Suchen den zu ersetzenden Begriff ein.

  3. Geben Sie den neuen Begriff in das Feld Ersetzen derselben Zeile ein.

  4. Wiederholen Sie dieses Vorgehen mit allen gewünschten Begriffen.

  5. Wählen Sie, ob die Begriffe nur in den Kategorien, nur im Design oder in den Kategorien und im Design ersetzt werden sollen.

  6. Entscheiden Sie, ob zusätzlich die Kategorien und das Standard-Design veröffentlicht werden sollen.

  7. Klicken Sie auf das Zahnrad, um die Funktion auszuführen.

16. Kunden-Feedback

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

16.1. Kunden-Feedback einrichten

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

16.2. Kunden-Feedback bearbeiten

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

Bewertung bearbeiten:

  1. Öffnen Sie das Menü CMS » Kunden-Feedback.

  2. Klicken Sie in die Zeile eines Feedbacks, um es zu bearbeiten.

  3. Nehmen Sie die gewünschten Änderungen vor.

  4. Speichern Sie die Einstellungen.

Sichtbarkeit einstellen

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

16.3. Beispielkonfiguration im CMS

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

16.3.1. Google reCAPTCHA einrichten

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

Google reCAPTCHA einrichten:

  1. Öffnen Sie das Menü System » Mandant » Mandant wählen » Webshop » Einstellungen.

  2. Geben Sie den Google reCAPTCHA Websiteschlüssel ein.

  3. Geben Sie den Google reCAPTCHA Geheimer Schlüssel ein.

  4. Speichern Sie die Einstellungen.

16.3.2. Bewertungsformular anzeigen

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

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

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

16.3.3. Bewertungen als Liste anzeigen

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

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

17. plentymarkets CMS library

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

17.1. plentymarketsCMStools Version aktualisieren

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

Kompatibilität

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

17.1.1. Neue Version herunterladen

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

Neue Version herunterladen:

  1. Öffnen Sie das GitHub-Repository plentymarkets CMS library.

  2. Öffnen Sie den Order dist.

  3. Klicken Sie auf die Datei plentymarketsCMStools-x.x.x.js.
    → Der Inhalt der Datei wird angezeigt.

  4. Rechtsklicken Sie auf Raw.

  5. Wählen Sie die Option Ziel speichern unter…​

  6. Speichern Sie die Datei auf Ihrem Rechner.

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

17.1.2. Neue Version hochladen

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

Neue Version hochladen:

  1. Öffnen Sie das Menü CMS » Webspace.

  2. Öffnen Sie den Ordner layout » Ihr Design » js » plenty.
    → Ordner klappen Sie auf, indem Sie links in der Übersicht auf das kleine Plus klicken.

  3. Klicken Sie auf Dateien hochladen.

  4. Wählen Sie die Datei plentymarketsCMStools-x.x.x.js, die Sie im vorherigen Schritt heruntergeladen haben.
    → Die Datei wird hochgeladen und angezeigt.

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

17.1.3. Versionsnummer in der JSON-Datei anpassen

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

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

Versionsnummer in der JSON-Datei anpassen:

  1. Öffnen Sie das Menü CMS » Webspace.

  2. Öffnen Sie den Ordner layout » Ihr Design » js » plenty.
    → Ordner klappen Sie auf, indem Sie links in der Übersicht auf das kleine Plus klicken.

  3. Laden Sie die Datei scripts-3.5.json herunter.

  4. Öffnen Sie die Datei in einem Texteditor.

  5. Ändern Sie die Versionsnummer von plentymarketsCMStools-x.x.x.js auf die Version der Datei, die Sie in den Webspace hochgeladen haben.

  6. Speichern Sie die geänderte Datei.

  7. Laden Sie die aktualisierte Datei an derselben Stelle in Ihrem plentymarkets System wieder hoch.
    → Aufgrund des Cachings dauert es bis zu eine Stunde, bis die neue Dateiversion im Webspace angezeigt wird.

Zum Seitenanfang