Magento 1

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Magento 1.

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie vollständig automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie den Einstieg mit einem Clerk.js setup in Magento 1 finden.

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

Slider-Setup #

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

Wenn Sie die Schritte in my.clerk.io > Settings > Setup Guides befolgen, werden die Elements für unsere Best Practices automatisch angelegt.

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 es visuell zu konfigurieren, oder Code Designs einsetzen.

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 Design-Vorlagen den gewünschten Startpunkt aus.
  4. Geben Sie einen Namen an und klicken Sie auf Create design.
  5. Nehmen Sie beliebige Ä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 Einstiegs-Design suchen, sehen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dies beinhaltet alle Einstellungen, um die Recommendations anzuzeigen und sie auf Ihrer Website einbettbar zu machen. Gehen 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. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, ihn basierend auf der Seite und Logik zu benennen, die Sie verwenden möchten. Z.B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie im Element type, die gewünschte Produktlogik aus dem Dropdown aus. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie im Design das erstellte Design aus dem Dropdown aus und aktivieren Sie die gewünschte Produktanzahl.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website hinzuzufügen, gibt es zwei Optionen: Injection und Embedded code.

  1. Öffnen Sie den Tab Insert into website.
  2. Hier haben Sie zwei Möglichkeiten:
    • Mit injection fügen Sie den Code über einen CSS-Selektor ein.
    • Mit embedded code können Sie den Code manuell in Ihre Website einsetzen.
  3. Wählen Sie die für Sie einfachere Option.
  4. Bei einigen Logics sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen Magento 1. Damit wird der Embedcode mit den richtigen Magento 1 Shortcodes vorausgefüllt.

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

Erweiterungssetup #

Verwenden Sie die Magento-Erweiterung, um Slider auf wichtigen Seiten zu aktivieren:

  1. Gehen Sie in Magento zu System > Configuration > Clerk settings und wählen Sie die korrekte Store View aus.
  2. Aktivieren und befüllen Sie für jeden Seitenbereich die Templates/Inhalte:
    • Product Page Settings: Setzen Sie Enable auf Yes und stellen Sie sicher, dass im Templates-Feld Ihre Slider-IDs (durch Kommas getrennt, ohne “@”) hinterlegt sind.
    • Category Page Settings: Setzen Sie Enable auf Yes und fügen Sie Ihre Slider-IDs hinzu.
    • Cart Settings: Setzen Sie Enable auf Yes und tragen Sie Ihre Slider-ID ein.
  3. Klicken Sie auf Save Config.

my.clerk.io Setup #

  1. Gehen Sie zu Recommendations > Elements.

  2. Wählen Sie den Slider, 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 eingebettet.

  5. Für eingebetteten Code in Magento 1 sind typische Platzierungen:

    • Startseite: CMS > Pages > Home page unter Content.
    • Produktseite: app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml mit data-products gesetzt auf <?php echo Mage::registry('current_product')->getId(); ?>.
    • Kategorieseite: app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml mit data-category gesetzt auf <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.
    • Warenkorbseite: Im Cart-Template data-products auf aktuelle Warenkorb-Produkt-IDs setzen, z.B.:
    data-products="[<?php $i = 0; foreach(Mage::getSingleton('checkout/session')->getQuote()->getAllVisibleItems() as $_item) { if ($i > 0) { echo ','; } echo $_item->getProductId(); $i++; } ?>]"

Seiten #

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

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elements mit den folgenden Logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Ergänzen Sie Ihre Startseitenvorlage bzw. den Block um die Embedcodes.

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 Magento 1 aus und kopieren Sie den Embedcode.
  3. Öffnen Sie die Magento 1 Theme-Dateien und finden Sie die Datei für Ihre Kategorieseiten, meist app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml.
  4. Fügen Sie den Embedcode unterhalb von Titel und Beschreibung ein. Setzen Sie data-category auf <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit den folgenden Logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Dropdown Insert into website > Choose your platform für beide Magento 1 und kopieren Sie die Embedcodes.
  3. Öffnen Sie in den Magento 1 Theme-Dateien jene Datei, die Ihre Produktseiten erzeugt – meist app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml.
  4. Fügen Sie die Embedcodes unterhalb der Produktbeschreibung ein. Setzen Sie data-products auf <?php echo Mage::registry('current_product')->getId(); ?>.

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. Um den Add-To-Basket-Powerstep mit der Magento-Erweiterung zu aktivieren:
    1. Gehen Sie zu System > Configuration > Clerk.
    2. Unter Power step settings tragen Sie Ihre Element-IDs (durch Kommas getrennt) in Templates ein.
    3. Setzen Sie Enable auf Yes und klicken Sie auf Save Config.

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 Magento 1 aus und kopieren Sie den Embedcode.
  3. Öffnen Sie in den Magento 1 Theme-Dateien die Datei, die Ihre Warenkorbseiten erzeugt.
  4. Fügen Sie den Embedcode unterhalb der Warenkorbelemente und der Checkout-Schaltfläche ein. Setzen Sie data-products auf die aktuellen Warenkorb-Produkt-IDs.

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic Visitor Recommendations.
  2. Sie können es per Erweiterung oder manuell aktivieren. Nachfolgend finden Sie die Schritte für beide Optionen.

Erweiterungssetup #

Mit der Erweiterung:

  1. Gehen Sie zu System > Configuration > Clerk Settings und wählen Sie die korrekte Store View.
  2. Unter Exit-Intent Settings setzen Sie Enable auf Yes und tragen Sie im Feld Element/Templates Ihre Element-ID(s) ein (z.B. exit-intent).
  3. Klicken Sie auf Save Config.

Manuelles Setup #

Manuelle Einbettung (ältere Erweiterungsversionen): Fügen Sie Folgendes in app/design/frontend/base/default/template/clerk/tracking.phtml ein:

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

Startvorlagen #

Wenn Sie Code Designs einsetzen möchten, können Ihnen diese Vorlagen als Ausgangspunkt dienen.

Slider-Code #

Diese Vorlage rendert einen Standardslider mit gängigen Produktinformationen, den Sie bei Bedarf 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.