Skip to main content

Ceres Coconut Theme - Individualisiere deinen Webshop

Ceres Coconut ist ein simples Theme-Plugin mit dessen Hilfe du das Standard-Design deines Ceres Webshops individualisieren kannst. Bei der Installation enthält Coconut noch keinerlei Anpassungen bezüglich Design oder Funktionalität. Coconut spiegelt die Dateistruktur des Plugins Ceres wieder und muss selbst angepasst werden, um Änderungen im Webshop anzeigen zu lassen. So kannst du beispielsweise eigenes CSS über Coconut einbinden oder einzelne Ceres-Templates anpassen. Dieses Theme ist der Nachfolger für Ceres Vanilla und ist mit Ceres ab Version 3.0 und dem ShopBuilder kompatibel. Durch die Verwendung von Coconut bleibt dein angepasstes Design auch bei neuen Updates von Ceres erhalten.

Du musst Ceres Coconut im plentyMarketplace kaufen und danach in deinem plentymarkets Backend installieren. Wie das geht, erfährst du auf unseren Handbuchseiten zu Plugins. Beachte bitte, dass du dem Plugin Ceres Coconut eine Positionsnummer zuweisen musst, die zwischen der Positionsnummer von Ceres und IO liegt. Bitte lies auch die Plugin-Beschreibung auf dem Marketplace.

In dieser Anleitung zeigen wir dir ein paar Beispiele, wie du deinen Webshop mit Ceres Coconut individuell gestalten kannst. Nachdem du eigene Anpassungen gemacht hast, musst du das Plugin-Set, in dem Ceres Coconut liegt, erneut speichern und bereitstellen damit deine Änderungen im Webshop angezeigt werden.

Ceres Coconut beinhaltet lediglich die Ceres-Dateistruktur. Die einzelnen Dateien sind zunächst leer. Wenn du einzelne Bereiche anpassen möchtest, solltest du zunächst den Code aus der dazugehörigen Ceres-Datei in die jeweilige Coconut-Datei kopieren. Die folgenden Anwendungsfälle zeigen dir Schritt für Schritt wie das geht.

1. Artikelseite anpassen

Im ersten Schritt zeigen wir dir, wie du deine Artikelansicht anpassen kannst. Hier kannst du beispielsweise zusätzliche Artikeldaten anzeigen lassen, einzelne Komponenten ausblenden oder zusätzlichen Text einbinden. Es ist zwingend notwendig, dass du dabei alle hier aufgeführten Stellen anpasst. Am Ende jedes Kapitels gibt es eine Checkliste, die dir dabei hilft zu überprüfen, ob du die Änderungen an den richtigen Stellen eingepflegt hast.

1.1. Zusätzliche Artikeldaten in Coconut einbinden

Um zusätzliche Artikeldaten in der Artikelansicht anzuzeigen, musst du zunächst überprüfen, ob diese Artikeldaten bereits in Ceres verfügbar sind, oder ob du diese erst hinzufügen musst. Die verfügbaren Artikeldaten findest du in JSON-Dateien, den sogenannten Result Fields, bzw. Ergebnisfelder. Unsere englischsprachige Entwicklerdokumentation enthält eine Liste der verfügbaren Ergebnisfelder. Das Standard-Ceres verwendet nur einen Bruchteil der verfügbaren Artikeldaten. Mit Coconut kannst du aber fehlende Artikeldaten hinzufügen.
Gehe wie folgt vor, um zusätzliche Artikeldaten in Ceres verfügbar zu machen:

Ergebnisfelder für die Artikelansicht von Ceres nach Coconut kopieren:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres.
    → Das Plugin wird geöffnet.

  4. Scrolle links im Konfigurationsbaum nach unten und klicke auf Dateien.
    → Der Ceres-Dateibaum wird geöffnet.

  5. Klicke auf das Ordnersymbol vor resources.
    → Der resources-Order wird aufgeklappt.

  6. Klicke auf das Ordnersymbol vor views.
    → Der views-Order wird aufgeklappt.

  7. Klicke auf das Ordnersymbol vor ResultFields.
    → Der ResultFields-Order wird aufgeklappt.

  8. Klicke auf SingleItem.fields.json.
    → Die Datei wird geöffnet.

  9. Kopiere den Inhalt der Datei in deine Zwischenablage.

  10. Klicke in der Breadcrumb-Navigation auf Plugin-Sets, um zurück in die Plugin-Übersicht zu kommen.

  11. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.

  12. Klicke auf Dateien.
    → Der Coconut-Dateibaum wird geöffnet.

  13. Wiederhole hier die Schritte 5-8, um die Datei SingleItem.fields.json in Coconut zu öffnen.
    → Die leere Datei wird geöffnet.

  14. Kopiere den Inhalt, den du in Schritt 9 in deine Zwischenablage kopiert hast, in die geöffnete Datei.

  15. Speichere deine Änderungen.

Nun hast du die in Ceres verfügbaren Artikeldaten 1:1 nach Ceres Coconut übertragen. Wie du siehst, ist diese Liste überschaubar. Im nächsten Schritt fügst du nun dieser Datei in Ceres Coconut weitere Ergebnisfelder hinzu, um später Zugriff darauf zu haben. Nimm dir einen Moment, um in dieser Liste nach möglichen Ergänzungen für deine SingleItem.fields.json zu suchen. Im folgenden Beispiel werden wir das Ergebnisfeld item.manufacturer.logo hinzufügen, also das am Hersteller gepflegte Logo des Artikelherstellers. Damit wir später das Herstellerlogo ausgeben können, muss dieses unter System » Systemeinstellungen » Artikel » Hersteller » Hersteller wählen » Logo-URL hinterlegt sein.

Ergebnisfeld für die Artikelseite in Coconut hinzufügen:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.

  4. Klicke links auf Dateien.
    → Der Coconut-Dateibaum wird geöffnet.

  5. Navigiere zur oben beschriebenen Datei SingleItem.fields.json. .Füge in dieser Datei im Bereich Item das Ergebnisfeld "item.manufacturer.logo", hinzu.
    Hinweis: Das Komma ist erforderlich wenn das hinzugefügte Ergebnisfeld nicht an letzter Stelle in der Datei steht.

  6. Speichere deine Änderungen.

Damit hast du das Ergebnisfeld deiner Coconut-Datei hinzugefügt und du kannst darauf zugreifen. Damit du diese Artikelinformation in deinem Webshop anzeigen lassen kannst, musst du die folgenden Anpassungen vornehmen.

1.2. Herstellerlogo in der Artikelansicht ausgeben

Im nächsten Schritt nimmst du zwei kleine Einstellungen in der Konfiguration von Coconut vor und passt danach einige Dateien in Coconut an, um die neue Artikelinformation in der Artikelansicht einzubinden.

Konfig-Einstellungen für Artikeldaten in der Artikelansicht vornehmen:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.
    → Das Tab Templates ist bereits vorausgewählt.

  4. Aktiviere in der Liste Partials und Templates überschreiben die Option Artikelansicht.

  5. Speichere die Einstellungen.

  6. Klicke im Navigationsbaum auf Datenfelder.
    → Das Tab Datenfelder wird geöffnet.

  7. Aktiviere in der Liste Datenfelder überschreiben die option Artikeldaten in der Artikelseite.

  8. Speichere die Einstellungen.

Mit diesen beiden Einstellungen hast du sichergestellt, dass dein Webshop beim Laden der Artikelansicht von nun an auf Dateien aus Coconut zurückgreift und die Artikeldaten für die Artikelansicht ebenfalls aus Coconut erhält. Die Artikeldaten haben wir hier bereits angepasst. Im nächsten Schritt möchten wir nun sichtbare Anpasungen an der Artikelansicht vornehmen. Welche Dateien dafür angepasst werden müssen, ist abhängig von der Stelle, an der wir das Logo des Artikelherstellers anzeigen lassen wollen.

Für dieses Beispiel lassen wir das Herstellerlogo an zwei Stellen ausgeben: In den Artikeldetails unterhalb des Variantennamens (1) und im Tab Weitere Details als Substitut für den Herstellernamen (2):

coconut hersteller logo stellen
Bild 1. Stellen an denen das Herstellerlogo angezeigt werden soll

Um das Herstellerlogo in den Artikeldetails und den weiteren Details anzeigen zu lassen, müssen wir die Dateien SingleItem_Details.twig (Artikeldetails) und SingleItem_InformationTable.twig (Weitere Details) unter resources/views/Item/Components/SingleItem anpassen. Wie bei den Ergebnisfeldern weiter oben, musst du auch hier zunächst die Inhalte aus den Ceres-Dateien kopieren und an der gleichen Stelle im Coconut-Dateibaum einfügen.

In den leeren Coconut-Dateien ist jeweils der Hinweis <!-- Insert markup here -→. Beim Kopieren der Inhalte aus Ceres solltest du diese Zeile überschreiben, damit die in dieser Anleitung aufgeführten Zeilenangaben zutreffend sind und nicht um eine Zeile verrutschen.

Zusätzlich müssen die Stellen angepasst werden, die die veränderten Artikeldetails und weiteren Details einbinden. Diese sind:

  • resources/views/Item/SingleItemView.twig

  • resources/views/Item/SingleItemWrapper.twig

  • resources/views/Item/Components/SingleItem.twig

Das klingt nach viel Aufwand, aber keine Panik: Wenn du dich an diese Anleitung hältst, kann nichts schiefgehen. Bevor wir die Code-Anpassungen für die Artikeldetails und die weiteren Details einfügen, passen wir in den drei obengenannten Dateien die Namespaces an. Namespaces definieren, auf welche Code-Stellen zugegriffen werden soll; in den drei Dateien muss der Ceres-Namespace an bestimmten Stellen in Coconut geändert werden.

Namespace in der Datei SingleItemView.twig ändern:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.

  4. Klicke auf Dateien.

  5. Öffne die Datei resources/views/Item/SingleItemView.twig.

  6. Ändere "Ceres::Item.Components.SingleItem" in Zeile 6 in: "CeresCoconut::Item.Components.SingleItem"

  7. Speichere die Einstellungen.

Namespace in der Datei SingleItemWrapper.twig ändern:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.

  4. Klicke auf Dateien.

  5. Öffne die Datei resources/views/Item/SingleItemWrapper.twig.

  6. Ändere Zeile 22 in: {% include [category_template( item.documents[0].data.item.add_cms_page, lang, webstoreConfig.webstoreId ), "CeresCoconut::Item.SingleItemView"] %}

  7. Speichere die Einstellungen.

Namespace in der Datei SingleItem.twig ändern:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.

  4. Klicke auf Dateien.

  5. Öffne die Datei resources/views/Item/Components/SingleItem.twig.

  6. Ändere Zeile 17 in: {% include "CeresCoconut::Item.Components.SingleItem.SingleItem_Details" %}

  7. Ändere Zeile 21 in: {% include "CeresCoconut::Item.Components.SingleItem.SingleItem_InformationTable" %}

  8. Speichere die Einstellungen.

Wenn du den Ceres-Namespace an diesen vier Stellen angepasst hast, werden die betreffenden Stellen in Ceres von Coconut überschrieben und wir können die konkreten Änderungen für die Artikelansicht verbauen.

Je nachdem, welche Anpassungen du in deinem Coconut-Theme vornimmst, ist es möglich, dass die obigen Zeilenangaben nicht mit dem Zeileninhalt deiner Dateien übereinstimmt. Die Anpassungen ersetzen hier lediglich "Ceres" durch "CeresCoconut"; falls die Zeilenangaben abweichen, kannst du die Zeilen dadurch trotzdem finden.

Jetzt weiß Ceres, auf welche Dateien es zugreifen muss, um deine Änderungen im Webshop sichtbar zu machen. Im nächsten Schritt fügen wir das Herstellerlogo an den 2 Stellen auf der Artikelansicht hinzu.

Herstellerlogo unterhalb des Variantennamens einfügen:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.

  4. Navigiere zur Datei resources/views/Item/Components/SingleItem/SingleItem_Details.twig. .Füge nach Zeile 8 unter ${ currentVariation.variation.name } die folgende Zeile ein:
    <img :src="currentVariation.item.manufacturer.logo" alt="TEXT">

  5. Speichere deine Änderungen.

Mit dieser Anpassung setzt du unter den Variantennamen (also unter der Variable ${ currentVariation.variation.name }) ein <img>-Tag, über welches du ein Bild einbinden kannst. Das src-Attribut gibt die Quelle der Bilddatei an und holt sich in unserem Fall über die Variable currentVariation.item.manufacturer.logo die URL die unter System » Systemeinstellungen » Artikel » Hersteller » Hersteller wählen » Logo-URL hinterlegt ist. Das alt-Attribut dient dazu, einen Text anzugeben, der ausgelesen wird, falls das Bild nicht angezeigt werden kann und hilft zudem deine Inhalte Menschen mit Sehbehinderungen zugänglich zu machen, wenn deine Website von einem Screenreader vorgelesen wird. Ersetze also den Platzhalter "TEXT" im alt-Attribut durch einen Text, der die angezeigte Bilddatei beschreibt.
Du siehst vielleicht, dass das <img>-Tag hier etwas anders verwendet wird, als es üblicherweise der Fall ist: Zum einen muss dem src-Attribut ein Doppelpunkt vorangstellt werden; zum anderen wird die Variable, mit der auf die Logo-URL zugegriffen wird, nicht mit $ und den geschwungenen Klammern verwendet. Diese Änderungen sind nötig, da es sich bei der Datei SingleItem_Details.twig um eine Vue.js-Komponente handelt, dessen Syntax etwas anders funktioniert als herkömmliches Twig. Du kannst die Bildgröße durch zusätzliche Attribute hinter alt="TEXT" beinflussen; füge hinter deinem alt-Attribut beispielsweise die beiden Attribute width="40" height="40" ein, um die Bildgröße auf 40x40 px zu setzen.
Auf die gleiche Weise binden wir das Herstellerlogo nun auch im Tab Weitere Details ein:

Herstellerlogo im Tab Weitere Details einfügen:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.

  4. Navigiere zur Datei resources/views/Item/Components/SingleItem/SingleItem_InformationTable.twig.

  5. Ersetze in Zeile 80 die Stelle ${ currentVariation.item.manufacturer.externalName } durch <img :src="currentVariation.item.manufacturer.logo" alt="TEXT">

  6. Speichere deine Änderungen.

Diese Anpassung ersetzt Externer Name des Herstellers (auf den mit der Variable ${ currentVariation.item.manufacturer.externalName } zugegriffen wird) durch das Herstellerlogo, sodass im Tab Weitere Details das Logo in der Zeile Hersteller angezeigt wird.

Es ist notwendig, dass du das Plugin-Set, in dem du die Anpassungen vorgenommen hast, nochmal speicherst und bereitstellst. Nach dem Bereitstellungsprozess kannst du eine Artikelseite in deinem Webshop aufrufen und überprüfen, ob die beiden Anpassungen erfolgreich waren. Im Folgenden findest du eine Checkliste mit Schritten, die zwingend notwendig sind, um deine Anpassungen sichtbar zu machen. Bitte gehe diese Punkt für Punkt durch.

Checkliste für Änderungen an der Artikelansicht:

  • Hast du das Coconut-Plugin installiert und ihm eine Postitionsnummer zugewiesen, die zwischen den Positionen von Ceres und IO liegt?

  • Hast du die Inhalte der SingleItem.fields.json aus Ceres in die Datei SingleItem.fields.json in Coconut kopiert?

  • Hast du weitere Ergebnisfelder (z.B. item.manufacturer.logo) in der SingleItem.fields.json in Coconut hinzugefügt und die Datei gespeichert?

  • Hast du die Option Artikelansicht im Tab Templates der Coconut-Configuration aktiviert?

  • Hast du die Option Artikeldaten in der Artikelseite im Tab Datenfelder der Coconut-Konfiguration aktiviert?

  • Hast du die drei Dateien SingleItemView.twig, SingleItemWrapper.twig und SingleItem.twig hinsichtlich der Namespaces angepasst?

  • Hast du deine eigenen Anpassungen in den Dateien SingleItem_Details.twig und SingleItem_InformationTable.twig eingebaut?

  • Hast du alle Änderungen in Coconut gespeichert?

  • Hast du das Plugin-Set gespeichert und neu bereitgestellt?

Solltest du Fragen oder Anregungen rund um Ceres Coconut haben, kannst du uns gerne deine Gedanken im Forum mitteilen.

Für alle Anpassungen gilt:
  • Um Anpassungen in einer Coconut-Datei zu machen, solltest du zunächst den Inhalt der entsprechenden Datei aus Ceres nach Coconut kopieren.

  • Du musst die Namespaces in allen Dateien ändern, die von dir geänderte Dateien einbinden.

  • Das betreffende Plugin-Set muss gespeichert und bereitgestellt werden, damit Änderungen im Webshop sicht bar werden.

Die Änderungen in Coconut, die du im Laufe dieses Kapitels durchgeführt hast, sollen exemplarisch für Änderungsvorgänge sein. Neben dem Herstellerlogo kannst du natürlich jedes verfügbare Ergebnisfeld in dein Design integrieren. Je nachdem an welcher Stelle du welches Ergebnisfeld verwenden willst, weichen einzelne Schritte von dieser Anleitung ab; im Großen und Ganzen sind die Vorgänge jedoch sehr ähnlich. Nimm dir etwas Zeit und vergleiche deine Artikelansicht im Webshop mit den Dateien SingleItem.Twig, SingleItem_Details.twig und SingleItem_InformationTable.twig und zieh dabei die Liste der Ergebnisfelder zu Rate - du wirst schnell lernen, welche Code-Stellen mit welchen Stellen im Webshop korrespondieren.

1.3. Wunschliste ausblenden

In diesem Unterkapitel wollen wir exemplarisch ein Element in der Artikelansicht ausblenden, in unserem Beispiel die Schaltfläche Zur Wunschliste hinzufügen. Die Änderungen, die du in Kapitel 1.2 gemacht hast, werden hierfür vorausgesetzt, d.h. dass die Namespaces wie oben beschrieben auf CeresCoconut geändert sein müssen.
Das Ausblenden von Elementen funktioniert in der Regel immer gleich: Suche die relevante Stelle im Code, entferne sie, speichere die Einstellungen und stelle dein Plugin-Set erneut bereit. Wir begleiten dich einmal durch den gesamten Prozess:

Wunschliste in der Artikelansicht ausblenden:

  1. Öffne das Menü Plugins » Plugin-Übersicht.
    → Die Plugin-Übersicht wird geöffnet.

  2. Klicke auf das gewünschte Plugin-Set.

  3. Klicke auf Ceres Coconut.
    → Das Plugin wird geöffnet.

  4. Navigiere zur Datei resources/views/Item/Components/SingleItem/SingleItem_Details.twig.

  5. Entferne die Zeilen 104-108. Die Code-Stelle beginnt mit {% if "wish-list" und endet mit {% endif %}

  6. Speichere deine Änderungen.

Die entfernte Stelle beinhaltet eine if-Abfrage, die überprüft, ob die Route zur Wunschliste im Plugin IO aktiviert ist. Ist diese aktiviert, wird die Schaltfläche angezeigt und fügt die geöffnete Variante entlang ihrer Varianten-ID zur Wunschliste hinzu. Durch das Entfernen der Stelle, wird die Schaltfläche permanent ausgeblendet. Nach erneutem Bereitstellen deines Plugin-Sets wird die Schaltfläche Zur Wunschliste hinzufügen nicht mehr angezeigt.

2. Startseite überschreiben

coming soon

3. Kategorieseite anpassen

coming soon

Zum Seitenanfang