Utilizzo di Clerk.io per mostrare un'intera pagina di categoria
IMPORTANTE
**È fondamentale notare che la sostituzione dei prodotti della categoria sul vostro negozio web richiede competenze tecniche e vi suggeriamo di chiedere assistenza al vostro sviluppatore **.
Si prega di notare che i nostri sviluppatori interni di Clerk.io non sono in grado di eseguire questo compito per voi.
La logica Bestsellers in Categories di Clerk.io supporta la visualizzazione di Facets ( filtri ) e l’ordinamento** dei prodotti **.
Ciò significa che può essere utilizzata per rendere un’intera pagina di categoria.
Sostituzione dei prodotti della categoria con i risultati di Clerk:
Per fare ciò, è necessario procedere come segue:
Creare una griglia nel backend my.clerk.io per mostrare i prodotti.
Nascondere/disattivare i prodotti esistenti nelle categorie
Inserire un embedcode di Clerk.io per mostrare i prodotti nelle pagine delle categorie, inserendo dinamicamente l’ID della categoria, proprio come si farebbe con un banner di raccomandazioni.
Un semplice esempio di embedcode che genera una pagina di categoria con sfaccettature e ordinata prima per prezzo più basso può essere visto qui:
{% raw %}<div id="clerk-category-filters"></div>
<ul id="clerk-category-results"></ul>
<span
id="clerk-category"
class="clerk"
data-template="@category-page-results"
data-target="#clerk-category-results"
data-category="{{ collection.id }}"
data-facets-target="#clerk-category-filters"
data-facets-attributes='["price","brand"]'
data-facets-titles='{"price":"Price","brand":"Manufacturer"}'
data-orderby="price"
data-order="asc">
</span>
{% endraw %}
Se non si utilizza Shopify, assicurarsi di sostituire {{ collection.id }} con uno shortcode che inserisca l’ID della categoria.
Impostazione di un fallback
Poiché dopo questa operazione, Clerk.io mostrerà effettivamente la maggior parte dei prodotti sul webshop, è importante avere un’opzione Fallback nel caso in cui Clerk.io non risponda.
Anche se ciò accade molto raramente, come testimonia la nostra Status Page , non si può mai essere troppo sicuri.
Un modo semplice per farlo è nel frontend:
Usare display:none; sulle categorie-prodotti esistenti.
Utilizzando uno script che utilizza un Evento per confermare che Clerk ha restituito i prodotti.
Usare il metodo .show() di jQuery per mostrare i prodotti esistenti se Clerk non risponde.
Questo script controlla se il committente ha risposto entro 750ms e, in caso contrario, mostra i prodotti esistenti:
<script type="text/javascript">
var clerk_response = false;
var category_page_selector = ".category-container"
Clerk('on','response', function(data,content){
if (content.result.length > 0) {
clerk_response = true;
}
});
setTimeout(
function(){
if (clerk_response == false) {
document.querySelector(category_page_selector).style.display = '';
}
}
,750)
</script>
È sufficiente sostituire .category-container con la classe o l’ID del contenitore HTML del prodotto.
Esempio completo di Shopify
Ecco un esempio di come ottenere questo risultato in Shopify.
1. In [my.clerk.io] (http://my.clerk.io), andare a Ricerca -> Designs -> Nuovo Design (è necessario creare un design a griglia simile a una pagina di ricerca per le categorie).
2. Tra le opzioni, scegliere Pagina di ricerca, dare al design un nome appropriato, come “Risultati della pagina delle categorie” e fare clic su Crea design.
3. Nella schermata successiva è possibile personalizzare la pagina dei risultati a proprio piacimento utilizzando l’Editor di design. Al termine, fare clic su Salva progetto:
4. Andare a Raccomandazioni -> Contenuto -> Nuovo contenuto:
5. Assegnare un nome al contenuto “Risultati della pagina della categoria “ e fare clic su Crea contenuto:
6. Sotto Scegliere la logica del prodotto, selezionare I più venduti nella categoria:
7. In Seleziona design, scegliere un buon numero di prodotti da mostrare per pagina e selezionare il design creato.
8. Fare clic su Aggiornamento contenuto:
9. Ora andate nel backend del vostro negozio e individuate il file che genera le pagine delle categorie. In Shopify, spesso si tratta di:
Negozio online -> Temi -> Azioni -> Modifica codice -> Sezioni -> collection-template.liquid:
10. Individuare il codice che contiene tutti i prodotti della pagina della categoria. È possibile utilizzare lo strumento Inspect del browser per trovarlo facilmente in qualsiasi pagina di categoria:
11. Esistono diversi modi per nascondere i prodotti esistenti, ma un modo semplice è aggiungere semplicemente style=“display:none;” alla classe contenitore:
12. Ora è necessario incorporare i risultati di Clerk.io. Per semplificare le cose, abbiamo preparato il seguente codice embed che ha già delle sfaccettature preconfigurate. Mostrerà sfaccettature basate su prezzo e venditore, ma questo può essere esteso:
{% raw %}<div class="page-width" id="Collection">
<div id="clerk-show-facets">Show/Hide filters</div>
<div id="clerk-facets-container">
<div id="clerk-category-filters"></div>
</div>
<span
id="clerk-category"
class="clerk"
data-template="@category-page-results"
data-target="#clerk-category-results"
data-category="{{ collection.id }}"
data-facets-target="#clerk-category-filters"
data-facets-attributes='["price","vendor"]'
data-facets-titles='{"price":"Price","vendor":"Manufacturer"}'>
</span>
<ul id="clerk-category-results"></ul>
<script>
document.querySelector("#clerk-show-facets").addEventListener('click', function(event) {
el = document.querySelector("#clerk-facets-container");
if(el.style.display == '' || el.style.display == 'block'){
el.style.display = 'none';
} else {
el.style.display = '';
}
});
</script>
<style>
#clerk-show-facets {
width: 50%;
height: 40px;
margin: 0px auto 20px auto;
background-color: #2cae39;
color: white;
text-align: center;
border-radius: 3px;
line-height: 40px;
}
#clerk-category-results {
display: inline-block;
width: 100%;
}
#load-more-results {
margin: 10px 10px 5px 10px;
padding: 10px 20px;
border-radius: 3px;
background-color: #E8B22F !important;
color: white;
line-height: 1em;
cursor: pointer;
}
#clerk-category-load-more-button {
display: none;
}
.clerk-button-container {
text-align: center;
}
.clerk-product {
box-sizing: border-box;
float: left;
width: calc(25% - 10px);
margin: 5px;
padding: 5px;
text-align: center;
line-height: 1.2em;
border: 1px solid #eee;
border-radius: 3px;
}
.clerk-product img {
max-width: 100%;
max-height: 180px;
margin: 5px 10px;
}
.clerk-product-name {
overflow: hidden;
color: black;
height: 2.3em;
margin: 5px 10px;
}
.clerk-price-wrapper {
height: 20px !important;
margin-bottom: 10px;
}
.clerk-new-price{
color: black;
}
.clerk-product-price {
margin: 5px;
color: black;
font-weight: bold;
}
.clerk-old-price {
font-size: 0.8em;
color: black;
}
.clerk-cta-button, .button {
margin: 10px 10px 5px 10px;
padding: 10px 20px;
border-radius: 3px;
background-color: #E8B22F !important;
color: white !important;
line-height: 1em;
}
.clerk-slider {
list-style: none;
width: 100%;
margin: 10px 0;
padding: 0;
}
.clerk-product > a, .clerk-product > a:hover, .clerk-product > a:visited {
display: block;
color: inherit;
text-decoration: inherit;
}
@media only screen and (max-width : 800px) {
.clerk-product {
width: calc(50% - 10px);
}
#clerk-category-filters {
width: 100%;
float: left;
}
#clerk-facets-container {
display: none;
}
}
@media only screen and (min-width : 800px) {
#clerk-category-results {
width: 78%;
float: right;
}
#clerk-category-filters {
width: 20%;
float: left;
}
#clerk-show-facets {
display: none;
}
}
</style>
</div>
<script type="text/javascript">
var clerk_response = false;
var category_page_selector = ".category-container"
Clerk('on','response', function(data,content){
if (content.result.length > 0) {
clerk_response = true;
}
});
setTimeout(
function(){
if (clerk_response == false) {
document.querySelector(category_page_selector).style.display = '';
}
}
,750)
</script>
{% endraw %}
13. Inserire il codice embed del contenitore appena nascosto:
14. Fare clic su Salva:
15. I risultati della categoria sono ora mostrati da Clerk.io:
Dopo questo passo, si può naturalmente creare uno stile per le pagine in qualsiasi modo si desideri con Designs.