Bug Affichage Homefeatured

[Allstar27]

Bonjour,

 

J'ai un soucis qui vient d'apparaitre... sans que je modifie quoi que ce soit, ça ne le faisait pas avant et mon collègue qui à accès également au BO me dit qu'il a juste ajouter des produits...

 

Donc mon soucis c'est que le homefeatured dans la page d'accueil décale par moment les produits, affiche un produit puis fait un saut de ligne. J'ai essayer de désinstallé et réinstallé rien. J'ai essayer de mettre 6 produits meme soucis. J'ai donc activer les produits aléatoire à là ca bug par moment mais pas tout le temps =/

 

Code homefeatured.tpl:

<!-- MODULE Home Featured Products -->
<div id="featured_products">
	<h4>{l s='Featured products' mod='homefeatured'}</h4>
	<div class="block_content">
	{if isset($products) AND $products}
	
		<ul>
			{foreach from=$products item=product name=homeFeaturedProducts}
			<li class="ajax_block_product">
				<a class="product_image" href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.name|escape:html:'UTF-8'}" /></a>
				<div>
					<h5><a class="product_link" href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}</a></h5>
					<p class="product_desc">{$product.description_short|strip_tags|truncate:60:'...'}</p>
					<span class="price">{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{/if}</span>
					
					{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
						{if ($product.quantity > 0 OR $product.allow_oosp)}
						<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
						{else}
						<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>
						{/if}
					{/if}
					<a class="button" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>
				</div>
			</li>
			{/foreach}
		</ul>
	{else}
	<p>{l s='No featured products' mod='homefeatured'}</p>
	{/if}
	</div>
</div>
<!-- /MODULE Home Featured Products -->

Code css du module:

/* ————— homefeatured.tpl ————— */
#featured_products { padding:0 0 20px 0;}
#featured_products h4 {padding:14px 0 0 50px; height:36px;background:url(../img/images/title3_bg.png) left top no-repeat;font:normal 13px/20px Arial, Helvetica, sans-serif;color:#5a616b;text-transform:uppercase;}
#featured_products h4 em { font-style:normal; color:#0b63cd; font:normal 13px/20px Arial, Helvetica, sans-serif;}
#featured_products .block_content { background:#ffffff; padding:0 0 32px 0; margin-bottom:0px; overflow:hidden;}
#featured_products ul {width:100%;overflow:hidden; ;}
#featured_products ul li {width:185px; padding:0 20px 20px 21px;float:left;margin:20px 0 0 0;position:relative; background:url(../img/images/divider.gif) left top repeat-y;}
#featured_products ul li a.product_image { display:block; text-align:center; width:100%; padding-top:20px;}
#featured_products ul li a.product_image img { width:140px; height:140px;}

#featured_products ul li div {}

#featured_products ul li h5 {padding:31px 0 0 0; font:bold 11px/15px Arial, Helvetica, sans-serif; min-height:31px;}
#featured_products ul li h5 a { color:#343333;font:bold 12px/15px Arial, Helvetica, sans-serif;}
#featured_products ul li h5 a:hover { color:#0b63cd;}

#featured_products ul li p {padding:0px 0 3px 0; margin-top:-4px; color:#9a9999; font:normal 12px/18px Arial, Helvetica, sans-serif;}
#featured_products ul li span.price {display:block;padding:10px 0 7px 0; text-align:left;}

#featured_products ul li .button { background:#54a0ff; padding-left:8px; padding-right:9px; margin-top:10px; color:#ffffff;}
#featured_products ul li .button:hover { background:#5a616b; color: #777777;} 
#featured_products ul li .exclusive {  padding-left:8px; padding-right:8px; margin-right:1px; margin-top:10px; color:#ffffff;}
#featured_products ul li .exclusive:hover {text-decoration:none; background: #5a616b;}

Merci à celui/celle qui pourra m'éclairer parce que là je sèche...

[Mediacom87]

Bonjour,

 

J'adore ce genre d'explication.

 

ne croyez vous pas qu'un lien vers le site aiderai ou une copie d'écran ????

 

mais bon à mon avis, avec ce que j'ai pu comprendre, votre soucis vient du fait de certains produits dont le nom occupe 2 lignes et comme la limite de hauteur de vos éléments <li> est trop juste le produit de la ligne suivante butte sur le produit ayant un titre sur 2 ligne et donc décale le tout à la ligne suivante ... j'adore ce genre d'explication que même moi en l'écrivant j'ai du mal à comprendre.

[Allstar27]

Bonjour,

 

Le site est actuellement HS pour cause de redirection de domaine...

Il est vrai que j'aurais pu faire un print screen mais je pensais que mon explications était clair 

 

J'ai pensé également à ce que vous avez dit avec 2 lignes pour le titre ou pour la courte description, mais j'ai modifier le tpl pour qu'il rogne à X caractères et le problème persiste.

 

En fait il ne fait pas vraiment un saut de ligne mais plutôt un saut de colonne, bref je reviendrais avec des screen quand le site sera de nouveau OP.

 

Bonne soirée!

[Allstar27]

Voici le screen

[Mediacom87]

Donc ma réponse est la bonne vous avez un soucis de hauteur de <li> qui fait que le suivant de la ligne se bloque sur le premier plus bas de la ligne supérieure.

[Allstar27]

J'ai rajouter un height au <li> ça ne bug plus, merci