Webdesign bearbeiten

plentymarkets » CMS » Webdesign

 

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.

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.

Hinweise für Webentwickler

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

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.

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. Klicken Sie auf Speichern, um die Einstellungen zu sichern.
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ü Einstellungen » Mandant (Shop) » Standard » Webshop » Seiten. Die dort vorgenommenen Verknüpfungen gelten für alle Designs eines Mandanten. Wenn Sie für ein Design wie unten beschrieben Kategorieseiten verknüpfen, haben die designspezifischen Verknüpfungen Vorrang.

Bild 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. Klicken Sie auf Speichern, um die Einstellungen zu sichern.

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

Einstellungen Erläuterung
Startseite Eine Kategorieseite wählen, die bei Aufrufen des Webshops als Startseite angezeigt wird.
AGB Eine Kategorieseite für die Allgemeinen Geschäftsbedingungen wählen.
Datenschutz Eine Kategorieseite für die Datenschutzrichtlinien wählen.
Widerrufsrecht Eine Kategorieseite für das Widerrufsrecht wählen.
Hilfe Eine Kategorieseite für die Hilfeseite des Webshops wählen.
404 Eine Kategorieseite wählen, um diese 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. Weitere Informationen zur Impressumspflicht oder Anbieterkennzeichnung finden Sie hier.
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.

Tab. 1: Zuordnung der Kategorieseiten

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.

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

Tab. 2: Optionen für die Design-Veröffentlichung

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

Tab. 3: Optionen für das Zurücksetzen des Datei-Caches

Neues Design anlegen

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

Sicherheitskopie

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

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

Tipp: Bezeichnungen für neue Designs

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

Beispiel:

DesignWebshop_01

DesignWebshop_02

oder

DesignWebshop_2014-05-07

DesignWebshop_2014-05-12

Design übertragen

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

Folgende Bereiche sind wählbar:

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

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

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

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ü plentymarkets » Einstellungen » Mandant (Shop) » Globale Einstellungen » 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ü plentymarkets » Einstellungen » Mandant (Shop) » Globale Einstellungen » 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ü plentymarkets » Einstellungen » Mandant (Shop) » Globale Einstellungen » 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.

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.

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.

Nach oben