Background product-list

[guev]

Bonjour,

 

J'aimerais changer l'image de fond de ma liste de produit quand celui c est en promotion.

Comment dois-je m'y prendre ?

Voir fichier joint :

 

Merci

 

Hervé

 

PS 1.4.4.1

[Stéphane Chonez]

bonjour,

 

j'allais te conseiller d'utiliser Firebug et je m'aperçois qu'un post détaillé sur la méthode est "épinglé".

retourne au niveau au dessus de ce post est regarde celui intitulé "[Tuto] Installation et utilisation de Firebug pour modifications du template (couleurs, images, ...)"

 

cela devrait t'aider.

 

cordialement

[guev]

J'utilise déjà Firebug.

 

Mon soucis et au niveau du code smarty et du css. comment dois-je faire ?

je sais modifier le fond mais quand un produit et en promo comment faire ?

 

merci

[Atch]

Salut,

 

Il faut décomposer ton image en deux!!!

 

Une pour le background que tu appliques à la balise <li> avec un li:hover...

et un que tu appliques uniquement au <span class="promo">...

 

Rien à voir avec Smarty, ce n'est que du CSS dans le fichier product-list.css

 

V++

 

Atch

[guev]

merci Atch pour cette info.

j'ai essayé mais cela dépasse mes compétences.

As tu un modèle ? j'ai regardé dans les thèmes que je t'ai acheté mais je n'ai rien trouvé de semblable

Merci de ton aide

 

Hervé

[Atch]

exemple sur le jailbreak :

http://demo.atchworks.com/jailbreack/fr/

 

Le hover ici est un background-color sur le hover, il suffit de remplacer cette ligne par un Backgound-image:

 

Idem pour le logo promo : inspiréez vous du logo en solde, et remplacez le BG-color par un BG image...

 

V++

 

Atch

[guev]

on s'est mal compris je pense.

je ne cherche pas à faire un hover mais à mettre un fond différent pour les produist en promo. les autres produits restent avec le fond par défaut.

Merci

 

hervé

[Atch]

ah pardon!!! Désolé, j'ai lu en diagonale... j'ai regardé la photo plus que le texte

 

Oui dans ce cas il faut passer par Smarty...

 

Editez : product-list.tpl et ajoutez une nouvelle class à la balise <li>

 

<li class="ajax_block_product  clearfix {if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}promo_li{/if}  
">

 

 

ensuite dans le css de produtc-list ajoutez :

 

ul#product_list li.promo_li {


background: transparent url('../img/votreimage.png') no-reapeat top left;
}

 

 

Par contre pour le symbole promo, faites comme le post ci-dessus

 

V++

 

Atch

[guev]

ma balise <li> se présente ainsi

<li class="ajax_block_product clearfix {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration % 3 eq 0}alternate_item{else}item{/if}">

 

Comment puis je intégré votre code ?

merci encore

hervé

[Atch]

si vous utilisez ceci :

{if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration % 3 eq 0}alternate_item{else}item{/if}

 

mettez ce code à la suite :

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}promo_li{/if}

 

Sinon supprimez le...

 

V++

 

Atch

[guev]

je n'arrive pas à faire afficher le fond pour les promos

 

ma balise <li>

<ul id="product_list" class="clear">
{foreach from=$products item=product name=products}
 <li class="ajax_block_product clearfix {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration % 3 eq 0}alternate_item{else}item{/if} {if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}promo_li{/if}">

 

mon fichier css

ul#product_list li {
background: transparent url('../img/block_category_item_bg.gif') no-repeat top left;
min-height: 335px;
width:240px;
float:left;
}
ul#product_list li .promo_li {
   background: transparent url('../img/bg_promo.png') no-reapeat top left;
min-height: 335px;
width:240px;
float:left;
}

 

ai-je oublié quelque chose ?

Merci

 

Herve

[Atch]

ul#product_list li .promo_li enlever l'espace! entre li et .promo_li

 

--> ul#product_list li.promo_li

 

et pas besoin de répéter les autres attributs :

 

 

ul#product_list li.promo_li {
   background: transparent url('../img/bg_promo.png') no-reapeat top left;
}

[guev]

génial ça fonctionne !

un grand merci.

Hervé