Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie auf jeder Seite vollständig automatisierte Produkte anzeigen können. Dieser Artikel erklärt, wie Sie beim Einsatz eines Clerk.js Setups in Smartweb beginnen.

Unsere vollständigen Best Practices finden Sie in diesem Artikel, in dem erläutert wird, welche Recommendations Sie verwenden sollten.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Nachfolgend finden Sie die grundlegende Anleitung zur Einrichtung eines Elements.

Die Befolgung der Schritte in my.clerk.io > Settings > Setup Guides erstellt automatisch die Elements für unsere Best Practices.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. So können Kunden mehr Produkte mit weniger Klicks sehen. Sie können entweder den Design Editor nutzen, um ihn 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 das gewünschte Template aus.
4. Geben Sie ihm einen Namen und klicken Sie auf Create design.
5. Nehmen Sie gewünschte Anpassungen 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 ihm einen Namen und klicken Sie auf Create design.
4. Erstellen Sie ein Code Design von Grund auf mit Liquid code.

Wenn Sie ein Ausgangsdesign möchten, finden Sie die Slider-Vorlage weiter unten.

Inhalt erstellen #

Dieser Abschnitt enthält alle Einstellungen zur Anzeige der Recommendations, damit diese in Ihre Website eingebettet werden können. 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 Content.
3. Geben Sie ihm einen aussagekräftigen Namen. Wir empfehlen, die Benennung an der Seite und der gewünschten Logik auszurichten, z.B. “Home Page / Visitor Recommendations”.
4. Wählen Sie in Content type, die gewünschte Produktlogik aus dem Dropdown-Menü. Eine Übersicht über alle Produktlogiken finden Sie hier.
5. Wählen Sie im Bereich Design das Design aus, das Sie erstellt haben, und legen Sie die Anzahl der anzuzeigenden Produkte fest.
6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website einzubinden, haben Sie zwei Möglichkeiten: Injection und Embedded code.

1. Öffnen Sie den Tab Insert into website.
2. Es gibt zwei Optionen:
   • Mit injection können Sie den Code über einen CSS-Selektor einfügen.
   • Mit embedded code können Sie den Code manuell in Ihre Website einfügen.
3. Wählen Sie die für Sie einfachste Variante.
4. Bei manchen Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen Smartweb aus. Dadurch wird der Embed-Code mit den richtigen Smartweb-Shortcodes vorausgefüllt.

Um Synchronisierungsdetails hinzuzufügen oder eine Synchronisierung zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

my.clerk.io Setup #

1. Gehen Sie zu Recommendations > Elements.
2. Wählen Sie den Inhalt aus, den Sie einfügen möchten.
3. Öffnen Sie den Tab Insert into website.
4. Wählen Sie eine der folgenden Optionen:
   • Mit injection wird der Code über einen CSS-Selektor eingefügt.
   • Mit embedded code fügen Sie den Code manuell ein.
5. Für Embedded Code auf Smartweb 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 dies mit {if $field == 'search'}...{else}...{/if}, um eine Anzeige auf der Search-Seite zu vermeiden.
   • Warenkorbseite: modules > cart > cart.tpl — setzen Sie data-products auf die Produkt-IDs des Warenkorbs (siehe Beispiel in unserem Setup-Guide).
   • Startseite: Einfügen in Ihre Startseitenvorlage/Ihren CMS-Block.

Seiten #

Nachfolgend werden die spezifischen Seiten beschrieben, auf denen Sie Recommendations einfügen sollten – und welche Typen, um unseren Best Practices zu folgen.

Startseite #

1. Erstellen Sie in my.clerk.io 3 Elements mit folgenden Logiken:
   • Visitor Recommendations
   • Bestsellers
   • Hot Products
2. Fügen Sie die Embedcodes in Ihre Startseitenvorlage/Ihren CMS-Block ein.

Kategorieseite #

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

Produktseite #

1. Erstellen Sie in my.clerk.io 2 Elements mit folgenden Logiken:
   • Best Alternative Products
   • Best Cross-Sell Products
2. Wählen Sie im Dropdown-Menü Insert into website > Choose your platform für jedes Element Smartweb aus und kopieren Sie die Embedcodes.
3. Suchen Sie in den Smartweb-Theme-Dateien die Datei, die Ihre Produktseiten generiert. Das ist meist 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 Logik Best Cross-Sell Products.
2. Wählen Sie im Dropdown-Menü Insert into website > Choose your platform Smartweb aus und kopieren Sie den Embedcode.
3. Gehen Sie zu den Theme-Dateien von Smartweb und suchen Sie die Datei, die Ihre Warenkorbseiten generiert. Das ist meist modules > cart > cart.tpl.
4. Fügen Sie den Embedcode unterhalb der Warenkorb-Artikel und des Checkout-Buttons ein. Setzen Sie data-products auf die Produkt-IDs des Warenkorbs.

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