Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produkt-Logiken, wodurch es möglich ist, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie beginnen, wenn Sie ein Clerk.js-Setup in ScanNet verwenden.

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

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 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 Sliders angezeigt. Dadurch können Kunden mehr Produkte mit weniger Klicks sehen. Sie können entweder den Design Editor verwenden, um es visuell zu konfigurieren, oder Code Designs verwenden.

Ein Design kann für beliebig viele Recommendations-Elemente, 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 in der Liste der Designvorlagen diejenige 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 unter Verwendung von Liquid code.

Element erstellen #

Dieses enthält alle Einstellungen zur Anzeige der Recommendations und macht es möglich, sie auf Ihrer Website einzubetten. Befolgen Sie diese Schritte 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, es nach 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 Produkt-Logik aus dem Dropdown-Menü. Eine Übersicht über alle Produkt-Logiken hier.
5. Unter Design wählen Sie das von Ihnen erstellte Design aus dem Dropdown-Menü und legen Sie die Anzahl der anzuzeigenden Produkte fest.
6. Klicken Sie oben auf dem Bildschirm 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 auf Ihrer Website einfügen.
3. Wählen Sie die für Sie einfachste Option.

Seiten #

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

Homepage #

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

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. Gehen 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 einschließlich der Homepage generiert, suchen Sie nach einer IF-Anweisung, die die Startseite identifiziert. Suchen Sie nach entweder:

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

5. Kopieren Sie die Embedcodes innerhalb dieser IF-Anweisung. So wird sichergestellt, dass die Banner nur auf der Homepage 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. Gehen Sie im ScanNet Admin zu Kontrolpanel > Design Manager > Rediger filer.

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

4. Kopieren Sie die Embedcodes an das 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 ScanNet Admin zu Online Store > Design > Aktive designs > Rediger filer.

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

4. Kopieren Sie den Embedcode in die Datei, irgendwo unterhalb von Titel und Beschreibung (meistens 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-Anweisung sorgt dafür, dass das Banner nur auf Kategorieseiten angezeigt wird und nicht auf der Search-Seite, 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 ScanNet Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Finden 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 ScanNet Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Finden Sie partials > body.tpl.

4. Kopieren Sie den Embedcode an das 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 wird das Exit Intent-Popup angezeigt, wenn ein Kunde mit der Maus über die Adressleiste seines 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. Erstellen Sie eine Weiterleitungsregel zu dieser Seite, jedes Mal, wenn ein Produkt zum Warenkorb hinzugefügt wird.