Recommendations
Generelt #
Clerk.io’s anbefalinger kan installeres på enhver side af webshoppen for at hjælpe kunder med at finde de rigtige produkter.
Med denne guide vil du se, hvordan du installerer anbefalinger, og hvilke typer du skal bruge for at få vores Best Practice til at køre.
Fra hovedmenuen skal du starte med at klikke på Kom i gang:
1. Opret et standarddesign og indhold #
Det første, du skal gøre, er at oprette et Standard Design til dine sliders.
Du kan bruge Opsætningsguiden under Anbefalinger - Opret et design til dine anbefalingsslidere - for hurtigt at oprette et design, der har det samme farveskema og stil som din webshop.
Klik på Udgiv, når du er tilfreds med stilen.
Du kan nemt ændre dette senere under Anbefalinger - Designs i venstre menu. Du kan også henvise til denne guide Skabelon Design til brug i Clerk for designskabeloner, du kan bruge.
2. Tilføj shoppingkurvslideren #
Nye sliders kan oprettes og tilføjes via Clerk-backend.
Designet oprettes i Clerk.io backend under Anbefalinger → Designs.
Det grundlæggende design kan justeres her via HTML og CSS.
Vigtigt: Leveringsstatus understøttes i øjeblikket kun af EasyTemplate Slider.
Tilføj indhold
Indholdet til den nye shoppingkurvslider kan oprettes under Clerk.io → Anbefalinger → Indhold (Ny indholdsknap)
Den følgende side indeholder 4 vigtige sektioner:
Navngiv dit indhold → Navnet angives her
Vælg produktlogik → Produktlogikken kan vælges her, inklusive “Bedst sælgende” / “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 et “nummer” kan gemmes her)
Indsæt i hjemmeside → Navnet, som vi skal indtaste i vores JTL5 shop backend under Clerk TemplateName shoppingkurv, vises her
Når alt er blevet indstillet og udfyldt, skal du nu skifte til JTL5 shop backend, og navnet på komponenten (fra Indsæt i hjemmeside) gemmes der.
Pluginindstillinger i JTL backend
Tilføj produktside-slider #
At tilføje varenslideren er det samme som at tilføje shoppingkurvslideren.
I standardtilfældet bruges de samme designfiler (Slider NOVA / Slider ET), kun navnet/produktlogikken i Clerk.io backend ændres, og en anden vælger vælges i plugin-backend.
Tilføj til kurv trin #
Clerk.io’s anbefalinger kan installeres på enhver side af webshoppen for at hjælpe kunder med at finde de rigtige produkter.
Med denne guide vil du se, hvordan du installerer anbefalinger, og hvilke typer du skal bruge for at få vores Best Practice til at køre.
Fra hovedmenuen skal du starte med at klikke på Kom i gang:
1. Opret et standarddesign og indhold #
Det første, du skal gøre, er at oprette et Standard Design til dine sliders.
Du kan bruge Opsætningsguiden under Anbefalinger - Opret et design til dine anbefalingsslidere - for hurtigt at oprette et design, der har det samme farveskema og stil som din webshop.
Klik på Udgiv, når du er tilfreds med stilen.
Du kan nemt ændre dette senere under Anbefalinger - Designs i venstre menu. Du kan også henvise til denne guide Skabelon Design til brug i Clerk for designskabeloner, du kan bruge.
2. Tilføj Powerstep #
Gå til dine opsætningsguider under indstillinger → Klik på Vis Tilføj til kurv Anbefalinger, og klik på opret indhold. Dette trin vil automatisk oprette indholdet med al den nødvendige logik, men det laver et automatisk genereret design, som du muligvis 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 et “nummer” kan gemmes her)
Når alt er blevet indstillet og udfyldt, skal du nu skifte til JTL5 shop backend, og navnet på powerstep-indholdet, hvor du vil indsætte det i Clerk Plugin.
Pluginindstillinger 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, hvilket muligvis konverterer en forladende besøgende til en købende kunde.
1. Opret et standarddesign og indhold #
Det første, du skal gøre, er at oprette et Standard Design til dine sliders.
Du kan bruge Opsætningsguiden under Anbefalinger - Opret et design til dine anbefalingsslidere - for hurtigt at oprette et design, der har det samme farveskema og stil som din webshop.
Klik på Udgiv, når du er tilfreds med stilen.
Du kan nemt ændre dette senere under Anbefalinger - Designs i venstre menu. Du kan også henvise til denne guide Skabelon Design til brug i Clerk for designskabeloner, du kan bruge.
2. Tilføj Exit Intent Anbefalinger #
Gå til dine opsætningsguider under indstillinger → Klik på Vis Tilføj til kurv Anbefalinger, og klik på opret indhold. Dette trin vil automatisk oprette indholdet med al den nødvendige logik, men det laver et automatisk genereret design, som du muligvis skal ændre afhængigt af dine præferencer. For denne logik anbefaler vi normalt besøgsanbefaling.
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 “nummer” kan gemmes her).
Når alt er blevet indstillet og udfyldt, skal du nu skifte til JTL5 shop backend, og navnet på powerstep-indholdet, hvor du vil indsætte det i Clerk Plugin.
Pluginindstillinger i JTL backend
Manuel tilføjelse af sliders #
I øjeblikket er der to kendte metoder til at tilføje dine egne ekstra sliders i JTL gennem Clerk-pluginet:
- EasyTemplate
- OnPage Composer
EasyTemplate #
Du kan nemt integrere dine egne sliders i EasyTemplate ved hjælp af følgende trin:
- Oprettelse af designet i Clerk.io backend (eksisterende designs kan også bruges)
- Oprettelse af indholdet med det respektive fokus i Clerk.io, kopiering af det nødvendige span-element
- Tilføjelse af et HTML-widget i EasyTemplate
- Indsæt elementet i et 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 overføres korrekt til Clerk! Derudover skal afkrydsningsfeltet for “Evaluer Smarty” være markeret.
OnPage Composer #
Dine egne sliders kan integreres i OnPage Composer ved hjælp af følgende trin:
- Oprettelse af designet i Clerk.io backend (eksisterende designs kan også bruges)
- Oprettelse af indholdet med det respektive fokus i Clerk.io, kopiering af det nødvendige span-element
- Åbn OnPage Composer
- Ny udkast i OnPage Composer
- Træk og slip rich text-elementet i Onpage Composer til den ønskede → vælg kildekoden i menuen og tilføj de kopierede span-elementer her
- Gem → Udgiv med valgt periode
Bemærk: Afhængigt af positionen for “egen slider” skal der også tilføjes yderligere CSS-egenskaber/klasser, hvis standard skabelonen ikke bruges.
Standard designs #
Shoppingkurvslider (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 %}
Shoppingkurvslider (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>
{% 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.