Attraverso le opzioni presenti in questa finestra, richiamata selezionando la Pagina Speciale "E-commerce: Wishlist" sulla Mappa e cliccando sul pulsante Modifica, è possibile definire come devono essere visualizzati i Prodotti all'interno della Pagina Wishlist dell'e-commerce.
La Pagina Wishlist raccoglie e presenta tutti i Prodotti che, durante la navigazione, sono stati inseriti dall'utente all'interno della sua Wishlist cliccando sull'apposito pulsante. La Pagina presenta un breve testo introduttivo (che può essere personalizzato attraverso la finestra Finestra Gestione Contenuti in Lingua) a cui segue la lista dei Prodotti, ciascuno 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; |
| • | Dettagli: comprende la Categoria, le Varianti di Prodotto, la Disponibilità, il Prezzo, la visualizzazione dell'IVA, il Campo Quantità; |
| • | Pulsante: permette di aggiungere il Prodotto al carrello in modo da poter procedere con il suo acquisto; |
| • | Wishlist: in questo caso, consente di rimuovere il Prodotto dalla Wishlist. |
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.
Per definire l'aspetto delle Card occorre, prima di tutto, scegliere il layout da applicare fra quelli proposti nella sezione Impostazioni Card:
|
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 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. |
| ▪ | 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. |
| ▪ | 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. |
Infine, è 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:
| ▪ | 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.
|
Leggi le Guide:
