Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken an, wodurch es möglich ist, komplett automatisierte Produkte auf jeder Seite anzuzeigen. In diesem Artikel wird erklärt, wie Sie loslegen, wenn Sie ein Clerk.js Setup in SmartWeb verwenden.

Unsere vollständigen Best Practices finden Sie in diesem Artikel über die Verwendung von Recommendations.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die sich auf ein Design beziehen. Nachfolgend 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. So können Kund*innen mit weniger Klicks mehr Produkte sehen. Sie können entweder den Design Editor verwenden, um das Design visuell zu konfigurieren, oder Code-Designs benutzen.

Ein Design kann für beliebig viele Recommendations-Elemente wiederverwendet werden, die Sie erstellen.

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 gewünschte 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.

Element erstellen #

Dieses enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet werden und macht sie auf Ihrer Website einbettbar. 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 an. Wir empfehlen, es entsprechend der Seite und Logik zu benennen, die Sie verwenden möchten, z.B. “Home Page / Visitor Recommendations”.
4. Wählen Sie unter Element type, die gewünschte Produktlogik aus dem Dropdown-Menü, die Sie verwenden möchten. Eine Übersicht aller Produktlogiken finden Sie hier.
5. Wählen Sie unter Design das von Ihnen erstellte Design aus dem Dropdown-Menü und wählen Sie die Anzahl der anzuzeigenden Produkte.
6. Klicken Sie oben auf Save.

Zur Website hinzufügen #

1. Öffnen Sie den Tab Insert into website.
2. Hier haben Sie zwei Möglichkeiten:
   • Mit injection können Sie den Code mit einem 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 Option aus.

Seiten #

Nachfolgend finden Sie die spezifischen Seiten, auf denen Sie Recommendations platzieren 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 einschließlich 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 Ende 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 (normalerweise um Zeile 92). Klicken Sie danach 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 dieselbe Template-Datei 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 Ende der Datei und klicken Sie auf Gem.

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

Nach dem Hinzufügen erscheint das Exit Intent Popup, wenn eine Kundin oder ein Kunde mit der Maus über die Adressleiste des 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 zu beauftragen oder diesen Schritt zu überspringen, falls keine Entwickler-Ressourcen zur Verfügung stehen.

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

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

3. Fügen Sie eine Umleitungsregel zu dieser Seite hinzu, jedes Mal wenn ein Produkt in den Warenkorb gelegt wird.