Promo et prix barré sur image produits phares

Bondaty and Co · November 25, 2012

Salut

Une petite modif pour ceux qui veulent faire apparaitre Promo et prix barré sur l'image des produits phares:

Dans le homefeatured.tpl vers la ligne 42

 <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}
<!-- en promo -->
 {if isset($product.reduction) && $product.reduction}<span class="new">{l s='ON SALE' mod='homefeatured'}</span>{/if}
<!-- /en promo -->
<!-- prix barré -->
 {if isset($product.reduction) && $product.reduction}<span class="prixbar">{if !$priceDisplay}{convertPrice price=$product.price_without_reduction}{else}{convertPrice price=$product.price_without_reduction_tax_exc}{/if}</span>{/if}
<!-- /prix barré -->	
 </a>

Ajoute dans le homefeatured.CSS

#featured-products_block_center .product_image span.prixbar {
display: block;
position: absolute;
bottom: 20px;
left:-30px;
text-decoration:line-through;
padding: 1px 4px;
width: 101px;
font-size:12px;
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform: rotate(45deg);
background-color: #008000
}

Il peut y avoir un décalage en bas, il vient de la taille du bloc image qui est plus grand que l'image elle-même, à ajuster à cette ligne: #featured-products_block_center .product_image

Edited November 25, 2012 by Muche (see edit history)

durrm001 · November 30, 2012

Bonjour,

J'ai un souci avec le CSS.

Si je crée le fichier :

\themes\prestashop-template-1-4-5\css\modules\homefeatured\homefeatured.css

alors le style n'est pas appliqué.

Alors que si je le mets dans \themes\prestashop-template-1-4-5\css\global.css, ça marche.

J'utilise PrestaShop 1.4.7.3

Merci de votre réponse !

Bondaty and Co · November 30, 2012

La modif est pour 1.5

il me semble que sur votre version les Css modules ne sont pas au même endroit.

le fait que ce soit dans le global ne pose pas de problèmes

Si je crée le fichier :
\themes\prestashop-template-1-4-5\css\modules\homefeatured\homefeatured.css

alors le style n'est pas appliqué.

Effectivement dans votre version le CSS du module est dans le global.css, donc bien mofifier dans le global

Edited December 4, 2012 by Muche (see edit history)

Bondaty and Co · December 6, 2012

Voici les modifs pour les versions inférieures à 1.5:

<!-- A ajouter en bas du global css -->
#featured-products_block_center .product_image {
display:block;
position:relative;
overflow:hidden;
width:124px;
height:124px;
border: 0;
}
#featured-products_block_center .product_image span.promo {
display: block;
position: absolute;
top: 15px;
right:-30px;
padding: 1px 4px;
width: 101px;
font-size:8px;
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: #008000
}
#featured-products_block_center .product_image span.prixbar {
display: block;
position: absolute;
bottom: 20px;
left:-30px;
text-decoration:line-through;
padding: 1px 4px;
width: 101px;
font-size:10px;
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform: rotate(45deg);
background-color: #008000
}
<!-- A modifier dans le homefeatured.tpl: la partie qui se reporte à l'image, de <a href="{$product.link}" après la balise </h5> jusqu'à </a> compris -->

<!-- début image -->
<!-- ajout du div -->
<div class="product_desc">
<!-- /ajout du div -->	
 <a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:130:'...'}</a></div>
 <div class="product_image"><a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}"/>
<!-- En promo -->
 {if isset($product.reduction) && $product.reduction}<span class="promo">{l s='EN PROMO' mod='homefeatured'}</span>{/if}
<!-- /En promo -->
<!-- prix barré -->
 {if isset($product.reduction) && $product.reduction}<span class="prixbar">{if !$priceDisplay}{convertPrice price=$product.price_without_reduction}{else}{convertPrice price=$product.price_without_reduction_tax_exc}{/if}</span>{/if}
<!-- /prix barré -->
 </a>
</div>
<!-- /image -->

Fichier text en PJ

Le plus gros est fait, il faut jouer ensuite avec les tailles d'images et font-size, etc...

modif-homefeatured-inferieur-v1-5.txt

Edited December 6, 2012 by Muche (see edit history)

micwolf64 · January 22, 2013

Merci beaucoup Muche pour cette modification que je recherchais depuis 1 semaine .

Par la même occasion, sais tu comment rajouter l'image Nouveau? Stp.

Bondaty and Co · January 23, 2013

Sur 1.5 il est installé de base, pour qu'il apparaisse dans le BO il faut régler le nombre de jours où les produits sont nouveaux.

Sinon pour 1.4 ( je ne me souviens plus si il est de base ) sinon, dupliquer le code du span promo du css et le renommer new, choisir right ou left .

puis pour le tpl:

{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}

micwolf64 · January 23, 2013

Merci pour la réponse rapide Muche. je pense que ça vient de mon thème car rien ne s'affiche dans les produits phares.

J'ai appliqué la modification dans le module prestashop mais je pense qu'il faut que je le rajoute dans le module homefeatured du thème pour que ça fonctionne.

Le problème est que dans le module du thème je n'ai que deux fichiers homefeatured.tpl avec le code suivant ou il n'y as pas grand chose dedans:

<!-- MODULE Home Featured Products -->
<div id="featured_products">
<h4>{l s='Featured products' mod='homefeatured'}</h4>
{if isset($products) AND $products}
<div class="block_content">
 <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>
<h5><a class="product_link" href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}</a></h5>
<div>
 {if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>{/if}
 <a class="button" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>
</div>
  </li>
  {/foreach}
 </ul>
 <div class="clearblock"></div>
</div>
{else}
<p>{l s='No featured products' mod='homefeatured'}</p>
{/if}
</div>
<!-- /MODULE Home Featured Products -->

Et le fichier langue FR.php

Sais tu à quel endroit je dois ajouter ton code?

Et dois je créer un fichier homefeatured.CSS dans le dossier homefeatured du thème?

Ah oui j'oubliais, je suis en PS 1.5

Edited January 23, 2013 by micwolf64 (see edit history)

Bondaty and Co · January 24, 2013

Normalement il n'y a qu'un seul homefeatured.tpl, dans le module

papich · January 30, 2013

Merci ca fonctionne par contre il faut supprimer le lien sous peine d'avoir les images en double

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

Comment faire si je veux changer de style ?Moi j'ai On sale au lieu de Solde...

Comment faire pour avoir la même chose dans le product list?

Jeform · February 6, 2013

Merci pour cette astuce;

dans le même style, je cherche a faire apparaitre un bandeau vendu sur certains produits, imaginons lorsque le stock est a zéro.

avez vous une idée du code à générer pour cela ?

dude08 · June 7, 2013

Hi,

I'm on Prestashop 1.5.

I've tried the code at the top of this topic in homefeatured.tpl and it perfectly works.

But Iwould like to do the same in blockbestsellers-home.tpl and It doesn't work....

Could you please help me ???

eugenhadan · November 20, 2013

Bonjour,

j'ai mis votre cod dans mon site , mai pas de resultat....

SVP de me donnera + d'infos !

Je peut vous transmetre mes fichiers css et tpl pour voire ou c'est la probleme...

En attende d'aide du votre parte,merci d'avance!

Nat · November 21, 2013

Bonjour,

est-ce qu'il existe une solution pour afficher le prix barré sur le fichier blockbestsellers-home.tpl ?

j'ai cherché mais je ne trouve pas...

J'ai essayé de copier le bout de code qui marche pour product-list.tpl (là, ça marche super bien) mais sur blockbestsellers-home.tpl, le prix barré ne s'affiche pas ...

Est-ce que quelqu'un pourrait m'aider ?

Merci

Franck K. · January 2, 2014

[Modéré Merci de respecter le sujet du topic et de ne pas faire de la publicité que ce soit de vos produits ou des produits d'autres prestataire. Merci de lire les règles du forum]

[Règles du forum : http://www.prestashop.com/forums/topic/256108-regles-du-forum-officiel-de-prestashop-et-conseils-dutilisation/]

Bonne journée et bonne année =).

Edited January 2, 2014 by Oron
Non conforme au règle du forum (see edit history)

nico78180 · May 14, 2014

bonjour,

Je suis en 1.5.6.2, avec le thème par défaut modifié.

J'ai fait les modifs, mais cela ne fonctionne pas :

-> le bandeau vert s'affiche, mais pas le prix !

nico78180 · May 14, 2014

en double

Edited May 14, 2014 by nico78180 (see edit history)

nico78180 · May 14, 2014

a partir de l'exemple ci-dessu et de http://www.zentitude.com/?p=125 , j'ai trouvé une solution et modifier le if :

{if $page_name == 'index'}
 <a href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')|escape:'html'}" height="178" width="178" alt="{$product.name|escape:html:'UTF-8'}" />
 {if isset($product.new) && $product.new == 1}{l s='New' mod='homefeatured'}{/if}
 
 {if !$PS_CATALOG_MODE AND isset($product.reduction) && $product.reduction}{l s='EN PROMO' mod='homefeatured'}{/if}
 
 
 {if $product.show_price AND !$PS_CATALOG_MODE AND isset($product.reduction) && $product.reduction && !isset($restricted_country_mode)}{if $priceDisplay}{convertPrice price=$product.price_without_reduction}{else}{convertPrice price=$product.price_without_reduction_tax_exc}{/if}{/if}
 
 </a>
 {/if}

Edited May 14, 2014 by nico78180 (see edit history)

Pounyet · January 5, 2015

Bonjour, et pour la version 1.6 ??

Promo et prix barré sur image produits phares

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in