Nella scorsa puntata della guida Prestashop abbiamo disegnato la nostra galleria prodotti personalizzata.
Abbiamo progettato il box prodotto nei minimi dettagli, ed abbiamo deciso che vogliamo assegnare alla galleria una struttura di due prodotti per riga.
 
Ora che la parte grafica è pronta, possiamo cominciare a lavorare nel codice.
Vediamo come procedere.
 

Da dove cominciamo?

 
Ricordi cosa abbiamo fatto due puntate fa?
Oggi faremo esattamente la stessa cosa, andremo a modificare gli stessi files, con la differenza che stavolta abbiamo il nostro bel progettino da riprodurre:

Quindi sappiamo con estrema precisione cosa fare.
 
Dovremmo sempre progettare e disegnare con il nostro programma di grafica preferito ogni singolo dettaglio del layout, anche quello più insignificante. Così, quando lavoreremo con il codice, avremo la strada spianata, non dovremo fare prove su prove, eviteremo di combinare pasticci e impiegheremo molto meno tempo. E i risultati ci daranno molte più soddisfazioni.
 
Veniamo al dunque.
 
Prima di tutto carichiamo la cornice del box all’interno della cartella img del tema.

Se non l’hai già fatto, in fondo allo scorso tutorial trovi il link per scaricare la cornice più tutto il lavoro di progettazione grafica della galleria prodotti.
 
Le dimensioni della cornice quadrettata che abbiamo disegnato sono 258px x 258px.
Il box che si trova all’interno, quello in cui verranno posizionati i contenuti, è di 218px x 218px.
Di conseguenza lo spessore della cornice è di 20px.
 
Vediamo come utilizzare queste informazioni.
 

Costruiamo il box

 
Come abbiamo visto due puntate fa il codice html della galleria prodotto si trova nel file product-list.tpl, ed eliminando momentaneamente tutti i comandi Smarty otterremo la seguente struttura:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul id="product_list" class="clear">
      <li class="ajax_block_product>
            <div class="center_block">
                  <a href="#"><img src="#" /></a>
                  <h3><a href="#">Nome prodotto</a></h3>
                  <p class="product_desc">Descrizione</p>
            </div>
            <div class="right_block">
                  <div>
                        <span class="price">5 €</span>
                        <br />
                        <span class="availability">Disponibile</span>
                  </div>
                  <a class="button exclusive">Aggiungi al carrello</a>
                  <a class="Vai">Vai</a>
                  <p class="compare">
                        <label type="checkbox" id="comparator_item">
                        </label><label for="comparator_item">Selezionare per confontare</label>
                  </p>
            </div>
      </li>
</ul>

Ora che abbiamo la visuale completa della struttura html del nostro box, rechiamoci nel file product_list.css e iniziamo a modificare le regole di stile.
 
Per prima cosa modifichiamo il tag li.
 

1
2
3
4
5
6
7

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

Se proviamo a visualizzare l’anteprima noteremo che regna il caos:

 

Ridimensioniamo l’immagine

 
Il primo elemento che dobbiamo sistemare all’interno del box è l’immagine del prodotto.
Come sappiamo la categoria di immagini che viene utilizzata nella galleria prodotti è home.
Nel back-office clicchiamo su Preferenze – Aspetto, e modifichiamo le dimensione della categoria home da 200×200 a 110×110.

In questo caso non sarà necessario ricaricare l’immagine, poiché le dimensioni di partenza erano maggiori di quelle che abbiamo impostato. Di conseguenza non ci sarà una perdita di qualità.
 

Riposizioniamo gli elementi

 
Adesso possiamo iniziare a disporre gli elementi all’interno del nostro box.
Se osserviamo l’immagine qui sopra e la confrontiamo con il box che vogliamo ricostruire, noteremo che dobbiamo assolutamente andare a sistemare il codice html.
 
Come sappiamo ogni box è costituito da un tag li, che al suo interno è diviso in due div: quello posizionato a sinistra contiene il titolo e l’immagine, in quello posizionato sulla destra si trovano tutti gli altri contenuti.
Questa impostazione non è compatibile con la struttura che vogliamo riprodurre.
 
Apriamo il file product-list.tpl
 
Per prima cosa spostiamo il titolo h3 fuori dal div che lo contiene, e lo posizioniamo sopra:
 

1
2
3
4

<h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
 
<div class="center_block">
</div>

Ora, partendo dal fondo della pagina, cancelliamo tutta la parte di codice relativa alla comparazione (Selezionare per confrontare).
 

1
2
3

{if isset($comparator_max_item) && $comparator_max_item}
					<p class="compare"><input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked{/if}/> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>
				{/if}

Nella riga che si trova appena sopra, modifichiamo la scritta Vai (che avevamo già modificato qui) in Visualizza dettagli
 

1

<a class="vai" href="{$product.link|escape:'htmlall':'UTF-8'}" title="Visualizza dettagli">Visualizza dettagli</a>

Andando ancora un po’ più su, modifichiamo la scritta Aggiungi al carrello in Acquista, in entrambi i carrelli, sia quello normale che quello ajax
 

1
2
3
4
5

{if ($product.allow_oosp || $product.quantity > 0)}
						<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&amp;id_product={$product.id_product|intval}{if isset($static_token)}&amp;token={$static_token}{/if}" title="{l s='Add to cart'}">Acquista</a>
					{else}
							<span class="exclusive">Acquista</span>
					{/if}

Infine, scorrendo un po’ più in su la pagina, eliminiamo tutta la funziona Smarty che ci restituisce la disponibilità del prodotto:
 

1

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

Svuotiamo il compilatore e vediamo cosa abbiamo combinato:

Per quanto riguarda il posizionamento degli elementi ci siamo quasi, però direi di spostare Visualizza dettagli sopra il pulsante Acquista
 

1
2
3
4
5
6
7

<a class="vai" href="{$product.link|escape:'htmlall':'UTF-8'}" title="Visualizza dettagli">Visualizza dettagli</a>
 
					{if ($product.allow_oosp || $product.quantity > 0)}
						<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&amp;id_product={$product.id_product|intval}{if isset($static_token)}&amp;token={$static_token}{/if}" title="{l s='Add to cart'}">Acquista</a>
					{else}
							<span class="exclusive">Acquista</span>
					{/if}

Ecco l’anteprima:

 

Diamo un senso a questo caos

 
Apriamo product_list.css alla riga 22, e sistemiamo l’aspetto del titolo: riduciamo il font-size a 32px, impostiamo un margine di 20px, allineiamo il testo al centro ed abbassiamo di qualche tonalità il marrone del link.
 

1
2
3
4
5
6
7
8
9
10

ul#product_list li h3 { 
	font-family: LeckerliOne;
	font-size: 32px; 
	margin: 20px;
	padding: 0;
	text-align: center;
}
ul#product_list li h3 a{ 
	color: #774C38;
}

Ecco l’anteprima:

Ora occupiamoci del prezzo. La sua regola css si trova in global css alla riga 665. Potremmo anche definirlo in product-list.tpl, ma modificando la regola generale tutte le volte che verrà mostrato un prezzo avrà questa formattazione.
 
Dunque apriamo global.css e modifichiamo la regola alla classe .price in questo modo:
 

1
2
3
4
5
6
7

.price, .price-shipping, .price-wrapping {
	color: #CC3148;
	font-size: 20px;
	font-family: Verdana;
        font-weight: bold;
 
}

Il prezzo è sistemato, ma nel posizionamento dei prodotti c’è comunque qualcosa che non mi convince.
E potremmo impazzire per ore cercando di sistemarlo con il css ma non verremmo mai a capo.
 
Torniamo un attimo nel file tpl.
Dobbiamo necessariamente far finire il div right_block alla fine di Visualizza dettagli, ed inserire il pulsante Acquista in un nuovo div.
 
Modifichiamo il codice in questo modo, a partire da Visualizza dettagli:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 <a class="vai" href="{$product.link|escape:'htmlall':'UTF-8'}" title="Visualizza dettagli">Visualizza dettagli</a>
 
 
            <!--Fine parte destra box prodotto-->
 
<div class="clear"></div>
 
            <!--Inizio pulsante Acquista-->
            <div class="acquista">
				{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity < = 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
					{if ($product.allow_oosp || $product.quantity > 0)}
						<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&amp;id_product={$product.id_product|intval}{if isset($static_token)}&amp;token={$static_token}{/if}" title="Acquista">Acquista</a>
					{else}
							<span class="exclusive">Acquista</span>
					{/if}
				{/if}
            </div>
			<!--Fine Pulsante Acquista-->

Tra la fine del div right_block e l’inizio del pulsante Acquista abbiamo inserito il div clear, che ha la funzione di annullare il float dei due div precedenti ripristinando così il normale flusso degli elementi.
 
Torniamo a product_list.css e scriviamo una regola per la classe clear:
 

1
2
3

.clear{
     clear: both;
}

Guarda com’è cambiato il posizionamento degli elementi all’interno del nostro box:

Adesso sistemiamo i due div center_block e right_blok lasciano il giusto margine dalla cornice del box:
 

1
2
3
4
5
6
7
8
9

ul#product_list li div.center_block {
	float: left;
	margin-left: 25px;
}
ul#product_list li div.right_block {
	float: right;
	text-align: right;
	margin-right: 25px;
}

Visualizzando l’anteprima nel browser notiamo che il right_block va giù.

Questo accade perché, impostando un margine di 25px, la dimensione totale dei due div diventa superiore a quella del box che li contiene, di conseguenza il secondo si posiziona sotto.
 
Per risolvere questo inconveniente torniamo un attimo nel file tpl e spezziamo con un br la scritta Visualizza dettagli:
 

1

 <a class="vai" href="{$product.link|escape:'htmlall':'UTF-8'}" title="Visualizza dettagli">Visualizza<br /> dettagli</a>

Ecco qui:

Adesso formattiamo la scritta Visualizza dettagli:
 

1
2
3
4
5
6
7
8

ul#product_list li a {
	text-decoration: none;
}
ul#product_list li a.vai {
	color: #774C38;
	font-size: 14px;
	font-family: "Century Gothic";
}

Bisognerebbe lasciare circa 25px di spazio tra Visualizza dettagli e il prezzo.
Ti sfido a provare ad inserire un margin o un padding, io non sono riuscita a cavarne un ragno dal buco, perciò ho pensato di risolvere la questione creando un div “cuscinetto” appena sopra Visualizza dettagli
 

1
2

<div class="cuscinetto"></div>
                <a class="vai" href="{$product.link|escape:'htmlall':'UTF-8'}" title="Visualizza dettagli">Visualizza<br /> dettagli</a>

E gli ho assegnato un altezza di 25px:
 

1
2
3

ul#product_list li .cuscinetto {
	height: 25px;
}

Sicuramente esistono metodi più intelligenti ed eleganti, ma al momento non mi viene in mente nient’altro.
In ogni caso abbiamo raggiunto il risultato desiderato.

E il pulsante Acquista?
Ce ne occuperemo nel prossimo tutorial.
 
Qui sotto trovi il link per scaricare il codice sorgente del lavoro svolto in questo tutorial.