Recommendations
Generale #
Le Raccomandazioni di Clerk.io possono essere installate su qualsiasi pagina del webshop, per aiutare i clienti a trovare i prodotti giusti.
Con questa Guida, vedrai come installare le raccomandazioni e quali tipi utilizzare, per far funzionare le nostre Best Practice.
Dal menu principale inizia cliccando su Iniziare:
1. Crea un Design e Contenuto Standard #
La prima cosa che devi fare è creare un Design Standard per i tuoi slider.
Puoi utilizzare la Guida di Configurazione sotto Raccomandazioni - Crea un design per i tuoi slider di raccomandazione - per creare rapidamente un Design che abbia la stessa combinazione di colori e stile del tuo webshop.
Clicca su Pubblica quando sei soddisfatto dello stile.
Puoi facilmente cambiare questo in seguito, sotto Raccomandazioni - Design nel menu a sinistra. Puoi anche fare riferimento a questa guida Template Design da utilizzare in Clerk per i modelli di design da utilizzare.
2. Aggiungere lo Slider del Carrello #
Nuovi slider possono essere creati e aggiunti tramite il backend di Clerk.
Il design è creato nel backend di Clerk.io sotto Raccomandazioni → Design.
Il design di base può essere regolato qui tramite HTML e CSS.
Importante: Lo stato di consegna è attualmente supportato solo dallo Slider EasyTemplate.
Aggiungi contenuto
Il contenuto per il nuovo slider del carrello può essere creato sotto Clerk.io → Raccomandazioni → Contenuto (pulsante Nuovo Contenuto)
La seguente pagina contiene 4 sezioni importanti:
Dai un nome al tuo contenuto → Il nome è specificato qui
Scegli la logica del prodotto → La logica del prodotto può essere selezionata qui, inclusi “Best Sellers” / “Prodotti Caldi” e molto altro
Seleziona il design → Quale design dovrebbe essere utilizzato / quale dovrebbe essere il titolo e quanti prodotti dovrebbero essere visualizzati (Importante: è determinato dal plugin, anche se un “numero” può essere memorizzato qui)
Inserisci nel sito web → Il nome che dobbiamo inserire nel nostro backend del negozio JTL5 sotto Clerk TemplateName carrello è visualizzato qui
Dopo che tutto è stato impostato e compilato, ora devi passare al backend del negozio JTL5 e il nome del componente (da Inserisci nel sito web) è memorizzato lì.
Impostazioni del plugin nel backend JTL
Aggiungere lo Slider della Pagina Prodotto #
Aggiungere lo slider degli articoli è lo stesso che aggiungere lo slider del carrello.
Nel caso standard, vengono utilizzati gli stessi file di design (Slider NOVA / Slider ET), solo il nome/logica del prodotto nel backend di Clerk.io viene cambiato e viene selezionato un diverso selettore nel backend del plugin.
Passo Aggiungi al Carrello #
Le Raccomandazioni di Clerk.io possono essere installate su qualsiasi pagina del webshop, per aiutare i clienti a trovare i prodotti giusti.
Con questa Guida, vedrai come installare le raccomandazioni e quali tipi utilizzare, per far funzionare le nostre Best Practice.
Dal menu principale inizia cliccando su Iniziare:
1. Crea un Design e Contenuto Standard #
La prima cosa che devi fare è creare un Design Standard per i tuoi slider.
Puoi utilizzare la Guida di Configurazione sotto Raccomandazioni - Crea un design per i tuoi slider di raccomandazione - per creare rapidamente un Design che abbia la stessa combinazione di colori e stile del tuo webshop.
Clicca su Pubblica quando sei soddisfatto dello stile.
Puoi facilmente cambiare questo in seguito, sotto Raccomandazioni - Design nel menu a sinistra. Puoi anche fare riferimento a questa guida Template Design da utilizzare in Clerk per i modelli di design da utilizzare.
2. Aggiungere il Powerstep #
Vai alle tue guide di configurazione sotto impostazioni → Clicca su Mostra Raccomandazioni Aggiungi al Carrello, e clicca su crea contenuto. Questo passaggio creerà automaticamente i contenuti con tutte le logiche necessarie, tuttavia crea un design auto-generato che potresti dover cambiare a seconda delle tue preferenze.
Seleziona design → Quale design dovrebbe essere utilizzato / quale dovrebbe essere il titolo e quanti prodotti dovrebbero essere visualizzati (Importante: è determinato dal plugin, anche se un “numero” può essere memorizzato qui)
Dopo che tutto è stato impostato e compilato, ora devi passare al backend del negozio JTL5 e il nome del contenuto del powerstep dove lo inserirai nel Plugin Clerk.
Impostazioni del plugin nel backend JTL
Intento di Uscita #
Il popup di Intento di Uscita reagisce quando un visitatore cerca di lasciare il tuo webshop. Si apre e visualizza prodotti interessanti, convertendo possibilmente un visitatore in uscita in un cliente acquirente.
1. Crea un Design e Contenuto Standard #
La prima cosa che devi fare è creare un Design Standard per i tuoi slider.
Puoi utilizzare la Guida di Configurazione sotto Raccomandazioni - Crea un design per i tuoi slider di raccomandazione - per creare rapidamente un Design che abbia la stessa combinazione di colori e stile del tuo webshop.
Clicca su Pubblica quando sei soddisfatto dello stile.
Puoi facilmente cambiare questo in seguito, sotto Raccomandazioni - Design nel menu a sinistra. Puoi anche fare riferimento a questa guida Template Design da utilizzare in Clerk per i modelli di design da utilizzare.
2. Aggiungere le Raccomandazioni di Intento di Uscita #
Vai alle tue guide di configurazione sotto impostazioni → Clicca su Mostra Raccomandazioni Aggiungi al Carrello, e clicca su crea contenuto. Questo passaggio creerà automaticamente i contenuti con tutte le logiche necessarie, tuttavia crea un design auto-generato che potresti dover cambiare a seconda delle tue preferenze. Per questa logica, di solito raccomandiamo la raccomandazione per visitatori.
Seleziona design → Quale design dovrebbe essere utilizzato / quale dovrebbe essere il titolo e quanti prodotti dovrebbero essere visualizzati (Importante: è determinato dal plugin, anche se un “numero” può essere memorizzato qui).
Dopo che tutto è stato impostato e compilato, ora devi passare al backend del negozio JTL5 e il nome del contenuto del powerstep dove lo inserirai nel Plugin Clerk.
Impostazioni del plugin nel backend JTL
Aggiunta Manuale di Slider #
Attualmente ci sono due metodi noti per aggiungere i tuoi slider aggiuntivi in JTL tramite il plugin Clerk:
- EasyTemplate
- OnPage Composer
EasyTemplate #
Puoi facilmente integrare i tuoi slider nel EasyTemplate utilizzando i seguenti passaggi:
- Creazione del design nel backend di Clerk.io (i design esistenti possono essere utilizzati)
- Creazione del contenuto con il rispettivo focus in Clerk.io, copiando l’elemento span necessario
- Aggiunta di un widget HTML nel EasyTemplate
- Inserisci l’elemento in un widget HTML nel 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 di lingua vengano passate correttamente a Clerk! Inoltre, deve essere selezionata la casella per “Valuta Smarty”
OnPage Composer #
I tuoi slider possono essere integrati nel OnPage Composer utilizzando i seguenti passaggi:
- Creazione del design nel backend di Clerk.io (i design esistenti possono essere utilizzati)
- Creazione del contenuto con il rispettivo focus in Clerk.io, copiando l’elemento span necessario
- Apri il OnPage Composer
- Nuovo draft nel OnPage Composer
- Trascina e rilascia l’elemento di testo arricchito nel Onpage Composer nel punto desiderato → seleziona il codice sorgente nel menu e aggiungi qui gli elementi span copiati
- Salva → Pubblica con periodo selezionato
Nota: A seconda della posizione del “proprio slider”, devono essere aggiunte anche ulteriori proprietà/classi CSS se non viene utilizzato il template standard.
Design Standard #
Slider del Carrello (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 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>
{% endfor %}
</div>
</div>
<script>
$(function() {
$.evo.generateSlickSlider();
$.evo.popover();
});
</script>
{% endif %}
Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.