Skip to main content

Best Practices: Ceres

Hier findest du Best Practices zu den Themen Ceres und Webshop.

1. Ceres-Updates sicher testen

In diesem Best Practice erfährst du, welche Schritte nötig sind, um neu veröffentlichte Versionen des Ceres Webshop-Templates zu testen, ohne dass dabei der produktive Betrieb deines Webshops beinträchtigt wird. Durch das Implementieren von neuen Features, das Beheben von Bugs und die Vereinfachung der Benutzeroberfläche kann es immer wieder dazu kommen, dass extern entwickelte Plugins, bei denen Abhängigkeiten zu Ceres bestehen (wie beispielsweise Themes ), bei einem Update auf eine höhere Ceres Version zu Problemen führen. Es ist daher ratsam, eine Kopie der Plugin-Set-Konfiguration zu erstellen, mit deren Hilfe die Kompatibilität zwischen einer neuen Ceres Version und anderen Plugins überprüft werden kann.

1.1. Plugin-Set kopieren

Du solltest zunächst ein neues Plugin-Set erstellen, auf welches du alle Einstellungen deines jetzigen Ceres Webshops überträgst. Gehe dafür wie folgt vor:

Plugin-Set kopieren:

  1. Öffne das Menü Plugins » Plugin Übersicht.

  2. Klicke auf Neues Plugin-Set erstellen.
    → Das Fenster Neues Plugin-Set wird geöffnet.

  3. Gib einen Namen für das Plugin-Set ein, der idealerweise ausdrückt, dass es sich um eine Kopie deines Ceres Shops handelt.

  4. Wähle aus der Dropdown-Liste Plugin-Set kopieren das Plugin-Set aus, dessen Konfiguration du auf das neue Plugin-Set übertragen willst.

  5. Speichere die Einstellungen.
    → Das neue Plugin-Set wird erstellt.

Deine Plugin-Set Kopie enthält nun die gleichen Einstellungen wie dein Ceres Shop. Zu diesem Zeitpunkt sind diese beiden Plugin-Sets deckungsgleich. Es bietet sich an, diesen Vorgang vor jedem größeren Update zu wiederholen, damit die Plugin-Set-Kopie auf einem aktuellen Stand ist.

1.2. Ceres Update auf die Plugin-Set Kopie aufspielen

Im nächsten Schritt solltest du nun die erstellte Kopie des Plugin-Sets auf die aktuelle Ceres Version setzen:

Plugin-Set Update:

  1. Öffne das Menü Plugins » Plugin Übersicht.

  2. Wähle die erstellte Kopie des Plugin-Sets.
    → Das Fenster Plugin-Set Details wird geöffnet.

  3. Klicke in der Zeile des Plugins Ceres auf Aktualisieren in der Spalte Aktion.
    → Das Fenster Plugin aktualisieren wird geöffnet. → Die aktuelle Version des Plugins ist vorausgewählt.

  4. Klicke auf installieren.
    → Das Plugin wird installiert.

  5. Wiederhole die Schritte 3 und 4 für das Plugin IO.

  6. Klicke auf Speichern & Plugins bereitstellen.

Die Kopie des Plugin-Sets befindet sich nun auf einem aktuelleren Stand, als das Plugin-Set, über welches dein Ceres Shop läuft. Klicke nun auf das neu erstelle Plugin-Set in der Plugin-Set Liste auf der linken Seite der Oberfläche. Über die Schaltfläche Plugin-Set Vorschau kannst du deinen Ceres Shop mit dem aktualisierten Plugin-Set im Vorschaumodus aufrufen. Überprüfe nun, ob die Änderungen an Ceres zu Inkompatibilitäten mit dem von dir genutzten Theme führen. Wenn die von dir genutzten externen Plugins nach dem Ceres-Update wie gewünscht laufen, kannst du nun entweder die erstellte Kopie des Plugin-Sets für den Mandanten aktivieren oder die Plugins deines ursprünglichen Plugin-Set wie oben beschrieben aktualisieren.

Manche Abhängigkeiten zwischen externen Plugins und Ceres/IO sind nicht sofort ersichtlich. Es ist daher ratsam, das ursprüngliche Plugin-Set nicht vorschnell zu verwerfen, sodass der Wechsel auf die vorherige Version auch nach ein paar Tagen noch möglich ist, ohne dass die Ceres Konfiguration erneut angepasst werden muss. Im Forum  erfährst du schnell, welche Probleme zwischen externen Plugins und neuen Ceres/IO Versionen bestehen können.

2. Filter einrichten

Filter werden in Ceres mithilfe von Attributen und Merkmalen abgebildet. In diesem Best Practice wird beschrieben, wie der Filter Farbe mit den zwei Werten Rot und Schwarz in der Kategorie-Ansicht des Webshops angezeigt wird. Passende Filter werden in der Kategorie-Ansicht nur eingeblendet, wenn es auch Artikel gibt, die mit diesen Filterwerten verknüpft sind.

Das Wichtigste vorab …​
  • Hierbei handelt es sich um ein Best Practice für das Webshop-Plugin Ceres. Ceres ist im plentyMarketplace  verfügbar und läuft auf plentymarkets Systemen. Die Filter aus Ceres werden auch in individuellen Theme-Plugins angezeigt, sofern diese in den Themes nicht überschrieben wurden.

  • Eine Integration in individuelle oder veränderte Template-Plugins ist möglich, bedarf aber individueller Anpassungen, die an dieser Stelle nicht berücksichtigt werden können.

  • Filter können mittels Facetten über Attribute und Merkmale dargestellt werden. In diesem Best Practice werden Filter am Beispiel von Attributen eingerichtet. Filter über Merkmale werden analog eingerichtet. Hierbei legst du eine Merkmalgruppe an, in der du deine Merkmale vom Typ Kein organisierst. Die Merkmale verknüpfst du mit Facetten-Werten.

  • Das Menü Einrichtung » Mandant » Global » Dienste » Facettensuche ist bei plentymarkets Zero-System nur im zentralen Login aktiviert.

2.1. Attribut anlegen

Wir starten also mit einem Attribut.

  1. Öffne das Menü Einrichtung » Artikel » Attribute.

  2. Klicke auf Neues Attribut.

  3. Gib den internen Namen ein, z.B. Farbe.

  4. Speichere die Einstellungen.
    → Das Attribut wird angelegt und das Tab Einstellungen geöffnet.

  5. Wechsle in das Tab Name.

  6. Gib die Übersetzungen für dein Attribut ein.

  7. Wechsle in das Tab Werte.

  8. Klicke auf Neuer Wert.

  9. Gib den internen Namen ein, z.B. Rot.

  10. Wiederhole die Schritte 8 und 9 für den Wert Schwarz.

  11. Speichere die Einstellungen.

Das Attribut mit unseren beiden Werten Rot und Schwarz wird angelegt. Hier kannst du auch weitere Werte wie Fuchsrot oder Karminrot erstellen und in der gleichen Facette Rot verknüpfen.

2.2. Attribut mit Artikel verknüpfen

Attribute verknüpfst du beim Erstellen eines Artikels mit der Hauptvariante des Artikels. Wenn du weitere Varianten erstellst, verknüpfst du diese Varianten ebenfalls mit Attributwerten. Ich erstelle nun meine Varianten im Tab Varianten meines Artikels. Diese Varianten müssen im Webshop aktiv sein, damit später unser Filter eingeblendet wird.

bp ceres filter varianten
Bild 1. Varianten mit passenden Attributwerten

2.3. Facette einrichten

Unsere Filter werden mittels Facetten im Webshop abgebildet. Wir müssen also noch eine neue Facette einrichten und anschließend unsere Attributwerte und den gewünschten Mandanten mit dieser verknüpfen.

  1. Öffne das Menü Einrichtung » Mandant » Global » Dienste » Facettensuche.

  2. Klicke auf Neu, um eine neue Facette hinzuzufügen.

  3. Gib einen Namen für die Facette in der Systemsprache ein, z.B. Farbe.

  4. Wähle den Typ Attribut/Merkmal.

  5. Gib die Position ein, an der die Facette im Webshop erscheinen soll.

  6. Speichere die Einstellungen.

2.4. Attributwerte mit Facette verknüpfen

  1. Öffne das Menü Einrichtung » Mandant » Global » Dienste » Facettensuche.

  2. Öffne die Facette.

  3. Wechsle in das Tab Name.

  4. Gib die Übersetzungen für deine Facette ein.

  5. Wechsle in das Tab Werte.

  6. Klicke auf Wert hinzufügen.

  7. Gib den Namen ein, z.B. Rot.

  8. Gib die Position ein.

  9. Speichere die Einstellungen.
    → Der Facetten-Wert wird hinzugefügt.

  10. Gib im Tab Name die Übersetzungen für deinen Facetten-Wert ein.

  11. Wechsle in das Tab Verknüpfung.

  12. Öffne das Attribut Attribute » Farbe » Rot.

  13. Klicke auf Verknüpfen.

  14. Wiederhole die Schritte 6 bis 13 für den Wert Schwarz.

  15. Speichere die Einstellungen.

bp ceres filter facetten
Bild 2. Verknüpfte Facetten-Werte

2.5. Mandanten mit Facette verknüpfen

  1. Öffne das Menü Einrichtung » Mandant » Mandant wählen » Dienste » Facettenverknüpfung.

  2. Wähle die Facette aus.

  3. Klicke auf Facette verknüpfen.
    → Die Facette wird mit dem ausgewählten Mandanten verknüpft.

  4. Speichere die Einstellungen.

2.6. Plugin bereitstellen

Nun stellen wir unser Plugin-Set noch einmal im Menü Plugins » Plugin Übersicht durch Klick auf Speichern & Plugins bereitstellen bereit, um die Änderungen zu übernehmen und erhalten die Filter in der Suche und in der Kategorie-Ansicht.

bp ceres filter frontend
Bild 3. Gewählter Filter in Kategorie-Ansicht

3. Bestellmerkmale einrichten

In diesem Best Practice richten wir ein Merkmal ein, mit dem man einen Text eingeben kann, der auf ein T-Shirt gedruckt werden soll. Bei einer Eingabe wird ein Aufpreis auf das Produkt berechnet.

Das Wichtigste vorab …
  • Hierbei handelt es sich um ein Best Practice für das Webshop-Plugin Ceres. Ceres ist im plentyMarketplace  verfügbar und läuft auf plentymarkets Systemen.

  • Eine Integration in individuelle oder veränderte Template-Plugins ist möglich, bedarf aber individueller Anpassungen, die an dieser Stelle nicht berücksichtigt werden können.

3.1. Bestellmerkmal anlegen

Wir beginnen mit dem Merkmal.

  1. Öffne das Menü Einrichtung » Artikel » Merkmale.

  2. Wechsle in das Tab Neues Merkmal.

  3. Gib bei Name (intern) die Bezeichnung ein, die das Merkmal in deinem Backend haben soll.

  4. Unter Webshop gibst du bei Name die Bezeichnung ein, die deinem Kunden in der Artikelansicht angezeigt werden soll, in unserem Beispiel "T-Shirt-Druck".

  5. Unter Merkmaltyp wählst du Text aus.

  6. Unter Aufpreis gibst du die Kosten ein, die bei der Nutzung des Merkmals entstehen, z.B. 12,00 Euro für einen T-Shirt-Druck.
    → Setze einen Haken bei Als Zusatzkosten darstellen, damit der Kunde in der Artikelansicht sieht, welchen Aufpreis er für das Merkmal zahlt.

  7. Unter Anzeige setzt du einen Haken bei jeder Checkbox, um die Zusatzkosten im gesamten Bestellvorgang transparent zu halten.

  8. Setze einen Haken bei Bestellmerkmal, um das Merkmal als solches festzulegen.

  9. Speichere die Einstellungen.
    → Das Merkmal ist angelegt.

Deine Maske sollte nun aussehen wie hier:

bp ceres bestellmerkmale einstellungen
Bild 4. Einstellungen des Bestellmerkmals

3.2. Bestellmerkmal mit Artikel verknüpfen

Merkmale werden mit dem Artikel selbst verknüpft. Dazu gehst du wie folgt vor:

  1. Öffne das Menü Artikel » Artikel bearbeiten.

  2. Wähle einen Artikel, mit dem das Merkmal verknüpft werden soll.

  3. Wechsle in das Tab Merkmale.

  4. Setze unter Weitere Merkmale aktivieren » Merkmale ohne Gruppe einen Haken bei dem erstellten Merkmal.

  5. Speichere die Einstellungen.
    → Das Merkmal ist mit dem Artikel verknüpft und wird unter Merkmale angezeigt.

Aufpreise

Unter Merkmale kann abermals ein Aufpreis angegeben werden. Gibst du hier einen Wert ein, überschreibt dieser den im Merkmal hinterlegten Aufpreis.

bp ceres bestellmerkmale artikel
Bild 5. Einstellungen am Artikel

3.3. Plugin bereitstellen

Nun stellen wir unser Plugin-Set noch einmal durch Klcik auf Speichern & Plugins bereitstellen bereit, um die Änderungen zu übernehmen, und erhalten das Bestellmerkmal in Artikelansicht und im Warenkorb.

bp ceres bestellmerkmale artikelansicht
Bild 6. Artikelansicht im Webshop

Gibt der Kunde etwas in das Textfeld ein, wird der Text hinterlegt und der Aufpreis zum Artikelpreis addiert.

bp ceres bestellmerkmale warenkorb
Bild 7. Artikelansicht im Warenkorb

3.4. Bestellmerkmal als Checkbox einrichten

In diesem Best Practice richten wir ein Bestellmerkmal ein, welches als Checkbox in der Artikeleinzelansicht angezeigt wird. Beim Aktivieren der Checkbox wird ein Aufpreis auf das Produkt berechnet.

3.4.1. Merkmalgruppe erstellen

Zunächst legen wir eine neue Merkmalgruppe an. In unserem Beispiel möchten wir, dass Sofa-Zubehör über eine Checkbox zum Produkt dazu gebucht werden kann.

  1. Öffne das Menü Einrichtung » Artikel » Merkmale.

  2. Öffne das Tab Neue Merkmalgruppe.

  3. Gib bei Name (intern) einen Namen für die Merkmalgruppe im Backend ein.

  4. Im Bereich Sprache kannst du für jede Sprache einen eigenen Namen und eine Beschreibung eingeben, die im Webshop angezeigt werden.

  5. Wähle die Option Keine aus der Dropdown-Liste für Gruppierung von Bestellmerkmalen (Typ: "Kein").

  6. Speichere die Einstellungen.

bp ceres bestellmerkmale merkmalgruppe
Bild 8. Merkmalgruppe erstellen
Merkmalgruppe erstellen
BP Ceres Order Property Checkbox 1

3.4.2. Bestellmerkmal anlegen

Nachdem wir eine Merkmalgruppe für Sofa-Zubehör angelegt haben, möchten wir nun ein neues Merkmal, z.B. ein Sofakissen, anlegen und dieses mit der Merkmalgruppe verknüpfen.

  1. Öffne das Menü Einrichtung » Artikel » Merkmale.

  2. Wechsle in das Tab Neues Merkmal.

  3. Gib bei Name (intern) einen Namen für das Merkmal im Backend ein.

  4. Im Bereich Webshop kannst du für jede Sprache einen eigenen Namen und eine Beschreibung eingeben, die im Webshop angezeigt werden.

  5. Wähle bei Merkmalgruppe die eben erstellte Merkmalgruppe aus der Dropdown-Liste aus.

  6. Wähle die Option Kein aus der Dropdown-Liste Merkmaltyp aus.

  7. Unter Aufpreis gibst du die Kosten an, die bei der Nutzung des Merkmals entstehen, z.B. 15,00 Euro für ein Sofakissen.
    → Setze einen Haken bei Als Zusatzkosten darstellen, damit der Kunde in der Artikelansicht sieht, welchen Aufpreis er für das Merkmal zahlt.

  8. Setze im Bereich Anzeige die Haken an den Stellen, an denen das Merkmal angezeigt werden soll.

  9. Aktiviere die Checkbox bei Bestellmerkmal.

  10. Speichere die Einstellungen.

Das Bestellmerkmal Sofakissen wurde nun erfolgreich angelegt.

bp ceres bestellmerkmale neues merkmal
Bild 9. Neues Bestellmerkmal anlegen

3.4.3. Bestellmerkmal mit Artikel verknüpfen

Zu guter Letzt müssen wir die gewünschten Artikel mit dem gerade erstellten Bestellmerkmal verknüpfen.

  1. Öffne das Menü Artikel » Artikel bearbeiten.

  2. Wähle einen Artikel, der mit dem erstellten Merkmal verknüpft werden soll.

  3. Wechsle in das Tab Merkmale.

  4. Setze unter Weitere Merkmale aktivieren einen Haken bei dem Merkmal in der erstellten Merkmalgruppe .

  5. Speichere die Einstellungen.
    → Das Merkmal wird mit dem Artikel verknüpft.

bp ceres bestellmerkmale verknuepfung
Bild 10. Bestellmerkmal mit Artikel verknüpfen
Änderungen anzeigen

Bitte beachten Sie, dass es etwa 15 Minuten dauern kann, bis die Änderungen im Webshop abgezeigt werden, da dies das Intervall ist, in dem der ElasticSearch Index erneuert wird.

4. Cross-Selling einrichten

Diese Best Practice Anleitung unterstützt Sie beim Einrichten von Cross-Selling-Artikellisten in Ceres.

Das Wichtigste vorab …​
  • Hierbei handelt es sich um ein Best Practice für das Webshop-Plugin Ceres. Ceres ist im plentyMarketplace  verfügbar und läuft auf plentymarkets Systemen.

  • Dieses Best Practice setzt voraus, dass bereits Cross-Selling-Beziehungen am Artikel hinterlegt sind. Wie Sie Cross-Selling-Einstellungen für Ihre Artikel vornehmen, erfahren Sie hier.

4.1. Cross-Selling-Artikellisten konfigurieren

Öffnen Sie das Menü Plugins » Plugin-Übersicht » Ceres » Konfiguration » Item lists. Hier stellen Sie ein, welche Art von Artikellisten Sie in Ihrem Webshop verwenden wollen. Im Feld Cross-selling: Cross-selling relation (Punkt 1 im Bild) wählen Sie den Typ der Cross-Selling Beziehung aus, den Ihre Artikelliste abbilden soll. Ihnen stehen dabei die Optionen Similiar (für ähnliche Artikel), Accessory (für Zubehör), Replacement part (für Ersatzteile) oder Collection (für Artikelpakete) zur Verfügung. Diese Auswahl bezieht sich auf alle Cross-Selling-Artikellisten, die Sie in Ihrem Webshop einrichten möchten.

Im nächsten Schritt legen Sie fest, welche Artikeliste genutzt werden soll. Hierfür bearbeiten Sie das Feld First item list, Second item list oder Third item list und wählen Cross-selling aus der Dropdown-Liste. Im unteren Beispiel wurde die Second item list bearbeitet (Punkt 2 im Bild). In den Eingabefeldern Name of the second item list (DE) und Name of the second item list (EN) kann nun noch ein Name für die Artikelliste definiert werden, jeweils für die deutschsprachige und die englischsprachige Ansicht.

Wenn Sie alle Einstellungen getroffen haben, klicken Sie auf Speichern.

bp ceres cross selling konfig
Bild 11. Cross-Selling einrichten

4.2. Cross-Selling-Artikellisten im Webshop anzeigen

Nachdem Sie festgelegt haben, welche Artikelliste für Cross-Selling verwendet werden soll, legen Sie nun fest, an welcher Stelle im Webshop die Artikelliste angezeigt werden soll.

Öffnen Sie das Menü CMS » Container-Verknüpfungen. Hier scrollen Sie zu der Artikelliste, die Sie als Cross-Selling-Artikelliste konfigueriert haben, also First item list, Second item list oder Third item list. Nun wählen Sie den Layout-Container, in dem Sie die Artikelliste anzeigen lassen möchten. Im unteren Beispiel lassen wir die zweite Artikelliste im Container der Artikeleinzelansicht anzeigen.

bp ceres cross selling container
Bild 12. Container für Artikelliste wählen
Änderungen anzeigen

Bitte beachten Sie, dass es etwa 15 Minuten dauern kann, bis die Änderungen im Webshop abgezeigt werden, da dies das Intervall ist, in dem der ElasticSearch Index erneuert wird.

5. Eigenschaften im Warenkorb und im Checkout ausgeben

Da Ceres zum gegenwärtigen Zeitpunkt die Ausgabe von Eigenschaften im Warenkorb und im Checkout noch nicht unterstützt, hilft dir dieses Best Practice dabei, den Code in deinem Theme so anzupassen, dass du die Eigenschaften, die du ausgeben möchtest, im Warenkorb anzeigen lassen kannst. Da der Checkout dafür die gleiche Komponente verwendet wie der Warenkorb, reicht es aus, die eine beschriebene Komponente anzupassen.

Du solltest die beschriebenen Anpassungen in einem eigenen Theme-Plugin verbauen, damit die Änderungen nicht bei einem Ceres-Update überschrieben werden. Du kannst die Anpassungen auch im Ceres-Plugin selbst durchführen, allerdings wirst du die betreffende Stelle dadurch nach jedem Ceres-Update erneut anpassen müssen, da dein Ceres durch das Update überschrieben wird.

5.1. BasketListItem.twig anpassen

Im ersten Schritt suchst du in der Dateistruktur des Ceres-Plugins die Komponente BasketListItem.twig unter /resources/views/Basket/Components/BasketListItem.twig. Dies ist die Komponente für Warenkorbartikel und muss angepasst werden, um Eigenschaften im Warenkorb darzustellen. In Zeile 101 der Komponente findest du die folgende Zeile:
<div class="item-properties" v-if="basketItem.basketItemOrderParams.length">
Binde nun darüber den folgenden Code ein:

<div class="item-properties" v-if="basketItem.variation.data.variationProperties">
    <template v-for="i in [5, 6, 2, 3]">
        <template v-for="property in basketItem.variation.data.variationProperties">
            <template v-if="property.property.id === i">
                <div>
                    <span v-text="property.property.names.name"></span>
                    <strong v-html="property.values && property.values.value"></strong>
                </div>
            </template>
        </template>
    </template>
</div>

Die CSS-Klasse "item-properties" wurde hier nur zu Illustrationszwecken aufgeführt und steht stellvertretend für die Möglichkeit, eine CSS-Klasse hier angeben zu können.

Das Array in Zeile 2 des Code-Snippets (<template v-for="i in [5, 6, 2, 3]">) enthält die IDs der Eigenschaften, die du im Warenkorb ausgeben möchtest, in diesem Beispiel also die Eigenschaften mit den IDs 5, 6, 2 und 3. Die IDs der Eigenschaften müssen kommasepariert eingegeben werden. Sie werden in der Reihenfolge im Warenkorb angezeigt, in der sie im Array angegeben sind. Die IDs deiner Eigenschaften findest du im Menü Einrichtung » Einstellungen » Eigenschaften » Konfiguration.

Die 3 <template>-Tags im Code-Snippet werden nicht im Frontend ausgegeben, sondern dienen hier als Schleifenelement, um über die einzelnen Eigenschaften zu iterieren. Diese solltest du nicht anpassen.+

Das <span>-Element gibt den Namen der Eigenschaft aus. Dieses Element kann durch andere Elemente, wie etwa ein <p>-Tag oder ein <strong>-Tag ersetzt werden. Die v-text Direktive darf allerdings nicht entfernt werden.

Im <strong>-Element wird, falls vorhanden, der Wert der jeweiligen Eigenschaft ausgegeben. Die hier verwendete Direktive ist v-html und nicht v-text, damit gegebenenfalls HTML-Formatierungen von Texteigenschaften berücksichtigt werden.

Im zweiten Schritt müssen nun 2 Ergebnisfelder ergänzt werden.

5.2. BasketItem.fields.json anpassen

Suche nun die Datei BasketItem.fields.json unter /resources/views/ResultFields/BasketItem.fields.json. In dieser Datei musst du die beiden Ergebnisfelder "variationProperties.values" und "variationProperties.property.id" hinzufügen. Bitte achte darauf, dass du nach jedem Ergebnisfeld außer dem letzten Feld in der JSON-Datei ein Komma setzt, sodass die Datei weiterhin valides JSON enthält.

Speichere deine Änderungen und stelle das Plugin-Set neu bereit. Deine Eigenschaften sollten nun im Warenkorb sowie in der Warenkorbübersicht im Checkout angezeigt werden.

6. Hinweise zur Senkung der Mehrwertsteuer (01.07.2020)

Zum 01.07.2020 wird der gesetzliche Mehrwertsteuersatz gesenkt. Hierbei kann es zu Problemfällen kommen, wenn Bestellungen vor dem 01.07. getätigt werden (bei denen also der vorherige Satz greift und im Webshop angezeigt wurde), aber erst nach dem 01.07. versendet werden (und demnach unter den gesenkten Satz fallen müssten). Um diesen Problemfällen entgegenzuwirken, empfehlen wir, einerseits sämtliche explizite Verweise auf den anzuwendenden Mehrwertsteuersatz aus dem Webshop zu entfernen und andererseits auch alle Auflistungen von Nettopreisen (für B2C-Verkäufe), bzw. Bruttopreisen (für B2B-Verkäufe) zu entfernen, da diese als Berechnungsgrundlage für die zugrundeliegenden Steuersätze genutzt werden können.

Weitere Informationen zur Rechtsgrundlage findet ihr im Blog von Trusted Shops .

Wenn du ein eigenes Theme im Einsatz hast, ist es möglich, dass du weitere Stellen im Webshop anpassen musst, an denen Preise oder Mehrwertsteuersätze ausgegeben werden. Diese individuellen Fälle können wir in diesem Best Practice nicht abbilden.

Du solltest die folgenden Anpassungen in einer Kopie deines aktiven Plugin-Sets durchführen. Du kannst die angepasste Plugin-Set-Kopie dann vor dem Stichtag aktivieren und später, nachdem alle Bestellungen bearbeitet wurden, die vor dem Stichtag getätigt, aber erst nach dem Stichtag versendet wurden, auf dein altes Plugin-Set wechseln, damit Preise und explizite Mehrwertsteuersätze wieder wie vorher im Webshop angezeigt werden. Weitere Informationen zur Arbeit mit Plugin-Sets findest du hier.

6.1. CSS-Anpassungen

Um sämtliche Verweise auf Nettopreise in deinem Webshop auszublenden, muss das CSS angepasst werden. Am einfachsten ist es, dafür das Plugin Custom CSS/JS im Frontend  zu verwenden.

Füge das Plugin deinem plentymarkets System hinzu wie hier beschrieben. Danach installierst du das Plugin.

Nachdem das Plugin installiert wurde, öffnest du die Plugin-Einstellungen über die Aktion Einstellungen. Im Tab Stylesheets findest du ein Textfeld für CSS, in welches du den folgenden Code-Schnipsel einfügst:

.cmp-totals dl dt:not(.font-weight-bold),
.cmp-totals dl dd:not(.font-weight-bold),
.cmp-totals .vatTotals,
.cmp-totals hr {
    display: none;
}

.cmp-totals dl {
    margin-bottom: 0;
}

.cmp-totals .vat-change,
.cmp-totals .totalSum hr {
    display: block !important;
}

.cmp-totals .rebate-hint {
    display: inline-block !important;
}

Speichere deine Änderungen. Aktiviere das Plugin in deinem Plugin-Set. Nach dem erneuten Bereitstellen deines Plugin-Sets werden keine Nettopreise mehr in deinem Webshop angezeigt.

6.2. Anpassungen im ShopBuilder

Im ShopBuilder musst du 2 Seiten anpassen: den Warenkorb und den Checkout. Auf diesen Seiten musst du jeweils ein Code-Widget einfügen.

6.2.1. Code-Widgets platzieren

Um deinen Webshop auch in der Übergangszeit rechtssicher zu betreiben, musst du einen Hinweis ausgeben, dass sich die angezeigten Preise inklusive Mehrwertsteuer (für B2C-Verkäufe), bzw. zuzüglich Mehrwertsteuer (für B2B-Verkäufe) verstehen. Damit dieser Hinweis auch automatisch in anderen Sprachen, die du pflegst, ausgegeben wird, verwenden wir dafür den Mehrsprachigkeits-Eintrag Ceres::Template.itemInclVAT für B2C- und Ceres::Template.itemExclVAT für B2B-Kund:innen. Dadurch wird B2C-Kund:innen der Preis als Bruttopreis inklusive Mehrwertsteuer, und B2B-Kund:innen der Nettopreis exklusive Mehrwertsteuer angezeigt.

  1. Öffne das Menü CMS » Mehrsprachigkeit.

  2. Klappe den Bereich Artikel aus.

  3. Überprüfe den Text in den Einträgen itemInclVAT und itemExclVAT und passe diese ggf. in deinen Webshop-Sprachen an.

  4. Speichere () die Einstellungen.

  5. Speichere () das Plugin-Set im Menü Plugins » Plugin-Set-Übersicht.

Öffne nun den ShopBuilder unter CMS » ShopBuilder. Auf deinen Inhalten für den Warenkorb und den Checkout musst du nun ein Code-Widget unterhalb der Summen-Widgets platzieren. In jedes dieser Code-Widgets fügst du den folgenden Code ein:

<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && !$store.state.basket.showNetPrices">Ceres::Template.itemInclVAT</div>
<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && $store.state.basket.showNetPrices">Ceres::Template.itemExclVAT</div>

Speichere () die Änderungen an deinem ShopBuilder-Inhalt.

6.3. Anpassungen an Ceres-Templates

Es gibt 2 Stellen im Webshop, auf denen der Mehrwertsteuer-Hinweis nicht über den ShopBuilder eingefügt werden kann: die Auftragshistorie und die Warenkorbvorschau. Um trotzdem rechtssicher verkaufen zu können, kannst du 3 kleine Code-Stellen im Ceres-Plugin anpassen, um den Hinweis auch an diesen Stellen ausgeben zu lassen. Die Anpassungen am Code, sorgen dafür, dass der gleiche Text aus der Mehrsprachigkeit genommen wird, der auch in den Code-Widgets angezeigt wird, die du vorher im ShopBuilder hinzugefügt hast.

Die 3 Anpassungen sind im Folgenden detailliert aufgeführt. Wir haben zusätzlichen einen Pull Request offen, in dem du die Code-Änderungen direkt nachverfolgen kannst. Diesen Pull Request findest du auf GitHub . Scrolle auf der Seite weiter nach unten, um die Datei-Änderungen einzusehen.

6.3.1. Auftragshistorie anpassen

Um den Hinweis zur Mehrwersteuer auch in der Auftragshistorie im Mein Konto-Bereich anzuzeigen, musst du ein Code-Schnipsel in einer Template-Datei einfügen. Gehe dafür wie im Folgenden beschrieben vor:

  1. Öffne das Menü Plugins » Plugin-Set-Übersicht.

  2. Klicke in der Zeile deiner Plugin-Set-Kopie auf die Aktion Plugin-Set bearbeiten.
    → Das Plugin-Set wird geöffnet.

  3. Klicke in der Zeile des Plugins Ceres auf die Aktion Einstellungen.
    → Die Ceres-Einstellungen werden geöffnet.

  4. Klicke links im Navigationsbaum auf den Tab Dateien.
    → Die Dateistruktur des Plugins wird geöffnet.

  5. Klicke auf den Ordner resources.

  6. Klicke darin auf den Ordner views.

  7. Klicke darin auf den Ordner Checkout.

  8. Klicke darin auf den Ordner Macros.

  9. Klicke auf die Datei OrderTotals.twig.
    → Die Datei wird im Editor geöffnet.

  10. Füge den unten aufgeführten Code nach dem {% endif %}-Element in Zeile 186 in einer neuen Zeile ein.

  11. Speichere () deine Änderungen.

<dt class="w-100 vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && !$store.state.basket.showNetPrices">Ceres::Template.itemInclVAT</dt>
<dt class="w-100 vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && $store.state.basket.showNetPrices">Ceres::Template.itemExclVAT</dt>

Durch diese Anpassung wird der Text, der in der Mehrsprachigkeit in den Einträgen itemInclVAT und itemExclVAT hinterlegt sind, auch in der Auftragshistorie angezeigt.

6.3.2. Standard-Header anpassen

Für ShopBuilder-Inhalte, bei denen du keinen eigenen Header verwendest, muss der Standard-Header angepasst werden, damit der Hinweis zur Mehrwertsteuer auch in der Warenkorbvorschau angezeigt wird. Gehe dafür wie im Folgenden beschrieben vor:

  1. Öffne das Menü Plugins » Plugin-Set-Übersicht.

  2. Klicke in der Zeile deiner Plugin-Set-Kopie auf die Aktion Plugin-Set bearbeiten.
    → Das Plugin-Set wird geöffnet.

  3. Klicke in der Zeile des Plugins Ceres auf die Aktion Einstellungen.
    → Die Ceres-Einstellungen werden geöffnet.

  4. Klicke links im Navigationsbaum auf den Tab Dateien.
    → Die Dateistruktur des Plugins wird geöffnet.

  5. Klicke auf den Ordner resources.

  6. Klicke darin auf den Ordner views.

  7. Klicke darin auf den Ordner PageDesign.

  8. Klicke darin auf den Ordner Partials.

  9. Klicke darin auf den Ordner Header.

  10. Klicke auf die Datei DefaultHeader.twig.
    → Die Datei wird im Editor geöffnet.

  11. Füge den unten aufgeführten Code nach Zeile 118 in einer neuen Zeile ein.

  12. Speichere () deine Änderungen.

<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && !$store.state.basket.showNetPrices">Ceres::Template.itemInclVAT</div>
<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && $store.state.basket.showNetPrices">Ceres::Template.itemExclVAT</div>

Durch diese Anpassung wird der Text, der in der Mehrsprachigkeit in den Einträgen itemInclVAT und itemExclVAT hinterlegt sind, auch in der Warenkorbvorschau des Standard-Headers angezeigt.

6.3.3. Eigenen ShopBuilder-Header anpassen

Für ShopBuilder-Inhalte, für die du einen eigenen Header angelegt hast, muss der Code des Top Bar-Widgets angepasst werden, damit der Hinweis zur Mehrwertsteuer auch in der Warenkorbvorschau angezeigt wird. Gehe dafür wie im Folgenden beschrieben vor:

  1. Öffne das Menü Plugins » Plugin-Set-Übersicht.

  2. Klicke in der Zeile deiner Plugin-Set-Kopie auf die Aktion Plugin-Set bearbeiten.
    → Das Plugin-Set wird geöffnet.

  3. Klicke in der Zeile des Plugins Ceres auf die Aktion Einstellungen.
    → Die Ceres-Einstellungen werden geöffnet.

  4. Klicke links im Navigationsbaum auf den Tab Dateien.
    → Die Dateistruktur des Plugins wird geöffnet.

  5. Klicke auf den Ordner resources.

  6. Klicke darin auf den Ordner views.

  7. Klicke darin auf den Ordner Widgets.

  8. Klicke darin auf den Ordner Header.

  9. Klicke auf die Datei TopBarWidget.twig.
    → Die Datei wird im Editor geöffnet.

  10. Füge den unten aufgeführten Code nach Zeile 210 in einer neuen Zeile ein.

  11. Speichere () deine Änderungen.

<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && !$store.state.basket.showNetPrices"></div>
<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && $store.state.basket.showNetPrices"></div>

Durch diese Anpassung wird der Text, der in der Mehrsprachigkeit in den Einträgen itemInclVAT und itemExclVAT hinterlegt sind, auch in der Warenkorbvorschau von Headern angezeigt, die ihr selbst im ShopBuilder bearbeitet habt.

Alternativ hast du die Möglichkeit, die Warenkorbvorschau über die Einstellungen des Top Bar-Widgets komplett auszublenden. Dadurch würdest du dir diese eine Template-Anpassung sparen.

Sowohl das Reparieren des Ceres-Plugins als auch ein Update des Ceres-Plugins machen diese Template-Anpassungen wieder rückgängig.

7. Bessere Werte bei Google Page Speed Insights erzielen

In diesem Best Practice lernst du, auf welche Dinge du achten musst, um deine Performance-Werte bei Google Page Speed Insights zu verbessern. Im ersten Schritt zeigen wir dir, wie du mit den Mitteln, die plentyShop Ceres bereits mitbringt, höhere PSI-Werte erzielen kannst. Zu einem späteren Zeitpunkt wird diese Anleitung auch Anpassungen enthalten, die du mit einem eigenen Theme umsetzen kannst, um von Google PSI besser bewertet zu werden. Die hier aufgeführten Maßnahmen erfordern keinerlei Programmierungskenntnisse.

Im Folgenden sind einige Anpassungen aufgeführt, die du für deinen plentyShop durchführen kannst, um die von Google erfassten Werte zu verbessern:

7.1. Live-Modus im Ceres-Plugin aktivieren

Im Plugin Ceres hast du die Möglichkeit, zwischen dem Entwicklungsmodus und dem Live-Modus zu wählen. Im Entwicklungsmodus kannst du Debugging-Optionen nutzen und die Dateien des Plugins werden nicht minimiert und gebündelt, was sich negativ auf die Webshop-Performance auswirkt. Wir raten dir daher, den Live-Modus zu verwenden, um deinen Webshop performanter zu machen. Gehe wir im Folgenden beschrieben vor, um den Live-Modus zu aktivieren:

Live-Modus aktivieren:

  1. Öffne das Menü Plugins » Plugin-Set-Übersicht.

  2. Wähle das Plugin-Set aus deines Webshops aus.

  3. Klicke auf Plugin-Set bearbeiten.

  4. Klicke in der Zeile des Plugins Ceres auf Einstellungen.
    → Die Ceres-Einstellungen werden geöffnet.

  5. Klicke auf das Tab Logging und Performance.

  6. Wähle für die Einstellung Performance-Level die Option Live-Modus.

  7. Speichere () die Einstellungen.

Dadurch, dass du diese Einstellung aktiviert hast, werden die Ceres-Dateien gebündelt und minimiert, was zu einer schnelleren Auslieferungszeit der Seiten im Webshop führt.

7.2. Vue Server-Side Rendering aktivieren

Mit Ceres v5.0.29 führen wir Vue Server-Side Rendering (kurz: SSR) ein. Durch SSR werden viele Shop-Komponenten bereits auf dem Server verarbeitet, sodass bereits generierte Seiten direkt an den Browser ausgeliefert werden können. Der Browser muss den übermittelten Code nicht erneut ausführen. Dies hat insbesondere auf die Bewertung der mobilen Seiten positiven Einfluss.

Im plentyShop-Assistenten und in den Ceres-Einstellungen könnt ihr im Bereich Performance die Einstellung Vue Server-Side Rendering aktivieren vornehmen. Aktiviere diese Einstellung erst in einem separaten Plugin-Set und teste deinen Shop, bevor du SSR auch für dein Produktivsystem aktivierst.

Wenn du SSR verwenden möchtest, solltest du die Bilder-Widgets, die du auf deinen Seiten verwendest, anpassen. Für Bilder-Widgets stehen dir zwei hilfreiche Einstellungen zur Verfügung: Peloading und Lazyloading. Die folgenden Kapitel erklären dir, wie du deine Bilder am besten einstellst.

7.3. Bilder-Widgets optimal einstellen

Bilddateien sind eine der größeren Problemquellen für einen performanten Webshop. Du solltest also darauf achten, dass du nur so viele Bilder-Widgets in deinen Seiten verbaust, wie für deine Zwecke nötig sind. Eine geringere Zahl von Bilder-Widgets wird sich positiv auf die Webshop-Geschwindigkeit auswirken.

7.3.1. Bilder im sichtbaren Bereich vorladen (Preloading)

Ab Ceres v5.0.29 haben die Widgets Bilderbox, Bilderkarussell, Hintergrundbild und Artikelbild die Einstellung Bild vorladen. Diese Einstellung kann nur mit dem oben beschriebenen Server-Side Rendering verwendet werden. Indem du Bilder, die sich beim Aufruf der Seite im sichtbaren Bereich befinden, vorlädst, kannst du den Largest Contentful Paint (LCP) deutlich reduzieren. Der LCP ist abhängig davon, wann das größte gerenderte Inhaltselement im sichtbaren Bereich erscheint. Meistens handelt es sich dabei um Bilder.
Du solltest die Einstellung Bild vorladen für alle Bilder aktivieren, die sich in der initialen Ansicht der Seite befinden, also bevor die Benutzerin weiter nach unten gescrollt hat. Weiter unten erfährst du, wie du den Largest Contentful Paint auf deinen Seiten ausfindig machen kannst.

7.3.2. Bilder im nicht sichtbaren Bereich nachladen (Lazy Loading)

Weiterhin emfehlen wir dir, für sämtliche Widgets, die Bilder beinhalten, die Option Nur sichtbare Inhalte laden in den Widget-Einstellungen zu aktivieren. Diese Option, das sogenannte "Lazy Loading", sorgt dafür, dass die Bilddateien, die sich beim ersten Aufruf der Seite nicht im aktuellen Sichtbereich befindet, zu einem späteren Zeitpunkt nachgeladen wird. Dies wirkt sich positiv auf die Performance des Webshops aus.
Lazy Loading ist für Widgets in ShopBuilder-Vorlagen standardmäßig deaktiviert.

Wenn du Server-Side Rendering (SSR) verwendest, ist es wichtig, dass Lazy Loading nur für diejenigen Bilder-Widgets aktiviert wird, die sich beim Aufruf der jeweiligen Seite nicht im sichtbaren Bereich befinden.

7.3.3. Moderne Bildformate verwenden

Darüber hinaus raten wir dir, die Bilder, die du im Webshop anzeigen willst, in möglichst modernen Bildformaten abzulegen. Wir empfehlen dir, in den Widgets Bilderbox, Bilderkarussell und Hintergrundbild das Feld Bildauswahl zu nutzen, um dort Bilder im WebP-Format zu hinterlegen. Wenn du eine WebP-Datei nutzt, wird dir zusätzlich die Option Bildauswahl für ältere Browser eingeblendet, um Bilder auch in Browsern anzuzeigen, die bisher keine WebP-Formate unterstützen. Dort solltest du nach Möglichkeit das Format JPEG verwenden.

7.3.4. Largest Contenful Paint (LCP) identifizieren

Um den LCP auf deinen Seiten zu identifizieren, kannst du PageSpeed Insights nutzen.

LCP identifizieren:

  1. Öffne PageSpeed Insights.

  2. Gib die URL der Seite, deren LCP du überprüfen willst ein.

  3. Klicken auf Analysieren. → Die Analyse der Seite wird gestartet.

  4. Scrolle nach abgeschlossener Analyse zum Bereich Diagnose.

  5. Klicke auf Largest Contentful Paint-Element, um den Bereich auszuklappen.

  6. Das angezeigte Inhaltselement ist der LCP dieser Seite.

Nachdem du den LCP identifiziert hast, überprüfe nun, ob du für dieses Element: . Preloading aktiviert hast . das Bild im WebP-Format hinterlegt hast . die Dateigröße reduzieren kannst

Diese drei Maßnahmen helfen dabei, den Largest Contentful Paint gering zu halten.

7.4. Anzahl der Plugins reduzieren

Jedes zusätzliche Frontend-Plugin, das du in deinem plentyShop einbindest, kann deine Shop-Performance negativ beeinflussen. Dies gilt insbesondere für Plugins, die eine große Menge Javascript mit sich bringen. Du solltest also nur die Plugins in deinem aktiven Plugin-Set aktivieren, die du wirklich für den Produktivbetrieb deines plentyShops brauchst.
Um zu überprüfen, welche Plugins sich besonders negativ auf deine Performance auswirken, kannst du eine Plugin-Set-Kopie deines jetzigen plentyShops anlegen und zunächst alle Plugins bis auf Ceres und IO deaktivieren. Nach einem PSI-Test schaltest du nun das nächste Plugin, von dem du denkst, dass es für deinen plentyShop notwendig ist, aktiv, machst den nächsten PSI-Test und wiederholst den Vorgang für alle weiteren Plugins deiner Plugin-Set-Kopie.
Falls du SSR nutzt, ist es sinnvoll, Plugins einzubinden, die bereits ein SSR-fähiges Update erhalten haben. Wende dich im Zweifelsfall an die Entwickler:innen der betreffenden Plugins. In diesem Thema sind Plugins aufgelistet, bei denen Inkompatibilitäten mit SSR bekannt sind.

7.5. Anzahl der Widgets reduzieren

Die Zahl der Widgets, die du auf deinen Webshop-Seiten verbaust, können die Performance deines Webshops negativ beeinflussen: Je mehr Widgets du pro Seite nutzt, desto langsamer lädt diese Seite. Dies gilt insbesondere für Bilder-Widgets und für Widgets, die eine große Menge an Artikeldaten enthalten. Jedes zusätzliche Widget beinträchtigt die Zeit bis zur ersten vollständigen Interaktivität der Seite.
Wir empfehlen dir daher, nur so viele Widgets pro Seite zu verwenden, wie für deine Zwecke nötig sind. Vor allem auf Kategorieseiten, auf denen große Datenmengen und komplexes Javascript geladen werden muss, solltest du, wenn möglich, die Anzahl der dargestellten Artikel reduzieren und dadurch die Ladezeit verbessern.

7.6. ShopBooster aktivieren

Die Time-to-first-Byte (TTFB) ist ebenfalls Bestandteil der PSI-Erfassung, auch wenn sie nur einen geringen Teil der Wertung darstellt. Um deine TTFB zu verbessern, kannst du für deinen plentyShop Ceres das kostenpflichtige Zusatzmodul ShopBooster aktivieren. Dadurch werden Seiteninhalte von Ceres Webshops bei einem zweiten Aufruf in den Cache geschrieben, um dadurch deutlich bessere Ladezeiten für deine Nutzer:innen zu erzielen.

Insbesondere im Zusammenspiel mit Server-Side Rendering (SSR) ist es sinnvoll, ShopBooster zu aktivieren, da die Verwendung von SSR die TTFB leicht erhöhen kann.

Zusätzliche Kosten

Durch das Aktivieren des ShopBoosters fallen pro Mandant zusätzliche Kosten in Höhe von 0,004 € pro 100 Seitenaufrufe und -änderungen an. Ein Seitenaufruf ist der Vorgang, bei dem ein Shop-Besucher oder ein Webcrawler eine URL des Online-Shops aufruft; eine Seitenänderung wird durch folgende Vorgänge ausgelöst:

  • Aktualisieren von Kategorien- und Artikeldaten

  • Aktualisieren von ShopBuilder-Seiten

  • Bereitstellen von Plugins

  • Speichern von Einstellungen in der Ceres Konfiguration

  • Invalidieren des Caches bei Deaktivierung des ShopBoosters

Die Zusatzkosten des ShopBoosters betragen monatlich maximal 100€ pro Mandant.

ShopBooster aktivieren:

  1. Öffne das Menü Einrichtung » Mandant » Mandant wählen » Webshop » ShopBooster.

  2. Klicke auf ShopBooster aktivieren.
    → Ein Fenster öffnet sich, welches dich auf entsprechende zusätzliche Kosten hinweist.

  3. Klicke auf Bestätigen um den ShopBooster zu aktivieren.
    → Die Meldung ShopBooster wurde aktiviert wird eingeblendet.

Auf die gleiche Weise kannst du den ShopBooster wieder deaktivieren.

ShopBooster deaktivieren:

  1. Öffne das Menü Einrichtung » Mandant » Mandant wählen » Webshop » ShopBooster.

  2. Klicke auf ShopBooster deaktivieren.
    → Ein Fenster öffnet sich, welches dich auf zusätzliche Kosten hinweist.

  3. Klicke auf Bestätigen um den ShopBooster zu deaktivieren.
    → Die Meldung ShopBooster wurde deaktiviert wird eingeblendet.

7.7. Unsichtbaren Text durch eigene Schriftarten vermeiden

Falls du eigene Schriftarten einbindest, ohne dabei auf die Design-Einstellungen des ShopBuilders zurückzugreifen, kann es dazu kommen, dass manche Browser versuchen, den Text darzustellen, bevor die betroffene Font-Datei geladen wurde. Dadurch kommt es zu einem sogenannten Flash of invisible text (FOIT), also einer kurzen Zeit, in der der darzustellende Text vom Browser nicht angezeigt werden kann.
Um dies zu vermeiden, kannst du über eine CSS-Anweisung vorübergehend eine Systemschriftart anzeigen lassen, bis die betroffene Schriftart geladen wurde. Dazu fügst du in deinem eigenen CSS (beispielsweise über das Plugin Custom CSS/JS im Frontend) die Anweisung font-display: swap in deinen @font-face Styles ein. Dadurch vermeidest du unangenehme FOIT, was sich positiv auf den PSI-Wert deines Webshops auswirkt.

7.8. Javascript in Code-Widgets vermeiden

Im ShopBuilder steht dir ein Code-Widget zur Verfügung, über das du zusätzliche Anpassungen vornehmen kannst, die der ShopBuilder nicht von selbst bereitstellt. Wenn du eigenen Code einbinden möchtest, raten wir dir dazu, eigenes Javascript nicht über Code-Widgets zu realisieren, sondern beispielsweise über das Plugin Custom CSS/JS im Frontend oder ein eigenes Theme. Zusätzliches Javascript in Code-Widgets zu verarbeiten, wirkt sich negativ auf die Ladezeit der Seite aus.
Falls du eigenes Javascript über ein Plugin oder ein Theme einbindest, empfehlen wir dir, das Javascript ganz am Ende des HTML-Body zu verbauen.

7.9. Plugins für Zahlungsarten richtig verknüpfen

Wenn du Plugin-Zahlungsarten für deinen plentyShop verwendest, die eine große Menge an eigenen Daten beinhalten, wie beispielsweise AmazonPay oder PayPal, ist es für die Performance deines Webshops unerlässlich, dass du diese Plugins mit den richtigen Layout-Containern verknüpfst. In Ceres 5.0 wurden neue Layout-Container hinzugefügt, um Javascript und CSS der Zahlungsplugins nur an den Stellen zu laden, an denen sie wirklich gebraucht werden.
Die Plugin-Beschreibungen der jeweiligen Zahlungsarten, z.B. PayPal, enthalten bereits detaillierte Anleitungen, wie du die Plugins mit den richtigen Containern verknüpfst. Generell gilt, dass du das Javascript der jeweiligen Zahlungsart mit dem Container Checkout.AfterScriptsLoaded und nicht mehr mit dem Container ScriptLoader.AfterScriptsLoaded verknüpfen solltest, um die Performance deines Webshops zu verbessern.

8. Webshop-Suche einstellen

Dieses Best Practice hilft dir dabei, die unterschiedlichen Sucheinstellungen, die dir für plentyShop zur Verfügung stehen, besser zu verstehen, sodass du die Webshop-Suche optimal für dich nutzen kannst.
Die Sucheinstellungen für den Webshop nimmst du hauptsächlich im Schritt Suche des Ceres-Assistenten vor. Diesen findest du unter Einrichtung » Assistenten » Plugins » Plugin-Set wählen » plentyShop Ceres.

8.1. Sortierung der Suchergebnisse nach Relevanz

Der Sortierungswert Relevanz sortiert die Suchergebnisse entlang eines vom System berechneten Punktewerts. Je höher der errechnete Wert, desto höher wird der jeweilige Artikel in der Liste der Suchergebnisse angezeigt. Wie die Berechnung dieses Punktewerts gewichtet wird, kannst du an 2 Stellen im System bestimmen: Im Assistenten findest du im Schritt Suche unter Gewichtung der Suchwerte für den Wert "Relevanz" eine abgespeckte Version der Einstellung. Im Menü Einrichtung » Artikel » Suche » Frontend » Sucheinstellungen findest du die vollständigen Einstellungen zur Gewichtung des Sortierungswerts Relevanz.

Hier aktivierst du die Artikeldatenfelder, die für eine Sortierung nach Relevanz berücksichtigt werden sollen. Aktivierst du beispielsweise die Felder Name 1, Beschreibung und Keywords, so wird ein Artikel, bei dem der eingegeben Suchbegriff in allen drei Datenfeldern enthalten ist, als relevanter erachtet, als ein Artikel, bei dem der Suchbegriff nur im Artikelnamen steht, und dadurch weiter oben in der Liste der Suchergebnisse angezeigt.

Du solltest das Feld Name (deprectated) deaktivieren. Dieses Feld fasst die drei Datenfelder Name 1, Name 2 und Name 3 zusammen. Du kannst gezielter Einfluss auf die relevante Sortierung nehmen, wenn dieses Feld inaktiv ist.

Der Boost des jeweiligen Datenfelds dient dazu, eine Reihenfolge der Gewichtung festzulegen. Der genaue Wert, den du eingibst, spielt dabei keine Rolle, solange die jeweiligen Werte unterschiedlich hoch sind. Ist der Boost für das Feld Name 1 höher als der Boost für Name 2, so wird ein Artikel, bei dem der eingegebene Suchbegriff im Feld Name 1 steht, einen höheren Punktewert für die relevante Sortierung erhalten, als ein Artikel, der den Suchbegriff im Feld Name 2 stehen hat, und wird somit weiter oben in der Liste der Suchergebnisse angezeigt.

Die Sortierung nach Relevanz wird in aller Regel zuerst die Suchergebnisse auflisten, die sämtliche eingegebenen Suchbegriffe enthalten, gefolgt von Ergebnissen, die nur einen Teil der Suchergebnisse enthalten.

Beachte, dass Artikeldatenfelder, die du im Bereich In den Suchvorschlägen berücksichtigen aktivierst, automatisch auch im Bereich In den Suchergebnissen berücksichtigen aktiviert werden. Stelle den Boost ggf. auf den Wert 0, wenn du nicht möchtest, dass diese Felder Einfluss auf den Sortierungswert Relevanz haben.

8.2. Sortierung der Suchergebnisse nach Empfohlen

Der Sortierungswert Empfohlen sortiert die Suchergebnisse nach drei Werten, die du selbst bestimmst und miteinander verkettest. Du nimmst diese Einstellung im Schritt Suche des Assistenten im Feld Empfohlene Sortierung der Suchergebnisse vor.

Die Verkettung der Sortierungswerte funktioniert so, dass deine Shop-Artikel im ersten Schritt auf den ersten Sortierungswert hin überprüft werden; liefert diese Prüfung 2 oder mehr Ergebnisse zurück, die nun in den Suchergebnissen gleich hoch priorisiert wären, so greift der zweite Sortierungswert, den du für die empfohlene Sortierung hinterlegt hast. Sollte es nach der Prüfung auf den zweiten Sortierungswert immer noch Artikel geben, die in den Suchergebnissen gleich hoch priorisiert wären, dann greift der dritte verkettete Wert und ordnet die Ergebnisse entsprechend an.

Beispiel:
Du hast die empfohlene Sortierung in deinem Webshop so eingestellt, dass zuerst auf den Wert Relevanz, dann auf die Variantenposition und zuletzt auf Preis (aufsteigend) geprüft wird. Eine Kundin in deinem Webshop sucht den Begriff "Blaue Hose". Die Suche prüft nun deinen Artikelkatalog zuerst hinsichtlich der von dir eingestellten Gewichtung des Suchwerts Relevanz, wie oben beschrieben. Die Datenfelder deiner Artikel werden auf beide Suchbegriffe hin geprüft. Je nachdem, welche Artikeldatenfelder (Beschreibung, Variantenname, etc.) du aktiviert hast, können hier Artikel mit dem gleichen Relevanzwert gelistet werden. Im nächsten Schritt werden diese Ergebnisse daraufhin geprüft, ob du ihnen eine bestimmte Variantenposition zugewiesen hast. Dies kann auch über die Einstellung Variantenposition nach monatlichen Verkäufen berechnen erfolgt sein. Abschließend werden die Ergebnisse, die sowohl einen gleichen Relevanzwert und eine gleiche Variantenposition haben, aufsteigend nach Preis sortiert.

8.3. UND-Suche

Mit Ceres Version 5.0.18 wurde im Ceres-Assistenten die Möglichkeit geschaffen, eine "Und"-Suche für den Webshop zu aktivieren, die nur im ersten Schritt nur Suchergebnisse zurückliefert, die sämtliche in der Suchanfrage eingegebenen Suchbegriffe enthalten. Du hast nun die Möglichkeit, den Suchoperator für die Vorschläge in der Schnellsuche im Header und für die Suchergebnisseite separat einzustellen. Gehe wie im Folgenden beschrieben vor, um die "Und"-Suche zu aktivieren:

"Und"-Suche aktivieren:

  1. Öffne den Ceres-Assistenten im Menü Einrichtung » Assistenten » Plugins » Plugin-Set wählen » plentyShop Ceres.

  2. Navigiere zum Schritt Suche.

  3. Wähle im Bereich Suchoperator für Suchergebnisse die Option Und-Operator für die Einstellungen Operator für die Suchergebnisseite und Operator für die Schnellsuche.

  4. Schließe den Assistenten ab, damit deine Einstellungen gespeichert werden. → Die "Und"-Suche wurde für deinen Webshop aktiviert.

Wenn der Und-Operator für die Suchergebnisseite ausgewählt ist und es für eine Suchanfrage keine passenden Suchergebnisse gibt, wird eine zweite Suche mit dem Oder-Operator ausgeführt, um Kund:innen alternative Vorschläge zu unterbreiten. Über diesen Suchvorschlägen wird ein Hinweis eingeblendet, dass keine passenden Suchergebnisse existieren.

Zum Seitenanfang