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 mit einem Clerk.js Setup in Magento 1 beginnen können.

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

Wenn Sie die Schritte in 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. 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 Code Designs nutzen.

Ein Design kann für beliebig viele Recommendations Elements, die Sie erstellen, wiederverwendet werden.

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 ein 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 ein und klicken Sie auf Create design.
  4. Erstellen Sie ein Code Design von Grund auf mit Liquid Code.

Wenn Sie ein Startdesign möchten, finden Sie weiter unten das Slider Template.

Content erstellen #

Dies enthält alle Einstellungen, die benötigt werden, um die Recommendations anzuzeigen und sie in Ihre Website einzubetten. 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 Content.
  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, es basierend auf der Seite und der verwendeten Logik zu benennen, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie unter Content type, die gewünschte Produktlogik aus dem Dropdown-Menü. Einen Überblick über alle Product Logics finden Sie hier.
  5. Wählen Sie unter Design das Design aus dem Dropdown, das Sie erstellt haben, und wählen Sie die Anzahl der anzuzeigenden Produkte aus.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website hinzuzufügen, haben Sie zwei Möglichkeiten: Injection und Embedded Code.

  1. Öffnen Sie die Registerkarte Insert into website.
  2. Hier haben Sie zwei Möglichkeiten:
    • 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 Option, die für Sie am einfachsten zu verwenden ist.
  4. Für einige Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesem Fall Magento 1 aus. Dadurch 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.

Extension Setup #

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

  1. Gehen Sie in Magento zu System > Configuration > Clerk settings und wählen Sie die richtige Store View aus.
  2. Aktivieren und befüllen Sie die Templates/Contents für die einzelnen Seitensektionen:
    • Product Page Settings: Setzen Sie Enable auf Yes und stellen Sie sicher, dass im Feld Templates Ihre Slider-IDs (kommagetrennt, ohne “@”) eingetragen sind.
    • Category Page Settings: Setzen Sie Enable auf Yes und fügen Sie Ihre Slider-IDs ein.
    • Cart Settings: Setzen Sie Enable auf Yes und fügen 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 aus, den Sie einfügen möchten.

  3. Öffnen Sie die Registerkarte Insert into website.

  4. Wählen Sie eine der folgenden Methoden:

    • Mit Injection wird der Code mithilfe eines CSS-Selectors eingefügt.
    • Mit Embedded Code wird der Code manuell eingefügt.

  5. Für Embedded Code unter Magento 1 sind typische Platzierungen:

    • Homepage: CMS > Pages > Home page im Bereich 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: In Ihrer Cart-Template, data-products auf die aktuellen Cart-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 finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten und welche Typen Sie verwenden sollten, um unseren Best Practices zu folgen.

Homepage #

  1. Erstellen Sie in my.clerk.io 3 Elements mit den folgenden Logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in das Template/den Block Ihrer Homepage 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 1 und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von Magento 1 und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Dies ist 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 jedes Element Magento 1 und kopieren Sie die Embedcodes.
  3. Suchen Sie in den Theme-Dateien von Magento 1 die Datei, die Ihre Produktseiten generiert. Dies ist 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 Logik Best Cross-Sell Products.
  2. Geben Sie als Namen “Add-To-Basket / Others Also Bought” ein. Dies ist wichtig, damit der Embedcode korrekt funktioniert.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Um das Add-To-Basket Powerstep mit der Magento-Extension zu aktivieren:
    1. Gehen Sie zu System > Configuration > Clerk.
    2. Fügen Sie unter Power step settings Ihre Element-IDs (kommagetrennt) 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 Logik 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. Gehen Sie in die Theme-Dateien von Magento 1 und suchen Sie die Datei, die Ihre Warenkorbseiten generiert.
  4. Fügen Sie den Embedcode unterhalb der Warenkorb-Artikel und der Checkout-Schaltfläche ein. Setzen Sie data-products auf die aktuellen Cart-Produkt-IDs.

Exit Intent #

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

Extension Setup #

Mit der Extension:

  1. Gehen Sie zu System > Configuration > Clerk Settings und wählen Sie die richtige Store View.
  2. Setzen Sie unter Exit-Intent Settings Enable auf Yes und stellen Sie sicher, dass das Feld Content/Templates Ihre Element-ID(s) enthält (z. B. exit-intent).
  3. Klicken Sie auf Save Config.

Manuelles Setup #

Manuelles Einfügen (ältere Extension-Versionen): Fügen Sie Folgendes zu app/design/frontend/base/default/template/clerk/tracking.phtml hinzu:

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

Startvorlagen #

Wenn Sie Code Designs verwenden möchten, können Sie mit diesen Vorlagen beginnen.

Slider Code #

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