Prestashop

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Prestashop.

Clerk.io bietet mehr als 20 verschiedene Arten von Produktlogiken, wodurch es möglich ist, komplett automatisierte Produkte auf jeder Seite anzuzeigen. In diesem Artikel wird erklärt, wie man mit Recommendations im PrestaShop-Modul startet.

Für unsere vollständigen Best Practices zur Verwendung von Recommendations, lesen Sie diesen Artikel.

Slider Setup #

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 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. Dies ermöglicht es Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design Editor zur visuellen Konfiguration verwenden oder Code-Designs nutzen.

Ein Design kann für beliebig viele Recommendations-Elemente 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 Anpassungen 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 benötigen, sehen Sie sich die Slider-Vorlage weiter unten an.

Inhalt erstellen #

Dies enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet werden, und macht es möglich, diese auf Ihrer Website einzubinden. 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 Content..
  3. Geben Sie einen beschreibenden Namen an. Wir empfehlen, diesen anhand der Seite und Logic zu benennen, die Sie verwenden möchten, z. B. „Home Page / Visitor Recommendations“.
  4. Wählen Sie bei Content type, die gewünschte Produktlogik aus der Dropdown-Liste aus. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie bei Design das von Ihnen erstellte Design aus und bestimmen Sie die Anzahl der anzuzeigenden Produkte.
  6. Klicken Sie oben auf der Seite auf Save.

Auf Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website einzubinden, haben Sie drei verschiedene Optionen: Injection, Embedded code und über das Modul.

  1. Öffnen Sie den Tab Insert into website.
  2. Hier haben Sie zwei Möglichkeiten:
    • Mit Injection können Sie den Code mit einem 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.
  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 automatisch mit den richtigen PrestaShop-Shortcodes ausgefüllt.

Moduleinrichtung #

Diese Option ist für Kategorieseiten, Warenkorb- und Produktseiten sowie für 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 Vorlagen/Inhalte:
    • Produktseite: Stellen Sie Enabled auf Yes und tragen Sie im Vorlagenfeld Ihre Slider-IDs ein (kommagetrennt, 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. Hier haben Sie zwei Möglichkeiten:
    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
    • Mit Embedded code können Sie den Code manuell in Ihre Website einbinden.
  5. Wählen Sie die für Sie einfachste Option.
  6. Beim Embedded code fügen Sie falls nötig zusätzliche Logik für die Einbindung ein, z. B. eine Produkt- oder Kategorie-ID. Dies hängt von der gewählten Logic ab.

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

  • Startseite: fügen Sie den Embedcode in Ihre Startseitenvorlage/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 komplettes Embedcode-Beispiel für Recommendations, mit Beispiel-Produkt-ID:

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

Seiten #

Im Folgenden finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, sowie die jeweiligen Typen, um unsere Best Practices zu erfüllen.

Startseite #

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

Wenn Sie alle Banner untereinander anzeigen möchten, fügen Sie alle Embedcodes in dasselbe Feld ein. Wenn Sie sie auf der Startseite verteilen möchten, wiederholen Sie 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 aus und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von PrestaShop und suchen Sie die Datei für Ihre Kategorieseiten. Dies ist in der Regel themes/TEMPLATE_NAME/category.tpl.
  4. Fügen Sie den Embedcode unterhalb von Titel und 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 im Dropdown Insert into website > Choose your platform für beide jeweils PrestaShop und kopieren Sie die Embedcodes.
  3. Suchen Sie in den PrestaShop-Theme-Dateien die Datei für Ihre Produktseiten. Diese ist in der Regel 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 oben auf der Seite 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 Element-Embedcode als 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 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 anzeigen zu können, 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. Gehen Sie zu den Theme-Dateien von PrestaShop und suchen Sie die Datei für Ihre Warenkorbseiten. Dies ist meist 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 es über das Modul oder manuell aktivieren. Nachfolgend finden Sie die Schritte für beide Optionen.

Moduleinrichtung #

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

  1. Legen Sie in my.clerk.io einen neuen Content an und benennen Sie ihn Exit Intent.

  2. Wählen Sie eine Logic – wir empfehlen „Visitor Recommendations“.

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

  4. Gehen Sie zu den Exit Intent Settings. Stellen Sie Enabled auf YES und vergewissern Sie sich, dass das Template-Feld „exit-intent“ enthält.

  5. Klicken Sie auf Save, um zu aktivieren.

Manuelle Einrichtung #

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

  1. Legen Sie in my.clerk.io einen neuen Content an und benennen Sie ihn Exit Intent.

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

  3. Wählen Sie eine Logic – wir empfehlen „Visitor Recommendations“.

  4. Kopieren Sie unter Insert Into Website den bereitgestellten Embedcode in diese 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 soeben in visitor_tracking.tpl eingefügt haben. Wie folgt:

<!-- 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 Pop-up aus.

Startvorlagen #

Wenn Sie Code-Designs verwenden möchten, können Sie diese Vorlagen als Ausgangspunkt nutzen.

Slider-Code #

Dieses Template rendert einen Standardslider mit verschiedenen Produktinformationen, den Sie nach Ihren Wünschen 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.