liste deroulante

[ultraxa]

bonjour

 

comment fait on une liste deroulantecomme sur ce site dans le panier

http://arnaud-merigeau.fr/wide-theme/

 

lorsque l'on survol le pânier , la liste se deroule

 

merci

[luci1]

Bonjour,

 

Il faut mettre la contenu que tu souhaites dérouler dans une div, ici on va l'appeler panier :

<div id="panier" style="display;none">
//cotenu ici
</div>

 

Ensuite il faut ajouter une action jQuery au survol du lien du panier, si le lien est identifiée par "hover_panier"

 

<a id="hover_panier"><img  src="..." alt=""></a>

 

ça donne ce qui suit :

 

jQuery("a#hover_panier").hover(
 function(){
  jQuery('div#panier').show('slow');
 },
 function(){
  jQuery('div#panier').hide(2000);
 }
);

Voilà en gros ce qu'il faut faire.

[ultraxa]

le code jquery , on le met ou ?

en faite je veux faire ca dans le module blockcart

donc j'ai deja un fichier ajax-cart.js

[ultraxa]

je suis desolé d'etre de posé des question un peu bete pour certain mais je suis debutant dans le domaine mais j'apprend

[luci1]

Bonjour,

 

Tu peux utiliser ton code javaScript directement dans ton template smarty :

 

{literal}
//ton code javascript
{/literal}

[ultraxa]

je ne comprend pas ca ne fonctionne pas

 

 

j'ai meme repris un code d'un exemple:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#showr").click(function () {
 $("div:eq(0)").show("fast", function () {
   /* use callee so don't have to name the function */
   $(this).next("div").show("fast", arguments.callee);
 });
});
$("#hidr").click(function () {
 $("div").hide(2000);
});

</script>

<button id="showr">Show</button>
 <button id="hidr">Hide</button>
 <div>Hello 3,</div>

 <div>how</div>
 <div>are</div>
 <div>you?</div>

 

 

et ca ne fonctionne pas non plus

[luci1]

Try tu put the code in

jQuery(document).ready(function(){
//the javaScript here
});

[ultraxa]

...toujours rien

avez vous un exemple utilisé pour prestashop

[luci1]

As-tu une url ou je pourrais voir ça directement ?

[ultraxa]

j'ai reussi

[crea34]

j'ai reussi

c'est bien de nous faire partager le code

[ultraxa]

comme indiqué plus haut

j'ai mis ce code dasn mon fichier tpl

 

<div id="panier" style="display;none">
//cotenu ici
</div>

 

 

 

ensuite dans un fichier monfichier.js , j'ai mis ce code

jQuery(document).ready(function(){

jQuery("#hover_panier").hover(
 function(){
	  jQuery('div#panier').show('slow');
 },
 function(){
	  jQuery('div#panier').hide(2000);
 }
);
});

 

et a la place de" hover_panier" , j'ai mis un id de l'endroit ou je veux que ca ce declenche

donc ca peut etre ton div principale ou autre...

 

 

 

et ne pas oublier dans le tpl

<script src="http://monsite.com/monfichier.js"></script>
<script>

[luci1]

et ne pas oublier dans le tpl

<script src="http://monsite.com/monfichier.js"></script>
<script>

 

Tu peux également charger le script via le hook header dans le fichier d'installation du module

public function hookHeader( $params )
{
  Tools::addJS($this->_path.'js/lenomdufichierjs.js');
}

 

en enregistrant ce hook lors de l'installation du module :

 

$this->registerHook('header')

[ultraxa]

j'ai un autre soucis c'est que lorsque le div se cache , il diminue en hauteur mais egalement en largeur , au lieu d'avoir un ascenseur , ca s'enroule dans un coin ...mon contenu se chevauchent et ca fait pas terrible

 

comment y remedier ?

[a-prods]

tu est sur quelle version de presta?

il y a sur addons le nouveau thème gratuit pour la 1.4 avec le module block cart qui fait ca tres bien

[ultraxa]

c'est ce module que j'ai prsi mais je l'ai un peu beaucoup modifié