[Résolu] Affichage De L'état Du Produit Dans L'image (Neuf Ou Occasion)

[okazvente]

Bonjour à tous,

 

si je suis dans le mauvais topic je m'en excuse par avance. Je souhaite afficher l'état de l'article que je vends directement sur l'image. Cela permet une meilleure visibilité.

 

Ayant cherché un peu avant de poster j'ai trouvé cela: http://www.prestasho...uf-ou-occasion/

 

Mais je n'arrive pas à le mettre en place, donc je ne sais pas si c'est réellement ce que je souhaite.

 

Si quelqu'un pouvait me venir en aide.

 

Merci d'avance!

Edited February 28, 2013 by okazvente (see edit history)

[okazvente]

Personne n'aurait un début de solution?

[Samy_R]

"intégrer le texte dans l'image"? c'est-à-dire ? Tu as un exemple visuel ?

[okazvente]

Merci pour la réponse!

 

Oui voici un exemple:

[Samy_R]

Ta boutique est en ligne ? (histoire de voir la structure HTML des pages produit)

[okazvente]

Oui, voici un exemple sur lequel j'aimerai ajouter le logo "occasion" bien visiblement sur l'image:

http://www.okazvente.fr/ps3/2213-need-for-speed-carbon-ps3-5030931052842.html

Et par exemple ici un logo "Neuf":

http://www.okazvente.fr/ps-vita/2686-resistance-burning-skies-ps-vita-0711719237433.html

Edited September 2, 2013 by okazvente (see edit history)

[Samy_R]

Dans ton fichier product.tpl, tu dois pouvoir insérer un bout de HTML juste après la balise <span id="view_full_size"> :

{if $product->condition=="new"}<div id="etat_produit">
  <img src="{$img_dir}neuf.png" alt="Neuf" /></div>
 {elseif $product->condition=="used"}<div id="etat_produit">
  <img src="{$img_dir}occasion.png" alt="Occasion" /></div>
 {elseif $product->condition=="refurbished"}<div id="etat_produit">
  <img src="{$img_dir}reconditionne.png" alt="Reconditionne" /></div>
 {/if}

 

Ensuite, tu modifies ta CSS pour ajouter "position:relative" à #view_full_size et "position:absolute;left:10px;top:10px" à #etat_produit

[okazvente]

Merci!

 

Je vais tester ça dans la journée et reviendrai dans le forum donner le résultat

[okazvente]

Je ne trouve pas "#etat_produit" dans product.css et il y a 3 "#view_full_size", lequel choisir?

En tout cas l'image s'affiche déjà au dessus de l'autre

[Samy_R]

Pour #etat_produit, c'est normal, tu dois le rajouter

 

Pour #view_full_size tu dois avoir un seul :

#view_full_size {
//Ici du code CSS
}

[okazvente]

Pour le #etat_produit c'est bon, merci!

 

Par contre le #view_full_size n'est jamais seul, il y a toujours quelque chose juste avant...

Est-ce normal qu'un cadre gris s'ajoute à l'image de létat? Il y est aussi pour l'image du produit mais c'est normal, mais pour l'image de l'état comment l'enlever?

[Samy_R]

Si #view_full_size n'est jamais seul, rajoute le à la fin de product.css

 

Pour la bordure, rajoute cette ligne :

#etat_produit img {
border:none;
}

[okazvente]

Cela commence à réellement prendre forme, j'ai bien ajouté le #view_full_size mais je ne vois pas de différence

 

Pour la bordure cela ne fonctionne pas (ou alors j'ai mal fait la chose)

 

Finalement j'ai plutôt décidé de laissé l'image de l'état au dessus, cela reste bien visible, merci pour tout Samy_R!

[Samy_R]

Pour la CSS c'est normal, tu en as une autre qui a priorité et qui affiche quand même la bordure. Corrige ainsi :

#etat_produit img {
border: none !important;
}

[okazvente]

Parfait de chez parfait! Merci beaucoup Samy_R, tu m'auras bien aidé!

[[email protected]]

Dans ton fichier product.tpl, tu dois pouvoir insérer un bout de HTML juste après la balise <span id="view_full_size"> :

{if $product->condition=="new"}<div id="etat_produit">
   <img src="{$img_dir}neuf.png" alt="Neuf" /></div>
  {elseif $product->condition=="used"}<div id="etat_produit">
   <img src="{$img_dir}occasion.png" alt="Occasion" /></div>
  {elseif $product->condition=="refurbished"}<div id="etat_produit">
   <img src="{$img_dir}reconditionne.png" alt="Reconditionne" /></div>
  {/if}

Ensuite, tu modifies ta CSS pour ajouter "position:relative" à #view_full_size et "position:absolute;left:10px;top:10px" à #etat_produit

 

Bonjour,

 

Je déterre ce sujet car je suis bien arrivé a mettre en place les codes de programmation dans les différents fichier et l'image du statu Neuf ou occasion s'affiche.Sauf que l'image est systématiquement agrandi lors de l'affichage du product.tpl et je n'arrive pas a réduire sa taille pour obtenir un affichage correct ,j'ai réduit la taille de l'image a 63 x 29 pixels . 

merci d'avance pour votre aide.

 

stf4