Dopo una lunga pausa estiva ricomincia, a grande richiesta, la nostra guida Prestashop.
 
Ci eravamo lasciati parlando della galleria prodotti, negli ultimi tutorial abbiamo:
1. Analizzato il codice della galleria prodotti apportando semplici modifiche;
2. Disegnato con Fireworks la nostra galleria prodotti personalizzata;
3. Trasformato il box prodotto di default in quello disegnato da noi.
 
Oggi apporteremo le ultime modifiche alla galleria prodotti per renderla esattamente uguale a quella che abbiamo progettato.
 
Ricapitolando eravamo arrivati qui:

 

Il pulsante Acquista

 
Questo è il box che abbiamo progettato:

L’ultimo elemento che dobbiamo modificare per completare il nostro box è il pulsante Acquista, in questo momento abbiamo ancora il pulsante verde del tema di default.
 
Analizziamo con Firebug il codice html del pulsante:
 

1
2
3

<div class="acquista">
        <a class="button ajax_add_to_cart_button exclusive" href="#" title="Acquista">Acquista</a>
</div>

Apriamo il file product_list.css e scriviamo le regole di stile del div acquista per riprodurre il pulsante marrone con gli angoli arrotondati:
 

1
2
3
4
5
6
7
8
9
10

div.acquista {
	width: 123px;
	height: 36px;
	background-color: #774C38;
	margin-left: auto;
	margin-right: auto;
	border-radius: 9px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

Guardiamo cosa accade visualizzando un’anteprima:

Il pulsante marrone è stato realizzato correttamente, ma il pulsante verde di default è ancora al suo posto.
Cosa succede?
 
La risposta è molto semplice, analizzando con firebug il tag a vediamo che la classe a.exclusive ha come immagine di sfondo proprio quel pulsante verde.
A questo punto abbiamo due strade: o eliminiamo quell’immagine di sfondo dalla classe a.exclusive, oppure scriviamo una regola css per il selettore “div.acquista a.exclusive” in cui impostiamo nessuna immagine di sfondo (background-image: none).
 
Se pensiamo che il pulsante verde potrà tornarci utile in altre pagine del sito ci converrà optare per la seconda opzione, se invece siamo sicuri che non vogliamo vedere mai più quel pulsante verde optiamo per la prima opzione.
Io proporrei senza remore la prima opzione, apriamo il file global.css alla riga 628 e modifichiamo tutte le regole relative ai pulsanti exclusive in questo modo:
 

1
2
3
4
5

/* exclusive button */
input.exclusive, input.exclusive_disabled, a.exclusive, span.exclusive { background-image: none; }
input.exclusive_mini, input.exclusive_mini_disabled, a.exclusive_mini, span.exclusive_mini { background-image: none; }
input.exclusive_small, input.exclusive_small_disabled, a.exclusive_small, span.exclusive_small { background-image: none; }
input.exclusive_large, input.exclusive_large_disabled, a.exclusive_large, span.exclusive_large, span.exclusive_large_disabled { background-image: none; }

Ora non ci resta che formattare la scritta “Acquista“.
Torniamo in product_list.css e, sotto la regola relativa al div acquista, aggiungiamo la seguente regola:
 

1
2
3
4
5
6
7

div.acquista a.exclusive {
	font-family: "Century Gothic";
        font-weight: normal;
	font-size: 22px !important;
	color: #EAD7B2 !important;
	padding-top: 5px;
}

Osservando l’anteprima notiamo che il pulsante è troppo attaccato al bordo del box, ed anche aggiungendo un margin-bottom la situazione non cambia.
L’unica soluzione è ridurre un po’ la dimensione del font e i margini del nome prodotto:

Andiamo alla riga 33 di product-list.css e modifichiamo la regola relativa al tag h3 in questo modo:
 

1
2
3
4
5
6
7

ul#product_list li h3 { 
	font-family: LeckerliOne;
	font-size: 30px; 
	margin: 20px 20px 5px 20px;
	padding: 0;
	text-align: center;
}

Finalmente il nostro box prodotto ha assunto l’aspetto desiderato.

 

Disponiamo i box

 
Una volta completata la messa in codice del box prodotto non ci resta che allineare due box per riga, come nel progetto che abbiamo disegnato.
 
Per prima cosa inseriamo un nuovo prodotto, seguendo tutti i passaggi illustrati in questo articolo.
Dopo aver salvato visualizziamo un’anteprima:

I due box risultano perfettamente allineati, perché quando abbiamo scritto il codice del box prodotto abbiamo impostato un float left per l’elemento li.
Tuttavia la visione d’insieme è un disastro totale.
 
Innanzitutto eliminiamo la scritta Nuovo accanto al nome del prodotto.
Nel backoffice apriamo la scheda Preferenze, selezioniamo la voce Prodotti, ed inseriamo il valore zero all’interno dei due campi riportati nello screenshot qui sotto:

Anche il secondo box è sistemato:

Ora dobbiamo separare i due box lasciando un po’ di margine al centro.
Apriamo il file product_list.css alla riga 6, ed aggiungiamo un margin-left di 20px alla regola relativa all’elemento li:
 

1
2
3
4
5
6
7
8

ul#product_list li {
	float: left;
	width: 258px;
	height: 258px;
	background: url(../img/Box.png) no-repeat;
	margin-left: 20px;
 
}

Ecco qui il risultato:

Aggiungiamo altri due prodotti, salviamo e visualizziamo l’anteprima:

Torniamo in product_list.css ed aggiungiamo un margin-bottom per separare le due file di box:
 

1
2
3
4
5
6
7
8
9

ul#product_list li {
	float: left;
	width: 258px;
	height: 258px;
	background: url(../img/Box.png) no-repeat;
	margin-left: 20px;
	margin-bottom: 20px;
 
}

La disposizione dei box è sistemata:

Noi abbiamo progettato una struttura di due box per riga, ma naturalmente allo stesso modo potremmo realizzare strutture di tre o quatto box per riga.
L’importante è progettare la struttura in ogni minimo dettaglio con il nostro programma di grafica preferito prima di mettere mano al codice.
 

Il comparatore

Al fine di conferire un aspetto gradevole e sensato alla pagina, l’ultimo elemento da ritoccare è il comparatore.
 
Innanzitutto direi di eliminare il pulsante “Confronta” in fondo alla pagina: questo pulsante ha la funzione di operare un confronto tra alcuni prodotti, che vengono scelti tramite le apposite caselle di selezione:

Dato che abbiamo eliminato queste caselle di selezione dai nostri box, il secondo punsante di confronto non ha più ragione di esistere.
 
Apriamo il file category.tpl ed in fondo alla pagina, all’interno della funzione in cui vengono inclusi i vari files, eliminiamo il secondo product-compare.
I file da includere devono essere i seguenti:
 

1
2
3
4
5
6
7
8

{if $products}
				{include file="$tpl_dir./product-compare.tpl"}
				{include file="$tpl_dir./product-sort.tpl"}
				{include file="$tpl_dir./product-list.tpl" products=$products}
				{include file="$tpl_dir./pagination.tpl"}
			{elseif !isset($subcategories)}
				<p class="warning">{l s='There are no products in this category.'}</p>
			{/if}

Per comprendere la dinamica del product-sort e il significato della funzione che abbiamo appena modificato, ti invito a leggere questo articolo.
 
Ora che abbiamo eliminato il secondo pulsante di confronto dobbiamo dare un’aspetto più carino al product-sort. Prima di procedere però dobbiamo svuotare il compilatore, come tutte volte che andiamo a modificare un file tpl.
 
La prima operazione da compiere è lasciare il giusto margine tra il comparatore e gli elementi che si trovano sopra e sotto.
Torniamo in product_list.css e modifichiamo la prima regola impostando un margin-top di 40px per l’elemento ul:
 

1
2
3
4

ul#product_list { 
	list-style-type: none;
        margin-top: 40px;
}

Ora apriamo il file product-compare.tpl ed aggiungiamo la classe prod_compare al paragrafo che contiene i tag input, in modo da potergli assegnare una regola css ad hoc:
 

1
2
3
4
5
6

<form method="get" action="{$link->getPageLink('products-comparison.php', true)}" onsubmit="true">
		<p class="prod_compare">
		<input type="submit" class="button" value="{l s='Compare'}" style="float:right" />
		<input type="hidden" name="compare_product_list" class="compare_product_list" value="" />
		</p>
	</form>

Svuotiamo il compilatore, dopo di che apriamo il file global.css.
Assegniamo un margin-top di 30px al paragrafo prod_compare:
 

1
2
3
4

/*Product Compare*/
body#category #columns #center_column form p.prod_compare {
	margin-top: 40px;
}

In questo modo la pagina ha un aspetto più ordinato:

Per dare un aspetto ancor più coerente al layout del negozio dovremmo sistemare il pulsante Confronta, dato che quel bottone grigio è davvero un pugno in un occhio.
Potremmo assegnargli delle regole css, e magari farlo assomigliare ai pulsanti Acquista, oppure potremmo dare libero sfogo alla nostra fantasia.
Ma ti svelerò un segreto: anche eliminando il pulsante Confronta il comparatore funzionerà alla perfezione.
 
In questo caso però non dobbiamo eliminare il product-comapre dalla funzione contenuta nel file category.tpl, come abbiamo fatto per il secondo pulsante.
Il file product-compare.tpl, infatti, deve essere incluso affinché il comparatore funzioni. Di conseguenza ci limiteremo ad assegnare un display:none al pulsante:
 

1
2
3
4
5
6
7

/*Product Compare*/
body#category #columns #center_column form p.prod_compare {
	margin-top: 40px;
}
body#category #columns #center_column form p.prod_compare input.button {
	display: none;
}

Ecco come appare adesso la pagina:

Con questo tutorial abbiamo terminato l’argomento della pagina categorie e della galleria prodotti, dal prossimo appuntamento inizieremo a lavorare nella pagina del singolo prodotto.
 
Qui sotto, come di consueto, trovi il link per scaricare il files su cui abbiamo lavorato in questo tutorial.