Modification présentation product_list

[philiber30]

Bonjour à tous,

 

Je travaille sur la version 1.4.5.1 avec le thème prestashop_new

 

Je souhaite présenter la liste des produits sur 3 colonnes.

J'ai modifié partiellement la liste en modifiant :

à savoir:

le product_list.tpl

• suppression de la div classe="content_price" que je ne veux pas présenter
  
• suppression de la div classe ="right_block" ce qui me permet de tout présenter dans la div classe="center_block"
  

le product_list.css

• redimensionnement des blocks
  

Je bloque à ce niveau a cause :

 

 

Dans le global.css

.clearfix:before,

.clearfix:after {

content: ".";

display: block;

height: 0;

overflow: hidden

}

.clearfix:after {clear: both}

.clearfix {zoom: 1}

 

Ainsi que dans le product_list.tpl

.clearfix:before,

.clearfix:after {

content: ".";

display: block;

height: 0;

overflow: hidden

}

.clearfix:after {clear: both}

.clearfix {zoom: 1}

 

Quelqu'un pourrait-il me conseiller???

Voir images jointe!!

 

Merci d'avance,

Philippe

[Grafics]

Au niveau des css, clear permet de stopper un float.

Pour que les block soit côte à côte, il faut un float, donc pas de clear

[philiber30]

Bonjour Grafics,

Merci pour ta réponse, je suis d'accord avec toi et cela serait très simple mais ce n'est pas le cas.

Je rencontre une classe "clear" et je suis bloqué par une boîte qui incorpore ma boîte produits!!!

et c'est cette boîte que je n'arrive pas à atteindre

Ou alors, incorporer une autre boîte produits dans cette boîte .

Regarde les 3 photos des indications firebug.

[philiber30]

Bonjour Grafics,

Merci pour ta réponse, je suis d'accord avec toi et cela serait très simple mais ce n'est pas le cas.

Je rencontre une classe "clear" et je suis bloqué par une boîte qui incorpore ma boîte produits!!!

et c'est cette boîte que je n'arrive pas à atteindre

Ou alors, incorporer une autre boîte produits dans cette boîte .

Regarde les 3 photos des indications firebug.

[Grafics]

Et si tu l'enlèves de ton fichier product-list.tpl ?

[philiber30]

Cela ne change rien!!

Original!!

<!-- Products list -->

<ul id="product_list" class="clear">

 

Modifié!!

<!-- Products list -->

<ul id="product_list" >

[Grafics]

Ce n'est pas au niveau de ta balise ul qui elle peut être avec une clear pour ne pas monter sur ce qu'il y a avant, mais bien au niveau de tes balises li

[philiber30]

Au niveau de la balise li, il n'y a qu'un "clearfixe"

 

<!-- Products list -->

<ul id="product_list" class="clear">

{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.index % 2}alternate_item{else}item{/if} clearfix"> */En supprimant cela donne les photos jointes, cela ne supprime pas les boîtes "first_item et last_item/*

<div class="left_block"> (Block pour le comparateur)

{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>

<div class="center_block">(Block image, prix, dénomination produit)

<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')}" 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>

<h3><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>

[Grafics]

C'est normal, le problème c'est que tu a une valeur (ou pas) width au niveau de ta balise li qui est trop faible, donc on retrouve un décrochement à chaque case.

Soit tu augmentes ta valeur au niveau de ta balise li soit tu diminues la valeur width d'un des composant à l'intérieur de ta balise li (soit le titre, soit la description... à voir)

[philiber30]

Salut Grafics,

 

Le problème ne venait pas de la balise li en fin de compte.

J'ai résolu le problème avec les margin-bottom et padding ainsi qu'en adaptant le width du center_block afin de me caler sur 2 colonnes.

Je vais essayer de peaufiner pour mettre la liste produits sur 3 colonnes.

J'aime bien le design du thème prestashop_new mais le css est bien plus compliqué que sur les anciens thèmes.

Merci pour ton aide,

J'espère avoir l'occasion de te retourner le service

Cordialement,

Philippe

PS: à quoi correspond cette propriété?? width="{$homeSize.width}" css3 ??? je pêche par ignorance.

Cela concerne la largeur des images dans la liste des produits

[Vinc3nzo]

Bonjour,

 

J'ai le même soucis, je désire affiché 6 produits sur la largue total du thème "prestashop_new" (soit 5 produits sur 980px)

 

j'ai réussi à attribué la largeur 980px pour "center_column", mais justement mon soucis je n'arrive pas ajouter un "float: left;"

 

En gros je désire faire une ligne horizontale de 5 produits comme sur mon homefeatured qui est parfait!

 

Merci d'avance à celui qui m'aidera...

[crea34]

PS: à quoi correspond cette propriété?? width="{$homeSize.width}" css3 ??? je pêche par ignorance.

Cela concerne la largeur des images dans la liste des produits

Comme tu le dis : ça concerne la largeur des images, en l'occurence ça indique que la largeur appelée est celle des images de la catégorie "home" définie dans tes préférences images

[edwett]

Bonjour,

 

En mettant le ul en display:inline, les li en float:left, vous serez sans doute obligé

de mettre un mi-height aux li.