Prestashop

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Prestashop.

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

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

Slider-Einrichtung #

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

Wenn Sie die Schritte unter my.clerk.io > Settings > Setup Guides ausführen, werden die Elements 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 zur visuellen Konfiguration nutzen oder Code Designs verwenden.

Ein Design kann für eine beliebige Anzahl von Recommendations-Elementen 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 die aus, mit der Sie starten 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.

Wenn Sie ein Startdesign wünschen, finden Sie das Slider-Template weiter unten.

Element erstellen #

Dies enthält alle Einstellungen für die Anzeige der Recommendations und macht sie einbettbar in Ihrer Website. Führen Sie diese Schritte für jedes Recommendations-Banner durch, das Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Elements..
  2. Klicken Sie auf New Element..
  3. Vergeben Sie einen beschreibenden Namen. Wir empfehlen, das Element nach Seite und Logik zu benennen, die Sie nutzen möchten, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie unter Element type, die gewünschte Produktlogik aus dem Dropdown aus. Einen Überblick über alle Produktlogiken finden Sie hier.
  5. Wählen Sie unter Design das erstellte Design aus dem Dropdown und wählen Sie die Anzahl der anzuzeigenden Produkte.
  6. Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations zu Ihrer Website hinzuzufügen, haben Sie drei verschiedene Möglichkeiten: Injection, Embedded code und über das Modul.

  1. Öffnen Sie den Tab Insert into website.
  2. Sie haben hier zwei Möglichkeiten:
    • Mit Injection können Sie den Code mithilfe eines CSS-Selectors 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.
  4. Für einige Logics sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen PrestaShop aus. Dadurch 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: Stellen Sie Enabled auf Yes und stellen Sie sicher, dass das Templates-Feld Ihre Slider-IDs enthält (durch Komma getrennt, ohne “@”).
    • Kategorieseite: Stellen Sie Enabled auf Yes und fügen Sie Ihre Slider-IDs hinzu.
    • Warenkorbseite: Stellen 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. Sie haben hier zwei Möglichkeiten:
    • Mit Injection können Sie den Code mit einem CSS-Selector 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.
  6. Bei Embedded-Code fügen Sie nach Bedarf Logik für das Frontend hinzu, z. B. eine Produkt- oder Kategorie-ID einzufügen. Dies hängt von der gewählten Logik ab.

Für Embedded-Code auf PrestaShop sind typische Platzierungen und Dateipfade:

  • Startseite: Fügen Sie den Embedcode in Ihr Homepage-Template/CMS-Block ein (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 Produkt-ID:

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

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 folgenden Logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in Ihr Homepage-Template/CMS-Block ein (z. B. Ap PageBuilder RawHTML).

Wenn Sie alle Banner übereinander anzeigen möchten, fügen Sie alle Embedcodes in dieselbe Box ein. Wenn Sie sie auf der Startseite aufteilen möchten, wiederholen Sie einfach den obigen Vorgang mehrfach.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic 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 Design-Dateien Ihres PrestaShop-Themes und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Dies ist meist 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 Logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie für beide im Dropdown Insert into website > Choose your platform jeweils PrestaShop und kopieren Sie die Embedcodes.
  3. Suchen Sie in den PrestaShop-Theme-Dateien die Datei, die Ihre Produktseiten generiert. Dies 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 Logic Best Cross-Sell Products.
  2. Geben Sie ihm den Namen “Add-To-Basket / Others Also Bought”. Dies ist wichtig, damit der Embedcode korrekt funktioniert.
  3. Klicken Sie in der oberen rechten Ecke auf Save.
  4. Gehen Sie im PrestaShop-Backend zu Modules And Services -> Clerk -> Configure.
  5. Tragen Sie unter Powerstep Settings die IDs der erstellten Elemente, durch Kommas getrennt, im Feld Templates ein. Die ID finden Sie im Embedcode des Elements als Ihren Data-Template-Namen, z. B. data-template=@power-step-others-also-bought.
  6. Stellen Sie Enabled auf Yes.
  7. Klicken Sie auf Save.

Die IDs der einzelnen Elemente finden Sie in Ihrem Clerk Backend unter Recommendations -> Elements -> Edit (die Anzahl der Elemente für den Add-To-Basket Schritt variiert zwischen 1 und 4).

Damit der Add-To-Basket Schritt angezeigt werden kann, müssen Sie den Standard-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. Stellen Sie Ajax cart auf No.
  4. Klicken Sie auf Save.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic 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 Theme-Dateien von PrestaShop die Datei, die Ihre Warenkorbseiten generiert, meistens themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Fügen Sie den Embedcode unterhalb der Warenkorb-Artikel und des Checkout-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 Logic Visitor Recommendations.
  2. Sie können dieses entweder über das Modul oder manuell aktivieren. Im Folgenden finden Sie die Schritte für beide Optionen.

Moduleinrichtung #

So richten Sie Exit Intent über das Modul ein:

  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 in das Seitenmenü zu Modules and Services und suchen Sie das Clerk module.

  4. Finden Sie Exit Intent Settings. Stellen Sie Enabled auf YES, und stellen Sie sicher, dass das Feld Template “exit-intent” enthält.

  5. Klicken Sie auf Save, um die Funktion zu aktivieren.

Manuelle Einrichtung #

Wenn Sie Exit Intent manuell konfigurieren möchten, gehen Sie wie folgt vor:

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

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

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

  4. Kopieren Sie unter Insert Into Website den bereitgestellten Embedcode in diese PrestaShop-Datei, direkt über das Clerk.io-Tracking-Skript: modules->clerk->views->templates->hook->visitor_tracking.tpl.

  5. Fügen Sie dem soeben eingefügten Embedcode in visitor_tracking.tpl data-exit-intent="true" hinzu. Zum Beispiel:

<!-- 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, die data-exit-intent="true" enthalten, lösen das Exit Intent Pop-up aus.

Vorlagen für den Einstieg #

Wenn Sie Code Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern.

Slider-Code #

Diese Vorlage rendert einen Standard-Slider 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.