Magento 2

Recommendations

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

Für unsere vollständigen Best Practices lesen Sie diesen Artikel, welche Recommendations Sie verwenden sollten.

Slider-Einrichtung #

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

Wenn Sie die Schritte unter my.clerk.io > Einstellungen > Setup Guides befolgen, werden die Elements für unsere Best Practices automatisch erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. So sehen Kunden mit weniger Klicks mehr Produkte. Sie können entweder den Design Editor verwenden, um ihn visuell zu konfigurieren, oder Code Designs nutzen.

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 diejenige aus, mit der Sie starten möchten.
  4. Geben Sie ihm einen Namen 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 ihm einen Namen und klicken Sie auf Create design.
  4. Erstellen Sie ein Code Design von Grund auf mit Liquid code.

Wenn Sie ein Startdesign möchten, schauen Sie sich weiter unten die Slider-Vorlage an.

Element erstellen #

Dies enthält alle Einstellungen, die benötigt werden, um die Recommendations anzuzeigen und sie auf Ihrer Website einbettbar zu machen. 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 beschreibenden Namen ein. Wir empfehlen eine Benennung basierend auf Seite und Logik, die Sie verwenden möchten. Z.B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie unter Element type, die gewünschte Produktlogik aus dem Dropdown. Sie können eine Übersicht aller Produktlogiken hier sehen.
  5. Wählen Sie im Design Dropdown das erstellte Design aus und wählen Sie die Anzahl der anzuzeigenden Produkte.
  6. Klicken Sie oben auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie den Tab Insert into website.
  2. Sie haben 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 ist.
  4. Für einige Logics sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen Magento 2. Dadurch wird der Embedcode mit den richtigen Magento 2 Shortcodes vorausgefüllt.

Um Synchronisierungsdetails hinzuzufügen oder eine Synchronisierung 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 die richtige Store View aus.
  2. Für jeden Seitenbereich aktivieren und befüllen Sie die Template-/Inhaltsfelder:
    • Product Settings: Setzen Sie Enabled auf Yes und stellen Sie sicher, dass das Templates-Feld 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 das Tab Insert into website.
  4. Wählen Sie eine der folgenden Optionen:
  5. Für Embedded Code bei Magento 2 sind typische Platzierungen:
    • Homepage: Content > Blocks > Home page block unter Inhalt.
    • Produktseite: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml mit data-products auf die aktuelle Produkt-ID gesetzt.
    • Kategorieseite: vendor/magento/module-catalog/view/frontend/templates/category/products.phtml mit data-category auf die aktuelle Kategorie-ID gesetzt.
    • Warenkorbseite: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml mit data-products auf die IDs der Warenkorbprodukte gesetzt.

Seiten #

Nachfolgend sind die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, sowie die Typen, damit Sie unseren Best Practices folgen.

Homepage #

  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 Homepage-Template/-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 in die Theme-Dateien von Magento 2 und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Das ist meistens vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Fügen Sie den Embedcode irgendwo 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 im Insert into website > Choose your platform Dropdown Magento 2 und kopieren Sie die Embedcodes.
  3. Suchen Sie in der Magento 2 Theme-Dateien die Datei, die Ihre Produktseiten generiert. Das ist meistens vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Fügen Sie die Embedcodes irgendwo unterhalb der Produktbeschreibung ein. Setzen Sie data-products auf die aktuelle Produkt-ID.

Add-To-Basket Schritt #

  1. Wenn Sie noch nicht, erstellen Sie das Element, das Sie im Add-To-Basket Schritt (Power Step) verwenden möchten.

  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 und tragen Sie die IDs Ihrer Elements, durch Kommata getrennt, ein.

  5. Klicken Sie auf Save Config.

Die IDs jedes Elements, das Sie erstellt haben, finden Sie in Ihrem Clerk Backend ( my.clerk.io), unter Recommendations -> Elements -> Edit (die Anzahl der Elements variiert zwischen 1 und 4 für den Add-To-Basket Schritt):

Hier sehen Sie ein Beispiel, wie Sie die Element-ID finden:

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 in die Theme-Dateien von Magento 2 und suchen Sie die Datei, die Ihre Warenkorbseiten generiert. Das ist meistens vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Fügen Sie den Embedcode irgendwo unter den Warenkorbpositionen und dem Checkout-Button ein. Setzen Sie data-products auf die IDs der Warenkorbprodukte.

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. Nachfolgend die Schritte für beide Optionen.

Extension Einrichtung #

Ab v2.2.3 kann Exit-Intent direkt über die Extension mit diesen Schritten aktiviert werden:

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

  2. Wählen Sie eine Logik aus – wir empfehlen “Visitor Recommendations”.

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

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

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

Manuelle Einrichtung #

Das Setup umfasst 4 Schritte:

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

  2. Wählen Sie eine Logik aus – wir empfehlen “Visitor Recommendations”.

  3. Kopieren Sie unter Insert Into Website den bereitgestellten Embedcode in die oberste Zeile dieser Magento2-Datei via FTP:

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

  4. Fügen Sie data-exit-intent=“true” zum eingestuften Embedcode hinzu. Zum Beispiel:

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

Startvorlagen #

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

Slider Code #

Diese Vorlage stellt einen Standard-Slider mit den gängigsten Produktinformationen dar, 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-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.