Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, wodurch es möglich ist, vollkommen automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie den Einstieg mit einem Clerk.js Setup bei ScanNet finden.

Unsere vollständigen Best Practices finden Sie in diesem Artikel darüber, welche Recommendations Sie verwenden sollten.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Nachfolgend finden Sie die grundlegende Anleitung, um ein Element einzurichten.

Wenn Sie die Schritte unter 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. Dies ermöglicht es Kunden, mit weniger Klicks mehr Produkte zu sehen. Sie können entweder den Design Editor für die visuelle Konfiguration verwenden oder Code Designs nutzen.

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 diejenige, mit der Sie beginnen möchten.
4. Geben Sie dem Design einen Namen 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 #

Dies enthält alle Einstellungen, die für die Anzeige der Recommendations verwendet werden, und macht es einbettbar auf Ihrer Website. 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, diesen nach der Seite und der gewünschten Logik zu benennen. Z. B. “Home Page / Visitor Recommendations”.
4. Wählen Sie in Element type, die gewünschte Produktlogik im Dropdown-Menü aus. Eine Übersicht aller Produktlogiken finden Sie hier.
5. Wählen Sie im Dropdown-Menü Design das zuvor erstellte Design und geben Sie die gewünschte Produktanzahl an.
6. Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

1. Öffnen Sie den Tab Insert into website.
2. Sie haben hier zwei Optionen:
   • Die Verwendung von injection ermöglicht das Einfügen des Codes mittels CSS-Selektor.
   • Mit embedded code können Sie den Code manuell auf Ihrer Website einbinden.
3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden 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 entsprechen.

Startseite #

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

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. Wechseln Sie im ScanNet Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Suchen Sie die Datei index.tpl.

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

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

5. Fügen Sie die Embedcodes innerhalb dieser IF-Bedingung ein. Dies stellt sicher, dass die Banner nur auf der Startseite erscheinen.

<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 zwei Elements mit den folgenden Logiken:

   • Best Alternative Products
   • Best Cross-Sell Products

2. Wechseln Sie im ScanNet 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 Embedcodes am Seitenende 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. Wechseln Sie im ScanNet 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 Embedcode unterhalb des Titels und der Beschreibung ein (meist um Zeile 92). 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-Bedingung stellt sicher, dass das Banner nur auf Kategorieseiten und nicht auf der Search-Seite angezeigt wird, da beide die gleiche Template-Datei nutzen.

Warenkorbseite #

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

2. Wechseln Sie im ScanNet 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 unteren 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. Wechseln Sie im ScanNet Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Suchen Sie partials > body.tpl.

4. Fügen Sie den Embedcode 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 auf die Adressleiste des Browsers fährt.

Add-To-Basket Step #

Der Add-To-Basket Step ist ein komplexes Feature in ScanNet. Wir empfehlen, einen ScanNet-Entwickler mit der Integration zu beauftragen oder diesen Schritt zu überspringen, falls keine Entwicklerressourcen zur Verfügung stehen.

1. Erstellen Sie eine neue CMS-Seite in ScanNet.
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 Weiterleitungsregel zu dieser Seite hinzu, jedes Mal, wenn ein Produkt zum Warenkorb hinzugefügt wird.