Jump to content

Produits en grille -> pb, help ! [Résolu]


bigo
 Share

Recommended Posts

Bonjour,

 

Je suis entrain de modifier le template par défaut de prestashop en local et je bloque sur un point, je souhaite que l'affichage des produits soit en grille par défaut, j'ai modifier le code de la façon suivante cependant un problème d'affichage subsiste :

 

 

 

product-list.tpl :

 

 

{/foreach}

</ul>

<br clear="all" />

 

voici tout ce que j'ai modifier dans le tpl.

 

 

product_list.css :

 

 

#product_list li {

float: left;

width: 25%;

}

 

#product_list li a {

color: #4a4a4a;

text-decoration: none

}

#product_list li .product_title_link {

background:url(../img/arrow_right_2.png) no-repeat 100% 4px transparent;

padding-right: 8px;

}

 

#product_list a.product_img_link {

margin-left: 5px;

}

 

#product_list li h3 {

text-align: center;

font-size:13px;

color:#4a4a4a;

padding:5px 0 10px 0;

}

 

#product_list li .right_block {

text-align: center

}

 

#product_list li .price {

margin-bottom: 15px;

font-weight:bold;

font-size: 18px;

color:#3c9806

}

 

#product_list li span.availability {

color: #488C40;

}

 

 

Tout est parfait si ce n'est que sur certaines lignes (pas toutes) l'affichage ne se fait pas bien, voici un screenshot : post-305724-0-42464800-1349253400_thumb.png

 

Sur certaines lignes j'ai mes 4 produits nickel et sur d'autre j'en ai qu'un, ou deux,

Ce serait top si quelqu'un pouvait m'aiguiller sur une solution, merci d'avance :)

Edited by bigo (see edit history)

Share this post


Link to post
Share on other sites

Hello, super merci pour cette astuce

 

ça m'évite de payé un module :P

 

Par contre j'ai fait quelques modifications pour régler certaines choses, comme par exemple le nom au-dessus de l'image des produits

 

Voici le code a changer dans product-list.tpl

 

<div class="center_block">

<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</a></h3>

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

<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>

 

j'ai donc simplement mis la ligne H3 en premiers :P

 

Par contre j'aimerais bien trouver comment faire pour centré correctement l'image dans le block, j'ai réussi avec le texte mais l'image non (j’ai juste rajouté un margin de 10px pour donner l'illusion :P )

 

Qui pourraient m’aider ? Le lien de mon site se trouve en signature

 

Merci d'avance

 

johan

Share this post


Link to post
Share on other sites

Hello, super merci pour cette astuce

 

ça m'évite de payé un module :P

 

Par contre j'ai fait quelques modifications pour régler certaines choses, comme par exemple le nom au-dessus de l'image des produits

 

Voici le code a changer dans product-list.tpl

 

 

 

j'ai donc simplement mis la ligne H3 en premiers :P

 

Par contre j'aimerais bien trouver comment faire pour centré correctement l'image dans le block, j'ai réussi avec le texte mais l'image non (j’ai juste rajouté un margin de 10px pour donner l'illusion :P )

 

Qui pourraient m’aider ? Le lien de mon site se trouve en signature

 

Merci d'avance

 

johan

 

Salut Johan,

 

Pour centrer l'image il faut un margin : 0 auto ; et un width: largeur de l'image; pour permettre au "margin" de calculer le centrage du block...

 

 

 

#product_list a.product_img_link {


border: 1px solid #CCCCCC;
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 122px;
}

 

V++

 

Atch

Share this post


Link to post
Share on other sites

Hello Atch,

 

Merci pour cette petite astuce, j'ai donc fait les modifications comme tu me la dit, mais je n'ai constatez aucun changement.

 

Toute fois j'ai laisser tes modifications, en rajoutant une autre dans cette partie la

 

#product_list a.product_img_link {

margin-left: 15px;

}

 

En fait je ne sais pas pourquoi mais j'ai 2 lignes avec #product_list a.product_img_link {

 

L'une contient ce que j'ai mis ici au dessus et l'autre contient celà

 

#product_list a.product_img_link {

overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;

border: 1px solid #CCCCCC;

 

et voici l'entièreté du css, étrangement celà fonctionne maintenant :P

 

ul#product_list {

list-style-type: none

}

#product_list li {

margin-bottom: 14px;

padding: 12px 8px;

border: 1px solid #eee;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px

}

#product_list li a {

color: #374853;

text-decoration: none

}

 

#product_list li .left_block {

float:left;

/*padding-top:58px;

width:15px

}

#product_list li .left_block .compare label {display:none;}

 

#product_list li p.compare input {

vertical-align: text-bottom

}

 

#product_list li .center_block {

float: left;

padding:0 0px;

text-align: center;

/*width: 342px;/* 356 */

border-right:1px dotted #CCCCCC

}

#product_list a.product_img_link {

overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;

border: 1px solid #CCCCCC;

}

#product_list a.product_img_link img {

display: block;

vertical-align: bottom;

margin: 0 auto;

width: 122px;

 

}

#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

height: 130px;

}

#product_list li a {

color: #000;

text-decoration: none;

}

 

#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 .right_block {

position:relative;

float: left;

width: 145px;

text-align: right

}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

display: block;

font-weight: bold;

color: #990000;

text-transform: uppercase

}

#product_list li .discount {

position:absolute;

top:0;

right:0;

display: inline-block;

font-weight: bold;

padding: 1px 5px;

font-size: 10px;

color: #fff;

text-transform: uppercase;

background: none repeat scroll 0 0 #9B0000

}

#product_list li .online_only {

margin:0 0 10px 0

}

#product_list li .content_price {

margin:20px 0 10px 0;

}

#product_list li .price {

display: block;

margin-bottom: 15px;

font-weight:bold;

font-size: 18px;

color:#990000

}

#product_list li span.availability {

display:none;

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

display: block;

margin-top:15px;

padding:0 10px;

border:none;

font-weight:bold;

color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent

}

#product_list li .lnk_view:hover {text-decoration:underline}

 

 

#product_list li {

float: left;

height:300px;

width: 29%;

text-align: center;

}

 

#product_list li a {

color: #4a4a4a;

text-decoration: none

}

#product_list li .product_title_link {

background:url(../img/arrow_right_2.png) no-repeat 100% 4px transparent;

padding-right: 8px;

}

 

#product_list a.product_img_link {

margin-left: 15px;

}

 

#product_list li h3 {

text-align: center;

font-size:13px;

color:#4a4a4a;

padding:5px 0 10px 0;

}

 

#product_list li .right_block {

text-align: center

 

}

 

#product_list li .price {

margin-bottom: 15px;

font-weight:bold;

font-size: 18px;

color:#3c9806

}

 

#product_list li span.availability {

color: #488C40;

}

 

 

Merci à toi,

 

johan

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More