Ajouter une variable javascript

L
lambi521
WRInaute passionné
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
 
S
Supermaury
WRInaute discret
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.

@++!
 
L
lambi521
WRInaute passionné
Merci pour la réponse ! Tu as réussi à comprendre ce que je voulais faire ?
Tant que j'y suis, dans tes effets, tu désactive un #button_submit' qui n'exite nulle part dans ton code.
Cliquez pour agrandir...
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'));
 
S
Supermaury
WRInaute discret
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>
 
L
lambi521
WRInaute passionné
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 !

<!-- Y'en a pas un de trop là ? Le .min est à conserver, l'autre je sais pas //-->
Cliquez pour agrandir...
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 !
 
C
colorart
Nouveau WRInaute
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
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
1.fr
Discussions similaires
S
Comment ajouter un tiret devant l'affichage d'une variable...
Réponses
4
Affichages
1K
Schwarzer Stern
S
O
Formulaire pour ajouter une variable à un url
Réponses
4
Affichages
2K
onthematrice
O
L
Ajouter du texte sur les "bas" de pages categories
Réponses
1
Affichages
1K
lilos8590
L
laurentsc
WordPress ajouter des mots clé avec YOAST SEO
Réponses
8
Affichages
2K
laurentsc
laurentsc
M
Ajouter sur la search console un blog créé sur like-blogs.com
Réponses
3
Affichages
1K
Marie-Aude
Marie-Aude
P
Ajouter des liens sortants externes pour améliorer le référencement
Réponses
4
Affichages
2K
RefSanté
R
V
Comment ajouter le tag GA4 sur 7000 fichiers ?
Réponses
13
Affichages
1K
ABCWEB
ABCWEB
P
Comment ajouter une URL en japonais dans Blogger ?
Réponses
3
Affichages
7K
pktrix
P
S
Quelle solutions pour ajouter un annuaire de membre
Réponses
1
Affichages
2K
Marie-Aude
Marie-Aude
M
Linkedin : comment ajouter une URL sur une image ?
Réponses
13
Affichages
8K
mengeco
M
B
Ajouter des liens externes : bonne pratique SEO ?
Réponses
2
Affichages
2K
bonus4
B
E
Protection de site web : quel code ajouter dans htaccess ?
Réponses
1
Affichages
2K
Eric2PA
E
P
Ajouter des liens internes sitewide en cloaking
Réponses
5
Affichages
4K
PBG
P
2
Ajouter des lignes de rich snippet - KK Star
Réponses
2
Affichages
1K
29vince29
2
phonyclic
WordPress Comment ajouter le CDN Cloudflare sur son site WP ?
Réponses
4
Affichages
3K
phonyclic
phonyclic
KOogar
Ajouter une Opacité CSS sur une image en Background
Réponses
5
Affichages
2K
SeanWhite
S
OTP
Ajouter un texte sur une carte Google Maps (JS)
Réponses
3
Affichages
3K
OTP
OTP
P
Ajouter style="display: block;" dans une div
Réponses
16
Affichages
2K
poupilou
P
S
Ajouter les Rich Snippets sur Prestashop
Réponses
3
Affichages
2K
Sanguien14
S
M
Comment ajouter une page Facebook en tant que co-organisateur ?
Réponses
1
Affichages
6K
Montsa
M
Haut