Prestashop

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Prestashop.

Clerk.io bietet mehr als 20 verschiedene Produktlogiken, was es ermöglicht, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit Recommendations mithilfe des PrestaShop-Moduls beginnen.

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

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Nachfolgend finden Sie die 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. Dadurch können Kunden mit weniger Klicks mehr Produkte 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-Elemente 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 Design-Vorlagen jene 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 von Grund auf ein Code-Design mit Liquid Code.

Wenn Sie ein Startdesign wünschen, finden Sie weiter unten die Slider-Vorlage.

Element erstellen #

Dieses enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet werden, 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 beschreibenden Namen ein. Wir empfehlen, es nach Seite und Logik zu benennen, die Sie verwenden möchten, z. B. „Home Page / Visitor Recommendations“.
  4. Wählen Sie im Element type, die gewünschte Produktlogik aus dem Dropdown-Menü. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie im Design das von Ihnen erstellte Design aus dem Dropdown-Menü aus und wählen Sie die Anzahl der zu anzeigenden Produkte.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Auf der Website einbinden #

Um Clerk Recommendations auf Ihrer Website einzubinden, stehen Ihnen drei verschiedene Optionen zur Verfügung: Injection, Embedded Code, und über das Modul.

  1. Öffnen Sie den Tab Insert into website.
  2. Hier haben Sie zwei Optionen:
    • Mit injection können Sie den Code per CSS-Selektor einfügen.
    • Mit embedded code können Sie den Code manuell in Ihrer Website einfügen.
  3. Wählen Sie die für Sie einfachste Option aus.
  4. Bei manchen Logics erscheint das Dropdown Choose your platform. Wählen Sie in diesen Fällen PrestaShop aus. Damit wird der Embedcode mit den richtigen PrestaShop-Shortcodes vorausgefüllt.

Moduleinrichtung #

Diese Option ist für Kategorie-, Warenkorb- und Produktseiten, Exit Intent und Powerstep verfügbar.

  1. Gehen Sie in PrestaShop zu Modules and Services > Clerk > Configure.
  2. Aktivieren und befüllen Sie für jeden Seitenbereich die Templates/Inhalte:
    • Produktseite: Setzen Sie Enabled auf Yes und stellen Sie sicher, dass das Feld „Templates“ Ihre Slider-IDs enthält (kommagetrennt, ohne „@“).
    • Kategorieseite: Setzen Sie Enabled auf Yes und fügen Sie Ihre Slider-IDs hinzu.
    • Warenkorbseite: Setzen Sie Enabled auf Yes und fügen Sie Ihre Slider-ID hinzu.
  3. Klicken Sie auf Save.

my.clerk.io Einrichtung #

  1. Gehen Sie zu Recommendations > Elements..
  2. Wählen Sie den gewünschten Inhalt aus.
  3. Öffnen Sie den Tab Insert into website.
  4. Hier haben Sie zwei Optionen:
    • 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.
  5. Wählen Sie die für Sie einfachste Option aus.
  6. Bei Embedded Code fügen Sie die benötigte Frontend-Logik für z. B. Produkt- oder Kategorie-ID ein. Dies hängt von der gewählten Logik ab.

Typische Platzierungen und Dateipfade für Embedded Code bei PrestaShop sind:

  • Startseite: Code in das Homepage-Template/CMS-Block einfügen (z. B. Ap PageBuilder RawHTML).
  • Produktseite: themes/TEMPLATE_NAME/product.tpl — setzen Sie data-products auf [{$smarty.get.id_product}].
  • Kategorieseite: themes/TEMPLATE_NAME/category.tpl — setzen Sie data-category auf {$smarty.get.id_category}.
  • Warenkorbseite: themes/TEMPLATE_NAME/shopping-cart.tpl — setzen Sie data-products auf [{foreach $products as $product name=products}{$product.id_product|intval}{if not $smarty.foreach.products.last},{/if}{/foreach}].

Hier ein vollständiges Recommendations-Embedcode-Beispiel mit einer beispielhaften Produkt-ID:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products="[123]">
</span>

Seiten #

Hier finden Sie die spezifischen Seiten, auf denen Sie Recommendations einbinden sollten, und welche Typen Sie nutzen sollten, um unseren Best Practices zu folgen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elements mit folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes im Startseiten-Template/CMS-Block ein (z. B. Ap PageBuilder RawHTML).

Wenn Sie alle Banner untereinander anzeigen möchten, fügen Sie alle Embedcodes in denselben Block ein. Möchten Sie sie auf der Startseite verteilen, wiederholen Sie den obigen Vorgang mehrfach.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Wählen Sie im Dropdown Insert into website > Choose your platform PrestaShop und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von PrestaShop und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Das ist meistens themes/TEMPLATE_NAME/category.tpl.
  4. Fügen Sie den Embedcode unterhalb des Titels und der Beschreibung ein. Setzen Sie data-category auf {$smarty.get.id_category}.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Slider mit folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Dropdown Insert into website > Choose your platform für beide PrestaShop und kopieren Sie die Embedcodes.
  3. Suchen Sie in den PrestaShop Theme-Dateien die Datei, die Ihre Produktseite generiert. Das ist meist themes/TEMPLATE_NAME/product.tpl.
  4. Fügen Sie die Embedcodes unterhalb der Produktbeschreibung ein. Setzen Sie data-products auf [{$smarty.get.id_product}].

Add-To-Basket Schritt #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Geben Sie ihm den Namen “Add-To-Basket / Others Also Bought”. Das ist wichtig, damit der Embedcode korrekt funktioniert.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Gehen Sie in das PrestaShop-Backend zu Modules And Services -> Clerk -> Configure.
  5. Tragen Sie unter Powerstep Settings die IDs der erstellten Elemente, durch Komma getrennt, in das Feld Templates ein. Die ID ist im Element-Embedcode als Ihr Template-Name angegeben, z. B. data-template=@power-step-others-also-bought.
  6. Setzen Sie Enabled auf Yes.
  7. Klicken Sie auf Save.

Die IDs der von Ihnen erstellten Elemente finden Sie im Clerk-Backend unter Recommendations -> Elements -> Edit (die Anzahl der Elemente variiert beim Add-To-Basket-Schritt zwischen 1 und 4).

Um den Add-To-Basket-Schritt anzuzeigen, müssen Sie den standardmäßigen PrestaShop Ajax-Warenkorb deaktivieren:

  1. Gehen Sie im PrestaShop-Backend zu Modules And Services.
  2. Suchen Sie Cart Block und klicken Sie auf Configure.
  3. Setzen Sie Ajax cart auf No.
  4. Klicken Sie auf Save.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wählen Sie im Dropdown Insert into website > Choose your platform PrestaShop und kopieren Sie den Embedcode.
  3. Suchen Sie in den PrestaShop-Theme-Dateien die Datei, die Ihre Warenkorbseiten generiert. Das ist meist themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Fügen Sie den Embedcode unterhalb der Warenkorbprodukte und des „Zur Kasse“-Buttons ein. Setzen Sie data-products auf [{foreach $products as $product name=products}{$product.id_product|intval}{if not $smarty.foreach.products.last},{/if}{/foreach}].

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Sie können es entweder über das Modul oder manuell aktivieren. Nachfolgend finden Sie die Anleitungen für beide Optionen.

Moduleinrichtung #

Um Exit Intent über das Modul einzurichten, befolgen Sie diese fünf Schritte:

  1. Erstellen Sie ein neues Element in my.clerk.io und nennen Sie es Exit Intent.

  2. Wählen Sie eine Logik dafür aus – wir empfehlen „Visitor Recommendations“.

  3. Gehen Sie im PrestaShop-Backend im Seitenmenü zu Modules and Services und suchen Sie das Clerk module.

  4. Suchen Sie nach Exit Intent Settings. Setzen Sie Enabled auf YES, und stellen Sie sicher, dass das Feld Template „exit-intent“ enthält.

  5. Klicken Sie auf Save, um zu aktivieren.

Manuelle Einrichtung #

Wenn Sie Exit Intent manuell konfigurieren möchten, gehen Sie folgendermaßen vor:

  1. Erstellen Sie ein neues Element in my.clerk.io und nennen Sie es Exit Intent.

  2. Gestalten Sie Ihren Slider in Designs bei my.clerk.io.

  3. Wählen Sie eine Logik dafür aus – wir empfehlen „Visitor Recommendations“.

  4. Kopieren Sie im Bereich Insert Into Website den bereitgestellten Embed Code in folgende PrestaShop-Datei, direkt oberhalb des Clerk.io-Tracking-Skripts: modules->clerk->views->templates->hook->visitor_tracking.tpl.

  5. Fügen Sie data-exit-intent="true" zum Embedcode hinzu, den Sie gerade in visitor_tracking.tpl platziert haben. So etwa:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'YOUR_STORE_PUBLIC_KEY'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Hinweis: Alle Recommendations mit data-exit-intent="true" lösen das Exit-Intent-Popup aus.

Startvorlagen #

Wenn Sie Code Designs verwenden möchten, können Sie mit diesen Vorlagen loslegen.

Slider-Code #

Diese Vorlage rendert einen Standardslider mit verschiedenen Produktinformationen, den Sie nach Ihren Bedürfnissen anpassen können.

HTML #

<div class="clerk-recommendations">
    <h2 class="section-title" style="text-align:center; text-transform: uppercase;"><span>{{ headline }}</span></h2>

    <div class="clerk-slider">
         {% for product in products %}
            <div class="clerk-slider-item">
                <div class="clerk-slider-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-slider-badge">On Sale</div>
                        {% endif %}
                        <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-slider-brand">{{ product.brand }}</div>
                        <div class="clerk-slider-name">{{ product.name }}</div>
                        
                        <div class="clerk-slider-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-slider-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-slider-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 0 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button-not-in-stock">Out of Stock</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider-item {
    margin: auto;
}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-brand {
    font-size: 0.9em;
    color: #757575;
}

.clerk-slider-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-slider-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-slider-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1100px){
    .clerk-slider-item {
        width: 20%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px){
    .clerk-slider-item {
        width: 25%;
    }
}

@media screen and (min-width: 414px) and (max-width: 900px) {
    .clerk-slider-item {
        width: 50%;
    }
    .clerk-slider-button, .clerk-slider-button-not-in-stock {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 413px) {
    .clerk-slider-item {
        width: 100%;
    }
}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.