Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produkt-Logiken, was es Ihnen ermöglicht, komplett automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit der Nutzung eines Clerk.js-Setups in SmartWeb Classic beginnen.

Für unsere vollständigen Best Practices lesen Sie diesen Artikel darüber, welche Recommendations verwendet werden sollten.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Unten finden Sie die grundlegende Anleitung zum Einrichten eines Elements.

Wenn Sie die Schritte in my.clerk.io > Einstellungen > Setup Guides befolgen, werden die Elements für unsere Best Practices automatisch erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. So können Kunden mit weniger Klicks mehr Produkte sehen. Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Ein Design kann für beliebig viele Recommendations-Elemente wiederverwendet werden.

Design-Editor #

1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
2. Wählen Sie Product Slider
3. Wählen Sie aus der Liste der Designvorlagen die Vorlage aus, mit der Sie beginnen möchten.
4. Geben Sie einen Namen ein und klicken Sie auf Create design.
5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code-Design #

1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
2. Wählen Sie Other designs > Blank > Code.
3. Geben Sie einen Namen ein und klicken Sie auf Create design.
4. Erstellen Sie ein Code-Design von Grund auf mit Liquid code.

Wenn Sie ein Start-Design wünschen, schauen Sie sich weiter unten die Slider-Vorlage an.

Element erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um die Recommendations anzuzeigen und sie in Ihre Website einbettbar zu machen. Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

1. Gehen Sie zu Recommendations > Elements.
2. Klicken Sie auf New Element.
3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, das Element nach der Seite und der verwendeten Logik zu benennen, z. B. “Home Page / Visitor Recommendations”.
4. Wählen Sie bei Element type, die gewünschte Produkt-Logik aus dem Dropdown-Menü. Eine Übersicht aller Produkt-Logiken finden Sie hier.
5. Wählen Sie bei Design das erstellte Design aus dem Dropdown-Menü aus und wählen Sie die Anzahl der anzuzeigenden Produkte.
6. Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website zu integrieren, haben Sie zwei Optionen: Injection und Embedded code.

1. Öffnen Sie den Tab Insert into website.
2. Hier haben Sie zwei Möglichkeiten:
   • Injection ermöglicht es Ihnen, den Code über einen CSS-Selektor einzufügen.
   • Embedded code ermöglicht Ihnen die manuelle Integration des Codes auf Ihrer Website.
3. Wählen Sie die für Sie einfachste Option.
4. Bei einigen Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen SmartWeb Classic aus. Dadurch wird der Embedcode mit den richtigen SmartWeb Classic Shortcodes vorausgefüllt.

Um Sync-Details hinzuzufügen oder einen Sync zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

my.clerk.io Setup #

1. Gehen Sie zu Recommendations > Elements.
2. Wählen Sie das Element aus, das Sie einfügen möchten.
3. Öffnen Sie den Tab Insert into website.
4. Wählen Sie eine der folgenden Möglichkeiten:
   • Injection fügt den Code mit einem CSS-Selektor ein.
   • Embedded code integriert den Code manuell.
5. Für Embedded code auf SmartWeb Classic sind typische Platzierungen und Dateinamen:
   • Produktseite: modules > product > product-entity.tpl — setzen Sie data-products auf [{$product->Id}].
   • Kategorieseite: modules > product > product-list.tpl — setzen Sie data-category auf {$item->Id} und umschließen Sie es mit {if $field == 'search'}...{else}...{/if}, um eine Anzeige auf der Search Page zu vermeiden.
   • Warenkorbseite: modules > cart > cart.tpl — setzen Sie data-products auf die Produkt-IDs im Warenkorb (siehe Beispiel im Setup-Guide).
   • Startseite: Einfügen in Ihr Startseiten-Template/CMS-Block.

Seiten #

Nachfolgend finden Sie die spezifischen Seiten, auf denen Sie Recommendations platzieren sollten und welche Typen verwendet werden sollten, um unseren Best Practices zu folgen.

Startseite #

1. Erstellen Sie in my.clerk.io 3 Elements mit folgenden Logics:
   • Visitor Recommendations
   • Bestsellers
   • Hot Products
2. Fügen Sie die Embedcodes in Ihr Startseiten-Template/CMS-Block ein.

Kategorieseite #

1. Erstellen Sie in my.clerk.io ein Element mit der Logic Bestsellers In Category.
2. Wählen Sie im Dropdown Insert into website > Choose your platform SmartWeb Classic und kopieren Sie den Embedcode.
3. Gehen Sie zu den Theme-Dateien von SmartWeb Classic und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Dies ist meistens modules > product > product-list.tpl.
4. Fügen Sie den Embedcode unterhalb des Titels und der Beschreibung ein. Setzen Sie data-category auf {$item->Id} und umschließen Sie es mit {if $field == 'search'}...{else}...{/if}, um eine Anzeige auf der Search Page zu vermeiden.

Produktseite #

1. Erstellen Sie in my.clerk.io 2 Elements mit folgenden Logics:
   • Best Alternative Products
   • Best Cross-Sell Products
2. Wählen Sie für jedes im Dropdown Insert into website > Choose your platform SmartWeb Classic und kopieren Sie die Embedcodes.
3. Suchen Sie in den Theme-Dateien von SmartWeb Classic die Datei, die Ihre Produktseiten generiert. Dies ist meistens modules > product > product-entity.tpl.
4. Fügen Sie die Embedcodes unterhalb der Produktbeschreibung ein. Setzen Sie data-products auf [{$product->Id}].

Warenkorbseite #

1. Erstellen Sie in my.clerk.io ein Element mit der Logic Best Cross-Sell Products.
2. Wählen Sie im Dropdown Insert into website > Choose your platform SmartWeb Classic und kopieren Sie den Embedcode.
3. Gehen Sie zu den Theme-Dateien von SmartWeb Classic und suchen Sie die Datei, die Ihre Warenkorbseiten generiert. Dies ist meistens modules > cart > cart.tpl.
4. Fügen Sie den Embedcode unterhalb der Warenkorbartikel und des Checkout-Buttons ein. Setzen Sie data-products auf die Produkt-IDs im Warenkorb.

Nach der Aktivierung der Funktionen können Sie die Recommendations-Funktion von Clerk.io in Ihrem Webshop sehen.