PRODOTTI VETRINA HOMEPAGE ALLINEATI RESPONSIVE

[sildav]

Ciao a tutti, scrivo per risolvere una piccolezza estetica ma che mi sta uccidendo in quanto non riesco a risolvere. Il mio problema riguarda i prodotti in vetrina sulla homepage, ovvero la loro disposizione. In poche parole i prodotti non seguono una logica nella centratura nella colonna centrale del sito. Se guardate il mio sito www.cebsas.it noterete che i prodotti in base alla risoluzione dello schermo non sono centrati.

Qui al lavoro che uso uno schermo 15" con 1024x768 infatti compaiono con 3 prodotti in prima fila, che non sono cetrati nella colonna nel mezzo, poi uno nella seconda riga tutto a sinistra ed un'altro nella terza riga sempre sulla sinistra. Se guardo la stessa pagina con un monitor di misure maggiori esempio si sistema, ma non sempre.

Io vorrei che i prodotti rimanessero sempre centrati ed in oltre nel mio caso fossero mostrati con la prima riga da 3 prodotti e la seconda da 2 prodotti. Con monitor maggiori magari i prodotti possono adattarsi in base a quanto spazio è disponibile.

Qualcuno sa dove mettere le mani per risolvere questo problema di PS?

immagino in qualche css...ci ho provato varie volte ma senza risultati.

[ThemeBooster.com]

Ciao sildav.
Il problema potrebbe essere il poco spazio che ha la parte centrale del tuo sito (visto l'utilizzo delle 2 colonne laterali).
 

Nel file product-list.tpl (nella cartella /themes/default-bootstrap/) trovi il seguente codice (alla riga 49):
 

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else}

Quando una lista prodotti viene visualizzata nella Home Page (index) o nella pagina Prodotto, la disposizione dei prodotti è originariamente la seguente:

• un prodotto per dispositivi di piccola dimensione (es smartphone): col-xs-12 (risoluzione <768px)
• 3 prodotti per dispositivi di media-piccola dimensione (es tablet): col-sm-4 (risoluzione >= 768px)
• 4 prodotti per dispositivi di dimensione maggiore: col-md-3

Queste (col-xs-12 col-sm-4 col-md-3) sono alcune delle tipiche classi utilizzate dal framework (html, css, js) Bootstrap su cui si basa il tema di default di Prestashop.

 

Come primo intervento potresti cambiare il codice in:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-4{else}

Imponendo quindi 3 prodotti per linea anche per i dispositivi di dimensione maggiore.

 

Il file product-list.tpl presenta anche le seguenti regole:
 

{if $page_name !='index' && $page_name !='product'}
	{assign var='nbItemsPerLine' value=3}
	{assign var='nbItemsPerLineTablet' value=2}
	{assign var='nbItemsPerLineMobile' value=3}
{else}
	{assign var='nbItemsPerLine' value=4}
	{assign var='nbItemsPerLineTablet' value=3}
	{assign var='nbItemsPerLineMobile' value=2}
{/if}

Il commento che le precede chiarisce che queste regole servono ad impostare il numero di prodotti per riga (lista prodotti) ed in particolare il codice:
 

{else}
	{assign var='nbItemsPerLine' value=4}

che potrebbe essere modificato come segue per forzare 3 prodotti per linea:
 

{else}
	{assign var='nbItemsPerLine' value=3}

Il consiglio è, in ogni caso, di non modificare il tema di default (default-bootstrap) in quanto si potrebbero perdere tutte le personalizzazioni eseguite al prossimo aggiornamento della piattaforma Prestashop. Meglio duplicare il tema direttamente dal proprio pannello di amministrazione > Preferenze > Temi > Aggiungi Tema > Crea un nuovo Tema:

1. Specifica un nome per il tuo tema (ammessi spazi e lettere maiuscole)
2. Indica quali colonne siano predefinite
3. Digita il numero di prodotti per pagina
4. Specifica un nome per la cartella che conterrà i file del tuo tema (NON sono ammessi spazi e lettere maiuscole)
5. Seleziona da "Copia i file mancanti dal tema esistente": default-bootstrap
6. Attiva la modalità Responsive
7. Clicca il tasto Salva

[sildav]

Ringrazio per la spiegazione ed ho notato che dal tuo profilo è il tuo lavoro, non potevo avere una spiegazione migliore.

Chiedo visto che ci sono, se è possibile impostare il limite massimo di prodotti per riga come ho già fatto ma che si autoadatti in base alla larghezza a disposizione della riga, magari impostando esempio 4 o 5, ma se ci stanno solo 3 prodotti ve ne siano solo 3 senza mettere i mancanti nella riga sotto creando quell'effetto brutto che ho risolto con le tue spiegazioni.

Inoltre vorrei sapere se c'è la possibilità di centrare i prodotti dove la quantità è inferiore alla quantità massima della riga. Esempio nella mia pagina ho 5 prodotti in vetrina quindi viene la prima riga centrata da 3 mentre la seconda riga viene da 2 ma non è in centro, parte logicamente da sinistra. E' possibile mettere un align center in qualche .tpl??

 

Grazie ancora

[ThemeBooster.com]

Ciao.
Se ho compreso bene la tua prima richiesta, potresti provare a modificare lo stesso file product-list.tpl imponendo sempre lo stesso numero di prodotti per riga.
Da valutare la resa sui dispositivi più piccoli in quanto 3 prodotti per riga potrebbe non essere adatta.
 

Quindi da:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-4{else}

in
 

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-4 col-sm-4 col-md-4{else}

In questo modo, nella Home Page e nella pagina Prodotto, si imporanno sempre 3 prodotti per riga al framewrok Bootstrap.

 

Naturalmente dovranno essere modificate anche le regole:

{else}
	{assign var='nbItemsPerLine' value=4}
	{assign var='nbItemsPerLineTablet' value=3}
	{assign var='nbItemsPerLineMobile' value=2}
{/if}

in
 

{else}
	{assign var='nbItemsPerLine' value=3}
	{assign var='nbItemsPerLineTablet' value=3}
	{assign var='nbItemsPerLineMobile' value=3}
{/if}

Potrebbe essere necessaria qualche modifica nel file css product_list.css (nella cartella /css/).

Per la seconda richiesta ci sono dei tutorial in rete, come ad esempio questo: Bootstrap 3 responsive centered columns

[sildav]

Grazie mille...ci proverò