Allgemein #
Clerk.io’s Recommendations können auf jeder Seite des Webshops installiert werden, um Kunden zu helfen, die richtigen Produkte zu finden.
In diesem Leitfaden erfahren Sie, wie Sie Empfehlungen installieren und welche Typen Sie verwenden können, um unsere Best Practice zum Laufen zu bringen.
Starten Sie im Hauptmenü mit einem Klick auf Einstieg:
1. Erstellen Sie ein Standarddesign und Inhalt #
Als erstes müssen Sie ein Standarddesign für Ihre Slider erstellen.
Sie können die Einrichtungsanleitung unter _Empfehlungen - Erstellen Sie ein Design für Ihre Empfehlungs-Slider - verwenden, um schnell ein Design zu erstellen, das das gleiche Farbschema und den gleichen Stil wie Ihr Webshop hat.
Klicken Sie auf Veröffentlichen, wenn Sie mit dem Styling zufrieden sind.
Sie können dies später leicht ändern, unter Empfehlungen - Designs im linken Menü. Sie können auch diesen Leitfaden [Designvorlagen für die Verwendung in Clerk] (https://help.clerk.io/platform-guides/jtl/design/design-template-easytemplate/) für Designvorlagen verwenden.
2. Hinzufügen des Einkaufswagen-Schiebers #
Neue Slider können über das Clerk-Backend erstellt und hinzugefügt werden.
Das Design wird im Clerk.io Backend unter Recommendations → Designs erstellt.
Das Grunddesign kann hier über HTML und CSS angepasst werden.
Wichtig! Der Lieferstatus wird derzeit nur vom EasyTemplate Slider unterstützt.
Inhalt hinzufügen
Der Inhalt für den neuen Warenkorb-Slider kann unter Clerk.io → Empfehlungen → Inhalt (Button Neuer Inhalt) erstellt werden.
Die folgende Seite enthält 4 wichtige Abschnitte:
Benennen Sie Ihren Inhalt → Der Name wird hier angegeben
Wählen Sie die Produktlogik → Die Produktlogik kann hier ausgewählt werden, einschließlich “Bestseller” / “Heiße Produkte” und vieles mehr.
Design auswählen → Welches Design soll verwendet werden / wie soll die Überschrift lauten und wie viele Produkte sollen angezeigt werden (Wichtig: wird vom Plugin bestimmt, auch wenn hier eine “Zahl” hinterlegt werden kann)
In die Website einfügen → Der Name, den wir in unserem JTL5-Shop-Backend unter Clerk TemplateName shopping cart eingeben müssen, wird hier ausgegeben.
Nachdem alles eingestellt und befüllt wurde, muss man nun in das JTL5-Shop-Backend wechseln und der Name der Komponente (von Insert into website ) wird dort gespeichert.
Plugin-Einstellungen im JTL-Backend
Hinzufügen eines Produktseiten-Sliders #
Das Hinzufügen des Artikelsliders ist dasselbe wie das Hinzufügen des Warenkorbsliders.
Im Standardfall werden die gleichen Designdateien verwendet (Slider NOVA / Slider ET), nur der Name/die Produktlogik im Clerk.io Backend wird geändert und ein anderer Selektor im Plugin Backend ausgewählt.
Schritt Add-to-basket #
Clerk.io’s Recommendations können auf jeder Seite des Webshops installiert werden, um Kunden zu helfen, die richtigen Produkte zu finden.
In diesem Leitfaden erfahren Sie, wie Sie Empfehlungen installieren und welche Typen Sie verwenden sollten, um unsere Best Practice zum Laufen zu bringen.
Beginnen Sie im Hauptmenü mit einem Klick auf Einstieg:.
1. Erstellen Sie ein Standarddesign und Inhalt #
Als erstes müssen Sie ein Standarddesign für Ihre Slider erstellen.
Sie können die Einrichtungsanleitung unter _Empfehlungen - Erstellen Sie ein Design für Ihre Empfehlungs-Slider - verwenden, um schnell ein Design zu erstellen, das das gleiche Farbschema und den gleichen Stil wie Ihr Webshop hat.
Klicken Sie auf Veröffentlichen, wenn Sie mit dem Styling zufrieden sind.
Sie können dies später leicht ändern, unter Empfehlungen - Designs im linken Menü. Sie können auch diesen Leitfaden [Designvorlagen für den Sachbearbeiter] (https://help.clerk.io/platform-guides/jtl/design/design-template-easytemplate/) für zu verwendende Designvorlagen heranziehen.
2. Hinzufügen des Powerstep #
Gehen Sie zu Ihren Einrichtungsleitfäden unter Einstellungen → Klicken Sie auf Empfehlungen für das Hinzufügen zum Warenkorb anzeigen und klicken Sie auf Inhalt erstellen. In diesem Schritt wird der Inhalt automatisch mit allen erforderlichen Logiken erstellt, allerdings wird ein automatisch generiertes Design erstellt, das Sie möglicherweise je nach Ihren Wünschen ändern müssen.
Design auswählen → Welches Design soll verwendet werden / wie soll die Überschrift lauten und wie viele Produkte sollen angezeigt werden (Wichtig: wird durch das Plugin bestimmt, auch wenn hier eine “Zahl” hinterlegt werden kann)
Nachdem alles eingestellt und befüllt wurde, müssen Sie nun in das JTL5-Shop-Backend wechseln und den Namen des Powerstep-Inhalts dort im Clerk-Plugin einfügen.
Plugin-Einstellungen im JTL-Backend
Beendigungsabsicht #
Das Exit Intent Popup reagiert, wenn ein Besucher versucht, Ihren Webshop zu verlassen. Es öffnet sich und zeigt interessante Produkte an, die einen Besucher, der den Shop verlässt, möglicherweise in einen Kunden verwandeln können.
1. Erstellen Sie ein Standarddesign und -inhalt #
Als erstes müssen Sie ein Standarddesign für Ihre Slider erstellen.
Sie können die Einrichtungsanleitung unter _Empfehlungen - Erstellen Sie ein Design für Ihre Empfehlungs-Slider - verwenden, um schnell ein Design zu erstellen, das das gleiche Farbschema und den gleichen Stil wie Ihr Webshop hat.
Klicken Sie auf Veröffentlichen, wenn Sie mit dem Styling zufrieden sind.
Sie können dies später leicht ändern, unter Empfehlungen - Designs im linken Menü. Sie können auch diesen Leitfaden [Designvorlagen für den Sachbearbeiter] (https://help.clerk.io/platform-guides/jtl/design/design-template-easytemplate/) für zu verwendende Designvorlagen heranziehen.
2. Hinzufügen der Exit Intent-Empfehlungen #
Gehen Sie zu Ihren Einrichtungsleitfäden unter Einstellungen → Klicken Sie auf Korbempfehlungen anzeigen, und klicken Sie auf Inhalt erstellen. In diesem Schritt wird der Inhalt automatisch mit allen erforderlichen Logiken erstellt, allerdings wird ein automatisch generiertes Design erstellt, das Sie je nach Ihren Wünschen ändern müssen. Für diese Logik empfehlen wir in der Regel Besucherempfehlungen.
Design auswählen → Welches Design soll verwendet werden / wie soll die Überschrift lauten und wie viele Produkte sollen angezeigt werden (Wichtig: wird durch das Plugin bestimmt, auch wenn hier eine “Zahl” hinterlegt werden kann).
Nachdem alles eingestellt und befüllt wurde, müssen Sie nun in das JTL5-Shop-Backend wechseln und den Namen des Powerstep-Inhalts dort im Clerk-Plugin einfügen.
Plugin-Einstellungen im JTL-Backend
Manuelles Hinzufügen von Schiebereglern #
Derzeit gibt es zwei bekannte Methoden, um eigene zusätzliche Schieberegler in JTL über das Clerk-Plugin hinzuzufügen:
- EasyTemplate
- OnPage Composer
EasyTemplate #
Sie können Ihre eigenen Schieberegler ganz einfach in das EasyTemplate integrieren, indem Sie die folgenden Schritte ausführen:
- Erstellung des Designs im Clerk.io Backend (bestehende Designs können auch verwendet werden)
- Erstellung des Inhalts mit dem jeweiligen Fokus in Clerk.io , Kopieren des notwendigen Span-Elements
- Hinzufügen eines HTML-Widgets im EasyTemplate
- Fügen Sie das Element in ein HTML-Widget im EasyTemplate ein.
Es ist wichtig, die Zeile data-snippets=’{json_encode($s360_clerk_snippets->get())}‘in das Clerk HTML-Snippet aus Schritt 2 einzufügen, damit die Sprachvariablen korrekt an Clerk übergeben werden! Außerdem muss das Häkchen bei “Smarty auswerten” gesetzt werden
OnPage Composer #
Eigene Slider können mit den folgenden Schritten in den OnPage Composer integriert werden:
- Erstellung des Designs im Clerk.io Backend (es können auch bestehende Designs verwendet werden)
- Erstellung des Inhalts mit dem jeweiligen Fokus in Clerk.io, Kopieren des notwendigen Span-Elements
- Öffnen des OnPage Composers
- Neuer Entwurf im OnPage Composer
- Ziehen Sie das Rich-Text-Element im Onpage Composer an die gewünschte Stelle → wählen Sie den Quellcode im Menü und fügen Sie die kopierten Span-Elemente hier ein
- Speichern → Veröffentlichen mit ausgewähltem Zeitraum
Hinweis: Je nach Position des “eigenen Sliders” müssen auch zusätzliche CSS-Eigenschaften/Klassen hinzugefügt werden, wenn nicht die Standardvorlage verwendet wird.
Standard-Designs #
Warenkorb-Slider (easyTempate) #
{% 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"> </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 %}
Warenkorb-Schieberegler (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"> </div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script>
$(function() {
$.evo.generateSlickSlider();
$.evo.popover();
});
</script>
{% endif %}