Oggetto Catalogo Prodotti

Una delle funzioni più interessanti di WebSite X5 è quella di permettere la creazione e gestione di Siti di E-commerce, attraverso i quali è possibile non solo presentare i propri Prodotti su una vetrina potenzialmente affacciata sul mondo intero, ma anche venderli direttamente on-line.

Oltre a permettere l'inserimento dei Prodotti e la gestione del carrello, WebSite X5 consente di approntare un vero e proprio catalogo online attraverso un apposito Oggetto, chiamato Catalogo Prodotti. Con questo Oggetto è possibile presentare un gruppo di Prodotti, selezionati fra quelli già inseriti nel Carrello e-commerce, attraverso delle Schede Prodotto che ne riassumono le informazioni principali e ne permettono l'acquisto.

I comandi disponibili per creare un Oggetto Catalogo Prodotti sono articolati nelle seguenti sezioni:

Elenco Impostazioni

Perché l'Oggetto Catalogo Prodotti funzioni correttamente, è necessario aver precedentemente inserito dei Prodotti all'interno del Carrello di e-commerce attraverso i comandi della sezione E-commerce del Passo 1 - Impostazioni del Sito

| Avanzate.

7.12.1 Sezione Elenco

Attraverso questa sezione è possibile specificare quali Prodotti devono essere visualizzati nell'Oggetto Catalogo Prodotti.

La colonna di sinistra della finestra presenta l'Elenco Categorie e Prodotti inseriti durante la creazione del E-commerce disponibile al Passo 1 - Impostazioni del Sito | Avanzate.

Di fianco a ciascuna Categoria e a ciascun Prodotto è presente un check box: è sufficiente cliccare sui check box corrispondenti alle Categorie e/o ai Prodotti che si intendono attivare per fare in modo che vengano inseriti all'interno dell'Oggetto Catalogo Prodotti che si sta componendo. Tutti i Prodotti selezionati vengono automaticamente visualizzati all'interno della colonna di destra della finestra.

Attivare una Categoria o attivare tutti i Prodotti appartenenti a una Categoria non è la stessa cosa: solo nel primo caso, infatti, se in un secondo momento verranno aggiunti nuovi Prodotti a una Categoria, questi verranno automaticamente aggiunti negli Oggetti Catalogo Prodotti a cui sono collegati.

I Prodotti inseriti nella colonna di destra della finestra possono essere ordinati cliccando sul pulsante Ordinam ento e selezionando il tipo di ordinamento che si intende applicare: Personalizzato, Nome, Categoria, Prezzo, Ascendente o Discendente.

Selezionando l'ordinamento Personalizzato è possibile utilizzare i pulsanti Sposta su / Sposta Giù per definire manualmente l'ordine dei Prodotti.

7.12.2 Sezione Impostazioni

Attraverso le opzioni proposte in questa sezione è possibile definire alcune impostazioni grafiche relative alle Schede attraverso le quali vengono presentati i Prodotti inseriti nell'elenco.

La Scheda di un Prodotto è composta dai seguenti elementi, tutti impostati in base a quanto definito in E-commerce | Finestra Impostazioni Prodotto:

Sfondo;

Copertina: riprende la prima delle immagini inserite per il Prodotto nella sezione Immagine della finestra Impostazioni Prodotto;

Nome del Prodotto;

Descrizione;

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 Scheda.

Per quanto riguarda la disponibilità, lavorando con l'edizione Pro, nella Scheda 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 Schede occorre definire come queste 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 Schede Prodotto viene automaticamente attivato il link impostato attraverso l'opzione Collegamento (es. Pagina scheda prodotto) della finestra

Impostazioni Prodotto | Generale.

Impostato il tipo di visualizzazione, è poi possibile agire sulle seguenti opzioni:

Schede per riga: specifica quante Schede Prodotto devono essere affiancate su un'unica riga.

Altezza schede: specifica il valore in pixel che deve essere assunto in altezza dalla singole Schede Prodotto. 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 schede: imposta il valore in pixel della distanza che deve essere mantenuta tra le Schede.

Dim ensione 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 Scheda, 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 Scheda.

Definiti questi parametri, è poi possibile impostare le proprietà grafiche dei diversi elementi che compongono le Schede dei Prodotti.

Selezionato l'Elemento su cui si vuole agire vengono proposte le opzioni disponibili:

Visibile: fa in modo che l'elemento della Scheda 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 Scheda e del Pulsante.

Spessore: specifica lo spessore dei bordi dello Sfondo della Scheda e del Pulsante.

Colore: specifica il colore dei bordi dello Sfondo della Scheda e del Pulsante.

Sm usso: definisce il fattore di smusso per gli angoli dello Sfondo della Scheda e del Pulsante.

Om bra: applica un'ombra allo Sfondo della Scheda, definendone il colore, la posizione, la diffusione e la dimensione.

Adatta dim ensioni: se attiva, fa in modo che l'immagine di Copertina occupi tutto lo spazio a disposizione all'interno della Scheda, 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 Scheda Prodotto la Categoria in cui, in base a quanto definito nella finestra E-commerce | Prodotti, è inserito il Prodotto.

Mostra Cam po Quantità: visualizza nella Scheda Prodotto un Campo Quantità per permettere al Cliente di specificare la quantità del Prodotto che intende inserire nel carrello.

Mostra Disponibilità: visualizza nella Scheda Prodotto, 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 Scheda Prodotto.

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, come immagine viene automaticamente ripresa quella impostata nella sezione Immagini della finestra E-commerce | Opzioni.

Margini: imposta il valore in pixel per il margine tra la scritta e il bordo del Pulsante.

Solo nell'edizione Pro, è possibile applicare sulle Schede Prodotto delle Coccarde definendo:

Tipo di Coccarda: definisce le impostazioni per le coccarde da visualizzare nelle Schede Prodotto nei casi di "Nuovo Prodotto" o di "Prodotto in sconto".

File Im m agine: 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.

Allineam ento: specifica come deve essere allineata la coccarda all'interno della Scheda Prodotto.

Larghezza (%): specifica la larghezza della coccarda in percentuale rispetto alle dimensioni della Scheda Prodotto.

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 collegam ento su im m agine: attiva sulle diverse immagini della Scheda Prodotto il collegamento con le relative immagini ingrandite. Tali immagini ingrandite vengono visualizzate attraverso la finestra Show Box. Questo collegamento viene sostituito con quello eventualmente impostato attraverso l'apposita opzione presente nella finestra Impostazioni Prodotto | Generale.

L'aspetto della finestra Show Box 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.