Nella Pagina di ricerca vengono visualizzati tutti i Prodotti presenti a catalogo che rispondono ai criteri di ricerca impostati: ogni Prodotto viene presentato attraverso un'apposita Card.
 | | Esempio di Card Prodotti nella Pagina di Ricerca |
La Card di un Prodotto è composta dai seguenti elementi, tutti impostati in base a quanto definito in E-commerce | Finestra Impostazioni Prodotto:
| • | Copertina: riprende la prima delle immagini inserite per il Prodotto nella sezione Immagine della finestra Impostazioni Prodotto; |
| • | Dettagli: comprende la Categoria, le Varianti di Prodotto, la Disponibilità, il Prezzo, la visualizzazione dell'IVA, il Campo Quantità; |
| • | Pulsante: ha attivo il link che porta all'inserimento del Prodotto nel carrello. |
Ovviamente, nel caso in cui elementi come la Copertina o le Varianti di Prodotto non siano stati specificati, queste informazioni non saranno inserite nella Card.
Per quanto riguarda la disponibilità, lavorando con l'edizione Pro, nella Card di Prodotto viene visualizzata non solo l'icona per la Disponibilità Indicativa ma anche il numero che ne specifica la Disponibilità Effettiva.
Prima di tutto, attraverso le opzioni disponibili nella sezione Impostazioni Card occorre definire come queste Card devono essere composte e impaginate scegliendo un tipo di visualizzazione fra i seguenti:
|
Copertina a sinistra, titolo e contenuti a destra
|
|
Titolo e contenuti a sinistra, copertina a destra
|
|
Copertina in alto, titolo e contenuti in basso
|
|
Titolo in alto, copertina e contenuti in basso
|
|
A prescindere dalla tipologia scelta, sul nome ed eventualmente sull'immagine presenti nelle Card Prodotto viene automaticamente attivato il link impostato attraverso le opzioni presenti nella sezione Dettagli della finestra Impostazioni Prodotto.
|
Impostato il tipo di visualizzazione, è poi possibile agire sulle seguenti opzioni:
| ▪ | Card per riga: specifica quante Card devono essere affiancate su un'unica riga. |
| ▪ | Righe per pagina: imposta il numero massimo di righe da visualizzare nella Pagina di Ricerca. |
| ▪ | Altezza card: specifica il valore in pixel che deve essere assunto in altezza dalle singole Card. In base a tale parametro, le immagini associate ai Prodotti vengono automaticamente ridimensionate. Se i testi di descrizione dei Prodotti sono troppo lunghi per poter essere visualizzati in maniera completa, viene visualizzata la barra di scorrimento. |
| ▪ | Margine card: imposta il valore in pixel della distanza che deve essere mantenuta tra le Card. |
In più è possibile definire lo Stile Card agendo sulle seguenti opzioni:
| ▪ | Dimensione copertina (%): imposta la larghezza dell'immagine di Copertina rispetto ai contenuti, nel caso sia posizionata a sinistra o a destra, o rispetto all'altezza della Card, nel caso sia posizionata in alto, sopra o sotto il Nome del Prodotto. |
| ▪ | Margine copertina / Margine contenuti: impostano rispettivamente il valore in pixel per la distanza tra l'immagine di Copertina o il contenuto (Nome e Descrizione) e i bordi della Card. |
Definiti questi parametri, è poi possibile impostare le proprietà grafiche dei diversi elementi che compongono le Card dei Prodotti. Selezionato l'Elemento su cui si vuole agire vengono proposte le opzioni disponibili:
| ▪ | Visibile: fa in modo che l'elemento della Card sia visibile o meno. Questa opzione non è disponibile per lo Sfondo e la Copertina. Selezionando l'elemento Dettagli, invece, è possibile specificare se visualizzare o meno informazioni come la Categoria, la Disponibilità o il Prezzo. |
| ▪ | Tipo di Font: specifica il tipo di carattere, le dimensioni e lo Stile del testo per il Nome del Prodotto, la Descrizione, i Dettagli e il Pulsante. Il menu a tendina propone: il comando per applicare il Font di default (definito dallo Stile dell'elemento Testo della Pagina nella finestra Stile dei Testi); la lista dei Safe Fonts, ovvero dei font presenti su tutti i dispositivi e per i quali, quindi, non è necessaria alcuna pubblicazione; tutti i Google Fonts e i Web Fonts aggiunti attraverso la finestra Aggiungi Web Font richiamata dal comando Altri tipi di carattere. |
| ▪ | Colore Testo: specifica il colore del testo per il Nome del Prodotto, la Descrizione, i Dettagli e il Pulsante. Selezionando l'elemento Dettagli, il colore definito per il Testo viene utilizzato anche per la linea posta sotto la Descrizione. |
| ▪ | Colore Sfondo: specifica il colore dello Sfondo della Card e del Pulsante. |
| ▪ | Spessore: specifica lo spessore dei bordi dello Sfondo della Card e del Pulsante. |
| ▪ | Colore: specifica il colore dei bordi dello Sfondo della Card e del Pulsante. |
| ▪ | Smusso: definisce il fattore di smusso per gli angoli dello Sfondo della Card e del Pulsante. |
| ▪ | Ombra: applica un'ombra allo Sfondo della Card, definendone il colore, la posizione, la diffusione e la dimensione. |
| ▪ | Adatta dimensioni: se attiva, fa in modo che l'immagine di Copertina occupi tutto lo spazio a disposizione all'interno della Card, sia larghezza che in altezza. Nel caso in cui le proporzioni non corrispondano, l'immagine viene centrata e tagliata. Se non attiva, invece, l'immagine di Copertina viene adattata o alla larghezza o all'altezza dello spazio a disposizione. |
| ▪ | Mostra Categoria: visualizza nella Card la Categoria in cui, in base a quanto definito nella finestra E-commerce | Prodotti, è inserito il Prodotto. |
| ▪ | Mostra Campo Quantità: visualizza nella Card un Campo Quantità per permettere al Cliente di specificare la quantità del Prodotto che intende inserire nel carrello. |
| ▪ | Mostra Disponibilità: visualizza nella Card, oltre all'icona per la Disponibilità Indicativa, anche il numero che ne specifica la Disponibilità Effettiva. |
|
Se si attiva l'opzione Mostra Disponibilità ed è presente almeno un Prodotto per il quale è prevista la visualizzazione di questo tipo di disponibilità, per la Pagina che ospita l'Oggetto Catalogo Prodotti deve essere impostata l'estensione .PHP: è possibile farlo tramite l'opzione Estensione del file generato presente nella finestra Proprietà Pagina | Esperto.
|
| ▪ | Mostra Prezzo: visualizza il prezzo associato al Prodotto, con o senza IVA, nella Card. |
| ▪ | Modalità: specifica se come Pulsante deve essere utilizzato un Testo o un'Immagine. Nel primo caso è possibile sfruttare le opzioni disponibili per definire lo stile del link testuale; nel secondo caso, invece, è necessario importare il File Immagine da utilizzare attraverso l'apposito campo. |
| ▪ | Margini: imposta il valore in pixel per il margine tra la scritta e il bordo del Pulsante. |
Solo nell'edizione Pro, è possibile applicare sulle Card delle Coccarde definendo:
| ▪ | Tipo di Coccarda: definisce le impostazioni per le coccarde da visualizzare nelle Card nei casi di "Nuovo Prodotto" o di "Prodotto in sconto". |
| ▪ | File Immagine: definisce l'immagine che deve essere utilizzata come coccarda. È possibile cliccare sulla freccia presente nel campo per selezionare un'immagine dalla libreria disponibile o cliccare sul pulsante  e importare il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare. |
| ▪ | Allineamento: specifica come deve essere allineata la coccarda all'interno della Card. |
| ▪ | Larghezza (%): specifica la larghezza della coccarda in percentuale rispetto alle dimensioni della Card. |
Infine, tramite le funzioni del riquadro Opzioni è possibile definire:
| ▪ | Aggiungi senza visualizzare il Carrello: fa in modo che, cliccando sul pulsante di acquisto, il Cliente aggiunga direttamente il Prodotto fra quelli ordinati senza essere automaticamente indirizzato al Carrello. |
| ▪ | Attiva visualizzazioni immagini in ShowBox: attiva sulle diverse immagini della Card il collegamento con le relative immagini ingrandite. Tali immagini ingrandite vengono visualizzate attraverso la finestra ShowBox. Questo collegamento sostituisce quello eventualmente impostato attraverso l'apposita opzione presente nella sezione Dettagli della finestra Impostazioni Prodotto | Generale. |
|
L'aspetto della finestra ShowBox può essere completamente personalizzato: attraverso le opzioni presenti al Passo 2 nella finestra Finestra a comparsa ShowBox è, per esempio, possibile impostare colori, ombra, opacità ed effetti di apertura.
|
|
