Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, was es ermöglicht, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie du mit einem Clerk.js Setup in DanDomain startest.

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

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die sich auf ein Design beziehen. Im Folgenden findest du die grundlegende Anleitung zum Einrichten eines Elements.

Wenn du die Schritte unter my.clerk.io > Settings > Setup Guides befolgst, werden die Elements für unsere Best Practices automatisch erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Dadurch können Kunden mehr Produkte mit weniger Klicks sehen. Du kannst entweder den Design Editor verwenden, um das Design visuell zu konfigurieren, oder Code-Designs nutzen.

Ein Design kann für beliebig viele Recommendations-Elemente verwendet werden, die du erstellst.

Design Editor #

1. Gehe zu Recommendations > Designs und klicke auf New Design.
2. Wähle Product Slider
3. Wähle aus der Liste der Designvorlagen die Vorlage aus, mit der du beginnen möchtest.
4. Vergib einen Namen und klicke auf Create design.
5. Nimm alle gewünschten Änderungen am Design vor.

Code-Design #

1. Gehe zu Recommendations > Designs und klicke auf New Design.
2. Wähle Other designs > Blank > Code.
3. Vergib einen Namen und klicke auf Create design.
4. Erstelle ein Code-Design von Grund auf mit Liquid code.

Element erstellen #

Dies enthält alle Einstellungen, die zum Anzeigen der Recommendations verwendet werden und macht sie auf deiner Website einbettbar. Befolge diese Schritte für jedes Recommendations-Banner, das du erstellen möchtest.

1. Gehe zu Recommendations > Elements.
2. Klicke auf New Element.
3. Vergib einen aussagekräftigen Namen. Wir empfehlen, das Element nach der Seite und der gewünschten Logik zu benennen. Zum Beispiel “Home Page / Visitor Recommendations”.
4. Wähle im Dropdown unter Element type, die gewünschte Produktlogik aus. Eine Übersicht aller Produktlogiken findest du hier.
5. Wähle im Dropdown unter Design das von dir erstellte Design aus und die Anzahl der anzuzeigenden Produkte.
6. Klicke oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

1. Öffne den Tab Insert into website.
2. Hier hast du zwei Möglichkeiten:
   • Mit Injection kannst du den Code über einen CSS-Selektor einfügen.
   • Mit Embedded Code kannst du den Code manuell auf deiner Website einfügen.
3. Wähle die Option, die für dich am einfachsten ist.

Seiten #

Im Folgenden sind die spezifischen Seiten aufgeführt, auf denen du Recommendations einfügen solltest und welche Typen du verwenden solltest, um unseren Best Practices zu folgen.

Homepage #

1. Erstelle in my.clerk.io 3 Elements mit den folgenden Logiken:

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. Gehe im DanDomain Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Finde die Datei index.tpl.

4. Da diese Datei alle Seiten des Webshops einschließlich der Homepage generiert, suche nach einer IF-Anweisung, die die Startseite identifiziert. Suche nach entweder:

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

5. Kopiere die Embedcodes innerhalb dieser IF-Anweisung. So wird sichergestellt, dass die Banner nur auf der Homepage angezeigt werden.

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

6. Klicke auf Gem, um zu speichern.

Produktseite #

1. Erstelle in my.clerk.io 2 Elements mit den folgenden Logiken:

   • Best Alternative Products
   • Best Cross-Sell Products

2. Gehe im DanDomain Admin zu Kontrolpanel > Design Manager > Rediger filer.

3. Finde die Datei, die die Produktseite generiert. Bei Standard-Themes ist dies modules > product > product-entity.tpl.

4. Kopiere die Embedcodes ans Ende dieser Datei und klicke auf Gem.

<span class="clerk"
   data-template="@product-page-alternatives"
   data-products="[{$product->Id}]">
</span>

Kategorieseite #

1. Erstelle in my.clerk.io ein Element mit der Logik Bestsellers In Category.

2. Gehe im DanDomain Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Finde die Datei, die deine Kategorieseiten generiert. Bei Standard-Themes ist dies modules > product > product-list.tpl.

4. Kopiere den Embedcode in die Datei, irgendwo unter dem Titel und der Beschreibung (meistens um Zeile 92). Klicke anschließend 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. Erstelle in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.

2. Gehe im DanDomain Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Finde die Datei, die die Warenkorbseite generiert. Bei Standard-Themes ist dies modules > cart > cart.tpl.

4. Füge den Code am Ende der Datei ein und klicke 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. Erstelle in my.clerk.io ein Element mit der Logik Visitor Recommendations.

2. Gehe im DanDomain Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Finde partials > body.tpl.

4. Kopiere den Embedcode ans Ende der Datei und klicke auf Gem.

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

Nachdem du dies hinzugefügt hast, wird das Exit-Intent-Popup angezeigt, wenn ein Kunde die Maus über die Adressleiste seines Browsers bewegt.

Add-To-Basket-Schritt #

Der Add-To-Basket-Schritt ist eine komplexe Funktion in DanDomain. Wir empfehlen, einen DanDomain-Entwickler mit der Integration zu beauftragen, oder diesen Schritt zu überspringen, falls keine Entwickler-Ressourcen zur Verfügung stehen.

1. Erstelle eine neue CMS-Seite in DanDomain.
2. Füge die Embedcodes auf der CMS-Seite ein.

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

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