Jump to content

Tooltip (txt + image) sur cms


Recommended Posts

Bonjour à tous,

 

Bon, si je réinvente le fil à couper le beurre, vous avez le droit de rigoler mais, sinon, pour ceux qui cherchent à afficher un tooltip contenant du texte ET des images dans une page CMS, j'ai trouvé un petit javascript qui fait du très bon boulot.

 

Pas besoin de module, c'est super bien expliqué chez l'auteur.

Ça permet de faire des zoom de vignettes (c'était surtout ça que je cherchais), entre autre. C'est pas du MagicZoom mais c'est quand même pas mal du tout.

 

Voilà l'adresse: walterzorn.

 

Bon dev :)

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

Bonsoir, je me permets de répondre à ce topic, même s'il commence à dater un peu... J'ai galéré pour trouver cette fonction...

Je donne juste un mini tuto pour l'intégration rapide dans Prestashop (fait sous 1.4.9, à vous d'adapter pour les versions supérieures mais également de vérifier la compatibilité avec d'autres modules. Comme ceci étant du JS, il se peut qu'il crée un conflit) :

 

Commencez par télécharger l'archive présente sur le site donner plus haut, puis dézippez les 3 fichiers js dans le dossier "themes/votretheme/js.

 

Ensuite ouvrez le fichier Header.tpl de votre thème (même dossier que celui plus haut, sans le /js/ et ajouter ceci en dessous de la balise <body> :

<script type="text/javascript" src="{$js_dir}wz_tooltip.js"></script>

 

Ensuite deux petites choses :

 

1- Pour intégrer ces tooltips sur un texte, d'une description d'un produit ou d'une page CMS utilisez ceci :

 

Vous devez au préalable cliquer sur le petit bouton HTML de l'éditeur de texte....

<a href="#" onmouseover="Tip('Mon Texte, pour faire un saut de ligne utilisez la balise <br />...')" onmouseout="UnTip()">Mon Texte</a>

 

2- Pour utiliser ceci sur un élément "générique" à tous vos produits, vous devez editer product.tpl et rajouter ceci :

<a href="#" onmouseover="Tip('Mon Texte, pour faire un saut de ligne utilisez la balise <br />...')" onmouseout="UnTip()">Fonction prestashop générique</a>

 

La différence entre ces deux codes ? Aucune.... Sauf que le 1er est modifiable directement avec l'éditeur de texte TinyMce, alors que le second est en "dur" et modifiable uniquement en éditant le fichier template *.tpl, d'où le terme "générique" utilisé. Car celui-ci sera utilisé sur toutes vos pages de produits par exemple, mais aura également le même texte.

 

Comme le fichier JS étant dans le header de votre site, ceci peut s'appliquer à quasi tous les textes visibles sur votre site.

Je donne ceci à titre de tuto, en aucun cas je suis le développeur de ces scripts... Aucune maintenance ne sera faite pour ceci....

 

 

L'image provient de ma propre boutique, elle représente la seconde solution, j'ai installé la petite astuce présente sur ce forum, pour indiquer le PPC (RRP)....

 

J'imagine mes clients ce dire :

Mais Quoi, Qu'est ce que ? Ooh, c'est quoi le PPC ?

 

Par curiosité ils vont être tentés de cliquer sur le lien... Et là, PAF.... Le Chi.lien... => ok je sors... :lol:

Voilà, vous pouvez également le voir en démo sur mon propre site, voir signature :)

 

Amicalement ;)

post-21246-0-49004800-1369430040_thumb.jpg

Edited by yvanb (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...