L’e-commerce sta diventando un settore del web sempre più importante. Sono sempre più numerosi i siti dove viene inserita una sezione dedicata alla vendita di oggetti di qualsiasi tipo. Per creare un negozio virtuale, in generale, dobbiamo pensare a queste cose:
- La tipologia del negozio;
- I prodotti e le loro categorie;
- Il tipo di clienti cui è rivolta la vendita;
- Le vendite (per esempio se sono solo nazionali o anche internazionali);
- Prezzi ed eventuali tasse;
- Le tipologie di pagamento e di spedizione;
- Eventuali sconti da applicare ai clienti.
JoomShopping è uno dei componenti di shopping online più utilizzati, più completi e più facili da usare su Joomla. È compatibile con Joomla 1.5, 1.6, 1.7, 2.5 e con Joomla 3. Sviluppato per la compravendita di prodotti di diverso tipo (anche file musicali), possiamo fare visualizzare nel front-end le descrizioni, le immagini e anche file multimediali (video o audio) del prodotto. Integra vari tipi di pagamento, permette di avere le fatture in formato PDF e infine è ottimizzato per le funzioni per il SEO.
Installazione e prime configurazioni di JoomShopping
Per installare il componente, dopo avere scaricato la versione che ci interessa dalla pagina dello sviluppatore (dove troveremo anche i plugin aggiuntivi per Joomla Shopping), accediamo al back end del nostro sito, andiamo su Estensioni–>Gestione Estensioni e nella scheda Installa scegliamo il file zip scaricato e clicchiamo sul pulsante “Carica & Installa”. Dopo qualche istante comparirà il messaggio di avvenuta installazione. In questa pagina, oltre ai riferimenti dello sviluppatore, troviamo due pulsanti: “JoomShopping” e “Load sample data”. Il primo serve per andare direttamente nella pagina del componente, il secondo per installare i dati di esempio; se è la prima volta che stiamo utilizzando questa estensione è consigliato caricare anche gli esempi che possono essere eliminati in qualsiasi momento.
Possiamo trovare la traduzione in italiano del componente, sia front-end sia back-end in questa pagina, oppure nell’area donwload dello sviluppatore. Per l’amministrazione bisogna caricare il file dentro la cartella http://www.tuosito.it/administrator/components/com_jshopping/lang mentre per l’utenza dovrà essere caricato dentro http://www.tuosito.it/components/com_jshopping/lang
L’installazione può essere fatta anche direttamente dal back end del sito, procedendo come se fosse l’installazione di una qualsiasi estensione. Andiamo poi a vedere il pannello di controllo del nostro componente, che troviamo alla pagina http://tuosito.it/administrator/index.php?option=com_jshopping. Questa pagina la possiamo raggiungere anche dal menu orizzontale del back-end del sito e scegliendo Componenti–>JoomShopping. Come possiamo vedere dalla figura abbiamo le seguenti voci:
Figura 1. Il pannello di controllo di JoomShopping
(clic per ingrandire)
- Categorie;
- Prodotti;
- Ordini;
- Clienti;
- Opzioni;
- Configurazione;
- Installa e Aggiorna;
- Info.
Ognuna di queste schede, in particolare Opzioni e Configurazioni, contiene numerose sottoschede, con impostazioni interessanti da vedere. Non saranno spiegate tutte le voci di ogni singola scheda perché sono tutte piuttosto intuitive, ma vedremo passo passo come creare un vero negozio online.
Durante la lettura dell’articolo useremo, come esempio, la creazione di un negozio online di oggettistica di squadre di calcio italiane, per esempio magliette, tazze, poster e altro.
Creazione di categorie e prodotti
Poiché sappiamo già che tipo di negozio vogliamo creare andiamo subito a pensare quali possono essere le categorie di oggetti possibili. JoomShopping permette di creare categorie e sottocategorie di prodotti. Creiamo allora per il nostro negozio di esempio le categorie “Magliette”, “Accessori per computer”, “Orologi e sveglie”, “Giochi” e “Oggettistica varia”. “Accessori per computer” avrà per esempio alcune categorie figlie come, per esempio, “Mouse”, “Tappetini per il mouse” e “Chiavi usb”. Per aggiungere una categoria, dalla scheda “Categorie” basta cliccare su nuovo e riempire i campi con il titolo, la descrizione, la visibilità e anche un’eventuale immagine. Se vogliamo aggiungere invece una categoria che fa parte di una già creata dobbiamo cliccare su Sottocategorie, in corrispondenza della categoria madre e poi aggiungerla come nell’altro caso cliccando sul pulsante “Nuovo”. Dalla scheda Categorie possiamo modificarle ed eliminarle, ma in questo ultimo caso solo se non hanno dei prodotti collegati.
Figura 2. Pagina con l’elenco delle categorie
(clic per ingrandire)
Per aggiungere un prodotto dentro una categoria possiamo cliccare sulla voce prodotti della scheda “Categoria” e poi inserirlo oppure cliccare su Nuovo direttamente dalla scheda “Prodotti”. Se proviamo a inserire un prodotto, oltre alla descrizione, a eventuali media o altri file da allegare, ci sono altre voci che è necessario configurare prima, per esempio:
- Le tasse: in Italia c’è obbligatoriamente l’IVA e assume valori diversi. Per inserire una nuova tassa, dobbiamo andare su Opzioni–>Tasse e inserire il nome e il valore in percentuale. Per ogni tassa possiamo anche impostare delle regole, magari perché una determinata imposta vale solo per alcuni paesi;
- il produttore: troviamo l’elenco dei produttori tra le voci presente nelle Opzioni. Per creare un nuovo produttore dobbiamo inserire il titolo (unico elemento obbligatorio), un eventuale alias, una descrizione breve e una estesa, un’immagine (magari quella del logo) e i meta tag classici (per titolo, descrizione e parole chiave);
- Un’etichetta: alle immagini dei prodotti possiamo aggiungere delle piccole immagini per indicare, per esempio, un prodotto nuovo o uno in saldo. Quando creiamo una nuova etichetta (da Opzioni–>Etichette Prodotto–>Nuovo) oltre a dare un nome ad essa dobbiamo caricare un’immagine. Non ci sono grandi controlli sull’immagine inserita, ma è consigliato utilizzare delle immagini di dimensione 40×40 pixel, così saranno inserite all’interno dell’immagine in alto a sinistra. Le immagini per le etichette sono salvate in ../components/com_jshopping/files/img_labels;
- I tempi di spedizione: è un’informazione che i compratori cercano praticamente sempre e anche questi sono una variabile che possiamo inserire. Per inserirli non ci sono particolari esigenze, basta solo una descrizione nel campo titolo;
Una caratteristica molto interessante di JoomShopping consiste nella possibilità di attribuire ai prodotti in vendita delle caratteristiche personalizzate: per esempio, se si tratta di un negozio di vestiti, sarebbe utile avere a disposizione la taglia dei capi oppure se si tratta di un negozio che vende arredamento altrettanto utile è inserire il colore del prodotto (basta pensare al marrone che ha molte tonalità diverse). Per inserire queste caratteristiche abbiamo, tra le opzioni dell’estensione, le voci “Attributi” e “Attributi liberi”. Per aggiungere una caratteristica dobbiamo cliccare sulla voce Attributi e poi su Nuovo. Una volta inserito il nome dell’attributo, scelta la tipologia di selezione (se check box o radio button) e salvato per aggiungere i valori dobbiamo cliccare sulla corrispondente voce Opzioni.
Quando inseriamo un nuovo prodotto, possiamo notare che il prezzo può anche variare a seconda del valore dell’attributo. Nel caso del nostro negozio sicuramente è necessario inserire le taglie per le magline delle squadre, poi possiamo inventare altri attributi per gli altri oggetti.
Andiamo allora a creare i prodotti. Dal pannello di controllo di JoomShopping scegliamo Prodotti–>Nuovo. I dati che possiamo inserire per ogni prodotto sono tanti, ma tra quelli essenziali dobbiamo inserire una descrizione, il prezzo, le tasse, la categoria di appartenenza. E’ consigliato aggiungere un’immagine e, se presenti, gli attributi.
Poiché il componente supporta il multilingua il nome del prodotto e le descrizioni possiamo inserirle, per esempio, sia in italiano sia in inglese. Una volta inseriti tutti i nostri prodotti ci troveremo davanti una lista come in figura. Da notare che in alto a destra di alcune immagini ci sono le etichette per gli oggetti in saldo o per quelli nuovi.
Figura 3. Lista di tutti i prodotti inseriti
(clic per ingrandire)
Per velocizzare l’inserimento, i prodotti possono essere anche importati (e di conseguenza esportati) attraverso dei file csv. Questo lo possiamo fare andando a cliccare su “Importa e Esporta” che troviamo tra le Opzioni.
Un prodotto da quando è ordinato a quando è stato consegnato e pagato passa attraverso degli stati dell’ordine diversi, che possiamo ritrovare in Opzioni–>Stato dell’ordine. Quelli inseriti con i dati di esempio e che possiamo riutilizzare sono:
- Pending: per gli ordini non ancora confermati;
- Confirmed: per un ordine confermato;
- Cancelled: per un ordine cancellato dal cliente;
- Refunded: per un ordine rifiutato dal venditore (per un qualsiasi motivo);
- Shipped: quando la merce è stata spedita;
- Paid: per gli ordini pagati;
- Complete: stato finale in cui tutto è stato svolto con regolarità.
Ogni stato ha un codice diverso.
JoomShopping permette di configurare attraverso la pagina delle Opzioni anche le modalità di pagamento (dove è consigliato tenere quelle dei dati di esempio perché sono le più comuni), le tipologie di spedizione e le relative spese, gli stati dai quali è possibile fare un ordine e creare dei gruppi di utenti ai quali posso applicare anche degli sconti.
Creazione delle pagine sul sito
Per personalizzare veramente il nostro sito possiamo creare le diverse pagine per le varie fasi di un ordine. Invece di utilizzare i contenuti classici di Joomla dobbiamo andare a creare e/o modificare delle pagine statiche di JoomShopping. Da JoomShopping–>Configurazione–>Testo statico–>Nuovo e poi possiamo inserire il nostro testo e le nostre immagini come se fosse un articolo classico. Per esempio possiamo creare delle pagine come le seguenti:
- Una pagina di benvenuto e di presentazione;
- Pagina con i termini del servizio;
- Pagina con eventuali politiche e regole (per esempio per la restituzione dei prodotti);
- Una pagina per descrivere costi e modalità di spedizione;
Adesso però dobbiamo far vedere le pagine del negozio sul front-end del nostro sito. Per farlo per esempio possiamo pensare di creare un menu apposito e inserire i collegamenti che ci interessano. Andiamo su “Menu–>Gestione Menu–>Nuovo menu” e salviamo il nostro nuovo menu. Supponiamo di chiamarlo “Il mio negozio online”. Poi dobbiamo creare un modulo che lo farà visualizzare su alcune o su tutte le pagine del sito: da Estensioni–>Gestione moduli–>Nuovo–>come tipologia scegliamo Menu e poi selezioniamo quello appena creato.
Le pagine che possiamo inserire in questo menu possono essere quelle che portano alle pagine statiche create in precedenza oppure quelle che mostrano i prodotti (suddivisi per categoria oppure quelli di una sola categoria), la lista dei produttori e dei venditori, oppure il pannello di login o per la registrazione di nuovi clienti. Aggiungiamo adesso le voci al menu. Torniamo su Menu–>Il mio negozio online–>Aggiungi nuova voce di menu. In Tipo di voce di menu troviamo le diverse voci possibili nella sezione JoomShopping. Per esempio andiamo a inserire il catalogo, cioè la pagina che mostrerà tutti i prodotti suddivisi per categoria. In questo caso dobbiamo scegliere la voce “Categories” e nelle impostazioni inserire “All” se vogliamo tutte le categorie oppure inserire l’id della singola categoria. Fatto questo nel front-end avremo una pagina come quella in figura.
Figura 4. Elenco di tutte le categorie sul front end
Cliccando dentro una categoria avremo la visione di tutti i prodotti di quella categoria con la foto, il prezzo (senza l’IVA e le spese di spedizione che sono indicati separati sotto), il nome del prodotto e i link per aggiungerlo al carrello o per vedere i dettagli.
Figura 5. I prodotti di una singola categoria
(clic per ingrandire)
Un utente iscritto al sito è automaticamente anche cliente della sezione del negozio. Per effettuare con successo un acquisto però è necessario inserire delle informazioni aggiuntive che non sono previste dal classico form di registrazione di Joomla ma solo da quello di JoomShopping. Le informazioni mancanti sono quelle di recapito e di contatto e un utente del sito può in qualsiasi momento inserirle o modificarle. Se creiamo il collegamento alla pagina degli utenti, comparirà un form per l’accesso e un pulsante da utilizzare per la registrazione al sito che porterà al riempimento di un form con tutte le informazioni richieste, come in figura.
Figura 6. Pagina di login e di registrazione dei clienti
Le altre pagine per un cliente sono quelle del carrello e la lista dei desideri. Il primo contiene tutti gli oggetti che faranno poi parte di un ordine, mentre il secondo può essere visto come una pagina dove inseriamo temporaneamente degli oggetti che vorremmo acquistare in un futuro. Queste due pagine sono simili tra loro: nella prima abbiamo in più il calcolo delle tasse e il link per procedere al pagamento, mentre nella seconda abbiamo il pulsante per aggiungere un oggetto al carrello. Un utente loggato al sito può anche aggiungere commenti ai prodotti, come in figura.
Figura 7. Inserimento di un commento per un prodotto
Dalla figura possiamo notare che oltre ai commenti i clienti possono inserire anche una valutazione dei prodotti attraverso una funzione Ajax che colora le stelle a seconda dei voti inseriti.
Quando un cliente decide di procedere con l’acquisto si apriranno dei moduli da compilare: il primo con i dati per i recapiti, il secondo per la scelta del tipo di pagamento e infine abbiamo il metodo di consegna. Una volta confermato l’ordine, a seconda del metodo di pagamento scelto, il cliente sarà reindirizzato al sito sicuro per la transizione dei soldi, per esempio quello di PayPal.
SEO e JoomShopping
All’inizio dell’articolo è stato detto che su JoomShopping la gestione del SEO è un punto forte: se andiamo in configurazione–>SEO avremo l’elenco di tutte le pagine create con il componente. Per ognuna di queste possiamo inserire i metadati per il titolo, per le parole chiave e per la descrizione, sia in italiano sia in inglese. Possiamo gestire il SEO del negozio in modo indipendente dal SEO del sito, puntando in questo modo a utilizzare le parole più adatte (che saranno quelle più ricercate dagli utenti) per questa sezione.
Nel corso degli anni sono stati sviluppati diversi plugin da integrare con JoomShopping e in questa parte dell’articolo ne vedremo alcuni. BxSlider Jshopping Last Products è basato sul plugin jQuery BxSlider e crea uno slider dove all’interno sono inseriti gli ultimi prodotti creati nel catalogo. Con BxSlider Jshopping Last Products possiamo avere uno slideshow verticale o orizzontale e con effetto dissolvenza. Tra i parametri del plugin possiamo impostare il numero dei prodotti, la visualizzazione della descrizione del prodotto, il prezzo e il link per vedere i dettagli. Esiste, sempre del solito sviluppatore, anche il modulo che mostra gli oggetti più acquistati o con rating maggiore: JT BxSlider Jshopping Top Rating.
Un plugin diverso dai precedenti ma altrettanto utile è Module Cart. Module Cart permette di avere sulle pagine del nostro sito il carrello con il riepilogo degli acquisti effettuati fino ad ora, come possiamo vedere in figura.
Figura 8. Utilizzo di Module Cart con JoomShopping
Autore:
Per utilizzare queste skin è necessario caricare le proprie immagini su un album di Google Photos utilizzando un profilo personale. Questo servizio di Google è semplice, veloce e gratuito. Ogni nuovo account Gmail è un nuovo account per Google Foto. E’ possibile creare illimitati album con illimitate immagini. ATTENZIONE: non supporta i nuovi album CONDIVISI di Google Foto, utilizzare quindi i normali album di Google Foto. Non è assolutamente necessario ridimensionare le immagini prima del caricamento su Google Photos, anzi è vivamente consigliato caricare le immagini a dimensioni originali senza perdere tempo a ridimensionarle. Si occuperà la Ozio Gallery di reperire poi automaticamente l’immagine delle dimensioni corrette sulla base dello spazio a disposizione della galleria nel vostro sito.
Dopo aver caricato le immagini originali in alta risoluzione nell’album di Google Photos è possibile integrarle sul sito Joomla. Dalla pagina del componente è necessario inserire le proprie credenziali "Google APIs". E' possibile generare gratuitamente le proprie credenziali dall'apposita console API di Google. Creare un nuovo progetto, nella "Schermata consenso OAuth" assicurarsi che sia presente l'indirizzo gmail ed indicare un nome. In "Credenziali" attivare quelle "ID client OAuth" e come Tipo di applicazione selezionare "Applicazione web". 
In "Origini JavaScript autorizzate" Inserisci gli indirizzi dei siti dove utilizzerai la Ozio Gallery (aggiungi sia il nome del sito con il www. e senza il www.). Potrai utilizzarla solo nei siti che autorizzi in questo elenco. Mentre puoi evitare di compilare i campo "URI di reindirizzamento autorizzati". Salva e crea le credenziali. Copia nella configurazione della Ozio Gallery i valori di "ID client" e "Client secret". Salvando questi valori nella Ozio Gallery vedrai apparire la riga con queste informazioni salvate. Devi ora autorizzare l'utente proprietario dell'account Google dell'album di Google Foto che vuoi utilizzare (può anche essere un utente Google differente da quello che ha generato le credenziali Google APIs). Premi quindi sul tasto verde con l'omino bianco ed accedi con l'utente Google proprietario dell'album su Google Foto ed autorizza la connessione. VEDI IL VIDEO TUTORIAL 
Valentina Bossini