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 diversi elementi: a parte quelli puramente grafici, gli altri riprendono le informazioni impostate attraverso la finestra E-commerce | Finestra Impostazioni Prodotto. Nello specifico gli elementi di cui si compone una Card sono:
| • | Copertina: riprende la prima delle immagini inserite per il Prodotto nella sezione Immagine della finestra Impostazioni Prodotto; |
| • | Titolo: riprende il nome del Prodotto; |
| • | Dettagli: comprende la Categoria, le Varianti di Prodotto, la Disponibilità, il Campo Quantità; |
| • | Prezzo: comprende le informazioni relative al Prezzo, con l'eventuale visualizzazione dell'IVA e degli Sconti applicati; |
| • | Pulsante: permette di aggiungere il Prodotto al carrello in modo da poter procedere con il suo acquisto; |
| • | Wishlist: consente di aggiungere il Prodotto nella Wishlist, ovvero nella lista dei prodotti che si potrebbero voler acquistare in un secondo momento. |
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à, nella Card di Prodotto viene visualizzata non solo l'icona per la Disponibilità Indicativa ma anche il numero che ne specifica la Disponibilità Effettiva.
Attraverso le opzioni disponibili nella sezione Impostazioni Card è dunque possibile definire come queste devono essere composte e impaginate. Per prima cosa, occorre definire la Disposizione delle Card all'interno della Pagina scegliendo tra le seguenti opzioni:
|
Altezza fissa: le Card vengono disposte in una griglia. Dal momento che tutte le Card assumono la stessa altezza, la griglia risulta regolare e compatta.
|
|
Altezza variabile: le Card vengono sempre disposte in griglia ma l'altezza di ciascuna varia in funzione delle proporzioni dell'immagine usata come Copertina. Le Card, dunque, possono non occupare completamente le celle della griglia in cui sono inserite: per questo può rimanere dello spazio vuoto fra le Card. Questa disposizione è particolarmente indicata quando si decide di visualizzare un'unica Card per riga, oppure quando si prevede la visualizzazione su una sola riga divisa in più colonne.
|
|
Masonry: anche in questo caso l'altezza delle Card varia in funzione delle proporzioni dell'immagine di Copertina. La differenza rispetto alla disposizione precedente è che le Card non sono incasellate in una griglia regolare ma allineate su più righe e colonne senza lasciare spazi che compensano le dimensioni più ridotte di alcune di esse.
|
Definita la Disposizione è necessario decidere come devono essere impaginati i diversi Contenuti all'interna di una Card. In questo caso è possibile scegliere tra:
|
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
|
|
Copertina come sfondo
|
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. |
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:
| ▪ | Colore Sfondo: specifica il colore dello Sfondo della Card e del Pulsante. La finestra Colore offre la possibilità di agire anche sull'opacità e di definire, quindi, quanto il colore scelto deve risultare trasparente o coprente. Poter agire sull'opacità serve soprattutto se si sceglie la disposizione "Copertina come sfondo": in questo caso, infatti i contenuti verranno sovrapposti all'immagine di copertina e potranno essere resi più leggibili inserendoli in un riquadro di cui è possibile, appunto, stabilire colore e opacità. |
| ▪ | Bordo: specifica lo spessore, il colore, il fattore di smusso per gli angoli e l'ombra dei bordi dello Sfondo della Card e del Pulsante. |
| ▪ | Margini: impostano la distanza in pixel tra l'immagine di Copertina o il Contenuto e i bordi della Card, oppure tra la scritta e il bordo del Pulsante. |
| ▪ | Adatta dimensioni: se attiva, fa in modo che l'immagine di Copertina occupi tutto lo spazio a disposizione all'interno della Card, sia in 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. |
| ▪ | Effetto su passaggio: applica all'immagine di Copertina un effetto su passaggio del mouse. |
| ▪ | Larghezza (%)/Altezza: definisono lo spazio occupato dai Contenuti rispetto alla Card. Nel caso i Contenuti siano posizionati a sinistra o a destra della Card, è possibile definire la larghezza in percentuale dell'area a loro dedicata. Se invece i Contenuti sono posizionati in alto o in basso o se la Copertina viene usata come sfondo, è possibile impostare l'altezza in pixel dell'area che occupano. |
| ▪ | Allineamento: definisce se i Contenuti devono essere allineati a destra, a sinistra o al centro. |
| ▪ | Visibile: fa in modo che l'elemento della Card sia visibile o meno. Questa opzione è disponibile per il Titolo, la Descrizione, il Pulsante e la Wishlist. |
| ▪ | Tipo di Font: specifica il tipo di carattere, le dimensioni e lo Stile del testo per il Titolo, la Descrizione, i Dettagli, il Prezzo 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 Titolo, 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. |
| ▪ | 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 Varianti Prodotto: visualizza le Varianti di Prodotto disponibili nel caso queste siano state impostate attraverso la finestra E-commerce | Prodotti. |
| ▪ | 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. |
| ▪ | Prezzo finale / Prezzo scontato: specificano i colori che devono essere utilizzati per riportate il prezzo finale e il prezzo scontato. |
| ▪ | 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. |
| ▪ | Aggiungi senza visualizzare il Carrello: disponibile per l'elemento Pulsante fa in modo che, cliccando sul pulsante di acquisto, il Cliente aggiunga direttamente il Prodotto fra quelli ordinati senza essere prima indirizzato al Carrello. |
| ▪ | Colore: specifica il colore per per l'icona a forma di cuore utilizzata come pulsante per aggiungere un Prodotto alla Wishlist. |
| ▪ | Aggiungi senza visualizzare la Wishlist: disponibile solo per l'elemento Wishlist, fa si che il Prodotto venga aggiunto direttamente alla wishlist senza che questa pagina venga prima visualizzata. |
Per mettere in evidenza alcuni prodotti rispetto ad altri, è possibile applicare sulle Card delle Coccarde:
| ▪ | 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  (File Locale) 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:
| ▪ | Attiva visualizzazioni immagini in ShowBox: imposta sulle diverse immagini della Card il collegamento con le relative immagini ingrandite. Se attiva, al passaggio del mouse sull'immagine presente nella Card, viene visualizzato in sovrimpressione un pulsante con l'icona della lente d'ingrandimento: cliccando su questo pulsante gli utenti potranno visualizzare le immagini ingrandite attraverso la finestra ShowBox. Se nella sezione Dettagli della finestra Impostazioni Prodotto | Generale è stata collegata una Pagina Scheda Prodotto o un collegamento, al pulsante con la lente di ingrandimento viene affiancato un altro pulsante con l'icona di una scheda dettagli: cliccando su questo secondo pulsante, dunque, gli utenti potranno andare alla Pagina Scheda Prodotto o alla risorsa collegata. |
|
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.
|
|
