Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produkt-Logiken, was es ermöglicht, komplett automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie den Einstieg bei der Verwendung eines Clerk.js Setups in SmartWeb finden.

Für die vollständigen Best Practices lesen Sie diesen Artikel darüber, welche Recommendations Sie verwenden sollten.

Slider Setup #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Im Folgenden finden Sie die 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. Das ermöglicht es Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design Editor verwenden, um es visuell zu konfigurieren, oder Code Designs nutzen.

Ein Design kann für beliebig viele Recommendations-Elements, die Sie erstellen, 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 einen Namen an 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 an und klicken Sie auf Create design.
4. Erstellen Sie ein Code Design von Grund auf mit Liquid Code.

Element erstellen #

Dieses enthält alle Einstellungen zur Anzeige der Recommendations und macht es möglich, das Element auf Ihrer Website einzubetten. 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 aussagekräftigen Namen ein. Wir empfehlen, das Element nach der Seite und Logik zu benennen, die Sie verwenden möchten. Z. B. “Startseite / Visitor Recommendations”.
4. Wählen Sie in Element type, die Produkt-Logik aus, die Sie verwenden möchten, aus dem Dropdown-Menü. Sie erhalten eine Übersicht über alle Produkt-Logiken hier.
5. In Design wählen Sie das erstellte Design aus dem Dropdown und bestimmen, wie viele Produkte angezeigt werden sollen.
6. Klicken Sie oben auf Save.

Zur Website hinzufügen #

1. Öffnen Sie die Registerkarte Insert into website.
2. Hier haben Sie zwei Optionen:
   • Die Verwendung von Injection ermöglicht es Ihnen, den Code über einen CSS-Selektor einzufügen.
   • Die Verwendung von Embedded Code ermöglicht es, den Code manuell in Ihre Website einzufügen.
3. Wählen Sie die aus, die für Sie am einfachsten ist.

Seiten #

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

Startseite #

1. Erstellen Sie in my.clerk.io 3 Elements mit den 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 inkl. der Startseite generiert, suchen Sie nach einer IF-Anweisung, die die Startseite identifiziert. Suchen Sie entweder:

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

5. Kopieren Sie die Embedcodes innerhalb dieser IF-Anweisung. Dadurch erscheinen die Banner nur auf der Startseite.

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

6. Klicken Sie auf Gem, um zu speichern.

Produktseite #

1. Erstellen Sie in my.clerk.io 2 Elements mit den 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. Bei Standard-Themes ist dies modules > product > product-entity.tpl.

4. Kopieren Sie die Embedcodes ans Seitenende dieser Datei 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. Bei Standard-Themes ist dies modules > product > product-list.tpl.

4. Kopieren Sie den Embedcode in die Datei, irgendwo unterhalb des Titels und der Beschreibung (meist um Zeile 92). Dann klicken Sie 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 den Kategorieseiten angezeigt wird und nicht auf der Search-Seite, da beide dieselbe Vorlage 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. Bei 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. Kopieren Sie den Embedcode ans Seitenende dieser Datei und klicken Sie auf Gem.

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

Nachdem Sie dies hinzugefügt haben, wird das Exit Intent-Popup angezeigt, wenn ein Kunde mit der Maus über die Adressleiste seines Browsers fährt.

Add-To-Basket Schritt #

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

1. Erstellen Sie eine neue CMS-Seite in SmartWeb.
2. Fügen Sie die Embedcodes in die CMS-Seite ein.

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

3. Fügen Sie eine Weiterleitungsregel zu dieser Seite hinzu, jedes Mal, wenn ein Produkt zum Warenkorb hinzugefügt wird.