Telefono: +39 392 33 73 731

Prestashop 1.5.4 da 3 a 2 colonne

Dopo aver installato Prestashop abbiamo il template default che appare a tre colonne. Attenzione che le istruzioni riportate di seguito sono valide solo per la vesione 1.5 di Prestashop, le versioni inferiori potrebbero non andare bene.

Nel pannello di amministrazione andate in Preferenze > Temi. Prestashop 1.5 ci permette di crere nuovi temi direttamente dal pannello. Click su Aggiungi nuovo in angolo a destra della pagina, e compilate la form come nella figura seguente.

 

Nuovo tema Prestashop


Potete scegliere i nomi che più vi piacciono, l'importante è selezionare il tema da cui prelevare i file mancanti (ne fa la copia), nel nostro caso è da selezionare il default per intero. Salvare e poi attivare questo template.

Prima di modificare i file dei vari template, assicuratevi che in Parametri Avanzati > Prestazioni sia configurato Cache Template con l'opzione "Ricompila i files del template se sono stati aggiornati" oppure " Durante lo sviluppo del sito è sempre utile avere uno di questi parametri.

Ora, per rimuovere la colonna destra (oppure la sinistra) in modo da avere più spazio per la parte centrale di contenuto, bisogna fare una modifica al codice, aprite footer.tpl e cercate le seguenti linee da rimuovere o commentare.

 

{*<div id="right_column" class="column grid_2 omega">
	{$HOOK_RIGHT_COLUMN}
</div>*}

Ho usato i commenti di Smarty, che è il motore di templating che usa Prestashop. Basta mettere il contenuto da nascondere tra le parentesi graffe con asterischi {* ...codice nascosto... *}. Dopo aver tolto la colonna dobbiamo aggiustare il contenuto centrale, per occupare lo spazio lasciato vuoto (grid_2), quindi in header.tpl center_column diventa class "grid_7" ed aggiungiamo anche "omega". Questo parametro serve a rimuovere il margine destro per l'ultima colonna. Il class "alpha" invece serve a rimuove il margine sinistro per la prima colonna.

<div id="center_column" class="grid_7 omega">

Di seguito riporto il codice se volessi rimuovere invece la colonna sinistra, si trova tutto solo in header.tpl.

{*<div id="left_column" class="column grid_2 alpha">
    {$HOOK_LEFT_COLUMN}
</div>*}
 
<!-- Center -->
<div id="center_column" class=" grid_7 alpha">

Facendo solo questa operazione tutti i moduli caricati in colonna vengono comunque processati dal server, per recuperare memoria bisogna rimuoverli da amministrazione sotto Moduli > Posizioni.
Potete usare il Live Edit, però attenzione che ho notato un bug: se rimuovete tutti i moduli compreso quello di CMS la configurazione non si salva. Quindi rimuovete tutti i moduli della colonna eccetto CMS, solo in questo caso si salva. Non preoccupatevi di CMS perché se non create contenuti resta vuoto.

I prodotti in vetrina

A questo punto il layout generale è come vogliamo, facendo un refresh della pagina dovremmo notarlo. Però qualcosa ancora non quadra: i prodotti in vetrina sono ancora dimensionati per uno spazio equivalente a "grid_5", dobbiamo adattarli alla mia grafica di 3 box per riga, ed allo spazio di "grid_7".
Questo modulo si trova in Moduli Front End, e si chiama "Prodotti in vetrina sulla homepage" (homefeatured) qui possiamo configurare il numero di prodotti che devono apparire, di default è 8. Nel mio caso invece voglio metterne fino a 6, cioè due righe da 3. Quindi intanto metto in configurazione 6, e salvo.

Poi devo agire sul css per aggiustare le misure dei box. Invece di modificare il file del modulo core di Prestashop dobbiamo sfruttare il sistema di override. Quindi nel mio template custom apro la cartella "css" e creo una directory "modules", poi dentro ne creo un'altra "homefeatured". All'interno di essa copio il file homefeatured.css, sarà questo che andrò a personalizzare. Questa procedura va adottata per tutti i css dei moduli che volessi cambiare.

In pratica qualcosa del genere: /themes/default_custom/css/modules/homefeatured/homefeatured.css
Grazie al sistema override va a sostituire: /modules/homefeatured/homefeatured.css

Infine, le dimensioni delle immagini vanno ingrandite, le controlliamo in Preferenze > Immagini. Le homefeatured sono in corrispondenza di home_default.

Nota: ho scoperto un trucco, nel tema default di Prestashop il bottone "add to cart" dei prodotti in vetrina è nascosto via CSS. Quindi in realtà basterebbe cambiare il display:none in display:block per farlo apparire.

#featured-products_block_center li .ajax_add_to_cart_button {display:block;}
#featured-products_block_center li span.exclusive {display:block;}

Le liste prodotti

In modo simile, anche le liste prodotti delle categorie sono ancora dimensionate per un "grid_5", e dobbiamo ritoccarle per un "grid_7".

In questo caso posso modificare il file: /themes/default_custom/css/product_list.css
Poi posso decidere di cambiare il codice del template product-list.tpl. Normalmente sarebbe una lista ma io preferisco una griglia, simile ai tre prodotti per riga che ho in vetrina. Per ottenere la griglia il codice è come il seguente. Osservate in particolare la riga 6 dove è scritto {if $smarty.foreach.products.iteration%3 == 0} il numero 3 sta a indicare il numero di prodotti per riga, voi aggiornate come preferite.

{if isset($products)}
	<!-- Products list -->
    <ul id="product_list" class="clearfix">
    {foreach from=$products item=product name=products}

	<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%3 == 0}last_row_item{else}item{/if}">
	    <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
	        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
	        {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
	    </a>
	    <p class="clear"></p>
	    <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}</a></h3>
		<div class="content_price">
		 
		    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
		                {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}


			{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
			                {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>
			                {else}
			                <span style="height:16px; margin: 5px 0; display: block"></span>
			{/if}
			{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)}
			        {if isset($static_token)}
			            <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
			        {else}
			            <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
			        {/if}                       
			    {else}
			        <span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
			    {/if}
			{/if}
			{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="checked"{/if} /> 
                    <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                </p>
			{/if}		
		</div>

	 
	</li>

    {/foreach}
    </ul>
	<!-- /Products list -->
{/if}

Mentre product_list.css è simile a questo:

ul#product_list {
	list-style-type: none
}
	#product_list li {
		text-align: center;
		float: left;
		width: 240px;
		padding: 10px 0;
		margin-bottom: 14px;
		margin-right: 15px;
		background-color: #f9f9f9
	}
	#product_list li.last_row_item {margin-right: 0;}
	
	#product_list li a {
		color: #374853;
		text-decoration: none
	}
	#product_list a.product_img_link {
	overflow:hidden;
	position:relative;
	float: left;
	display:block;
	}
	#product_list a.product_img_link img {
		display: block;
		vertical-align: bottom
	}
	
	#product_list li span.new {
		display: block;
		position: absolute;
		top: 15px;
		right:-30px;
		padding: 1px 4px;
		width: 101px;
		font-size:10px;
		color: #fff;
		text-align: center;
		text-transform: uppercase;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform: rotate(45deg);
		background-color: #990000
	}
	#product_list li h3 {
		padding:0 0 10px 0;
		font-size:13px;
		color:#000
	}

	#product_list li p.product_desc {
		overflow: hidden;
		padding:0;
		line-height:16px;
	}
	#product_list li p.product_desc,
	#product_list li p.product_desc a {
		color:#666;
	}

	#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
		display: block;
		font-weight: bold;
		margin: 5px 0;
		padding: 1px 5px;
		color: #990000;
		text-transform: uppercase
	}
	#product_list li .discount {
		display: inline-block;
		font-size: 10px;
		color: #fff;
		background: none repeat scroll 0 0 #9B0000
	}

	#product_list li .content_price {
		width: 142px;
		float: left;
	}
		#product_list li .price {
			display: block;
			padding-bottom: 15px;
			font-weight:bold;
			font-size: 16px;
			color:#990000
		}
		#product_list li span.availability {
			display:none; /* remove to show availability */
			color: #488C40
		}
	#product_list li .ajax_add_to_cart_button {
		padding-left: 20px
	}
	#product_list li .ajax_add_to_cart_button span {
		display: block;
		position: absolute;
		top: -1px;
		left: -12px;
		height: 26px;
		width: 26px;
		background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
	}
	#product_list li p.compare {padding-bottom: 0;margin-top: 10px;}

La scheda prodotto

Eccoci giunti alla scheda, anch'essa è dimensionata per grid_5. Dobbiamo ritoccare il file: /themes/default_custom/css/product.css

Basta semplicemente allargare la colonna dell'immagine e la colonna delle caratteristiche. L'immagine va ridimensionata come abbiamo visto nelle impostazioni immagini. Anche i thumbnails possono essere ridimensionati, bisogna solo stare attenti coi css per sistemare le dimensioni di tutto, compreso il contenitore che permette lo scrolling.

Il codice per le colonne l'ho corretto come segue:

#pb-right-column {
	float:left;
	width:370px;
}

#pb-left-column {
	float:left;
	margin-left:14px;
	width:370px;
}
Venerdì 03 Maggio 2013
(4 commenti)
CSS

Commento di luigi

Mercoledì 14 Agosto 2013

ciao, scusami per il disturbo io non ho capito questo passaggio " Le liste prodotti " tu dici di: " In modo simile, anche le liste prodotti delle categorie sono ancora dimensionate per un "grid_5", e dobbiamo ritoccarle per un "grid_7". In questo caso posso modificare il file: /themes/default_custom/css/product_list.css " io sono andato in product_list.ccs ma non trovo niente riguardo a "grid_5" quindi non capisco cosa aggiungere o modificare.

Poi il resto del passaggio, questa riga " {if $smarty.foreach.products.iteration%3 == 0} " la devo cambiare o
aggiungere ?

grazie ancora

Risposta di Marco

Non trovi .grid_5 o .grid_7 nei css specifici dei template, quelle regole sono definite in un altro css, apposta per fare le griglie, è valido per l'intero tema e non lo devi toccare. Se leggi bene, quando ne parlo modifico solo l'HTML, gli attributi "class=".  Nel passaggio che indichi invece intendevo dire che "siccome siamo passati da 5 a 7 e ci avanza 2" allora dobbiamo addattare i vari stili di product_list.css a quello spazio, non so come è il tuo design, in base a come devi fare, armato di pazienza ti calcoli le misure degli elementi, padding, margin, border, e ti metti a posto i vari elementi (box contenitore, immagine del thumbnail, descrizione, bottoni, ecc...) con le misure giuste. Aiutati con Firebug.

Per il discorso della riga con il codice Smarty, ho solo specificato il fatto che il numero 3 corrisponde al numero di prodotti per riga, se ne vuoi 4, metti 4. Il codice è quello che riporto nel riquadro sotto, la riga è inclusa li, la numero 6.

Commento di luigi

Mercoledì 14 Agosto 2013

ciao, allora ho fatto tutto come hai detto, però ho questo problema:

1 Infine, le dimensioni delle immagini vanno ingrandite, le controlliamo in Preferenze > Immagini. Le homefeatured sono in corrispondenza di home_default. che dimensione dare ?

2 il mio sito è qui in prova per vedere come funziona ma nel blocco homefeatured si vede così eccolo il link se posso metterlo http://prestashoprova.wesped.es/iotoscana/index.php

grazie del tuo aiuto

Risposta di Marco

Dunque:

1) non ho una misura precisa, perché dipende sempre dal tuo design: quanto spazio hai tra le immagini, bordo, padding, e poi se ne hai messe 3 oppure 4 su una riga. Quindi in base a quel che ti risulta dal tuo caso specifico, fai un calcolo di quanto viene l'immagine e metti la misura in preferenze -> immagini. Sicuramente è sbagliata cambiando da grid_5 a grid_7, hai esattamente 2/9 di spazio in più da distribuire tra le width delle tue immagini (sono 9 le colonne della griglia in Prestashop).

2) ho provato a controllare ma vedo il tuo sito a 3 colonne, forse hai fatto un roll back?

Spero di averti chiarito qualche dubbio, purtroppo per fare questo tipo di operazioni serve saper muoversi con i css e l'architettura dei template di Prestashop. Ciao

Commento di valerio

Mercoledì 16 Ottobre 2013

ho prestashop 1.5.4.1. Non riesco ad attivare la colonna destra. Come posso fare?
Ciao
saluti

Risposta di Marco

Prestashop viene fornito con il tema predefinito già completo di colonna destra, nel mio articolo spiego il contrario, cioè togliere una colonna dal tema.

Se non hai la colonna destra nella tua installazione le cause possono essere molteplici: hai installato un tema di terze parti? potrebbe essere un tema senza colonna destra oppure difettoso.
Oppure hai fatto varie modifiche alle posizioni dei moduli, togliendoli dalla colonna destra? potrebbe non esserci più nulla in quella posizione.

Comunque nel template l'hook per richiamare i moduli della colonna destra è questo: {$HOOK_RIGHT_COLUMN}

Commento di Fabio

Domenica 13 Aprile 2014

Perché non mettere il template con 2 colonne in download?

Risposta di Marco

Nel mio tutorial ho preferito dare la canna da pesca invece del pesce, ci sono infatti vari file e configurazioni da ritoccare per completare l'opera, una volta capito il funzionamento si può operare sul tema default oppure su altri.

Questo articolo ormai è vecchio, ad oggi consiglio di non fare i siti a dimensione fissa, ma di utilizzare un tema responsive.

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento