Actualiser un panier

**bertrand59789** · 06/01/2022, 22h32

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**mathieu** · 07/01/2022, 18h38

qu'est ce qui ne fonctionne pas avec votre code ?

**bertrand59789** · 07/01/2022, 19h08

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.

**jreaux62** · 08/01/2022, 15h33

Bonjour,

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

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bertrand59789** · 08/01/2022, 21h48

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

vers cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ?

**jreaux62** · 08/01/2022, 22h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bertrand59789** · 08/01/2022, 22h59

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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();
			});
		},

**jreaux62** · 08/01/2022, 23h05

change

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bertrand59789** · 08/01/2022, 23h05

Merci à toi jreaux62.
tout fonctionne impeccable.

**jreaux62** · 08/01/2022, 23h10

Pour info / explication :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

			$("#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)

Actualiser un panier [AJAX]

jQuery

Discussions similaires

Partager

Partager