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 völlig automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie mit einer Clerk.js-Konfiguration in Magento 1 beginnen.

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 auf ein Design verweisen. Nachfolgend finden Sie die grundlegende Anleitung zum Einrichten eines Elements.

Wenn Sie die Schritte in 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. Dadurch können Kunden mit weniger Klicks mehr Produkte sehen. Sie können entweder den Design Editor für eine visuelle 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 Neues Design.
  2. Wählen Sie Product Slider
  3. Wählen Sie aus der Liste der Design-Vorlagen die Vorlage aus, mit der Sie starten möchten.
  4. Geben Sie einen Namen ein und klicken Sie auf Design erstellen.
  5. Nehmen Sie die gewünschten Änderungen am Design vor.

Code-Design #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Blank > Code.
  3. Geben Sie einen Namen ein und klicken Sie auf Design erstellen.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

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

Element erstellen #

Dieses enthält alle Einstellungen zur Anzeige der Recommendations 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 Neues Element.
  3. Geben Sie ihm einen aussagekräftigen Namen. Wir empfehlen, es nach der Seite und der gewünschten Logik zu benennen. Zum Beispiel “Home Page / Visitor Recommendations”.
  4. Wählen Sie bei Elementtyp, die gewünschte Produktlogik aus dem Dropdown-Menü aus. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie bei Design das erstellte Design aus dem Dropdown und legen Sie die Anzahl der anzuzeigenden Produkte fest.
  6. Klicken Sie oben auf der Seite auf Speichern.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website einzubinden, haben Sie zwei Möglichkeiten: Injection und Embedded code.

  1. Öffnen Sie den Tab In Website einfügen.
  2. Hier stehen Ihnen zwei Optionen zur Verfügung:
    • Mit Injection können Sie den Code mithilfe eines CSS-Selectors 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. Bei manchen Logics sehen Sie das Dropdown Wählen Sie Ihre Plattform. Wählen Sie in diesen Fällen Magento 1 aus. Dadurch wird der Embedcode mit den korrekten Magento 1 Shortcodes vorausgefüllt.

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

Erweiterungseinrichtung #

Mit der Magento-Erweiterung können Sie Slider auf wichtigen Seiten aktivieren:

  1. Gehen Sie in Magento zu System > Konfiguration > Clerk-Einstellungen und wählen Sie die richtige Store-Ansicht.
  2. Aktivieren und befüllen Sie für jeden Seitenbereich die Templates/Inhalte:
    • Produktseiten-Einstellungen: Setzen Sie Aktivieren auf Ja und stellen Sie sicher, dass das Templates-Feld Ihre Slider-IDs enthält (durch Komma getrennt, ohne “@”).
    • Kategorieseiten-Einstellungen: Setzen Sie Aktivieren auf Ja und fügen Sie Ihre Slider-IDs hinzu.
    • Warenkorb-Einstellungen: Setzen Sie Aktivieren auf Ja und fügen Sie Ihre Slider-ID hinzu.
  3. Klicken Sie auf Konfiguration speichern.

my.clerk.io Einrichtung #

  1. Gehen Sie zu Recommendations > Elements.

  2. Wählen Sie den gewünschten Slider aus.

  3. Öffnen Sie den Tab In Website einfügen.

  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 Einfügeorte für Embedded-Code auf Magento 1 sind:

    • Startseite: CMS > Seiten > Startseite unter Inhalt.
    • 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: In Ihrer Warenkorbvorlage setzen Sie data-products auf die aktuellen Warenkorb-Produkt-IDs, 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 und welche Typen Sie verwenden sollten, um unseren Best Practices zu folgen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elemente mit den folgenden Logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in Ihre Startseiten-Vorlage/Block ein.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Wählen Sie im Dropdown In Website einfügen > Wählen Sie Ihre Plattform Magento 1 aus und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von Magento 1 und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Meistens ist dies app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml.
  4. Fügen Sie den Embedcode irgendwo 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 Elemente mit den folgenden Logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie für beide im Dropdown In Website einfügen > Wählen Sie Ihre Plattform Magento 1 und kopieren Sie die Embedcodes.
  3. Gehen Sie in den Theme-Dateien von Magento 1 in die Datei, die Ihre Produktseiten erzeugt. In der Regel ist dies app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml.
  4. Fügen Sie die Embedcodes irgendwo 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 Logik Best Cross-Sell Products.
  2. Geben Sie ihm den Namen “Add-To-Basket / Others Also Bought”. Das ist wichtig, damit der Embedcode korrekt funktioniert.
  3. Klicken Sie oben auf der Seite auf Speichern.
  4. Um die Add-To-Basket Powerstep mithilfe der Magento-Erweiterung zu aktivieren:
    1. Gehen Sie zu System > Konfiguration > Clerk.
    2. Fügen Sie unter Power step settings Ihre Element-IDs (durch Komma getrennt) im Feld Templates hinzu.
    3. Setzen Sie Aktivieren auf Ja und klicken Sie auf Konfiguration speichern.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wählen Sie im Dropdown In Website einfügen > Wählen Sie Ihre Plattform Magento 1 aus und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von Magento 1 und suchen Sie die Datei, die Ihre Warenkorbseiten generiert.
  4. Fügen Sie den Embedcode irgendwo unterhalb der Warenkorb-Artikel und des Checkout-Buttons ein. Setzen Sie data-products auf die Produkt-IDs im aktuellen Warenkorb.

Exit-Intent #

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

Erweiterungseinrichtung #

Mit der Erweiterung:

  1. Gehen Sie zu System > Konfiguration > Clerk-Einstellungen und wählen Sie die richtige Store-Ansicht.
  2. Setzen Sie unter Exit-Intent Einstellungen bei Aktivieren auf Ja und stellen Sie sicher, dass das Feld Element/Templates Ihre Element-ID(s) enthält (z. B. exit-intent).
  3. Klicken Sie auf Konfiguration speichern.

Manuelle Einrichtung #

Manuelles Einfügen (ä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 #

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

Slider-Code #

Diese Vorlage zeigt einen Standardslider mit gängigen 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.