[RESOLU] module pour afficher VENDU sur la photo du produit

ladg · June 22, 2010

Bonjour,
je recherche un module qui permettrais d' afficher le mot "VENDU" sur la photo du produit lorsque celui-ci a un stock o.
Merci pour vos réponse.
Gilbert

ould.abeidy · June 22, 2010

une idée ce de tester le stock de produit et afficher cette image si la quantite = 0 a mon avis demande d'avoir une autre image pour chaque produit.

eltitos · June 22, 2010

je sais pas si un module existe pour ca, mais il existe une solution en modifiant les tpl, product-list.tpl, homefeatured.tpl...

il faut rajouter ce code apres celui de l'image du produits

{if ($product.allow_oosp OR $product.quantity == 0)}{/if}

Si la quantite est egale a 0 alors une seconde image est affichee, ici soldout.png.

Pour la faire surperpose il faut rajouter ceci au global.css

.img_soldout { position: absolute;background-position: left top=0; 
}

une image soldout.png doit se trouver dans le repertoire image de chaque langue activee /themes/votretheme/img/en/
/themes/votretheme/img/fr/ ...

ladg · June 23, 2010

Bonjour,
cela fonctionne a merveille.
Merci
Gilbert

Divine · June 23, 2010

Bonjour,

N'oublies pas d'ajouter [RESOLU] au titre de ton post si ton problème est réglé

ladg · June 23, 2010

RESOLU................

Divine · June 23, 2010

Non lol
Dans le TITRE de ton post

Fabrice · June 24, 2010

posé le RESOLU pour lui ;-)

slayer-fr · August 22, 2010

salut

pour les vente flash vous avez une solution pour faire pareil ?

benjee · October 7, 2010

Bonjour,
j'ai le même besoin, cependant je n'arrive pas à trouver l'endroit dans product-list.tpl ou insérer le code

voici mon fichier product-list.tpl (qui n'est pas celui du thème par défaut)

>
{if isset($products)}
   <!-- Products list -->
</pre>
<ul>
   {foreach from=$products item=product name=products}


{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}
getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />
{if $product.new == 1}{l s='new'}{/if}{$product.name|escape:'htmlall':'UTF-8'|truncate:22:'...'} 

{$product.description_short|strip_tags:'UTF-8'|truncate:100:'...'}

{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
               {if $product.on_sale}
{l s='On sale!'}
               {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $product.reduction_from))}
{l s='Price lowered!'}
               {/if}

               {if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
{l s='BUY'}
               {else}
                       {l s='UNAVAILABLE'} | 
               {/if}
{l s='VIEW'}



   {/foreach}
</ul>
<br>   <!-- /Products list --><br>{/if}<br><br

Pouvez vous m'indiquer ou insérer le code

{if ($product.allow_oosp OR $product.quantity == 0)}{/if}

Merci de votre aide....

eltitos · October 7, 2010

Bonjour,

Il faut placer le code avant ces lignes

{if $product.new == 1}{l s='new'}{/if}{$product.name|escape:'htmlall':'UTF-8'|truncate:22:'...'}

benjee · October 7, 2010

Ok, je l'ai placé au dessus, cela semble fonctionner à par que mon image soldout.png n'apparait pas sur toute l'image du produit...
Mais là je pense que je vais trouver...

Merci encore

nini1505 · May 2, 2011

Bonjour,

Je relance le sujet car je souhaiterai mettre "vendu" à la place du prix.
Je pense que ça se situe à ce niveau du product-list.tpl :

{if !$priceDisplay || $priceDisplay == 2}{convertPrice price=$product.price}{if $priceDisplay == 2} {l s='+Tx'}{/if}{/if}
               {if $priceDisplay}{convertPrice price=$product.price_tax_exc}{if $priceDisplay == 2} {l s='-Tx'}{/if}{/if}

J'ai fait plusieurs tentatives avec :

{if ($product.allow_oosp OR $product.quantity == 0)}{/if}

Mais rien à faire!

Est-ce que quelqu'un pourrait m'aider svp sur le code?

Merci par avance de votre aide!

EDIT RESOLU

diabolyo · September 1, 2011

+1 UP !

belilan · March 31, 2014

Bonjour,

Je relance ce post car je désire également avoir un bandeau "vendu" pour les articles vendus.

J'ai donc crée un image soldout.png de taille 350px par 350 px, et je les ai mises comme indiqué dans thème/img/fr, en et nl pour mes 3 langues.

J'ai du créer ces sous dossiers car ils n'existaient pas.

J'ai ajouté les mentions indiquées dans les deux fichiers tpl, et cela n'a rie changé du tout.

quelqu'un pourrait-il m'aider.

merci.

lordbdp · April 3, 2014

Je suis intéressé par ce principe mais pas en remplaçant l'image mais en mettant une image par dessus (donc avec un fond transparant), genre coup de tampon "Vendu" afin que les clients voient quand-même le produit.

Merci d'avance.

belilan · April 4, 2014

Je suis intéressé par ce principe mais pas en remplaçant l'image mais en mettant une image par dessus (donc avec un fond transparant), genre coup de tampon "Vendu" afin que les clients voient quand-même le produit.

Merci d'avance.

c'est exactement ce que j'ai tenté de faire, mais sans succès.

lordbdp · April 8, 2014

Pourrais-tu m'envoyer ton fichier modifié que j'y jette un oeil stp ?

Edited April 23, 2014 by lordbdp (see edit history)

Loulou91 · June 9, 2014

Bonjour,

Je viens d'appliquer cette soluce sur mon site : (construite avec prestashop 1.6)

si vous allez voir, je voudrais que le "vendu" soit un peut plus haut (limite if de la photo du produit) ..;!

je n'y connais rien en CSS,ni en php ni en html ni en...??? mais bon, je suppose que c'est dans le code du global.css

".img_soldout { position: absolute;background-position: left top=0; }" qu'il doit falloir modifier une valeur...

je vais faire quelques tests...! Mais si quelqu'un peu me donner l'info avant que casse tout dans la boutique....!

Merci d'avance

utaku · June 15, 2014

Hello,

Je viens de voir ce topic et voici la solution que j'ai modifier pour utiliser le CSS plustôt qu'une image png, cela fonctionne sur le même principe que pour les nouveaux produits...

Les fichiers à modifier sont les mêmes :

Product-list.tpl de votre thème :

{if isset($product.new) && $product.new == 1 && $product.quantity == 0}
							<span class="soldout-box">
								<span class="soldout-label">{l s='Sold'}</span>
							</span>
						{/if}

Attention, ce code permet l'affichage du texte "Vendu" uniquement si le produit est Nouveau et Hors Stock

et voici le code CSS à utiliser :

.soldout-box2,
.sale-box {
  position: absolute;
  top: -4px;
  overflow: hidden;
  height: 85px;
  width: 85px;
  text-align: center;
  z-index: 0;
  right: 185px;  }	
.soldout-label2 {
  font: 700 14px/12px Arial, Helvetica, sans-serif;
  color: white;
  background: #6ad4ff;
  text-transform: uppercase;
  padding: 9px 0 7px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.24);
  width: 130px;
  text-align: center;
  display: block;
  position: absolute;
  left: -33px;
  top: 16px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }
  .soldout-label2:before {
    position: absolute;
    bottom: -3px;
    right: 5px;
    width: 0px;
    height: 0px;
	border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: #21a3d8 transparent transparent transparent;
    content: ".";
    text-indent: -5000px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg); }
  .soldout-label2:after {
    position: absolute;
    bottom: -3px;
    left: 3px;
    width: 0px;
    height: 0px;
	    border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: #21a3d8 transparent transparent transparent;
    content: ".";
    text-indent: -5000px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg); }
	
	.ie8 .soldout-label2 {
  left: 0px;
  top: 0px;
  width: auto;
  padding: 5px 15px; }
  .ie8 .soldout-label2:after {
    display: none; }
  .ie8 .soldout-label2:before {
    display: none; }
.ie8 .soldout-label2 {
  top: -1px;
  left: -1px; }

Si vous désirez que celui-ci soit afficher tout le temps utilisé alors le code suivant :

{if ($product.allow_oosp OR $product.quantity == 0)}
<span class="soldout-box2">
								<span class="soldout-label2">{l s='Sold'}</span>
							</span>
						{/if}

Voila, il devrait y avoir la même possibilité pour les articles soldés...

Bien à vous

Edited June 16, 2014 by utaku (see edit history)

utaku · June 17, 2014

Hello,

J'ai apporter encore quelques améliorations, que vous pourrez voir sur mon site.

Voici ce qu'il faut faire pour avoir cela :

Product-list.tpl :

						{if isset($product.new) && $product.new == 1}
							<span class="new-box">
								<span class="new-label">{l s='New'}</span>
							</span>
						{/if}
						{if isset($product.new) && $product.new == 1 && $product.quantity == 0}
							<span class="soldout-box" style="display: none;">
								<span class="soldout-label">{l s='Sold'}</span>
							</span>
						{/if}
						{if ($product.allow_oosp OR $product.quantity == 0)}
						<span class="soldout-box2">
								<span class="soldout-label2">{l s='Sold'}</span>
								</span>
						{/if}
							{if ($product.allow_oosp OR $product.quantity == 1 && $product.new == 0)}
						<span class="soldin-box">
								<span class="soldin-label">{l s='Available'}</span>
								</span>
						{/if}
						{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
							<span class="sale-box">
								<span class="sale-label">{l s='Sale!'}</span>
							</span>
						{/if}

Global.css dans votre theme

/* Bandeau Vendu */		
.soldout-box2,
.sale-box {
  position: absolute;
  top: -4px;
  overflow: hidden;
  height: 88px;
  width: 87px;
  text-align: center;
  z-index: 0;
  right: 185px;  }	
.soldout-label2 {
  font: 700 14px/12px Arial, Helvetica, sans-serif;
  color: white;
  background: #fe9126;
  text-transform: uppercase;
  padding: 10px 0 8px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.24);
  width: 130px;
  text-align: center;
  display: block;
  position: absolute;
  left: -35px;
  top: 16px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }
  .soldout-label2:before {
    position: absolute;
    bottom: -3px;
    right: 3px;
    width: 0px;
    height: 0px;
	border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: #e4752b transparent transparent transparent;
    content: ".";
    text-indent: -5000px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg); }
  .soldout-label2:after {
    position: absolute;
    bottom: -3px;
    left: 5px;
    width: 0px;
    height: 0px;
	border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: #e4752b transparent transparent transparent;
    content: ".";
    text-indent: -5000px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg); }
	
	.ie8 .soldout-label2 {
  left: 0px;
  top: 0px;
  width: auto;
  padding: 5px 15px; }
  .ie8 .soldout-label2:after {
    display: none; }
  .ie8 .soldout-label2:before {
    display: none; }
.ie8 .soldout-label2 {
  top: -1px;
  left: -1px; }
/*Bandeau Vendu Fin */
/* Bandeau Disponible */
.soldin-box,
.sale-box {
  position: absolute;
  top: -4px;
  overflow: hidden;
  height: 88px;
  width: 87px;
  text-align: center;
  z-index: 0;
  right: 185px;  }	
.soldin-label {
  font: 700 14px/12px Arial, Helvetica, sans-serif;
  color: white;
  background: #55c65e;
  text-transform: uppercase;
  padding: 10px 0 8px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.24);
  width: 130px;
  text-align: center;
  display: block;
  position: absolute;
  left: -35px;
  top: 16px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }
  .soldin-label:before {
    position: absolute;
    bottom: -3px;
    right: 3px;
    width: 0px;
    height: 0px;
	border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: #36943e transparent transparent transparent;
    content: ".";
    text-indent: -5000px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg); }
  .soldin-label:after {
    position: absolute;
    bottom: -3px;
    left: 5px;
    width: 0px;
    height: 0px;
	border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: #36943e transparent transparent transparent;
    content: ".";
    text-indent: -5000px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg); }
	
	.ie8 .soldin-label {
  left: 0px;
  top: 0px;
  width: auto;
  padding: 5px 15px; }
  .ie8 .soldin-label:after {
    display: none; }
  .ie8 .soldin-label:before {
    display: none; }
.ie8 .soldin-label {
  top: -1px;
  left: -1px; }
  
  /* Bandeau Disponible Fin*/

Product-list.css dans votre theme

  ul.product_list .availability span.available-now {
    display:none;
    background: #55c65e;
    border: 1px solid #36943e; }
  ul.product_list .availability span.out-of-stock {
	display:none;
    background: #fe9126;
    border: 1px solid #e4752b; }

Pour ce fichier, il vous suffit de rajouter le display:none; cela ce trouve au tout début du fichier

Voila, ensuite il faut vider le cache de PS et faire les traductions dans le BO et le tour est joué

Bien à vous,

kidoshop · June 19, 2014

merci pour votre code par contre comment fait on pour vider le cache de PS car je n ai rien qui s affiche

merci

kidoshop · June 29, 2014

merci pour votre code par contre comment fait on pour vider le cache de PS car je n ai rien qui s affiche

merci

up

merci

utaku · June 29, 2014

Bonjour,

Navré nous étions en vacance annuel

Pour vider le cache de PS, il vous suffit de vous rendre en BO dans la section paramètre avancé / performance

en haut à droite il y a un " bouton " - " vider le cache " .

Voila

bien à vous

Edited June 29, 2014 by utaku (see edit history)

kidoshop · June 30, 2014

Bonjour,

Navré nous étions en vacance annuel

Pour vider le cache de PS, il vous suffit de vous rendre en BO dans la section paramètre avancé / performance

en haut à droite il y a un " bouton " - " vider le cache " .

Voila

bien à vous

merci pour votre réponse par contre je ne trouvent pas ce bouton

je précise que je suis en 1.4.6.2

merci

utaku · July 2, 2014

Bonjour,

Ok pas de souci, l'option ce trouve dans les préférences et performance, il suffit de chercher un peu, c'est pas très compliqué.

Par contre le code et le css est adapté pour une 1.6.x .

Je ne sais donc si cela sera compatible a 100%

Bien à vous

kidoshop · July 2, 2014

merci pour votre réponse mais effectivement je n arrive pas a le faire tourne sur 1.4

merci quand même

houin · July 24, 2014

Bonjour ,j'ai utilisé le code de"UTAKU" et je le remercie.Par contre je suis sur 1.6.06 et j'ai un petit problème.

Si l'on choisi le produit par défaut , l'étiquette "vendu" se met automatiquement sur l'image et pourtant j"ai d'autre produit en déclinaison. Par contre si on utilise déjà les déclinaisons , cela fonctionne.

Autre petit problème , je ne peut plus utiliser l'étiquette "promo" car elle se chevauche avec l'étiquette "vendu"

Une idée peut être. Merci

[RESOLU] module pour afficher VENDU sur la photo du produit

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

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