Empfehlungen in deinem eigenen Thema

Empfehlungen sind in allen Shoporama-eigenen Themes integriert, wo sie als Modul im Seiten-Designer eingerichtet werden. Wenn Sie Ihr eigenes Theme erstellen oder eines unserer Standard-Themes stark angepasst haben, können Sie dennoch Empfehlungen einbinden. Es gibt zwei Möglichkeiten: eine ohne Programmierkenntnisse und eine für Entwickler.

Ohne Programmierkenntnisse: Wähle eine Stelle auf der Seite aus

Gehe zu „Design“ → „Empfehlungen“ in deinem eigenen Theme. Hier füllst du pro Empfehlungsfeld, das du einfügen möchtest, eine Zeile aus und speicherst die Änderungen. Die Theme-Dateien müssen nicht bearbeitet werden.

Die Felder bedeuten:

• Seiten – auf welchen Seiten das Feld angezeigt werden soll. Wähle „Alle Seiten“ oder beschränke die Anzeige beispielsweise auf Produktseiten oder den Warenkorb.
• CSS-Selektor – an welchem Element auf der Seite das Feld relativ positioniert werden soll. Das kann so einfach wie „footer“ sein oder präziser wie „.product-page .description“.
• Position – ob die Box vor dem Element, danach oder als letzter Inhalt darin eingefügt werden soll.
• Typ – welche Art von Empfehlung. Die gleichen fünf wie im Modul.
• Anzahl und Spalten – wie viele Produkte maximal angezeigt werden und wie viele auf großen Bildschirmen nebeneinander stehen.
• Überschrift – der Text über dem Feld. Wenn du das Feld leer lässt, wird keine Überschrift angezeigt.

So findest du den richtigen Selektor

Wenn du nicht weißt, was du in das Selektor-Feld eingeben sollst: Klicke mit der rechten Maustaste auf die Stelle in deinem Shop, an der das Feld stehen soll, wähle „Untersuchen“ und schau nach, welche Klasse oder welches Attribut das Element hat. Fang lieber breit als eng an. „Footer“ mit der Position „Vor“ erzeugt ein Feld am unteren Rand der Seite, direkt über dem Seitenende, und das funktioniert bei so gut wie allen Themes.

Ist das Element auf einer bestimmten Seite nicht vorhanden, passiert nichts. Das Feld verschwindet von selbst, anstatt eine Lücke zu hinterlassen. So kannst du ganz ohne Risiko herumprobieren.

Mit Code: Das Smarty-Tag

Wenn du die Platzierung in der Vorlage ganz genau steuern möchtest, kannst du das Tag direkt verwenden:

<{recommendations type="also_viewed" product=$product limit=4 columns=4 title="Andere haben sich auch angesehen"}>

Die Parameter sind:

• type – also_viewed, also_bought, similar, popular oder recently_viewed
• product – das Produktobjekt auf einer Produktseite. Wird auf Seiten ohne ein bestimmtes Produkt weggelassen
• limit – maximale Anzahl an Produkten (Standardwert 4)
• columns – Spalten auf großen Bildschirmen (Standard 4)
• title – Überschrift über dem Block

Das Tag gibt zunächst einen Platzhalter aus und ruft anschließend die eigentlichen Produkte ab. Wenn du das Aussehen der Karten selbst steuern möchtest, kann das Theme über eine eigene Datei „components/reco-loop.html“ verfügen. Ist diese vorhanden, wird sie verwendet. Ist sie nicht vorhanden, greifen wir auf die normale Produktkarte des Themes zurück, andernfalls auf eine einfache integrierte Ansicht.

Wie funktioniert das unter der Haube?

Unabhängig davon, welche der beiden Methoden du verwendest, ist das Verhalten dasselbe:

• Die Seite selbst wird ohne Empfehlungen geladen, und die Box wird erst danach abgerufen. Dadurch verzögern die Empfehlungen niemals die erste Darstellung der Seite, auch wenn sie ganz oben platziert sind.
• Für die Box wird im Voraus Platz reserviert – mit einem grauen Platzhalter in derselben Größe wie die eigentlichen Karten –, damit die Seite nicht springt, wenn der Inhalt geladen wird.
• Es werden keine externen Dateien geladen. Der gesamte Code ist inline und belegt insgesamt etwa 5 KB.
• Die Antwort wird eine Stunde lang im Cache gespeichert. Zwei Besucher auf derselben Produktseite innerhalb derselben Stunde verursachen somit nur einen Datenbankzugriff.
• „Zuletzt vom Kunden angesehen“ befindet sich im localStorage des Browsers auf dem Rechner des Kunden und wird nur dann mitgesendet, wenn genau dieser Typ angezeigt werden soll.

Häufig gestellte Fragen

Was passiert, wenn JavaScript fehlschlägt oder der Selektor nicht vorhanden ist?

Dann wird das Feld automatisch entfernt, und der themeneigene Abschnittsrahmen wird ebenfalls gelöscht, falls er leer zurückbleibt. Es entsteht also weder eine leere Lücke noch ein leeres Band. Jedes Feld wird separat behandelt, sodass ein Fehler in einem Feld die übrigen auf der Seite nicht beeinträchtigt.

Ich nehme ein Produkt mitten am Tag aus dem Sortiment. Kann es trotzdem noch angezeigt werden?

Ja, bis zu einer Stunde lang. Die Empfehlungsergebnisse werden eine Stunde lang zwischengespeichert, sodass ein bereits berechnetes Feld den Artikel noch anzeigen kann, bis der Cache abläuft. Klickt der Kunde darauf, gelangt er zur Produktseite, die selbstständig meldet, dass der Artikel nicht verfügbar ist. Soll die Änderung sofort wirksam werden, kannst du den Cache des Shops leeren.

Wie viel Speicherplatz beansprucht das und wie stark wirkt sich das auf die Geschwindigkeit aus?

Etwa 5 KB Inline-Code, keine externen Dateien und keine blockierenden Abfragen. Die Messung wird mit `navigator.sendBeacon` gesendet, das asynchron arbeitet und niemals auf eine Antwort wartet. In einem Shop, in dem keine Empfehlungen eingerichtet sind, wird nichts ausgegeben.

Kann ich mehrere Boxen auf derselben Seite haben?

Ja. Sowohl die Selector-Methode als auch das Tag können mehrmals auf derselben Seite verwendet werden. Die Selector-Methode erlaubt insgesamt bis zu zehn Zeilen.

Funktioniert das mit dem Seiten-Cache?

Ja. Was mit der Seite ausgeliefert wird, ist für alle Besucher derselbe Platzhalter, und alles besuchsspezifische wird anschließend abgerufen. Daher können Seiten mit Empfehlungen genau wie bisher statisch zwischengespeichert werden.

Kann ich das Feld selbst gestalten?

Ja. Die Box verfügt über die Klassen „sr-reco“, „sr-reco-head“, „sr-reco-title“ und „sr-reco-body“, die du in deinem eigenen Stylesheet gestalten kannst. Die Höhe des Platzhalters lässt sich mit den CSS-Variablen „--sr-reco-img“ und „--sr-reco-text“ anpassen, falls Ihre Produktkarten höher oder niedriger als der Standard sind.

Siehe auch „Empfehlungen: Zeigen Sie automatisch die Produkte an, nach denen Ihre Kunden suchen “ und „So lesen Sie die Statistiken zu Empfehlungen“.