Moduli e posizioni

A seconda del tema prescelto per il nostro sito, la struttura della home page, nonché delle pagine interne, è suddivisa in una serie di positions, che rappresentano i vari blocchi che compongono le pagine. In linea di massima la maggior parte dei temi è costituita dai blocchi quali:

l’header, il blocco superiore di ogni pagina che contiene generalmente il menu principale e uno slider di immagini (o una immagine fissa);

il content, la parte centrale della pagina che contiene articoli e descrizioni prodotti;

la column left e la column right, le rispettive colonne sinistre e destre che contengono menu, moduli prodotti e banner pubblicitari;

il footer, la parte terminale della pagina dove generalmente sono contenuti alcuni moduli e soprattutto le informazioni sull’azienda.

In ognuna di queste posizioni è possibile inserire dei moduli. Si tratta di piccoli applicazioni che consentono di utilizzare le varie funzionalità di PrestaShop, facilitando l’uso della piattaforma anche a chi non ha alcuna conoscenza di in ambito di programmazione. I moduli, così come dei veri e propri programmi, possono essere installati, disinstallati, attivati o disattivati.

La sezione Moduli e temi del sito ufficiale di PrestaShop, addons.prestashop.com , mette a disposizione una infinità di moduli, alcuni gratuiti, altri a pagamento. Inoltre, essendo PrestaShop un software open source, è possibile sviluppare dei moduli personalizzati.

Installazione di un modulo

Generalmente i moduli disponibili online sono contenuti in cartelle compresse di tipo .zip o .tar. Per installare un modulo è sufficiente scompattare lo zip e copiare la sua cartella interna nella directorymodules, presente nella root principale del sito, tramite collegamento ftp (basterà utilizzare in tal caso FileZilla).

Una via alternativa è quella di utilizzare la funzione apposita dal back office del portale. In tal caso portiamoci dal menu principale nella voce Moduli e facciamo clic su Moduli. In alto alla pagina, inModule:lista moduli, clicchiamo su Aggiungi nuovo. Poco in basso comparirà il box Aggiungi nuovo modulo. L’azione da compiere è quella di indicare la directory dove è presente la cartella zip o tar, semplicemente facendo clic su Scegli file. Individuata la cartella clicchiamo sul pulsante Carica modulo

Se tutto è andato a buon fine non ci resta che attivare il modulo. Portiamoci nuovamente in Moduli e nel campo ricerca digitiamo il nome dell’applicazione appena installata, selezioniamola e diamo Invio. Facciamo clic sul link Attiva, in basso alla descrizione, e il modulo sarà pronto per essere utilizzato.

A questo punto non resta che sistemare il modulo nella posizione voluta.

Posizionamento dei moduli

Come abbiamo anticipato nella pagine precedenti, in PrestaShop è possibile definire il posizionamento dei moduli nei vari blocchi messi a disposizione dal tema. Per alcuni blocchi vi sono delle posizioni predefinite, pertanto per poterne variare il posizionamento è necessario agire sul codice, per altri invece lo spostamento è davvero semplice.

La sistemazione dei moduli viene gestita all’interno della pagina Posizioni raggiungibile dalla voceModuli del menu principale nel back office.

Gli HOOK sono veri e propri ganci che posizionati all’interno del codice, hanno la funzione di agganciare i moduli inseriti all’interno della pagina Web. Nella pagina Posizioni, visualizzeremo la lista di tutti gli HOOK e i relativi moduli. Quando si vuole variare il posizionamento di un modulo basterà disinnestare il modulo dal relativo HOOK di appartenenza per poi innestarlo nell’HOOK voluto.

Per comprendere meglio, supponiamo di voler spostare il modulo Carrello nella colonna destra della pagina. Facciamo clic in alto alla pagina sul pulsante Sposta un modulo.

Dal menu a tendina Modulo selezioniamo Blocco carrello. Da Innnesta un modulo su selezioniamo la voce displayRightColumn (Right column blocks). Clicchiamo su Salva. Visualizziamo il front end del negozio e troveremo il blocco Carrello sul lato destro della pagina.

Così come per il blocco carrello, è possibile eseguire la stessa procedura per gli altri moduli che compongono le pagine, personalizzando a piacimento le posizioni.

È possibile anche variare la disposizione dei moduli all’interno delle stesse positions. Ad esempio nella lezione precedente, tramite l’Editor della home page abbiamo inserito, nella posizione content della pagina principale, una breve descrizione del nostro negozio e una immagine. Qualora volessimo che queste informazioni comparissero all’inizio della pagina, prima del blocco Prodotti in vetrina, dobbiamo procedere con lo slittamento in verticale del modulo Editor della home page. Per far ciò dalla paginaPosizioni portiamoci all’interno del box Home page content.

Per variare la posizione basterà agire sulle frecce comprese tra il numero che identifica il posizionamento e le icone dei moduli. Cliccando la freccia verso l’alto il modulo salirà di una pozione, al contrario, cliccando la freccia verso il basso il modulo scalerà di una posizione. Nel nostro caso, per visualizzare la descrizione del negozio prima del blocco Prodotti in vetrina, basterà cliccare un’unica volta sulla freccia verso l’alto associata al modulo Editor della home page.

A questo punto possiamo procedere nella personalizzazione della home page, disponendo i blocchi a nostro piacimento.

Il footer e il Blocco CMS

Dopo aver predisposto i moduli all’interno della pagine, passiamo alla personalizzazione del footer. Si tratta dell’ultima posizione disponibile in basso alla pagina. Generalmente all’interno del footer vengono inseriti dei moduli che riguardano le informazioni di vendita, le informazioni sui social network, le informazioni di contatto e altro ancora.

Ricordiamo che per le aziende è obbligatorio porre in evidenza nella home page la denominazione e ilnumero di partita IVA. Generalmente, in quasi tutti i siti, questi dati vengono contenute proprio del footer della pagina.

Per inserire queste informazioni dobbiamo dapprima configurare il modulo denominato Blocco CMS. Portiamoci nella pagina Moduli, raggiungibile dall’omonima voce del menu. Nel campo ricerca inseriamo la voce Blocco CMS e diamo Invio. Clicchiamo sul link Configura.

Nel primo box ci vengono indicati i blocchi che compaiano a sinistra e a destra della pagina. Notiamo immediatamente che sul lato sinistro è visualizzato il blocco denominato Informazioni che contiene al suo interno la pagine statiche afferenti alla categoria Home. Sulla colonna destra, invece, non è innestato alcun blocco.

Nel secondo box vengono indicati i link che devono comparire nel footer. Nel campo Informazioni footerinseriamo la denominazione della nostra azienda, la partita IVA ed una eventuale email di contatto. Eliminando il segno di spunta alla voce Mostra “Powered by PrestaShop” non consentiremo la visualizzazione del rispettivo link dalla home page. Clicchiamo su Salva.

Da Visualizza il mio negozio, portiamoci nel front end del sito e vedremo comparire le informazioni appena inserite nel footer della pagina.