Recommendations

Clerk.io bietet mehr als 23 verschiedene Produktempfehlungslogiken, wodurch es möglich ist, komplett automatisierte Produktempfehlungen auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit einer Clerk.js-Integration in SmartWeb starten.

Unsere vollständigen Best Practices finden Sie in diesem Artikel zur Verwendung von Recommendations.

Slider-Einrichtung #

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

Wenn Sie die Schritte in my.clerk.io > Settings > 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 für eine visuelle Konfiguration nutzen 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 Design-Vorlagen die gewünschte Vorlage aus.
4. Geben Sie einen Namen ein 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 einen Namen ein und klicken Sie auf Create design.
4. Erstellen Sie Ihr eigenes Code-Design von Grund auf mit Liquid code.

Element erstellen #

Dieses enthält alle Einstellungen zur Anzeige der Recommendations und macht sie auf Ihrer Website einbettbar. Führen Sie diese Schritte für jedes Recommendations-Banner durch, 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 eine Benennung nach Seite und Logik, die verwendet werden soll, z.B. “Home Page / Visitor Recommendations”.
4. Wählen Sie im Feld Element type, die gewünschte Produktlogik aus dem Dropdown-Menü aus. Eine Übersicht aller Produktlogiken finden Sie hier.
5. Wählen Sie bei Design das zuvor erstellte Design aus dem Dropdown-Menü und bestimmen Sie die Anzahl der anzuzeigenden Produkte.
6. Klicken Sie oben im Bildschirm auf Save.

Zur Website hinzufügen #

1. Öffnen Sie den Tab Insert into website.
2. Es stehen zwei Optionen zur Verfügung:
   • Die Verwendung von Injection erlaubt das Einfügen des Codes mittels CSS-Selektor.
   • Mit embedded code können Sie den Code manuell in Ihre Website einfügen.
3. Wählen Sie die für Sie einfachste Option.

Seiten #

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

Startseite #

1. Erstellen Sie in my.clerk.io drei Elements mit folgenden Logiken:

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. Gehen Sie im SmartWeb Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Suchen Sie die Datei index.tpl.

4. Da diese Datei alle Seiten des Webshops einschließlich der Startseite generiert, suchen Sie nach einer IF-Anweisung, die die Startseite identifiziert. Suchen Sie entweder nach:

   • {$general.isShop and $page.isFrontPage}
   • {if $page.isFrontPage}

5. Kopieren Sie die Einbettungscodes innerhalb dieser IF-Anweisung. Dadurch werden die Banner nur auf der Startseite angezeigt.

<span class="clerk"
    data-template="@home-page-visitor-recommendations">
</span>

6. Klicken Sie auf Gem zum Speichern.

Produktseite #

1. Erstellen Sie in my.clerk.io zwei Elements mit folgenden Logiken:

   • Best Alternative Products
   • Best Cross-Sell Products

2. Gehen Sie im SmartWeb Admin zu Kontrolpanel > Design Manager > Rediger filer.

3. Suchen Sie die Datei, die die Produktseite generiert. In Standard-Themes ist dies modules > product > product-entity.tpl.

4. Fügen Sie die Einbettungscodes am Ende dieser Datei ein und klicken Sie auf Gem.

<span class="clerk"
   data-template="@product-page-alternatives"
   data-products="[{$product->Id}]">
</span>

Kategorieseite #

1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.

2. Gehen Sie im SmartWeb Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Suchen Sie die Datei, die Ihre Kategorieseiten generiert. In Standard-Themes ist dies modules > product > product-list.tpl.

4. Fügen Sie den Einbettungscode an einer Stelle unterhalb von Titel und Beschreibung (meist um Zeile 92) ein. Klicken Sie dann auf Gem.

{if $field == 'search'}
{else}
<span class="clerk"
    data-template="@category-page-bestsellers"
    data-category="{$item->Id}">
</span>
{/if}

Die IF-Anweisung stellt sicher, dass das Banner nur auf Kategorieseiten und nicht auf der Suchseite angezeigt wird, da beide dasselbe Template verwenden.

Warenkorbseite #

1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.

2. Gehen Sie im SmartWeb Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Suchen Sie die Datei, die die Warenkorbseite generiert. In Standard-Themes ist dies modules > cart > cart.tpl.

4. Fügen Sie den Code am Ende der Datei ein und klicken Sie auf Gem.

{$cartProductidsString = ''} 
{$counter = 1} 
{foreach $cartList.CartProductLine as $cartProduct} 
{if $counter==1} 
{assign var="cartProductidsString" value="{$cartProduct->ProductId}"} 
{else} 
{assign var="cartProductidsString" value="{$cartProductidsString},{$cartProduct->ProductId}"} 
{/if}
{$counter = $counter + 1}
{/foreach}
<span class="clerk" 
    data-template="@cart-page-cross-sell" 
    data-products="[{$cartProductidsString}]">
</span>

Exit Intent #

1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.

2. Gehen Sie im SmartWeb Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Suchen Sie partials > body.tpl.

4. Fügen Sie den Einbettungscode am Ende der Datei ein und klicken Sie auf Gem.

<span class="clerk"
    data-template="@exit-intent-visitor-recommendations"
    data-exit-intent="true">
</span>

Nach dem Hinzufügen wird das Exit Intent Popup angezeigt, wenn ein Kunde mit der Maus über die Adresszeile des Browsers fährt.

Add-To-Basket Step #

Der Add-To-Basket Step ist eine komplexe Funktion in SmartWeb. Wir empfehlen, einen SmartWeb-Entwickler für die Integration hinzuzuziehen oder diesen Schritt zu überspringen, falls keine Entwicklerressourcen zur Verfügung stehen.

1. Erstellen Sie eine neue CMS-Seite in SmartWeb.
2. Fügen Sie die Einbettungscodes auf der CMS-Seite hinzu.

<span class="clerk"
    data-template="@powerstep-alternatives"
    data-products="[PRODUCT_ID]">
</span>

3. Legen Sie eine Weiterleitungsregel zu dieser Seite fest, sobald ein Produkt zum Warenkorb hinzugefügt wird.