Recommendations
Generelt #
Clerk.io’s anbefalinger kan installeres på enhver side i webshoppen for at hjælpe kunderne med at finde de rigtige produkter.
I denne vejledning kan du se, hvordan du installerer anbefalinger, og hvilke typer du skal bruge for at få vores Bedste praksis til at køre.
Fra hovedmenuen skal du starte med at klikke på Kom godt i gang:
1. Opret et standarddesign og -indhold #
Det første, du skal gøre, er at oprette en Standard-design til dine sliders.
Du kan bruge Opsætningsvejledning under Anbefalinger - Opret et design til dine slidere med anbefalinger. - til hurtigt at skabe et design, der har samme farveskema og stil som din webshop.
Klik på Udgiv, når du er tilfreds med stylingen.
Du kan nemt ændre dette senere under Anbefalinger - Design i menuen til venstre. Du kan også se denne vejledning Skabelondesign til brug i Clerk for designskabeloner, du kan bruge.
2. Tilføjelse af indkøbskurvens slider #
Nye slidere kan oprettes og tilføjes via Clerk backend.
Designet oprettes i Clerk.io-backend under Anbefalinger → Design.
Det grundlæggende design kan justeres her via HTML og CSS.
Det er vigtigt at være opmærksom: Leveringsstatus understøttes i øjeblikket kun af EasyTemplate Slider.
Tilføj indhold
Indholdet til den nye indkøbskurvslider kan oprettes under Clerk.io → Anbefalinger → Indhold (knappen Nyt indhold)
Den følgende side indeholder 4 vigtige afsnit:
Navngiv dit indhold → Navnet angives her
Vælg produktlogik → Produktlogikken kan vælges her, herunder “Best Sellers” / “Hot Products” og meget mere
Vælg design → Hvilket design skal bruges / hvad skal overskriften være, og hvor mange produkter skal vises (Vigtigt: bestemmes af plugin’et, selvom der kan gemmes et “tal” her)
Indsæt på hjemmesiden → Det navn, som vi skal indtaste i vores JTL5-shop-backend under Clerk TemplateName indkøbskurv, vises her
Når alt er indstillet og udfyldt, skal du nu skifte til JTL5-shop-backend, og navnet på komponenten (fra Insert into website) gemmes der.
Plugin-indstillinger i JTL-backend
Tilføjelse af slider til produktside #
Tilføjelse af vareslideren er det samme som tilføjelse af indkøbskurvslideren.
I standardtilfældet bruges de samme designfiler (Slider NOVA / Slider ET), kun navnet/produktlogikken i Clerk.io-backend ændres, og der vælges en anden vælger i plugin-backend.
Tilføj-til-kurven-trin #
Clerk.io’s anbefalinger kan installeres på enhver side i webshoppen for at hjælpe kunderne med at finde de rigtige produkter.
I denne vejledning kan du se, hvordan du installerer anbefalinger, og hvilke typer du skal bruge for at få vores Bedste praksis til at køre.
Fra hovedmenuen skal du starte med at klikke på Kom godt i gang:
1. Opret et standarddesign og -indhold #
Det første, du skal gøre, er at oprette en Standard-design til dine sliders.
Du kan bruge Opsætningsvejledning under Anbefalinger - Opret et design til dine slidere med anbefalinger. - til hurtigt at skabe et design, der har samme farveskema og stil som din webshop.
Klik på Udgiv, når du er tilfreds med stylingen.
Du kan nemt ændre dette senere under Anbefalinger - Design i menuen til venstre. Du kan også se denne vejledning Skabelondesign til brug i Clerk for designskabeloner, du kan bruge.
2. Tilføjelse af Powerstep #
Gå til dine opsætningsguider under indstillinger → Klik på Vis Læg i kurv-anbefalinger, og klik på opret indhold. Dette trin opretter automatisk indholdet med alle de nødvendige logikker, men det laver et automatisk genereret design, som du måske skal ændre afhængigt af dine præferencer.
Vælg design → Hvilket design skal bruges / hvad skal overskriften være, og hvor mange produkter skal vises (Vigtigt: bestemmes af plugin’et, selvom der kan gemmes et “antal” her)
Når alt er indstillet og udfyldt, skal du nu skifte til JTL5-shoppens backend og navnet på powerstep-indholdet, hvor du vil indsætte det i Clerk -plugin’et.
Plugin-indstillinger i JTL-backend
Exit Intent #
Exit Intent-popup’en reagerer, når en besøgende forsøger at forlade din webshop. Den popper op og viser interessante produkter og kan muligvis konvertere en besøgende, der forlader webshoppen, til en købende kunde.
1. Skab et standarddesign og -indhold #
Det første, du skal gøre, er at oprette en Standard-design til dine sliders.
Du kan bruge Opsætningsvejledning under Anbefalinger - Opret et design til dine slidere med anbefalinger. - til hurtigt at skabe et design, der har samme farveskema og stil som din webshop.
Klik på Udgiv, når du er tilfreds med stylingen.
Du kan nemt ændre dette senere under Anbefalinger - Design i menuen til venstre. Du kan også se denne vejledning Skabelondesign til brug i Clerk for designskabeloner, du kan bruge.
2. Tilføjelse af Exit Intent-anbefalinger #
Gå til dine opsætningsguider under indstillinger → Klik på Vis Læg i kurv-anbefalinger, og klik på opret indhold. Dette trin opretter automatisk indholdet med alle de nødvendige logikker, men det skaber et automatisk genereret design, som du muligvis skal ændre afhængigt af dine præferencer. Til denne logik anbefaler vi normalt besøgendes anbefaling.
Vælg design → Hvilket design skal bruges / hvad skal overskriften være, og hvor mange produkter skal vises (Vigtigt: bestemmes af plugin’et, selvom et “antal” kan gemmes her).
Når alt er indstillet og udfyldt, skal du nu skifte til JTL5-shoppens backend og navnet på powerstep-indholdet, hvor du vil indsætte det i Clerk Plugin.
Plugin-indstillinger i JTL-backend
Tilføjelse af sliders manuelt #
I øjeblikket er der to kendte metoder til at tilføje dine egne ekstra sliders i JTL via Clerk plugin:
- EasyTemplate
- OnPage Komponist
EasyTemplate #
Du kan nemt integrere dine egne sliders i EasyTemplate ved hjælp af følgende trin:
- Oprettelse af design i Clerk.io-backend (eksisterende design kan også bruges)
- Oprettelse af indholdet med det respektive fokus i Clerk.io ved at kopiere det nødvendige span-element
- Tilføjelse af en HTML-widget i EasyTemplate
- Indsæt elementet i en HTML-widget i EasyTemplate.
Det er vigtigt at tilføje linjen data-snippets=’{json_encode($s360_clerk_snippets->get())}’til Clerk HTML-snippet fra trin 2, så sprogvariablerne sendes korrekt til Clerk! Derudover skal afkrydsningsfeltet være markeret for “Evaluate Smarty”
OnPage Composer #
Dine egne sliders kan integreres i OnPage Composer ved hjælp af følgende trin:
- Oprettelse af design i Clerk.io-backend (eksisterende design kan også bruges)
- Oprettelse af indholdet med det respektive fokus i Clerk.io ved at kopiere det nødvendige span-element
- Åbn OnPage Composer
- Nyt udkast i OnPage Composer
- Træk og slip rich text-elementet i Onpage Composer til det ønskede → vælg kildekoden i menuen, og tilføj de kopierede span-elementer her
- Gem → Udgiv med valgt periode
Bemærk: Afhængigt af placeringen af “egen slider” skal der også tilføjes yderligere CSS-egenskaber/klasser, hvis standardskabelonen ikke bruges.
Standarddesigns #
Slider til indkøbskurv (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 %}
Slider til indkøbskurv (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 %}
Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.