Recommendations

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

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

Slider-Einrichtung #

Recommendations werden mit Elementen erstellt, die sich auf ein Design beziehen. Unten finden Sie eine grundlegende Anleitung zum Einrichten eines Elements.

Wenn Sie die Schritte in my.clerk.io > Settings > Setup Guides befolgen, werden die Elemente für unsere Best Practices automatisch erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Dies ermöglicht es Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design Editor für die visuelle Konfiguration nutzen 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 aus der Liste der Designvorlagen das gewünschte Template aus.
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 #

Dies enthält alle Einstellungen, mit denen die Recommendations angezeigt werden und auf Ihrer Website eingebettet werden können. Wiederholen 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 beschreibenden Namen ein. Wir empfehlen, ihn anhand der Seite und der gewünschten Logik zu benennen, z. B. “Home Page / Visitor Recommendations”.
4. Wählen Sie in Element type, aus dem Dropdown die gewünschte Produktlogik aus. Sie finden eine Übersicht aller Produktlogiken hier.
5. Wählen Sie in Design aus dem Dropdown das erstellte Design und die gewünschte Anzahl von Produkten aus.
6. Klicken Sie oben auf dem Bildschirm auf Save.

Auf der Website einfügen #

1. Öffnen Sie die Registerkarte Insert into website.
2. Hier haben Sie zwei Möglichkeiten:
   • Mit Injection können Sie den Code per 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 finden Sie die spezifischen Seiten, auf denen Sie Recommendations einbinden sollten, und welche Typen verwendet werden sollen, um unseren Best Practices zu folgen.

Startseite #

1. Erstellen Sie in my.clerk.io 3 Elemente 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 Startseite erzeugt, 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. 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 Elemente mit 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 erzeugt. In Standard-Themes ist dies modules > product > product-entity.tpl.

4. Kopieren Sie die Embedcodes an das Ende der 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 erzeugt. In Standard-Themes ist dies modules > product > product-list.tpl.

4. Kopieren Sie den Embedcode in die Datei, unterhalb von Titel und Beschreibung (normalerweise 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 sorgt dafür, dass das Banner nur auf Kategorieseiten und nicht auf der Suchseite angezeigt wird, da beide dieselbe Template-Datei verwenden.

Warenkorb-Seite #

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. Suchen Sie die Datei, die die Warenkorb-Seite erzeugt. 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 des Browsers fährt.

Add-To-Basket Schritt #

Der Add-To-Basket Schritt ist ein komplexes Feature in ScanNet. Wir empfehlen, hierfür einen ScanNet-Entwickler zu beauftragen oder diesen Schritt zu überspringen, falls keine Entwicklerressourcen verfügbar sind.

1. Erstellen Sie eine neue CMS-Seite in ScanNet.
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 hinzu, sodass bei jedem Hinzufügen eines Produkts zum Warenkorb auf diese Seite umgeleitet wird.