Infobulle En Fonction Des Attributs / Personnalisation En Fonction Des Attributs

[Antirouille]

Bonjour,

Le site que je suis en train de développer avance bien. Cependant pour un utilisateur lambda son utilisation n'est pas très simple.

 

Je souhaite pour cela l'informer à l'aide "d'infobulle" qui s'affiche à coté des attributs du produits.

J'arrive à en afficher une en modifiant le fichier : "product.tpl".

Mais je souhaiterai modifier l'information par rapport à chaque valeur de l’attribut :

• exemple =
  
• Si mon produit = attribut 1 = infobulle 1
  
• Si mon produit = attribut 2 = infobulle 2
  

J'espère que je suis assez claire sur cette explication.

 

 

Autre modification que j'aimerai apporter à cette page, est la personnalisation en fonction d'un attribut;

Je m'explique :

Imaginons que j'ai un attribut avec pour donnée : personnalisation et pour valeur : oui / non

• Lorsque je clique sur non je ne suis pas obligé de personnalisé l'objet avec l'onglet qui est dédié.
  
• Lorsque je clique sur oui je suis obligé cette fois de personnalisé le produit avec l'onglet qui est dédié.
  

 

Suis-je claire ?

 

Merci si la communauté à une idée pour mes deux questions.

[Antirouille]

Bonjour à tous.

Voici le code à mettre dans le fichier product.tpl

 

// "infos bulles"
var option1 = Array("Texte1.", "Texte2.");
var option2 = Array("Texte3", "Texte4");
$('#group_1').after('<span id="message-option1"><img src="../img/infobulle.png" alt=""/>'+option1[1]+'</span>');
$('#group_2').after('<span id="message-option2"><img src="../img/infobulle.png" alt=""/>'+option2[1]+'</span>');
$('#group_1').change(function(){
 $('#message-option1').remove();
 $('#group_1').after('<span id="message-option1"><img src="../img/infobulle.png" alt=""/>'+option1[$('#group_1').val()-1]+'</span>');
});

$('#group_2').change(function(){
 $('#message-option2').remove();
 $('#group_2').after('<span id="message-option2"><img src="../img/infobulle.png" alt=""/>'+option2[$('#group_2').val()-5]+'</span>');
});

 

Il suffit de remplacer les id des attributs. On les trouve facilement avec firebug.

Donc cela ajoute une image (ici - infobulle.png) à droite de la liste déroulante (ou des boutons à cocher) pour permettre une explication de la valeur séléctionner.

 

EX : dans votre liste déroulante vous avez des couleurs comme rouge et bleu. Lorsque le client séléctionne la couleur rouge, un texte apparait sur le coté expliquant les caractéristique du rouge et de même pour le bleu.

 

Dans ce code il est question de deux groupes d'attribut. Il suffit d'ajuster le numéro du groupe trouvé avec firebug.

 

Bon développement,

 

Antirouille.

[stevent]

Bonjour,

 

Votre sujet m'intéresse beaucoup pour ce site : http://tempo.printingandco.com

 

En effet, je désire avec une explication qui s'affiche à chaques attributs de produits choisis.

 

Cependant, j'avoue ne pas avoir le niveau qui me permet de savoir où placer exactement vos lignes dans le product.tpl ainsi que de savoir par quoi remplacer "Group1" ( par exemple )

 

Pourriez vous me donner un exemple pour un attribut du site donné ci-dessus??

 

Merci d'avance.

[Antirouille]

Les group_1 je les ai trouvés avec Firebug, c'est l'id d'un attribut avec ses valeurs. Je peux vous aider si besoin. Bon développement.

[stevent]

Oui j'ai un peu saisi entre temps, je vois que chaque attribut est assigné à un chiffre de groupe. Donc je dois lier l'image ou l'info bulle au chiffre adéquat.

 

Je dois ajouter ces lignes ( adaptées bien sur ) tout en bas du product.tpl?? non je suppose...

[stevent]

Voici le code que j'ai ajouté suite à votre info :

 

// "infos bulles"

var option1 = Array("Texte1.", "Texte2.");

var option2 = Array("Texte3", "Texte4");

$('#group_38').after('<span id="message-option1"><img src="../img/infobulle.png" alt=""/>'+option1[1]+'</span>');

$('#group_39').after('<span id="message-option2"><img src="../img/infobulle.png" alt=""/>'+option2[1]+'</span>');

$('#group_38').change(function(){

$('#message-option1').remove();

$('#group_38').after('<span id="message-option1"><img src="../img/infobulle.png" alt=""/>'+option1[$('#group_38').val()-1]+'</span>');

});

 

$('#group_39').change(function(){

$('#message-option2').remove();

$('#group_39').after('<span id="message-option2"><img src="../img/infobulle.png" alt=""/>'+option2[$('#group_39').val()-5]+'</span>');

});

 

Je ne sais cependant pas où l'ajouter. J'ai essayé à la suite, dans le block de mes attributs, tout en haut dans la déclaration des variables.

 

J'ai choisi les numéros en fonction de l'ID des valeurs vu que je veux un affichage différent par VALEURS et non par ATTRIBUT.

 

 

 

Groupe 3 : SUPPORT

VALEUR 38 : Monomère permanent.

VALEUR 39: Monomère enlevable.

Edited July 18, 2013 by stevent (see edit history)

[Antirouille]

Où voulez vous que le texte s'affiche ?

Une fois les variable défini il faut les faire afficher.

[stevent]

Voici un exemple :

 

 

A chaque choix différent, le but est d'afficher l'explication du choix

[Antirouille]

regardez votre boite perso.

 

Votre principe de site ressemble vraiment à Pixartprinting...

[stevent]

Merci Antirouille !

L'astuce pour moi était de bien préciser :

 

==> Sur quel ID commencent les valeurs. ( Chez toi c'est 1 et 2 mais moi il y en à énormément plus )

==> Préciser quel sera à l'affichage par défaut !

 

En effet il n'affiche pas l'infobulle adaptée à la valeur par défaut choisie dans prestashop, il faut donc préciser dans le code la case du tableau à afficher au départ ( chez toi [1] mais chez moi [0] vu que un tableau commence par [o] puis [1] puis...........

 

Voilà je ne sais pas si j'ai été clair mais j'ai trouvé solution à mon problème. Si je peux aider à mon tour n'hésitez pas ;-)

[iAssist]

Bonjour,

 

Je profite de ce topic pour poser une question concernant les infobulles.

 

A savoir est-il possible de modifier la durée d'affichage ?

 

Personnellement je trouve le temps d'affichage trop court.

 

Merci d'avance...

 

Paul