Rimuovere i prodotti duplicati nelle pagine con più di un banner

Escludere i prodotti tra i banner, per mostrare prodotti univoci in ognuno di loro.

Fai Attenzione ai tempi di caricamento più lunghi

L'utilizzo di questa funzione forza il caricamento di più Recommendations di Clerk.io una dopo l'altra, invece che allo stesso tempo, aggiungendo così un peso extra al tempo di caricamento della pagina.
Assicuratevi che aumentare il tempo di caricamento valga la pena quando si vuole evitare i duplicati.

 

Clerk.js ti fornisce un modo semplice per evitare i duplicati tra più recommendations sulla stessa pagina. 

Questo è possibile aggiungendo l'attributo data-exclude-from al blocco Clerk da cui volete rimuovere i duplicati.

Il valore dell'attributo dovrebbe essere un CSS selector per l'altro blocco da cui prevenire i duplicati.

Nell'esempio qui sotto, lo slider #clerk2 esclude qualsiasi prodotto che si trova nello slider #clerk1, e lo slider #clerk3 esclude qualsiasi prodotto che si trova negli slider #clerk1 o #clerk2. 

HTML

<span class="clerk"
  id="clerk1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk"
  id="clerk2"
  data-exclude-from="#clerk1"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk"
  id="clerk3"
  data-exclude-from="#clerk1,#clerk2"
  data-template="@clerk-banner-3">
</span>

Puoi anche limitare l'esclusione per mostrare solo i primi n prodotti (una mossa intelligente se hai uno slider con 20 prodotti ma solo quattro sono visibili per volta). 

Questo viene fatto tramite l'opzione :limit(n)  (dove n è il primo numero di prodotti che volete escludere).

Ecco lo stesso esempio di sopra, ma dove l'ID di esclusione riguarda solo i primi cinque prodotti.

HTML

<span class="clerk"
  id="clerk1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk"
  id="clerk2"
  data-exclude-from="#clerk1:limit(5)"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk"
  id="clerk3"
  data-exclude-from="#clerk1:limit(5),#clerk2:limit(5)"
  data-template="@clerk-banner-3">
</span>