Actualiser un panier

Version imprimable

Bonjour,

Je débute dans le JS et JSON et je souhaiterais savoir comment actualiser le panier de mon site sans avoir a recharger la page.
J'ai regarder sur le net mais je ne comprends pas le principe pour le mettre en place sachant que les données à récupérer sont dans une session.
Voici le code :
ajout.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function(){
	$('#ajout').submit(function(){
	$.ajax({
		type : "post",
		url : "traitement/ajout-produits.php",
		data : {
			'l': $('#l').val(),
			'p': $('#p').val(),
			'q': $('#q').val(),
			'v': $('#v').val(),
			'n': $('#selvalue').val()
		},
		dataType: 'json',
		success: function(response){
			console.log(response);
			if(response.success){
							$('#successmessage').text(response.success).slideDown().delay(2000).slideUp();
						}
			if(response.errors){
							$('#errormessage').text(response.errors).slideDown().delay(2000).slideUp();
 
						}
		}
 
 
	});	
 
	return false;
	});
});

ajout.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$erreur = false;
$errors = [];
if(empty($_POST['n'])){
	$erreur = true;
	array_push($errors, 'Choisir un taux de nicotine');
	$response = ['errors'=>$errors];
	echo json_encode($response);exit;
}
 
   $l = (isset($_POST['l'])? $_POST['l']:  (isset($_GET['l'])? $_GET['l']:null )) ;
   $p = (isset($_POST['p'])? $_POST['p']:  (isset($_GET['p'])? $_GET['p']:null )) ;
   $q = (isset($_POST['q'])? $_POST['q']:  (isset($_GET['q'])? $_GET['q']:null )) ;
   $v = (isset($_POST['v'])? $_POST['v']:  (isset($_GET['v'])? $_GET['v']:null )) ;
   $n = (isset($_POST['n'])? $_POST['n']:  (isset($_GET['n'])? $_GET['n']:null )) ;
   $l =  $l."".$n;
   $l = preg_replace('#\v#', '',$l);
   //On verifie que $p soit un float
   $p = floatval($p);
 
   if (is_array($q)){
      $QteArticle = array();
      $i=0;
      foreach ($q as $contenu){
         $QteArticle[$i++] = intval($contenu);
      }
   }
   else
   $q = intval($q);
 
 
if (!$erreur){
 
if (creationPanier() && !isVerrouille())
   {
      $positionProduit = array_search($l,  $_SESSION['panier']['libelleProduit']);
 
      if ($positionProduit !== false)
      {
         $_SESSION['panier']['qteProduit'][$positionProduit] += $q ;
      }
      else
      {
         array_push( $_SESSION['panier']['libelleProduit'],$l);
         array_push( $_SESSION['panier']['qteProduit'],$q);
         array_push( $_SESSION['panier']['prixProduit'],$p);
		 array_push( $_SESSION['panier']['photoProduit'],$v);
      }
 
   }
$success = []; 
array_push($success, 'produit ajouter au panier');
$response = ['success'=>$success];
echo json_encode($response);exit; 
}

Le bloc panier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
                                         <div id="top-cart" class="header-misc-icon d-none d-sm-block">
								<a href="#" id="top-cart-trigger"><i class="icon-line-bag"></i><span class="top-cart-number"><?php echo compterArticles(); ?></span></a>
								<div class="top-cart-content">
									<div class="top-cart-title">
										<h4>Panier</h4>
									</div>
									<div class="top-cart-items">
									<?php $nbArticles=count($_SESSION['panier']['libelleProduit']);
                                                                                        if ($nbArticles <= 0){ ?> 
											<div class="top-cart-item">
											<div class="top-cart-item-image">
 
											</div>
											<div class="top-cart-item-desc">
												<div class="top-cart-item-desc-title">
													<a href="#">Panier vide :(</a>
 
												</div>
 
											</div>
										</div>
											<?php
                                                                                                                }else
                                                                                                                {
                                                                                        for ($i=0 ;$i < $nbArticles ; $i++)
                                                                                                { ?> 
										<div class="top-cart-item">
											<div class="top-cart-item-image">
												<a href="#"><img src="produits/<?php echo $_SESSION['panier']['photoProduit'][$i]; ?>.jpg" alt="<?php echo $_SESSION['panier']['libelleProduit'][$i]; ?>" /></a>
											</div>
											<div class="top-cart-item-desc">
												<div class="top-cart-item-desc-title">
													<a href="#"><?php echo htmlspecialchars($_SESSION['panier']['libelleProduit'][$i]); ?></a>
													<?php $total = htmlspecialchars($_SESSION['panier']['prixProduit'][$i]) * htmlspecialchars($_SESSION['panier']['qteProduit'][$i]); ?>
													<span class="top-cart-item-price d-block"><?php echo number_format($total, 2, ',', ' '); ?>€</span>
												</div>
												<div class="top-cart-item-quantity">x <?php echo htmlspecialchars($_SESSION['panier']['qteProduit'][$i]); ?></div>
											</div>
										</div>
										<?php } ?>
										<?php } ?>
									</div>
									<?php if ($nbArticles <= 0){}else{ ?> 
									<div class="top-cart-action">
										<span class="top-checkout-price"><?php echo number_format(MontantGlobal(), 2, ',', ' '); ?>€</span>
										<a href="#" class="button button-3d button-small m-0">Voir le panier</a>
									</div>
									<?php } ?>
								</div>
							</div>

Merci pour vos lumières.

07/01/2022, 19h38
mathieu

qu'est ce qui ne fonctionne pas avec votre code ?
07/01/2022, 20h08
bertrand59789

Je souhaite actualiser le panier sans recharger la page avec json et ajax mais je ne sais pas trop comment réalisé cela.
Ici a l'ajout du produit, la session et bien créer et le produit ajouté ainsi qu'un message indique que le produit est dans le panier mais le panier ne change pas, je dois recharger la page pour cela.

Bonjour,

Citation:

...les données à récupérer sont dans une session...

Donc, pas de paramètres à transmettre.
Une simple fonction suffit.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(document).ready(function(){
	$('#ajout').submit(function(){
		$.ajax({
			type : "post",
			url : "traitement/ajout-produits.php",
			data : {
				'l': $('#l').val(),
				'p': $('#p').val(),
				'q': $('#q').val(),
				'v': $('#v').val(),
				'n': $('#selvalue').val()
			},
			dataType: 'json',
			success: function(response)
			{
	//			console.log(response);
				if(response.success){
					$('#successmessage').text(response.success).slideDown().delay(2000).slideUp();
				}
				if(response.errors){
					$('#errormessage').text(response.errors).slideDown().delay(2000).slideUp();
				}
				// actualiser le panier
				js_actualiser_panier();
			}
		});	
		return false;
	});
});
// ------------------
// actualiser le panier
function js_actualiser_panier()
{
	$.ajax({
		type : "post",
		url : "traitement/actualiser-panier-ajax.php",
		data : '', // pas de paramètres à transmettre
		dataType: 'html',	// retour HTML
		success: function(response_html)
		{
			$('#top-cart').html(response_html);
		}
}

actualiser-panier-ajax.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
		<a href="#" id="top-cart-trigger"><i class="icon-line-bag"></i><span class="top-cart-number"><?php echo compterArticles(); ?></span></a>
		<div class="top-cart-content">
		  <div class="top-cart-title">
			<h4>Panier</h4>
		  </div>
		  <div class="top-cart-items">
			<?php $nbArticles=count($_SESSION['panier']['libelleProduit']);
		  if ($nbArticles <= 0){ ?> 
			<div class="top-cart-item">
			  <div class="top-cart-item-image">
 
			  </div>
			  <div class="top-cart-item-desc">
				<div class="top-cart-item-desc-title">
				  <a href="#">Panier vide :(</a>
 
				</div>
 
			  </div>
			</div>
			<?php
		  }else
		  {
		  for ($i=0 ;$i < $nbArticles ; $i++)
		  { ?> 
			<div class="top-cart-item">
			  <div class="top-cart-item-image">
				<a href="#"><img src="produits/<?php echo $_SESSION['panier']['photoProduit'][$i]; ?>.jpg" alt="<?php echo $_SESSION['panier']['libelleProduit'][$i]; ?>" /></a>
			  </div>
			  <div class="top-cart-item-desc">
				<div class="top-cart-item-desc-title">
				  <a href="#"><?php echo htmlspecialchars($_SESSION['panier']['libelleProduit'][$i]); ?></a>
				  <?php $total = htmlspecialchars($_SESSION['panier']['prixProduit'][$i]) * htmlspecialchars($_SESSION['panier']['qteProduit'][$i]); ?>
				  <span class="top-cart-item-price d-block"><?php echo number_format($total, 2, ',', ' '); ?>€</span>
				</div>
				<div class="top-cart-item-quantity">x <?php echo htmlspecialchars($_SESSION['panier']['qteProduit'][$i]); ?></div>
			  </div>
			</div>
			<?php } ?>
			<?php } ?>
		  </div>
		  <?php if ($nbArticles <= 0){}else{ ?> 
		  <div class="top-cart-action">
			<span class="top-checkout-price"><?php echo number_format(MontantGlobal(), 2, ',', ' '); ?>€</span>
			<a href="#" class="button button-3d button-small m-0">Voir le panier</a>
		  </div>
		  <?php } ?>
		</div>

A noter : il n'y a pas les lignes

Code:

1
2
3
	<div id="top-cart" class="header-misc-icon d-none d-sm-block">
 
	<div>

08/01/2022, 22h48
bertrand59789

Merci ca marche impeccable, je ne savais pas qu'il été possible de passer du php comme cela.
Par contre j'ai un petit souci qui arrive avec l'ajout d'un produit.
enfaite quand je clique sur le lien :

Code:

<a href="#" id="top-cart-trigger"><i class="icon-line-bag"></i><span class="top-cart-number">5</span></a>

il y a une modification de la class de

Code:

<div id="top-cart" class="header-misc-icon d-none d-sm-block">

vers cela :

Code:

<div id="top-cart" class="header-misc-icon d-none d-sm-block top-cart-open">

afin de déplier le menu avec les produits mais après l'ajout d'un produit, cela ne fonctionne pas, je suis obligé d'actualiser la page pour que cela refonctionne.
y a t-il une solution pour résoudre cela ?
08/01/2022, 23h43
jreaux62

Oui, c'est normal... (ou en tout cas, pas pris en compte)

Les éléments ajoutés ne faisant pas parite du DOM au départ,ils ne sont plus reconnus.

Il faut modifier le script d'ouverture.
Il doit ressembler à :
$('#top-cart-trigger').click(....) ou $('#top-cart-trigger').on('click', ....).

Il faut le remplacer par :

Code:

$('#top-cart').on('click', '#top-cart-trigger', ....)

Oui j'ai cela pour effectuer le changement de la class.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
topcart: function(){
			if( $topCart.length < 1 ) {
				return true;
			}
 
			$("#top-cart-trigger").off( 'click' ).on( 'click', function(e){
				$pagemenu.toggleClass('page-menu-open', false);
				$topCart.toggleClass('top-cart-open');
				e.stopPropagation();
				e.preventDefault();
			});
		},

Donc je le modifie comme cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
topcart: function(){
			if( $topCart.length < 1 ) {
				return true;
			}
 
			$("#top-cart").off( 'click' ).on( 'click', function(e){
				$pagemenu.toggleClass('page-menu-open', false);
				$topCart.toggleClass('top-cart-open');
				e.stopPropagation();
				e.preventDefault();
			});
		},

09/01/2022, 00h05
jreaux62

change

Code:

$("#top-cart-trigger").off( 'click' ).on( 'click', function(e){

en

Code:

$("#top-cart").off( 'click', "#top-cart-trigger" ).on( 'click', "#top-cart-trigger", function(e){
09/01/2022, 00h05
bertrand59789

Merci à toi jreaux62.
tout fonctionne impeccable. :merci:
09/01/2022, 00h10
jreaux62
Pour info / explication :
- .off( events [, selector ] [, handler ] )
- .on( events [, selector ] [, handler ] )
Code:

$("#top-cart").off( 'click', "#top-cart-trigger" ).on( 'click', "#top-cart-trigger", function(e){

Donc :
- le sélecteur est bien "#top-cart-trigger",
- $("#top-cart") est l'élément "présent dans le DOM dès le départ" le plus "proche".
- Mais on aurait pu utiliser $("body") (qui est forcément présent dans le DOM dès le départ)