Ajouter une variable javascript

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par lambi521, 20 Décembre 2011.

  1. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Bonjour à tous,

    Sur mon ecommerce, j'ai un panier qui fonctionne en Ajax avec un effet Prestashop. Une fonction javascript produit l'effet de transfert vers le panier :
    Code:
    <script type="text/javascript">
     $(document).ready(function() {
    	$('#cart_quantity').live('submit', function() {
    	$('#button_submit').attr('disabled', 'disabled');
    		var options = {};
    		options = { to: "#ajax_cart", className: 'ui-effects-transfer' };
    		$("#button_add_cart").effect('transfer',options,1300);
    		var datas_form = $('#cart_quantity').serializeArray();
    		$.ajax({
    			url:'ajax_add_cart.php',
    			data: datas_form,
    			type: 'POST',
    			success: function(data) {
                                  var datas = data.split("|");
                                  setTimeout(function() {
    			             $('#content_products').html(datas[0]);
    						$('#content_total').html(datas[1]);
    						$('#fila_' + datas[2]).fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
    						$('#content_total').fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
    					}, 1300);
    				}
    			});
    			$('#button_submit').attr('disabled', '');
    			return false;
    		});
    	});
    </script>
    En relation avec le formulaire et le bouton "Ajouter" du produit :
    PHP:
    <span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">form&nbsp;id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'cart_quantity".$id."'&nbsp;</span><span class="syntaxdefault">action</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'".$_SERVER['</span><span class="syntaxdefault">SCRIPT_URI</span><span class="syntaxstring">']."?action=buy_now&products_id=".$id"'&nbsp;</span><span class="syntaxdefault">method</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'POST'</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">tep_draw_hidden_field</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'products_id'</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">$id</span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">tep_draw_hidden_field</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'quantity'</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">1</span><span class="syntaxkeyword">)<br /><</span><span class="syntaxdefault">div&nbsp;id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'button_add_cart".$id."'&nbsp;</span><span class="syntaxdefault">title</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'Ajouter&nbsp;au&nbsp;panier'&nbsp;</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'float:right;'</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">input&nbsp;type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'submit'&nbsp;</span><span class="syntaxdefault">value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'Ajouter'&nbsp;</span><span class="syntaxdefault">id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'button_submit".$id."'&nbsp;</span><span class="syntaxkeyword">class=</span><span class="syntaxstring">'button_add_cart_small_liste'</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">>&nbsp;</span><span class="syntaxdefault"></span>
    Le problème c'est que j'ai plusieurs boutons "Ajouter", pour différents produits. Est-il possible de rajouter une variable dans la fonction pour n'avoir à la répéter qu'une seule fois dans le document ?
    Car à l'heure actuelle, je suis obligé de répété la fonction pour chaque bouton "Ajouter", avec comme seule différence $id qui sert d'identifiant aux boutons "Ajouter".
    Si je pouvais écrire une fonction globale avec une variavble sur #button_submit et #cart_quantity, je gagnerais des centaines de lignes de codes dans mon document, mais je ne connais pas bien javascript.

    Vous pouvez constater les dégats ici :
    -imprimantes . fr/cartouche-jet-encre-brother-c-21_52.html

    Faites clic droit > afficher la source. Le site est en pleine refonte et fera 100 fois plus pro et moderne après. Merci à ceux qui comprendront le problème
     
  2. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Bonjour.

    Tu peux essayer ça histoire de simplifier :

    1. Retirer tous les Javascript de tes formulaires.
    2. Ajouter une classe à chaque formulaire produit (dans l'exemple ce sera <form class="lambi521"></form>).
    3. Et en fin de page, utiliser ça :

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
      function add_basket(id) {
    	//tes effets css
        var datas_form = $("#"+id).serializeArray();
        $.ajax({
          url:'ajax_add_cart.php',
          data: datas_form,
          type: 'POST',
          success: function(data) {
    	// ton code à l'identique	  
          }
        });
      };
      $('.lambi521').submit(function() {
        add_basket($(this).attr('id'));
        return false;
      });
    });
    </script>
    
    Tant que j'y suis, dans tes effets, tu désactive un #button_submit' qui n'exite nulle part dans ton code.

    @++!
     
  3. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Merci pour la réponse ! Tu as réussi à comprendre ce que je voulais faire ?
    Oui ça je l'ai viré, en + ça me posais problème car à la base cette fonction était présente sur les fiches produits où il n'y a qu'un seul bouton ajouté, j'ai éssayé de l'adapté comme j'ai pu pour que ça marche avec tous les boutons d'une liste de produits mais je n'ai pas trouvé d'autres moyen que de la répéter légèrement différente, une pour chaque bouton, vraiment pas top !

    Marche po :( J'ai mis ça en fin de page :
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
      function add_basket(id) {
    	$('#cart_quantity').live('submit', function() {
    				$('#button_submit').attr('disabled', 'disabled');
    				var options = {};
    				options = { to: "#ajax_cart", className: 'ui-effects-transfer' };
    				$("#button_add_cart").effect('transfer',options,1300);
        var datas_form = $("#"+id).serializeArray();
        $.ajax({
          url:'ajax_add_cart.php',
          data: datas_form,
          type: 'POST',
    	  success: function(data) {
    		var datas = data.split("|");
    		setTimeout(function() {
    		$('#content_products').html(datas[0]);
    		$('#content_total').html(datas[1]);
    		$('#fila_' + datas[2]).fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
    		$('#content_total').fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
    		}, 1300);
    	  }
        });
      };
      $('add_product').submit(function() {
        add_basket($(this).attr('id'));
        return false;
      });
    });
    </script>
    
    Et ça sur les boutons :
    PHP:
    <span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">form class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'add_product'</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'cart_quantity'</span><span class="syntaxdefault"> action</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'?action=buy_now&amp;products_id=13'</span><span class="syntaxdefault"> method</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'POST'</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">input type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"hidden"</span><span class="syntaxdefault"> name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"products_id"</span><span class="syntaxdefault"> value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"13"</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">input type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"hidden"</span><span class="syntaxdefault"> name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"quantity"</span><span class="syntaxdefault"> value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"1"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">div id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'button_add_cart'</span><span class="syntaxdefault"> title</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'Ajouter au panier'</span><span class="syntaxdefault"> style</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'float:right;'</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">input type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'submit'</span><span class="syntaxdefault"> value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'Ajouter'</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'button_submit'</span><span class="syntaxdefault"> class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'button_add_cart_small_liste'</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">a href</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'http://127.0.0.1/imprimantes/product_info.php?products_id=13'</span><span class="syntaxdefault"> title</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'Voir la fiche produit'</span><span class="syntaxdefault"> class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'greenButton_liste'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Voir</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">a</span><span class="syntaxkeyword">></</span><span class="syntaxdefault">form</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span>
    Le problème est surement ici non car j'ai viré les id ?
    Code:
    add_basket($(this).attr('id'));
     
  4. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Pour aller plus vite, voici un exemple qui fonctionne calqué sur ton code de production.
    Tu ne devrais pas avoir grand chose à modifier.
    @++!

    Code:
    <html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
    	</head>
    	<body>
    		<div id="ajax_cart">Panier</div>
    		<br />
    		<br />
    		<br />
    		<form class='add_product' id='cart_quantity1' action='?action=buy_now&amp;products_id=1' method='POST'>
    			<input type="hidden" name="products_id" value="1">
    			<select name="quantity">
    				<option value="1">1</option>
    				<option value="2">2</option>
    				<option value="3">3</option>
    			</select>
    			<div>
    				<input type="image" src="ajouter_panier.png" />
    			</div>
    		</form>
    		<br />
    		<form class='add_product' id='cart_quantity2' action='?action=buy_now&amp;products_id=2' method='POST'>
    			<input type="hidden" name="products_id" value="2">
    			<select name="quantity">
    				<option value="1">1</option>
    				<option value="2">2</option>
    				<option value="3">3</option>
    			</select>
    			<div>
    				<input type="image" src="ajouter_panier.png" />
    			</div>
    		</form>
    		<div id="debug"></div>
    		<!-- Y'en a pas un de trop là ? Le .min est à conserver, l'autre je sais pas //-->
    			<script type=text/javascript src="jquery.js"></script>
    			<script type=text/javascript src="jquery.min.js"></script>
    		<!--  //-->
    		<script type=text/javascript src="jquery.effects.core.js"></script>
    		<script type=text/javascript src="jquery.effects.transfer.js"></script>
    		<script type=text/javascript src="scroller.js"></script>
    		<script type=text/javascript src="headerscroll.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function() {
    			function add_basket(id) {	
    				var options = {};
    				options = { to: "#ajax_cart", className: 'ui-effects-transfer' };
    				$("#"+id+">div").effect('transfer',options,1300);
    				var datas_form = $("#"+id).serializeArray();
    				// début de débug. Supprimer ce qu'il y a en dessous
    				$("#debug").empty(); 
    				$("#debug").append(id + " : ");
    				$.each(datas_form, function(i, field){
    				  $("#debug").append(field.name + ":" + field.value + " ");
    				}); 
    				// fin de débug.
    				$.ajax({
    					url:'ajax_add_cart.php',
    					data: datas_form,
    					type: 'POST',
    					success: function(data) {
    						var datas = data.split("|");
    						setTimeout(function() {
    						$('#content_products').html(datas[0]);
    						$('#content_total').html(datas[1]);
    						$('#fila_' + datas[2]).fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
    						$('#content_total').fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
    						}, 1300);
    					}
    				});
    			};
    			$('.add_product').submit(function() {
    				add_basket($(this).attr('id'));
    				return false;
    			});
    		});
    		</script>
    	</body>
    </html>
    
     
  5. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Yes mec, ça marche ! Trop fort, j'attendais que tu me repondes en tapant F5 et j'ai bien fait d'attendre, tu peux pas savoir à quel point tu viens d'améliorer mon code !

    Sur la nouvelle version j'ai quasiment TOUT viré, tout est optimisé au mieux et ça c'était la dernière étape, désomais le site est ni-kel !

    Un grand merci à toi ! Je n'y aurais jms arrivé tout seul, faut vraiment que je me forme au javascript. Encore un grand merci !
     
  6. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Plaisir :)

    Le truc drôle c'est que je travaille justement sur un panier en ajax, ça facilite les choses !

    +++
     
  7. colorart
    colorart Nouveau WRInaute
    Inscrit:
    24 Juin 2012
    Messages:
    1
    J'aime reçus:
    0
    Bonjour à vous,

    Je suis novice dans le domaine. J'ai calqué votre code pour permettre d'ajouter des produits au panier . Tous fonctionnent super. Sauf que mon deuxième lien( id=3025 ici) ( ajoute bien le produit au panier ) Mais je suis renvoyer a la page central de mon site. Auriez vous une idée pour remédie a cela?
    <p>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" /></p>
    <div id="ajax_cart">
    Panier</div>
    <p>
    <br />
    <br />
    &nbsp;</p>
    <form action="?action=buy_now&amp;products_id=5325" class="add_product" id="cart_quantity1" method="POST">
    <input name="products_id" type="hidden" value="5325" />
    <div>
    <input src="ajouter_panier.png" type="image" /></div>
    </form>
    <p>
    &nbsp;</p>
    <form action="?action=buy_now&amp;products_id=3025" class="add_product" id="cart_quantity2" method="POST">
    <input name="products_id" type="hidden" value="3025" />
    <div>
    <input src="ajouter_panier.png" type="image" /></div>
    </form>
    <div id="debug">
    &nbsp;</div>
    <!-- Y'en a pas un de trop là ? Le .min est à conserver, l'autre je sais pas //--><script type=text/javascript src="jquery.js"></script><script type=text/javascript src="jquery.min.js"></script><!-- //--><script type=text/javascript src="jquery.effects.core.js"></script><script type=text/javascript src="jquery.effects.transfer.js"></script><script type=text/javascript src="scroller.js"></script><script type=text/javascript src="headerscroll.js"></script><script type="text/javascript">
    $(document).ready(function() {
    function add_basket(id) {
    var options = {};
    options = { to: "#ajax_cart", className: 'ui-effects-transfer' };
    $("#"+id+">div").effect('transfer',options,1300);
    var datas_form = $("#"+id).serializeArray();
    // début de débug. Supprimer ce qu'il y a en dessous
    $("#debug").empty();
    $("#debug").append(id + " : ");
    $.each(datas_form, function(i, field){
    $("#debug").append(field.name + ":" + field.value + " ");
    });
    // fin de débug.
    $.ajax({
    url:'ajax_add_cart.php',
    data: datas_form,
    type: 'POST',
    success: function(data) {
    var datas = data.split("|");
    setTimeout(function() {
    $('#content_products').html(datas[0]);
    $('#content_total').html(datas[1]);
    $('#fila_' + datas[2]).fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
    $('#content_total').fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
    }, 1300);
    }
    });
    };
    $('.add_product').submit(function() {
    add_basket($(this).attr('id'));
    return false;
    });
    });
    </script>


    Merci D'avance

    François
     
Chargement...
Similar Threads - Ajouter variable javascript Forum Date
Comment ajouter un tiret devant l'affichage d'une variable... Développement d'un site Web ou d'une appli mobile 12 Mars 2012
Ajouter un texte sur une carte Google Maps (JS) Développement d'un site Web ou d'une appli mobile 15 Janvier 2020
Ajouter style="display: block;" dans une div Développement d'un site Web ou d'une appli mobile 8 Janvier 2020
Ajouter les Rich Snippets sur Prestashop Débuter en référencement 28 Novembre 2019
Comment ajouter une page Facebook en tant que co-organisateur ? Facebook 22 Octobre 2019
Ajouter compte GA + ID de suivi existants Google Analytics 21 Octobre 2019
Ajouter un onglet personnalisé page Facebook avec application perso Facebook 16 Septembre 2019
WordPress Comment ajouter une meta author pour désigner l'auteur Référencement Google 22 Juillet 2019
Ajouter un if après un premier if très différent Développement d'un site Web ou d'une appli mobile 13 Juin 2019
Comment ajouter un lien canonique ? Débuter en référencement 31 Janvier 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice