Generale #
Le Raccomandazioni di Clerk.io possono essere installate su qualsiasi pagina del negozio web, per aiutare i clienti a trovare i prodotti giusti.
Con questa guida, vedrete come installare le raccomandazioni e quali tipi di raccomandazioni utilizzare, per far funzionare la nostra Best Practice.
Dal menu principale, iniziate facendo clic su Iniziare a lavorare.
1. Creare un design e un contenuto standard #
La prima cosa da fare è creare un Design standard per i vostri cursori.
È possibile utilizzare la Guida all’installazione alla voce Raccomandazioni - Creare un design per i cursori delle raccomandazioni_ #- per creare rapidamente un design che abbia la stessa combinazione di colori e lo stesso stile del vostro negozio web.
Fare clic su Publish quando si è soddisfatti dello stile.
È possibile modificarlo facilmente in seguito, sotto Raccomandazioni - Disegni nel menu di sinistra. Si può anche fare riferimento a questa guida Template Design to use in Clerk per i modelli di design da utilizzare.
2. Aggiunta del cursore del carrello #
È possibile creare e aggiungere nuovi cursori tramite il backend di Clerk.
Il design viene creato nel backend di Clerk.io alla voce Raccomandazioni → Design.
Il design di base può essere modificato qui tramite HTML e CSS.
Importante: Lo stato di consegna è attualmente supportato solo da EasyTemplate Slider.
Aggiungi contenuto
Il contenuto per il nuovo carrello può essere creato in Clerk.io → Raccomandazioni → Contenuto (pulsante Nuovo contenuto).
La pagina seguente contiene 4 sezioni importanti:
Nome del contenuto → Il nome viene specificato qui
Scegliere la logica di prodotto → La logica di prodotto può essere selezionata qui, tra cui “Best Sellers” / “Hot Products” e molto altro.
Selezionare il design → Quale design deve essere utilizzato / quale deve essere l’intestazione e quanti prodotti devono essere visualizzati (Importante: è determinato dal plugin, anche se un “numero” può essere memorizzato qui)
Inserire nel sito web → Il nome che dobbiamo inserire nel backend del nostro negozio JTL5 sotto il carrello Clerk TemplateName viene visualizzato qui
Dopo che tutto è stato impostato e compilato, si deve passare al backend del negozio JTL5 e il nome del componente (da Insert into website ) viene memorizzato lì.
Impostazioni del plugin nel backend JTL
Aggiunta del cursore della pagina prodotto #
L’aggiunta del cursore dell’articolo è identica a quella del cursore del carrello.
Nel caso standard, si utilizzano gli stessi file di progettazione (Slider NOVA / Slider ET), si cambia solo il nome/la logica del prodotto nel backend di Clerk.io e si seleziona un selettore diverso nel backend del plugin.
Fase di aggiunta al carrello #
Le Raccomandazioni di Clerk.io possono essere installate su qualsiasi pagina del negozio web, per aiutare i clienti a trovare i prodotti giusti.
Questa guida spiega come installare le raccomandazioni e quali tipi di raccomandazione utilizzare per far funzionare la nostra Best Practice.
Dal menu principale, iniziare facendo clic su Iniziare a lavorare.
1. Creare un design e un contenuto standard #
La prima cosa da fare è creare un Design standard per i vostri cursori.
È possibile utilizzare la Guida all’installazione alla voce Raccomandazioni - Creare un design per i cursori delle raccomandazioni_ #- per creare rapidamente un design che abbia la stessa combinazione di colori e lo stesso stile del vostro negozio web.
Fare clic su Publish quando si è soddisfatti dello stile.
È possibile modificarlo facilmente in seguito, sotto Raccomandazioni - Disegni nel menu di sinistra. Si può anche fare riferimento a questa guida Template Design to use in Clerk per i modelli di design da utilizzare.
2. Aggiunta del Powerstep #
Andate nelle guide di configurazione, alla voce Impostazioni → Cliccate su Mostra raccomandazioni per l’aggiunta al carrello e cliccate su Crea contenuto. Questo passaggio creerà automaticamente il contenuto con tutte le logiche necessarie, ma crea un design autogenerato che potrebbe essere necessario modificare a seconda delle preferenze.
Selezionare il design → Quale design deve essere utilizzato / quale deve essere l’intestazione e quanti prodotti devono essere visualizzati (Importante: è determinato dal plugin, anche se un “numero” può essere memorizzato qui)
Dopo che tutto è stato impostato e compilato, è ora necessario passare al backend del negozio JTL5 e al nome del contenuto powerstep in cui verrà inserito il plugin Clerk.
Impostazioni del plugin nel backend JTL
Intento di uscita #
Il popup Exit Intent reagisce quando un visitatore cerca di lasciare il vostro negozio web. Si apre e mostra prodotti interessanti, convertendo eventualmente il visitatore uscente in un cliente acquirente.
1. Creare un design e un contenuto standard #
La prima cosa da fare è creare un Design standard per i vostri cursori.
È possibile utilizzare la Guida all’installazione alla voce Raccomandazioni - Creare un design per i cursori delle raccomandazioni_ #- per creare rapidamente un design che abbia la stessa combinazione di colori e lo stesso stile del vostro negozio web.
Fare clic su Publish quando si è soddisfatti dello stile.
È possibile modificarlo facilmente in seguito, sotto Raccomandazioni - Disegni nel menu di sinistra. Si può anche fare riferimento a questa guida Modelli di design da utilizzare in Clerk per i modelli di design da utilizzare.
2. Aggiunta delle Raccomandazioni di uscita #
Andate nelle guide di configurazione, alla voce Impostazioni → Cliccate su Mostra raccomandazioni per l’aggiunta al carrello e cliccate su Crea contenuto. Questo passaggio creerà automaticamente il contenuto con tutte le logiche necessarie, ma crea un design autogenerato che potrebbe essere necessario modificare a seconda delle preferenze. Per questa logica, di solito raccomandiamo le raccomandazioni dei visitatori.
Selezionare il design → Quale design deve essere utilizzato / quale deve essere l’intestazione e quanti prodotti devono essere visualizzati (Importante: è determinato dal plugin, anche se un “numero” può essere memorizzato qui).
Dopo che tutto è stato impostato e compilato, è ora necessario passare al backend del negozio JTL5 e al nome del contenuto powerstep in cui verrà inserito il plugin Clerk.
Impostazioni del plugin nel backend JTL
Aggiunta manuale di cursori #
Attualmente esistono due metodi noti per aggiungere i propri cursori aggiuntivi in JTL attraverso il plugin Clerk:
- EasyTemplate
- Compositore di pagine
EasyTemplate #
È possibile integrare facilmente i propri cursori in EasyTemplate utilizzando i seguenti passaggi:
- Creazione del design nel backend di Clerk.io (è possibile utilizzare anche design esistenti)
- Creazione del contenuto con il rispettivo focus in Clerk.io, copiando l’elemento span necessario
- Aggiunta di un widget HTML in EasyTemplate
- Inserire l’elemento in un widget HTML di EasyTemplate.
È importante aggiungere la riga data-snippets=’{json_encode($s360_clerk_snippets->get())}‘allo snippet HTML di Clerk del passo 2, in modo che le variabili della lingua siano passate correttamente a Clerk! Inoltre, è necessario selezionare la casella di controllo “Evaluate Smarty”.
Compositore di pagine #
È possibile integrare i propri cursori in OnPage Composer utilizzando i seguenti passaggi:
- Creazione del design nel backend di Clerk.io (è possibile utilizzare anche design esistenti).
- Creazione del contenuto con il rispettivo focus in Clerk.io, copiando l’elemento span necessario
- Aprire il Compositore OnPage
- Nuova bozza in OnPage Composer
- Trascinare e rilasciare l’elemento rich text in Onpage Composer su quello desiderato → selezionare il codice sorgente nel menu e aggiungere gli elementi span copiati qui
- Salva → Pubblica con periodo selezionato
Nota: a seconda della posizione del “proprio cursore”, è necessario aggiungere ulteriori proprietà/classi CSS se non si utilizza il modello standard.
Modelli standard #
Cursore carrello acquisti (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 %}
Cursore del carrello (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 %}