Andremo a spiegare il funzionamento di ogni singola chiave di questo template.
Per la configurazione iniziale delle recommendation si rimanda all’articolo dedicato come configurare una recommendation.

L’obiettivo del template è quello di permettere all’utente di visualizzare una griglia di recommendations, dove viene scelto il numero di righe e colonne da visualizzare, sia desktop che mobile, e permette di cambiare la visualizzazione da griglia a colonna.

Si consiglia per sfruttare a pieno tutte le funzionalità del template di vincolare il numero di recommendation da mostrare a un numero superiore a quelle visualizzabili semplicemente in una pagina (dato dal numero di righe per il numero di colonne selezionate) e limitare al minimo le condizioni in modo da avere un’ampia gamma di prodotti che l’algoritmo può estrarre.

Posizione icone visualizzazione (1 _ sinistra, 2_ centro, 3 destra): posizionamento, rispetto alla galleria, dei pulsanti di modalità di visualizzazione (griglia/lista), di scorrimento avanti e indietro, e di paginazione in fondo.

Colore di sfondo icona visualizzazione attiva: colore del background per l’icona di visualizzazione griglia/lista attiva

Colore di sfondo icona di disposizione lista/griglia | Bordo delle icone di disposizione lista/griglia | Colore del carattere delle icone di disposizione lista/griglia: colore del background, del bordo e del carattere utilizzato per l’icona di visualizzazione lista/griglia inattiva.

Dimensione carattere icone di disposizione lista/griglia: dimensione del carattere utilizzato per le icone di visualizzazione lista/griglia

Padding delle icone di disposizione lista/griglia : padding laterale delle icone utilizzate nei pulsanti vista lista/griglia

Angoli arrotondati bordo icone di disposizione lista/griglia: raggio di arrotondamento del contorno delle icone di visualizzazione lista/griglia

Colore testo icona visualizzazione attiva: colore del carattere utilizzato per le icone di visualizzazione lista/griglia per la modalità attualmente attiva

Testo icone visualizzazione on hover: colore del carattere utilizzato per le icone di visualizzazione lista/griglia al passaggio del mouse

Colore di sfondo pagina inattiva | Colore di sfondo pagina attiva | Colore bordo pagina attiva: colore di sfondo dei pulsanti contenenti i numeri di pagina in modalità normale e una volta attivati (pagina corrente) e colore del bordo corrispondente

Colore testo numeri di pagina inattivi | Colore testo numero di pagina attivo: colore del carattere utilizzato per mostrare i numeri di pagina, se attivi, nello stato normale e una volta attivati (pagina corrente)

Angoli arrotondati pulsante paginazione: raggio di arrotondamento del contorno delle icone contenenti il numero di pagina

Mostra bottoni navigazione in fondo: mostra/nasconde i pulsanti in fondo alla galleria, contenenti il numero di pagina se attivato o altrimenti visualizzati come pallini.

Mostra/nascondi controlli scorrimento pagina: mostra/nasconde i pulsanti in alto alla galleria, contenenti con le icone di scorrimento avanti e indietro.

Mostra/nascondi i numeri di pagina: Mostra o nasconde la visualizzazione del numero della pagina all’interno dei pulsanti di paginazione in basso, sotto la griglia

Allineamento card in vista lista (si_sinistra, no_destra): allineamento del contenuto delle card quando viene selezionata la vista lista. Il contenuto viene allineato a destra o a sinistra in riga e non più in colonna come nella vista griglia.

Galleria > Altro

Abilita scorrimento automatico delle pagine: abilita il cambio di pagina automatico

Timeout autoplay galleria: tempo in millisecondi dopo cui si passa alla pagina successiva quando il cambio pagina automatico è attivato

Ritorno in cima automatico allo scorrimento: abilita / disabilita il posizionamento della view in automatico all’inizio del contenitore delle card con i prodotti

Galleria > Posizione e dimensioni

Sfondo galleria | Colore bordo galleria: colore background e del bordo del contenitore della nostra galleria

Spessore bordo galleria: spessore del bordo di contorno del contenitore della galleria, mettere a zero per nasconderlo

Icona disponi colonna | Icona disponi in griglia: scelta delle icone da mostrare nel pulsante che attiva la visualizzazione in griglia/lista

Margine prima e dopo la galleria (in px): margine in pixel da lasciare prima e dopo il contenitore della nostra galleria

Larghezza massima galleria in px: larghezza massima della galleria in px

Numero di colonne da mobile: numero delle colonne che verranno mostrate nella visualizzazione mobile, il numero di righe verrà impostato in automatico al numero di prodotti per pagina visualizzati in modalità desktop ( quindi righe per colonne)

Numero di elementi per riga | Numero di righe: numero di colonne e numero di righe che verranno mostrate per ogni pagina (totale elementi per pagina). Nel caso in cui il numero di prodotti estratti dall’algoritmo sia inferiore totale elementi per pagina e quindi la galleria avrà solo una pagina, verrà automaticamente diminuito il numero di righe da mostrare nel contenitore in modo che contengano tutte almeno un elemento e i pulsanti di navigazione verranno automaticamente nascosti.

Angoli arrotondati galleria: raggio di arrotondamento del bordo del contenitore della galleria se impostato a un valore maggiore o uguale a 1

Contenuto aggiuntivo > Testo messaggio

Sfondo contenuto aggiuntivo | Colore bordo contenuto aggiuntivo: colore del bordo del contenuto aggiuntivo e del relativo bordo, se il valore successivo è impostato a un numero maggiore uguale a 1

Spessore bordo contenuto aggiuntivo: spessore del bordo di contorno del contenitore del contenuto aggiuntivo, mettere a zero per nasconderlo

Nascondi contenuto aggiuntivo: Nasconde/mostra il contenuto aggiuntivo, visualizzato nell’immagine sopra

HTML contenuto aggiuntivo: campo HTML dove è possibile scrivere il contenuto aggiuntivo che vogliamo mostrare prima della nostra galleria

Margine prima e dopo il contenuto aggiuntivo (in px): margine in pixel da lasciare prima e dopo il contenitore del contenuto aggiuntivo

Immagine laterale | Nascondi immagine laterale | Immagine laterale a sinistra | Larghezza massima immagine laterale (in px): impostazioni dell’immagine che vogliamo mostrare nel contenuto aggiuntivo, a partire dal percorso del file, la sua visibilità o meno, il posizionamento se a destra o a sinistra e la larghezza massima in pixel che dovrà rispettare.

Colore link contenuto aggiuntivo | Colore testo contenuto aggiuntivo | Dimensione testo contenuto aggiuntivo (in px) : colori del link all’interno del contenuto aggiuntivo, del testo normale, la sua dimensione

Colore titoli contenuto aggiuntivo | Dimensione titoli contenuto aggiuntivo (in px): colore dei titoli all’interno del contenuto aggiuntivo e rispettiva dimensione del carattere.

Angoli arrotondati contenuto aggiuntivo: raggio di arrotondamento del contorno del contenitore del contenuto aggiuntivo

Contenuto aggiuntivo > Contenuto incorporato

Codice CSS aggiuntivo: campo di testo dove è possibile inserire il foglio di stile personalizzato.

Recommendation > Pulsante

Colore di sfondo pulsante | Colore sfondo pulsante rollover | Colore bordo pulsante | Colore bordo pulsante rollover: colore di background e del bordo del pulsante contenuto all’interno delle card dei prodotti raccomandati allo stato normale e allo stato di rollover.

Dimensione bordo pulsante (in px): dimensione del bordo del pulsante della card, non visibile se impostato a zero

Pulsante a tutta larghezza: attivazione/disattivazione della modalità di visualizzazione del pulsante largo quanto tutta la card meno il padding interno

Padding sopra/sotto pulsanti REC | Padding destra/sinistra pulsanti REC: padding in pixel del pulsante all’interno delle card delle recommendations

Angoli arrotondati pulsante (in px): raggio di arrotondamento del contorno del pulsante

Testo pulsante: testo visualizzato all’interno del pulsante delle card

Colore testo pulsante | Colore testo pulsante rollover | Dimensione testo pulsante (in px): colore del testo all’interno del pulsante allo stato normale e al passaggio del mouse e relativa dimensione del font

Recommendation > Posizione e dimensioni

Animazione immagine card: attivazione/disattivazione zoom sull’immagine al passaggio del mouse

Colore sfondo card | Colore sfondo card rollover | Colore bordo card | Colore bordo card rollover: colore dello sfondo della card contenente la recommendation e del suo bordo nello stato normale e al passaggio del mouse

Sfondo pulsante rollover card | Colore pulsante rollover card | Bordo pulsante rollover card: colore di sfondo del pulsante all’interno della card con la recommendation allo stato normale e al passaggio del mouse e il corrispondente colore del bordo.

Dimensione bordo laterale destro card (in px) | Dimensione bordo superiore card (in px) | Dimensione bordo inferiore card (in px) | Dimensione bordo laterale sinistro card (in px): dimensione in pixel della linea del bordo del contenitore della card, se impostata a un valore maggiore o uguale di 1

Margine laterale delle card (in px) | Margine top_bottom delle card (in px): margine in pixel delle card

Padding orizzontale card (in px) | Padding verticale card (in px): padding in pixel delle card

Mostrare simbolo valuta prima del prezzo: mostra il simbolo della valuta prima o dopo il prezzo del prodotto

Sfondo label sconto: colore di sfondo dell’etichetta SCONTO se applicata sopra la card

Nascondi label sconto immagine: mostra/nasconde etichetta SCONTO sopra la card

Colore label sconto: colore testo dell’etichetta SCONTO sopra la card

Label sconto padding interno (in px): padding interno dell’etichetta SCONTO in pixel

Label sconto a sinistra | Label sconto in alto : posizionamento in alto/in basso nella card dell’etichetta SCONTO

Label sconto distanza orizzontale (in px) | Label sconto distanza verticale (in px): scostamento dall’alto e/o dal basso dell’etichetta SCONTO posizionata sulla card

Angoli arrotondati label sconto: arrotondamento in pixel degli angoli dell’etichetta SCONTO

Testo aggiuntivo label sconto: testo riportato all’interno dell’etichetta SCONTO

Nascondi testo aggiuntivo label sconto: mostra/nasconde etichetta SCONTO sopra la card del prodotto

Dimensione testo label sconto (in px): dimensione del carattere utilizzato per il testo dell’etichetta sconto

Colore nome brand | Dimensione nome brand (in px): colore e dimensione del carattere utilizzato per il nome del brand .

Colore bordo tra descrizione e prezzo: colore linea di separazione tra descrizione e prezzo nella card se impostato a si il relativo controllo “Nascondere bordo tra descrizione e prezzo”

Colore barra prezzo originale | Barra inclinata prezzo originale | Dimensione barra prezzo originale (in px): colore e dimensione della barra posizionata sopra al prezzo di partenza del prodotto, è possibile scegliere tra una linea dritta orizzontale o una barra inclinata

Colore descrizione prodotto | Dimensione descrizione prodotto (in px): colore e dimensione del font utilizzato per la descrizione del prodotto

Colore prezzo scontato: colore font utilizzato per il prezzo finale al netto degli sconti

Nascondere bordo tra descrizione e prezzo | Dimensione bordo tra descrizione e prezzo (in px): si mostra/nasconde la linea di separazione tra descrizione e prezzo nella card e si imposta il suo spessore in pixel

Larghezza massima immagini carosello (in px): dimensione massima delle immagini mostrate nelle card espressa in pixel

Colore nome prodotto | Dimensione nome prodotto (in px): colore e dimensione del carattere utilizzato per il nome del prodotto

Colore prezzo di partenza: colore del carattere utilizzato per il prezzo originale

Mostra il prezzo scontato: mostra/nascondi il prezzo scontato

Dimensione prezzo scontato (in px) | Dimensione prezzo originale (in px): dimensione del font utilizzato per mostrare il prezzo scontato e il prezzo di partenza del prodotto

Ordine brand | Ordine nome prodotto | Ordine descrizione breve: ordinamento della posizione dei campi brand, nome prodotto e descrizione (da 1 a 3)

Ordine contenuto aggiuntivo rispetto all’immagine | Ordine immagine rispetto al contenuto aggiuntivo: ordinamento della posizione dell’immagine rispetto al contenuto aggiuntivo e viceversa (valori 1 e 2)

Nascondi brand REC | Nascondi descrizione REC | Nascondi immagine REC | Nascondi nome REC | Nascondi prezzi REC | Nascondi pulsante REC: mostra/nasconde rispettivamente i campi nome brand, descrizione, immagine, nome articolo, prezzi, pulsante della card

Prezzo originale sopra il prezzo scontato: mostra/nasconde il prezzo originale sopra il prezzo scontato

Altezza massima immagine laterale (in px): altezza massima dell’immagine del prodotto mostrata nella card