Magento 2

Recommendations

Backend in the Clerk.io backend

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

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

Slider Einrichtung #

Recommendations werden mit Elements erstellt, die sich auf ein Design beziehen. Nachfolgend finden Sie die grundlegende Anleitung zur Einrichtung eines Elements.

Wenn Sie den Schritten in my.clerk.io > Settings > Setup Guides folgen, 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 mit Code Designs arbeiten.

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 Designvorlagen das gewünschte Template aus.
  4. Geben Sie einen Namen an 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 an und klicken Sie auf Create design.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid code.

Wenn Sie ein Startdesign möchten, werfen Sie einen Blick auf das Slider Template weiter unten.

Element erstellen #

Dieses beinhaltet alle Einstellungen, die für die Anzeige der Recommendations verwendet werden, und macht das Element 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 aussagekräftigen Namen an. Wir empfehlen, das Element nach der Seite und der gewünschten Logik zu benennen. Z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie im Dropdown-Feld Element type, die gewünschte Produktlogik aus. Sie finden eine Übersicht aller Produktlogiken hier.
  5. Wählen Sie im Dropdown-Feld Design das von Ihnen erstellte Design aus und geben Sie die Anzahl der anzuzeigenden Produkte an.
  6. Klicken Sie oben auf der Seite auf Save.

Zur 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 Option, die für Sie am einfachsten zu verwenden ist.
  4. Für einige Logics erscheint das Dropdown Choose your platform. Wählen Sie in diesen Fällen Magento 2 aus. Dadurch wird der Embedcode mit den richtigen Magento 2 Shortcodes vorausgefüllt.

Um Sync-Details hinzuzufügen oder einen Sync zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

Extension-Einrichtung #

Verwenden Sie die Magento 2 Extension, um Slider auf wichtigen Seiten zu aktivieren:

  1. Gehen Sie zu Stores > Configuration > Clerk > Configuration und wählen Sie den richtigen Store View.
  2. Aktivieren und befüllen Sie für jeden Seitenbereich die Vorlagen/Inhalte:
    • Product Settings: Setzen Sie Enabled auf Yes und stellen Sie sicher, dass das Vorlagenfeld Ihre Slider-IDs enthält (kommagetrennt, ohne “@”).
    • Category Settings: Setzen Sie Enabled auf Yes und fügen Sie Ihre Slider-IDs hinzu.
    • Cart Settings: Setzen Sie Enabled auf Yes und fügen Sie Ihre Slider-ID hinzu.
  3. Klicken Sie auf Save Config.

my.clerk.io Einrichtung #

  1. Gehen Sie zu Recommendations > Elements.
  2. Wählen Sie den Slider aus, den Sie einfügen möchten.
  3. Öffnen Sie den Tab Insert into website.
  4. Wählen Sie eine der folgenden Optionen:
    • Mit Injection wird der Code über einen CSS-Selektor eingefügt.
    • Mit Embedded code wird der Code manuell eingefügt.
  5. Für Embedded Code in Magento 2 sind typische Platzierungen:
    • Startseite: Content > Blocks > Home page block unter Content.
    • Produktseite: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml mit data-products, gesetzt auf die aktuelle Produkt-ID.
    • Kategorieseite: vendor/magento/module-catalog/view/frontend/templates/category/products.phtml mit data-category, gesetzt auf die aktuelle Kategorie-ID.
    • Warenkorbseite: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml mit data-products, gesetzt auf die Produkt-IDs im Warenkorb.

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 folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in Ihr Startseiten-Template oder -Block ein.

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 Magento 2 und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von Magento 2 und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Dies ist meist vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Fügen Sie den Embedcode an einer Stelle unterhalb des Titels und der Beschreibung ein. Setzen Sie data-category auf die aktuelle Kategorie-ID.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie für jedes Element im Dropdown Insert into website > Choose your platform Magento 2 und kopieren Sie die Embedcodes.
  3. Suchen Sie in den Theme-Dateien von Magento 2 die Datei, die Ihre Produktseiten generiert. Dies ist meist vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Fügen Sie die Embedcodes an einer Stelle unterhalb der Produktbeschreibung ein. Setzen Sie data-products auf die aktuelle Produkt-ID.

Add-To-Basket Schritt #

  1. Falls noch nicht geschehen, erstellen Sie das gewünschte Element für Ihren Add-To-Basket Schritt (Power Step).

  2. Gehen Sie im Magento 2 Backend zu Stores -> Configuration -> Clerk -> Configuration und suchen Sie Powerstep settings.

  3. Setzen Sie Enabled auf Yes.

  4. Wählen Sie die Option Popup oder Page aus und geben Sie die IDs Ihrer Elements ein, getrennt durch Kommas.

  5. Klicken Sie auf Save Config.

Um eine Element-ID zu finden, gehen Sie zu Recommendations > Elements in my.clerk.io und öffnen Sie das Element. Verwenden Sie die ID, die in den Einstellungen angezeigt wird. Sie können dem Add-To-Basket Schritt ein bis vier Elements hinzufügen.

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 Magento 2 und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von Magento 2 und suchen Sie die Datei, die Ihre Warenkorbseiten generiert. Dies ist meist vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Fügen Sie den Embedcode an einer Stelle unterhalb der Warenkorbartikel und des Checkout-Buttons ein. Setzen Sie data-products auf die Produkt-IDs im Warenkorb.

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Sie können es über die Extension oder manuell aktivieren. Im Folgenden finden Sie die Schritte für beide Optionen.

Extension-Einrichtung #

Ab v2.2.3 kann Exit-Intent direkt aus der Extension wie folgt aktiviert werden:

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

  2. Wählen Sie eine Logik dafür – Wir empfehlen “Visitor Recommendations”.

  3. Im Magento2 Backend gehen Sie zu Stores->Configuration->Configuration im Seitenmenü und suchen Sie Exit-Intent Settings.

  4. Aktivieren Sie das Enabled Kontrollkästchen und stellen Sie sicher, dass das Element Feld “exit-intent” enthält.

  5. Klicken Sie auf Save Config, um es zu aktivieren.

Manuelle Einrichtung #

Die Einrichtung umfasst 4 Schritte:

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

  2. Wählen Sie eine Logik dafür – Wir empfehlen “Visitor Recommendations”.

  3. Kopieren Sie unter Insert Into Website den bereitgestellten Embedcode an den Anfang dieser Magento2 Datei via FTP:

    vendor->clerk->magento2->view->frontend->templates->tracking.phtml

  4. Fügen Sie dem gerade platzierten Embed Code data-exit-intent=“true” hinzu, z. B.:

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

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

Start-Templates #

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

Slider Code #

Dieses Template rendert einen Standard-Slider mit allgemeinen Produktinformationen, den Sie an Ihre Bedürfnisse 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-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">View Product</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-view-product, .clerk-view-product: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;
}

.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;
}

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