Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, wodurch es möglich ist, komplett automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit einem Clerk.js Setup in DanDomain starten.

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

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die sich auf ein Design beziehen. Nachfolgend finden Sie die grundlegende Anleitung zum Erstellen 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 Slider angezeigt. Dadurch können Kunden mehr Produkte mit weniger Klicks sehen. Sie können entweder den Design Editor verwenden, um das Design visuell zu konfigurieren, oder Code Designs nutzen.

Ein Design kann für beliebig viele Recommendations Elements 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 aus, mit der Sie beginnen möchten.
4. Geben Sie einen Namen ein und klicken Sie auf Create design.
5. Nehmen Sie die 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 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 beschreibenden Namen ein. Wir empfehlen, es basierend auf der Seite und der 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ü aus. Sie finden eine Übersicht aller Produktlogiken hier.
5. Wählen Sie bei Design das Design, das Sie erstellt haben, aus dem Dropdown-Menü aus und wählen Sie die Anzahl der anzuzeigenden Produkte.
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 Optionen:
   • Die Nutzung von injection ermöglicht es, den Code über einen CSS-Selektor einzufügen.
   • Die Nutzung von embedded code ermöglicht das manuelle Einfügen des Codes in Ihre Website.
3. Wählen Sie die für Sie einfachste Option.

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 folgen.

Startseite #

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

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. Gehen Sie im DanDomain 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 erzeugt, suchen Sie nach einer IF-Anweisung, die die Startseite identifiziert. Suchen Sie entweder:

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

5. Fügen Sie die Embedcodes innerhalb dieser IF-Anweisung ein. So 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 DanDomain Admin zu Kontrolpanel > Design Manager > Rediger filer.

3. Suchen Sie die Datei, die die Produktseite erzeugt. In Standard-Layouts ist dies modules > product > product-entity.tpl.

4. Fügen Sie die Embedcodes am Ende dieser Datei 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. Gehen Sie im DanDomain Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Suchen Sie die Datei, die Ihre Kategorieseiten erzeugt. Bei Standard-Layouts ist dies modules > product > product-list.tpl.

4. Fügen Sie den Embedcode in die Datei ein, irgendwo unterhalb des Titels und der Beschreibung (normalerweise etwa bei 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 stellt sicher, dass das Banner nur auf Kategorieseiten und nicht auf der Suchseite angezeigt wird, da beide die gleiche Template-Datei verwenden.

Warenkorbseite #

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

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

3. Suchen Sie die Datei, die die Warenkorbseite erzeugt. In Standard-Layouts 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 DanDomain 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 über die Adressleiste seines Browsers fährt.

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, wenn Sie keine Entwicklerressourcen zur Verfügung haben.

1. Erstellen Sie eine neue CMS-Seite in DanDomain.
2. Fügen Sie die Embedcodes zur CMS-Seite hinzu.

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

3. Erstellen Sie eine Umleitungsregel zu dieser Seite, jedes Mal, wenn ein Produkt dem Warenkorb hinzugefügt wird.