Jtl

Recommendations

Backend in the Clerk.io backend

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, wodurch es möglich ist, komplett automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit einem Clerk.js Setup in JTL starten können.

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

Slider Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Nachfolgend ein grundlegender Leitfaden zur Erstellung eines Elements.

Wenn Sie die Schritte in my.clerk.io > Settings > Setup Guides befolgen, werden die Elemente 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 es visuell zu konfigurieren, oder Code Designs nutzen.

Ein Design kann für beliebig viele Recommendations-Elemente wiederverwendet werden.

Mit dem Setup Guide unter Recommendations - Create a design for your recommendations elements können Sie schnell ein Design erstellen, das das Farbschema und den Stil Ihres Webshops übernimmt.

Klicken Sie auf Veröffentlichen, wenn Sie mit dem Styling zufrieden sind.

Sie können dies später einfach unter Recommendations – Designs im linken Menü ändern. Sie können auch diesen Leitfaden Template Design to use in Clerk für Designvorlagen verwenden.

Das Basisdesign kann hier über HTML und CSS angepasst werden.

Wichtig: Der Lieferstatus wird derzeit nur vom EasyTemplate Slider unterstützt.

Element erstellen #

Dies enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet werden, und macht es einbettbar in Ihre Website. Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

Das Element kann unter Clerk.io → Recommendations → Elements (Button Neues Element) erstellt werden.

Die folgende Seite enthält 4 wichtige Abschnitte:

  1. Inhalt benennen → Hier wird der Name festgelegt
  2. Produktlogik wählen → Hier kann die Produktlogik gewählt werden, inklusive “Bestseller” / “Hot Products” und vielem mehr
  3. Design auswählen → Welches Design verwendet werden soll / was die Überschrift ist und wie viele Produkte angezeigt werden sollen (Wichtig: wird vom Plugin bestimmt, auch wenn hier eine “Zahl” hinterlegt werden kann)
  4. In Webseite einfügen → Hier wird der Name ausgegeben, den wir im Backend unseres JTL5 Shops unter Clerk TemplateName hinterlegen müssen

Nachdem alles eingestellt und ausgefüllt wurde, müssen Sie nun ins JTL5 Shop Backend wechseln und den Namen der Komponente (aus In Webseite einfügen) dort hinterlegen.

Zur Webseite hinzufügen #

Um Clerk Recommendations auf Ihrer Website hinzuzufügen, konfigurieren Sie diese über die JTL Plugin Einstellungen.

Plugin-Einstellungen im JTL Backend

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 entsprechen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elemente mit folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Konfigurieren Sie diese im JTL Plugin Backend mit den entsprechenden Selektoren.

Kategorie-Seite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Konfigurieren Sie es im JTL Plugin Backend mit dem entsprechenden Selektor.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elemente mit den folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Konfigurieren Sie diese im JTL Plugin Backend.

Das Hinzufügen des Item Sliders ist identisch mit dem Hinzufügen des Warenkorb-Sliders.

Im Standardfall werden die gleichen Design-Dateien verwendet (Slider NOVA / Slider ET), nur der Name/Produktlogik im Clerk.io Backend wird geändert und ein anderer Selektor im Plugin Backend ausgewählt.

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 auf Save oben auf der Seite.
  4. Gehen Sie zu Settings > Setup Guides und klicken Sie auf Show Add to Basket Recommendations, dann klicken Sie auf Inhalt erstellen. Dieser Schritt erstellt die Elemente automatisch mit allen notwendigen Logiken, allerdings wird ein automatisch generiertes Design verwendet, das je nach Wunsch angepasst werden muss.
  5. Design auswählen → Welches Design verwendet werden soll / was die Überschrift ist und wie viele Produkte angezeigt werden (Wichtig: wird vom Plugin bestimmt, auch wenn hier eine “Zahl” hinterlegt werden kann)

Nachdem alles eingestellt und ausgefüllt wurde, müssen Sie nun ins JTL5 Shop Backend wechseln und den Namen des Powerstep-Elements, wo Sie es im Clerk Plugin einfügen.

Plugin-Einstellungen im JTL Backend

Warenkorb-Seite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Konfigurieren Sie es im JTL Plugin Backend mit dem entsprechenden Selektor für die Warenkorbseite.

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Gehen Sie zu Settings > Setup Guides und klicken Sie auf Show Add to Basket Recommendations, dann klicken Sie auf Inhalt erstellen. Dieser Schritt erstellt die Elemente automatisch mit allen notwendigen Logiken, allerdings wird ein automatisch generiertes Design verwendet, das je nach Wunsch angepasst werden muss. Für diese Logik empfehlen wir normalerweise Visitor Recommendation.
  3. Design auswählen → Welches Design verwendet werden soll / was die Überschrift ist und wie viele Produkte angezeigt werden (Wichtig: wird vom Plugin bestimmt, auch wenn hier eine “Zahl” hinterlegt werden kann).

Nachdem alles eingestellt und ausgefüllt wurde, müssen Sie nun ins JTL5 Shop Backend wechseln und den Namen des Exit-Intent-Elements, wo Sie es im Clerk Plugin einfügen.

Plugin-Einstellungen im JTL Backend

Manuelles Hinzufügen von Elementen #

Derzeit gibt es zwei bekannte Methoden, um eigene zusätzliche Elemente in JTL über das Clerk Plugin hinzuzufügen:

  • EasyTemplate
  • OnPage Composer

EasyTemplate #

Sie können eigene Elemente einfach über die folgenden Schritte ins EasyTemplate integrieren:

  1. Erstellung des Designs im Clerk.io Backend (bestehende Designs können ebenfalls verwendet werden)

  2. Erstellung des Inhalts mit entsprechendem Fokus in Clerk.io, Kopieren des benötigten span-Elements

  3. Hinzufügen eines HTML-Widgets im EasyTemplate

  4. Einfügen des Elements in ein HTML-Widget im EasyTemplate

Es ist wichtig, die Zeile data-snippets='{json_encode($s360_clerk_snippets->get())}' zum Clerk HTML-Snippet aus Schritt 2 hinzuzufügen, damit die Sprachvariablen korrekt an Clerk übergeben werden! Außerdem muss das Kontrollkästchen für “Smarty auswerten” aktiviert werden.

OnPage Composer #

Eigene Elemente können mit den folgenden Schritten in den OnPage Composer integriert werden:

  1. Erstellung des Designs im Clerk.io Backend (bestehende Designs können ebenfalls verwendet werden)

  2. Erstellung des Inhalts mit entsprechendem Fokus in Clerk.io, Kopieren des benötigten span-Elements

  3. Öffnen des OnPage Composer

  4. Neuer Entwurf im OnPage Composer

  5. Ziehen des Rich-Text-Elements im OnPage Composer an die gewünschte Stelle → Quellcode im Menü auswählen und hier die kopierten span-Elemente einfügen

  6. Speichern → Veröffentlichen mit gewähltem Zeitraum

Hinweis: Je nach Position des “eigenen Sliders” müssen evtl. zusätzliche CSS Eigenschaften/Klassen hinzugefügt werden, falls das Standard-Template nicht genutzt wird.

Start Templates #

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

Slider-Code #

Diese Vorlagen geben Standardslider mit verschiedenen Produktinformationen aus, die Sie nach Ihren Wünschen anpassen können.

Einkaufswagen-Slider (EasyTemplate) #

{% if products.length != 0 %}
    <div class="et-widget-clerkslider-headline">
        <div class="et-product-slider-headline">
            <div class="et-textfield text-align-default et-widget-headline h2">{{ headline }}</div>
        </div>
    </div>
    <div class="et-product-slider-wrapper row">
        <div class="col p-0">
            <div class="slick-slider-other is-not-opc">
                <div id="et-clerk-slider-{{ snippets.settings.slider.id }}" class="et-product-slider-slider et-slider carousel slick-smooth-loading slider-no-preview slick-type-product">
                    {% for product in products %}
                        <div class="product-wrapper col">
                            <div id="result-wrapper_buy_form_{{ product.id }}" data-wrapper="true" class="productbox productbox-show-variations et-item-box productbox-column">
                                <div class="productbox-inner">
                                    <div class="row">
                                        <div class="col col-12">
                                            <div class="productbox-image">
                                                {% if product.top_article and product.top_article != false %}
                                                    <div class="ribbon ribbon-4 productbox-ribbon">
                                                        {{ snippets.ribbons.4 }}
                                                    </div>
                                                {% endif %}
                                                
                                                {% if product.on_sale and product.on_sale != false %}
                                                    <div class="ribbon ribbon-2 productbox-ribbon">
                                                        {{ snippets.ribbons.2 }}
                                                    </div>
                                                {% endif %}
                                                
                                                {% if product.in_stock and product.in_stock != false %}
                                                    <div class="ribbon ribbon-8 productbox-ribbon">
                                                        {{ snippets.ribbons.8 }}
                                                    </div>
                                                {% endif %}
                                                
                                                {% if product.in_stock and product.in_stock <= 0 %}
                                                    <div class="ribbon ribbon-7 productbox-ribbon">
                                                        {{ snippets.ribbons.7 }}
                                                    </div>
                                                {% endif %}
                                                
                                                {% if product.age and product.age <= snippets.settings.newProductmaxDays %}
                                                    <div class="ribbon ribbon-3 productbox-ribbon">
                                                        {{ snippets.ribbons.3 }}
                                                    </div>
                                                {% endif %}
                                                
                                                {% if product.average_rating and product.average_rating <= snippets.settings.topProductMinStars %}
                                                    <div class="ribbon ribbon-6 productbox-ribbon">
                                                        {{ snippets.ribbons.6 }}
                                                    </div>
                                                {% endif %}
                                                
                                                {% if product.age and product.age < 0 %}
                                                    <div class="ribbon ribbon-5 productbox-ribbon">
                                                        {{ snippets.ribbons.5 }}
                                                    </div>
                                                {% endif %}
                                                
                                                {% if product.vorbestellbardate and product.vorbestellbardate > 0 %}
                                                    <div class="ribbon ribbon-9 productbox-ribbon">
                                                        {{ snippets.ribbons.9 }}
                                                    </div>
                                                {% endif %}
                                                
                                                {% if product.age and product.age > 0 and product.stock <= 0 %}
                                                    <div class="ribbon ribbon-5 productbox-ribbon">
                                                        {{ snippets.ribbons.5 }}
                                                    </div>
                                                {% endif %} 

                                                <div class="productbox-images list-gallery">
                                                    <a href="{{ product.url }}" title="{{ product.name }}">
                                                        <div class="productbox-image square square-image">
                                                            <div class="inner">
                                                                <picture>
                                                                    <img src="{{ product.image }}" class="img-fluid" loading="lazy" alt="{{ product.name }}" />
                                                                </picture>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col col-12">
                                            <div class="productbox-caption">
                                                <div class="et-item-box-manufacturer productbox-manufacturer">
                                                    <span>{% if snippets.settings.showBrand %}{{ product.brand }}{% endif %}</span>
                                                </div>

                                                <div class="et-item-box-title productbox-title">
                                                    <a href="{{ product.url }}" class="text-clamp-2 link-discreet">
                                                        {{ product.name }}
                                                    </a>
                                                </div>

                                                <div class="et-item-box-rating productbox-rating">
                                                {% if product.average_rating > 0 %}
                                                    <a class="rating" href="{{ product.url }}#tab-votes" title="{{ snippets.productRating }}: {{ product.average_rating }}/5">
                                                    {% if product.average_rating >= 5 %}
                                                        <i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>
                                                    {% else %}
                                                        {% if product.average_rating >= 4 %}
                                                            <i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.average_rating > 4 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}
                                                        {% else %}
                                                            {% if product.average_rating >= 3 %}
                                                                <i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.average_rating > 3 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i>
                                                            {% else %}
                                                                {% if product.average_rating >= 2 %}
                                                                    <i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.average_rating > 2 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
                                                                {% else %}
                                                                    {% if product.average_rating >= 1 %}
                                                                        <i class="{{ snippets.icons.rating }}"></i>{% if product.average_rating > 1 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
                                                                    {% else %}
                                                                        {% if product.average_rating > 0 %}
                                                                            <i class="{{ snippets.icons.ratingHalf }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
                                                                        {% endif %}
                                                                    {% endif %}
                                                                {% endif %}
                                                            {% endif %}
                                                        {% endif %}
                                                    {% endif %}
                                                    </a>
                                                {% endif %}
                                                </div>
                                                
                                                {% if product.in_stock %}
                                        
                                                    {% if product.stock >= snippets.settings.storageLightsGreen%}
                                                    
                                                    <div class="delivery-status">
                                                        <ul class="list-unstyled">
                                                            <li>
                                                                <span class="status status-2"> 
                                                                    <span class="{{snippets.settings.storageLightIcon}} status-icon"> </span>
                                                                    <span class="status-text">{{snippets.settings.storageLightTextGreen}}</span>
                                                                </span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    
                                                    {% endif %}
                                                    
                                                    {% if product.stock > snippets.settings.storageLightsRed and product.stock < snippets.settings.storageLightsGreen %}
                                                    
                                                    
                                                    <div class="delivery-status">
                                                        <ul class="list-unstyled">
                                                            <li>
                                                                <span class="status status-1"> 
                                                                    <span class="{{snippets.settings.storageLightIcon}} status-icon"> </span>
                                                                    <span class="status-text">{{snippets.settings.storageLightTextYellow}}</span>
                                                                </span> 
                                                            </li>
                                                        </ul>
                                                    </div>
                                                       
                                                    {% endif %}
                                                    
                                                    {% if product.stock == snippets.settings.storageLightsRed%}
                                                    
                                                        <div class="delivery-status">
                                                            <ul class="list-unstyled">
                                                                <li>
                                                                   <span class="status status-0"> 
                                                                        <span class="{{snippets.settings.storageLightIcon}} status-icon"> </span>
                                                                        <span class="status-text">{{snippets.settings.storageLightTextRed}}</span>
                                                                    </span>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    
                                                    {% endif %}
                                                    
                                                {% endif %}
                                                
                                                <div class="et-item-box-price">
                                                    <div class="price_wrapper">
                                                        {% if product.has_variations or product.bulk_prices != 0 %}
                                                            <span class="price_label pricestarting">
                                                                {{ snippets.priceStarting }}
                                                            </span>
                                                        {% endif %}

                                                        <div class="price productbox-price {% if product.on_sale %} special-price{% endif %}">
                                                            <span>{{ product.price | money }} {{ globals.currency_symbol }} <span class="footnote-reference">*</span></span>
                                                        </div>

                                                        {% if product.on_sale %}
                                                            <div class="price-note et-old-price">
                                                                <div class="instead-of old-price">
                                                                    <small class="text-muted-util">
                                                                        <del class="value">{{ product.original_price | money }} {{ globals.currency_symbol }}</del>
                                                                    </small>
                                                                </div>
                                                            </div>
                                                        {% endif %}

                                                        {% if product.base_price > 0 %}
                                                            <div class="price-note">
                                                                <span class="value">{{ product.base_price | money }} {{ globals.currency_symbol }} {{ snippets.vpePer }} {{ product.base_price_unit }}</span>
                                                            </div>
                                                        {% else %}
                                                            <div class="price-note">&nbsp;</div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div class="et-slider-nav" id="clerk-slider-nav-{{ snippets.settings.slider.id }}">
                    <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="clerk-slider-prev-{{ snippets.settings.slider.id }}">
                        <i class="{{ snippets.icons.sliderPrevious }}"></i>
                    </div>
                    <div class="et-slider-nav-next enabled slick-arrow slick-hidden" id="clerk-slider-next-{{ snippets.settings.slider.id }}">
                        <i class="{{ snippets.icons.sliderNext }}"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            $("#et-clerk-slider-{{ snippets.settings.slider.id }}").slick({{ snippets.settings.slider.settings }});
            $.evo.popover();
        });
    </script>
{% endif %}

Einkaufswagen-Slider (Nova) #

{% if products.length != 0 %}
<div class="slick-slider-other is-not-opc">
    <div class="hr-sect h2">
        {{ headline }}
    </div>
    <div id="slick-slider-{{ snippets.settings.slider.id }}" class="carousel-arrows-inside carousel slick-smooth-loading slider-no-preview slick-type-product slick-lazy" data-slick-type="product-slider">
        {% for product in products %}
        <div class="product-wrapper col">
            <div id="result-wrapper_buy_form_{{ product.id }}" data-wrapper="true" class="productbox productbox-column">
                <div class="productbox-inner">
                    <div class="row">
                        <div class="col  col-12">
                            <div class="productbox-image">
                                <div class="productbox-images">
                                    <a href="{{ product.url }}" title="{{ product.name }}">
                                        <div class="productbox-image square square-image">
                                            <div class="inner">
                                                <picture>
                                                    <img src="{{ product.image }}" class="img-fluid" loading="lazy" alt="{{ product.name }}" />
                                                </picture>
                                            </div>
                                        </div>

                                        {% if product.top_article and product.top_article != false %}
                                            <div class="ribbon ribbon-4 productbox-ribbon">
                                                {{ snippets.ribbons.4 }}
                                            </div>
                                        {% endif %}

                                        {% if product.on_sale and product.on_sale != false %}
                                            <div class="ribbon ribbon-2 productbox-ribbon">
                                                {{ snippets.ribbons.2 }}
                                            </div>
                                        {% endif %}

                                        {% if product.in_stock and product.in_stock != false %}
                                            <div class="ribbon ribbon-8 productbox-ribbon">
                                                {{ snippets.ribbons.8 }}
                                            </div>
                                        {% endif %}

                                        {% if product.in_stock and product.in_stock <= 0 %}
                                            <div class="ribbon ribbon-7 productbox-ribbon">
                                                {{ snippets.ribbons.7 }}
                                            </div>
                                        {% endif %}

                                        {% if product.age and product.age <= snippets.settings.newProductmaxDays %}
                                            <div class="ribbon ribbon-3 productbox-ribbon">

{{ snippets.ribbons.3 }}
                                            </div>
                                        {% endif %}

                                        {% if product.average_rating and product.average_rating <= snippets.settings.topProductMinStars %}
                                            <div class="ribbon ribbon-6 productbox-ribbon">
                                                {{ snippets.ribbons.6 }}
                                            </div>
                                        {% endif %}

                                        {% if product.age and product.age < 0 %}
                                            <div class="ribbon ribbon-5 productbox-ribbon">
                                                {{ snippets.ribbons.5 }}
                                            </div>
                                        {% endif %}

                                        {% if product.vorbestellbardate and product.vorbestellbardate > 0 %}
                                            <div class="ribbon ribbon-9 productbox-ribbon">
                                                {{ snippets.ribbons.9 }}
                                            </div>
                                        {% endif %}

                                        {% if product.age and product.age > 0 and product.stock <= 0 %}
                                            <div class="ribbon ribbon-5 productbox-ribbon">
                                                {{ snippets.ribbons.5 }}
                                            </div>
                                        {% endif %}
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col col-12">
                            <div class="productbox-title">
                                <a href="{{ product.url }}" title="{{ product.name }}" class="text-clamp-2">
                                    {{ product.name }}
                                </a>
                            </div>

                            {% if product.reviews_avg > 0 %}
                            <a class="rating" href="{{ product.url }}#tab-votes" title="{{ snippets.productRating }}: {{ product.reviews_avg }}/5">
                                {% if product.reviews_avg >= 5 %}
                                <i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>
                                {% else %}
                                {% if product.reviews_avg >= 4 %}
                                <i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.reviews_avg > 4 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}
                                {% else %}
                                {% if product.reviews_avg >= 3 %}
                                <i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.reviews_avg > 3 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i>
                                {% else %}
                                {% if product.reviews_avg >= 2 %}
                                <i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.reviews_avg > 2 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
                                {% else %}
                                {% if product.reviews_avg >= 1 %}
                                <i class="{{ snippets.icons.rating }}"></i>{% if product.reviews_avg > 1 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
                                {% else %}
                                {% if product.reviews_avg > 0 %}
                                <i class="{{ snippets.icons.ratingHalf }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
                                {% endif %}
                                {% endif %}
                                {% endif %}
                                {% endif %}
                                {% endif %}
                                {% endif %}
                            </a>
                            {% else %}
                            <div class="rating productbox-rating-empty"></div>
                            {% endif %}

                            <div>
                                <div class="price_wrapper">
                                    {% if product.has_variations or product.bulk_prices != 0 %}
                                    <span class="price_label pricestarting">
                                            {{ snippets.priceStarting }}
                                        </span>
                                    {% endif %}

                                    <div class="price productbox-price {% if product.on_sale %} special-price{% endif %}">
                                        <span>{{ product.price | money_eu }} {{ globals.currency_symbol }} <span class="footnote-reference">*</span></span>
                                    </div>

                                    {% if product.on_sale %}
                                    <div class="price-note">
                                        <div class="instead-of old-price">
                                            <small class="text-muted-util">
                                                <del class="value">{{ product.original_price | money_eu }} {{ globals.currency_symbol }}</del>
                                            </small>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if product.base_price > 0 %}
                                    <div class="price-note">
                                        <span class="value">{{ product.base_price | money_eu }} {{ globals.currency_symbol }} {{ snippets.vpePer }} {{ product.base_price_unit }}</span>
                                    </div>
                                    {% else %}
                                    <div class="price-note">&nbsp;</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

</div>
<script>
    $(function() {
        $.evo.generateSlickSlider();
        $.evo.popover();
    });
</script>
{% endif %}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.