Magento 2

Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produkt-Logiken, sodass Sie komplett automatisierte Produkte auf jeder beliebigen Seite anzeigen können. Dieser Artikel erklärt, wie Sie bei der Nutzung eines Clerk.js-Setups in Magento 2 starten.

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

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 befolgen, werden die Elements 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 verwenden, um das Design visuell zu konfigurieren, oder mit Code Designs arbeiten.

Ein Design kann für beliebig viele Recommendations-Elemente verwendet 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 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. Vergeben Sie einen Namen und klicken Sie auf Create design.
  4. Erstellen Sie ein Code Design von Grund auf mit Liquid Code.

Wenn Sie ein Startdesign wünschen, sehen Sie sich weiter unten die Slider-Vorlage an.

Inhalt erstellen #

Dies enthält alle Einstellungen zur Anzeige der Recommendations und macht sie auf Ihrer Website einbettbar. Wiederholen 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. Vergeben Sie einen aussagekräftigen Namen. Es wird empfohlen, diesen anhand der Seite und Logik zu benennen, die Sie verwenden möchten, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie in Content type, die gewünschte Produkt-Logik aus dem Dropdown-Menü. Einen Überblick über alle Produkt-Logiken finden Sie hier.
  5. Wählen Sie in Design das von Ihnen erstellte Design aus dem Dropdown-Menü und legen Sie die Anzahl der anzuzeigenden Produkte fest.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie den Tab Insert into website.
  2. Hier stehen Ihnen zwei Optionen zur Verfügung:
    • Mit Injection können Sie den Code per CSS-Selektor einfügen.
    • Mit Embedded Code fügen Sie den Code manuell auf Ihrer Website ein.
  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 Magento 2 aus. Dadurch wird der Embedcode automatisch mit den richtigen Magento 2 Shortcodes vorausgefüllt.

Um Synchronisationsdetails hinzuzufügen oder eine Synchronisierung zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

Erweiterungs-Einrichtung #

Verwenden Sie die Magento 2-Erweiterung, 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 Templates/Inhalte:
    • Product Settings: Setzen Sie Enabled auf Yes und geben Sie im Templates-Feld Ihre Slider-IDs an (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 geben Sie Ihre Slider-ID an.
  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. Typische Platzierungen für Embedded Code bei Magento 2 sind:
    • 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 #

Im Folgenden 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 den folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in Ihr Startseitentemplate/-block ein.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Im Dropdown Insert into website > Choose your platform, wählen Sie Magento 2 aus und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von Magento 2 und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Meistens ist dies 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 den folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Im Dropdown Insert into website > Choose your platform wählen Sie jeweils Magento 2 und kopieren die Embedcodes.
  3. Suchen Sie in den Magento 2 Theme-Dateien die Datei, die Ihre Produktseiten generiert. Meistens ist es 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. Falls noch nicht geschehen, erstellen Sie den Content, den Sie im Add-To-Basket-Schritt (Power Step) verwenden möchten.

  2. Gehen Sie im Backend von Magento 2 zu Stores -> Configuration -> Clerk -> Configuration und finden Sie die Powerstep-Einstellungen.

  3. Setzen Sie Enabled auf Yes.

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

  5. Klicken Sie auf Save Config.

Sie finden die IDs jedes von Ihnen erstellten Elements im 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. Im Dropdown Insert into website > Choose your platform wählen Sie Magento 2 aus und kopieren 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 irgendwo unterhalb der Warenkorbpositionen 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 die Aktivierung über die Erweiterung oder manuell vornehmen. Nachstehend sind beide Optionen beschrieben.

Erweiterungs-Einrichtung #

Ab v2.2.3 kann Exit-Intent direkt über die Erweiterung aktiviert werden:

  1. Erstellen Sie einen neuen Website Content in my.clerk.io und nennen Sie ihn “Exit Intent”

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

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

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

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

Manuelle Einrichtung #

Die Einrichtung erfolgt in 4 Schritten:

  1. Erstellen Sie einen neuen Website Content in my.clerk.io und nennen Sie ihn “Exit Intent”

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

  3. Unter Insert Into Website kopieren Sie den bereitgestellten Embedcode an den Anfang dieser Magento2-Datei per FTP:

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

  4. Fügen Sie data-exit-intent=“true” in den soeben eingefügten Embedcode ein. So:

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

Hinweis: Alle Recommendations, die data-exit-intent=“true” enthalten, lösen das Exit Intent Pop-up aus.

Startvorlagen #

Wenn Sie Code Designs verwenden möchten, helfen Ihnen diese Vorlagen beim Einstieg.

Slider-Code #

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