Rimozione dei prodotti duplicati nelle pagine con più di un banner

L’utilizzo di questa funzione forza il caricamento di più Clerk.io raccomandazioni una dopo l’altra, invece che contemporaneamente, aggiungendo così un ulteriore peso 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.

Ciò avviene 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 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>

È 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

È 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"
  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>