IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Actualiser un panier [AJAX]


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 48
    Points : 23
    Points
    23
    Par défaut Actualiser un panier
    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.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 786
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 786
    Points : 13 573
    Points
    13 573
    Par défaut
    qu'est ce qui ne fonctionne pas avec votre code ?

  3. #3
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 48
    Points : 23
    Points
    23
    Par défaut
    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.

  4. #4
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    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>

  5. #5
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 48
    Points : 23
    Points
    23
    Par défaut
    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 ?

  6. #6
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    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', ....)

  7. #7
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 48
    Points : 23
    Points
    23
    Par défaut
    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();
    			});
    		},

  8. #8
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    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){

  9. #9
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 48
    Points : 23
    Points
    23
    Par défaut
    Merci à toi jreaux62.
    tout fonctionne impeccable.

  10. #10
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    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)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Actualisation d'un tableau AJAX/JSon
    Par didio dans le forum jQuery
    Réponses: 3
    Dernier message: 30/08/2018, 11h23
  2. [AJAX] Récupérer un tableau à plusieurs dimension reçu avec ajax (json)
    Par krizentherm dans le forum jQuery
    Réponses: 4
    Dernier message: 29/07/2013, 17h15
  3. [AJAX] Panier avec ajax
    Par spawns dans le forum AJAX
    Réponses: 2
    Dernier message: 17/03/2012, 10h55
  4. [AJAX] panier avec ajax
    Par kate59 dans le forum AJAX
    Réponses: 1
    Dernier message: 04/06/2009, 00h27
  5. Réponses: 13
    Dernier message: 30/03/2009, 15h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo