Recommendations

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

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

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Unten finden Sie die grundlegende Anleitung zum Einrichten eines Elements.

Wenn Sie die Schritte in 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, mehr Produkte mit weniger Klicks zu 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 aus der Liste der Designvorlagen das gewünschte Startdesign 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, die zur Anzeige der Recommendations verwendet werden, und macht sie auf Ihrer Website einbettbar. 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 beschreibenden Namen. Wir empfehlen, den Namen basierend auf der Seite und Logik zu benennen, die Sie verwenden möchten. Z. B. “Home Page / Visitor Recommendations”.
4. Wählen Sie im Dropdown unter Element type, die gewünschte Produktlogik aus. Eine Übersicht aller Produktlogiken finden Sie hier.
5. Wählen Sie im Dropdown unter Design das von Ihnen erstellte Design aus und wählen Sie die Anzahl der anzuzeigenden Produkte.
6. Klicken Sie oben auf dem Bildschirm auf Save.

Auf der Website hinzufügen #

1. Öffnen Sie den Tab Insert into website.
2. Hier haben Sie zwei Optionen:
   • Mit Injection können Sie den Code über einen CSS-Selektor einfügen.
   • Mit Embedded Code können Sie den Code manuell in Ihre 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.

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. Finden Sie die Datei index.tpl.

4. Da diese Datei alle Seiten des Webshops einschließlich der Startseite generiert, suchen Sie nach einer IF-Anweisung, die die Startseite identifiziert. Suchen Sie 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 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 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. Finden Sie die Datei, die die Produktseite generiert. Bei Standard-Themes ist dies modules > product > product-entity.tpl.

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

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

4. Kopieren Sie den Embedcode in die Datei, irgendwo unterhalb des Titels und der 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 stellt sicher, dass das Banner nur auf Kategorieseiten und nicht auf der Search-Seite angezeigt wird, 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 DanDomain Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Finden Sie die Datei, die die Warenkorbseite generiert. Bei 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 DanDomain Admin zu Online Store > Design > Aktive designs > Rediger filer.

3. Finden Sie partials > body.tpl.

4. Kopieren Sie den Embedcode ans 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 DanDomain. Wir empfehlen, einen DanDomain-Entwickler mit der Integration zu beauftragen oder diesen Schritt zu überspringen, falls Ihnen keine Entwicklerressourcen zur Verfügung stehen.

1. Erstellen Sie eine neue CMS-Seite in DanDomain.
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 dem Warenkorb hinzugefügt wird.