Generale #
Il Contenuto del sito web facilita il lavoro con le Raccomandazioni e i Risultati della ricerca.
I Designs sono memorizzati su Clerk.io, ed è sufficiente inserire un piccolo codice embed nella pagina in cui si desidera visualizzare i prodotti.
Un numero qualsiasi di blocchi di contenuti può essere basato su un unico design, oppure si possono creare design separati per ogni contenuto.
È possibile controllare i Contenuti esistenti e crearne di nuovi facendo clic su Ricerca/Raccomandazioni e poi su Contenuti nel menu laterale:
Ogni blocco di contenuto unico è controllato dalle proprie impostazioni. È possibile scegliere un nome unico per tutti i blocchi di contenuto, che fungerà anche da etichetta di tracciamento.
La pagina delle Impostazioni di ogni blocco Contenuto è divisa in quattro sezioni a cui si può accedere facendo clic su Modifica contenuto.
Dare un nome al contenuto #
Controlla il nome_ e le **etichette_ di tracciamento_ del blocco Contenuto.
Scegliere la logica del prodotto #
Definisce quale tipo di prodotti deve essere visualizzato nel Contenuto.
Si può anche controllare se devono essere applicati Filtri, se, ad esempio, si vogliono mostrare solo prodotti al di sopra o al di sotto di un certo prezzo, o di una marca specifica.
Selezionare il design #
Consente di scegliere il numero di prodotti da mostrare e il design su cui basare il Contenuto. Se nel progetto è presente una variabile title/headline, è possibile aggiungere qui anche i titoli da mostrare per il Contenuto.
4. Inserire nel sito web #
I blocchi di contenuto sono collegati a un embedcode che consente loro di essere visualizzati in tutte le pagine in cui è stato inserito Clerk.js. È sufficiente inserire il embedcode nel punto in cui si desidera visualizzare il contenuto.
Si noti che i codici embed potrebbero necessitare di variabili come_ prodotto o identificativo della categoria , a seconda della logica:
Titoli #
La gestione dei titoli è semplice grazie alla configurazione standard di Content.
Nella pagina Aggiornamento contenuto, fare clic su Seleziona design per visualizzare il campo di immissione Titolo:
- Passo 1: modificare il testo nella casella Headline
- Passo 2: fare clic su Aggiorna contenuto.
La modifica verrà visualizzata immediatamente dopo l’aggiornamento del negozio web.
Tag dei campi di testo dinamici #
I nostri design standard utilizzano tag per impostare titoli diversi per ogni contenuto.
Questi tag possono essere utilizzati in qualsiasi campo di testo nei progetti Design Editor e ovunque nei progetti codice.
I tag hanno la sintassi {{ variable }} e possono avere qualsiasi nome scelto.
Iniziare andando in Designs e fare clic su Edit Design per quello che si desidera modificare:
Nella pagina Aggiornamento design, inserire un tag headline con {{ headline }} nel Codice contenitore:
Fare clic su Aggiorna design e sarà possibile scrivere un titolo dalla scheda Content.
È possibile aggiungere tutti i campi di testo che si desidera, Headline è solo un esempio.
Tutto ciò che si scrive in Codice contenitore con {{ TEXT }} sarà utilizzabile come campo di input da Contenuto.
Questi tag possono essere usati anche in qualsiasi campo di testo in un progetto di Editor di design.
Rimozione di prodotti duplicati #
L’uso di questa funzione forza il caricamento di più Clerk.io raccomandazioni una dopo l’altra, invece che contemporaneamente, aggiungendo così un peso extra al tempo di caricamento della pagina.
**Assicurarsi che il compromesso tra il tempo di caricamento e la possibilità di evitare i duplicati.
Clerk.js fornisce un modo semplice per evitare i duplicati tra più cursori di raccomandazioni nella stessa pagina.
Questo si fa aggiungendo l’attributo data-exclude-from al blocco Clerk da cui si vogliono rimuovere i duplicati. Il valore dell’attributo deve essere un selettore CSS per l’altro blocco da cui impedire i duplicati.
Nell’esempio seguente, il cursore .clerk2 esclude qualsiasi prodotto presente nel cursore .clerk1 e il cursore .clerk3 esclude qualsiasi prodotto presente nei cursori .clerk1 e .clerk2.
HTML
<span class="clerk clerk1"
id="clerk1"
data-template="@clerk-banner-1">
</span>
<span class="clerk clerk2"
id="clerk2"
data-exclude-from=".clerk1"
data-template="@clerk-banner-2">
</span>
<span class="clerk clerk3"
id="clerk3"
data-exclude-from=".clerk1,.clerk2"
data-template="@clerk-banner-3">
</span>
È anche possibile limitare l’esclusione per mostrare solo i primi n prodotti (una mossa intelligente se si ha un cursore con 20 prodotti, ma solo quattro sono visibili in qualsiasi momento).
Ciò avviene tramite l’opzione :limit(n) (dove n è il primo numero di prodotti che si desidera escludere).
Ecco lo stesso esempio di prima, ma dove l’ID di esclusione riguarda solo i primi cinque prodotti.
HTML
<span class="clerk clerk1"
id="clerk1"
data-template="@clerk-banner-1">
</span>
<span class="clerk clerk2"
id="clerk2"
data-exclude-from=".clerk1:limit(5)"
data-template="@clerk-banner-2">
</span>
<span class="clerk clerk3"
id="clerk3"
data-exclude-from=".clerk1:limit(5),.clerk2:limit(5)"
data-template="@clerk-banner-3">
</span>
Esclusione di prodotti specifici #
Per evitare di mostrare determinati prodotti, è sufficiente aggiungere l’attributo data-exclude a un embedcode esistente.
data-exclude deve essere un elenco degli ID dei prodotti che non si vogliono mostrare nel blocco.
Ad esempio:
Escludi prodotti
<span class="clerk"
data-template="@clerk-complementary"
data-exclude="[45654]">
</span>