8710 sujets

Développement web côté serveur, CMS

Bonjour à tous,
Pour un de mes projets, j'aimerais utiliser un plugin que j'ai trouvé sur le net qui permet d'ajouter dynamiquement des produits au panier et ce sans rechargement de page. Il fonctionne bien, toutefois je ne parviens pas modifier les informations des produits que j'ajoute au panier. Dans le tuto, il est dit que cela se gère par un placeholder mais il n'est pas expliqué comment ça fonctionne. J'ai essayé pas mal de tests, rien à faire.

Le plugin en question

Quelqu'un peut-il m'aider ?
Merci
Bonsoir Yannick.P,
Je vais te montrer comment je l'ai testé avec seulement 2 produits sur la page mais le principe est le même quelque soit le nombre de produit que tu présentes :

1. Tu construit ta page avec tous les produits que tu veux présenter : le principe est d'encapsuler les informations de chaque produit dans un container.
La ligne importante c'est l'ancre avec la class "cd-add-to-cart" : chaque produit doit avoir son ancre et les attributs "data-" renseignés par ses valeurs spécifiques. C'est grâce a ces attributs que l'on va pouvoir récupérer les infos sur le produit dans le panier.
Dans leur exemple il n'y avait que le prix, j'ai ajouté un libellé et une image(data-libelle et data-src):

exemple:

   <div class='produit' id='p1'>
        <div class='description-produit'>
            DESCRIPTION DE MON PRODUIT UN
        </div>
        <img src='img/produit1.jpg' alt='produit1' width='200' height='200'/>
	<h1>Add to Cart Interaction</h1>
	<a href="#0" class="cd-add-to-cart" data-price="20.00" data-libelle='MON PRODUIT UN' data-src='img/produit1.jpg'>Add To Cart</a>
    </div>
    <div class='produit' id='p2'>
        <div class='description-produit'>
            MON PRODUIT DEUX
        </div>
        <img src='img/produit2.jpg' alt='produit2' width='200' height='200'/>
	<h1>Add to Cart Interaction</h1>
	<a href="#0" class="cd-add-to-cart" data-price="25.99" data-libelle='MON PRODUIT DEUX' data-src='img/produit2.jpg'>Add To Cart</a>
    </div>


2 - Dans le main.js :
-Modifier la fonction "addProduct" : ajouter trigger en parametre ce qui va permettre de passer les informations contenu dans l'ancre cliquée. Aprés il faut changer le prix qui était en "dure" par trigger.data('price') et ajouter le trigger.data('libelle') et trigger.data('src') aux endroits adéquates...

 
function addProduct(trigger) {
		//this is just a product placeholder
		//you should insert an item with the selected product info
		//replace productId, productName, price and url with your real product info
		productId = productId + 1;
		var productAdded = $('<li class="product"><div class="product-image">'+trigger.data('libelle')+'<a href="#0"><img src="'+trigger.data('src')+'" alt="placeholder" width="50" height="50"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">'+trigger.data('price')+'</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
		cartList.prepend(productAdded);
	}

-et pou finir modifier l'appel de la fonction addproduct dans addToCart(trigger) :

function addToCart(trigger) {
....
    addProduct(trigger);
...
}


Voilà je ne suis pas allé plus loin mais il y a encore du travail à faire pour exploiter le panier maintenant...
Bonne continuation
Meilleure solution
GJboba merci tout ta réponse ça fonctionne nickel !
A tout hasard, saurais-tu comment garder le panier actif lorsque l'on change de page ?
L'idéal serait pour moi de récupérer les données js pour les transférer via ajax dans une page php pour garder le panier en sessions.
C'est la seule solution pour garder le panier actif sur la page pour que l'utilisateur l'ai toujours sous la main non ?

récupérer les données ça me paraît simple avec trigger.data pour ensuite faire un appel ajax et actualiser le panier mais comment le ré-afficher sur la page après ?
Bon j'ai regardé comment tu pouvais procéder pour conserver le panier d'une page à une autre. Le principe est simple mais le mettre en place sur ce code a été un peu plus compliqué que prévu !
Le principe : j'ai été au plus simple, c'est à dire sauvegarder le html du panier dans une variable de session lorsque celui-ci est modifier (ajout,suppression de produits) et l'afficher sur la page demandée par l'utilisateur avec un echo de la variable en session.
Evidemment le javascript de gestion du panier doit aussi être attaché a cette nouvelle page...

Pour la mise en application du principe la difficulté a été de trouver à quel moment faire cette sauvegarde en session car dans ce code il y a des "settimeout" qui décale la mise à jour de certain éléments du panier comme le compteur de produit...

Je pense pas que ma solution soit parfaite mais si elle peut t'inspirer...

J'ai testé en raffraîchissant la page : si le panier est conservé tel qu'il était avant le raffraîchissement c'est gagné!

J'ai renommé index.html en index.php pour me simplifier la vie

<!doctype html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
	<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
  	
	<title>Add to Cart Interaction | CodyHouse</title>
</head>
<body>
<main>
        
    <button id='newSession'>Nouvelle Session</button>
    
    <div class='produit' id='p1'>
        <div class='description-produit'>
            DESCRIPTION DE MON PRODUIT UN
        </div>
        <img src='img/produit1.jpg' alt='produit1' width='200' height='200'/>
	<h1>Add to Cart Interaction</h1>
	<a href="#0" class="cd-add-to-cart" data-price="20.00" data-libelle='MON PRODUIT UN' data-src='img/produit1.jpg'>Add To Cart</a>
    </div>
    <div class='produit' id='p2'>
        <div class='description-produit'>
            MON PRODUIT DEUX
        </div>
        <img src='img/produit2.jpg' alt='produit2' width='200' height='200'/>
	<h1>Add to Cart Interaction</h1>
	<a href="#0" class="cd-add-to-cart" data-price="25.99" data-libelle='MON PRODUIT DEUX' data-src='img/produit2.jpg'>Add To Cart</a>
    </div>
</main>
<?php
session_start();
// Si $_SESSION['Cart'] est défini alors je l'affiche sinon j'affiche le panier vide
if (isset($_SESSION['Cart'])) {
    $empty="empty";
    if (isset($_SESSION['htmlCartEmpty'])) {
        if ($_SESSION['htmlCartEmpty']=="false") {
            $empty="";
        }
    }
    echo "<div class=\"cd-cart-container $empty\">";
    echo $_SESSION['Cart'];
    echo "</div>";
} else {
    echo "
     <div class=\"cd-cart-container empty\">
	<a href=\"#0\" class=\"cd-cart-trigger\">
		Cart
		<ul class=\"count\"> <!-- cart items count -->
			<li>0</li>
			<li>0</li>
		</ul> <!-- .count -->
	</a>

	<div class=\"cd-cart\">
		<div class=\"wrapper\">
			<header>
				<h2>Cart</h2>
				<span class=\"undo\">Item removed. <a href=\"#0\">Undo</a></span>
			</header>
			
			<div class=\"body\">
				<ul>
					<!-- products added to the cart will be inserted here using JavaScript -->
				</ul>
			</div>

			<footer>
				<a href=\"#0\" class=\"checkout btn\"><em>Checkout - $<span>0</span></em></a>
			</footer>
		</div>
	</div> <!-- .cd-cart -->
</div> <!-- cd-cart-container -->
	";
        }
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
	if( !window.jQuery ) document.write('<script src="js/jquery-3.0.0.min.js"><\/script>');
</script>
<script src="js/main.js"></script> <!-- Resource jQuery -->

</body>
</html>


saveCart.php:

<?php
session_start();
$_SESSION['Cart']=$_POST['htmlCart'];
$_SESSION['htmlCartEmpty']=$_POST['htmlCartEmpty'];
?>


newSession.php :

<?php
session_destroy();
session_start();
session_unset();
header('Location:  http://ton  url/index.php');
?>


Dans main.js ajouter ces fonctions :


/*
         * Mise à jour de la session
         */
        function majSessionCart() {
            var vide=true;
            if ($(".cd-cart-container").find(".product:not(.deleted)").length>0) {
                vide=false;
            }
            $.ajax({
            type: "POST",
            url: "saveCart.php",
            cache: true,
            async: true,   // AJAX ASYNCHRONE
            data: "htmlCart="+$(".cd-cart-container").html()+"&htmlCartEmpty="+vide,
            success: function(data){
                }
            });
        }
        
        $("#newSession").click( function() {
           window.location.replace("http://ton  url/newSession.php");
        });


et ajouter les appels à majSessionCart
ici :

//reinsert item deleted from the cart
		undo.on('click', 'a', function(event){
			clearInterval(undoTimeoutId);
			event.preventDefault();
			cartList.find('.deleted').addClass('undo-deleted').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
				$(this).off('webkitAnimationEnd oanimationend msAnimationEnd animationend').removeClass('deleted undo-deleted').removeAttr('style');
				quickUpdateCart();
			});
			undo.removeClass('visible');
                        majSessionCart();
		});


et dans cette fonction:

function updateCartCount(emptyCart, quantity) {
		if( typeof quantity === 'undefined' ) {
			var actual = Number(cartCount.find('li').eq(0).text()) + 1;
			var next = actual + 1;
			
			if( emptyCart ) {
				cartCount.find('li').eq(0).text(actual);
				cartCount.find('li').eq(1).text(next);
                               majSessionCart();
			} else {
				cartCount.addClass('update-count');

				setTimeout(function() {
					cartCount.find('li').eq(0).text(actual);
				}, 150);

				setTimeout(function() {
					cartCount.removeClass('update-count');
				}, 200);

				setTimeout(function() {
					cartCount.find('li').eq(1).text(next);                        
                                        majSessionCart();
				}, 230);
			}
		} else {
			var actual = Number(cartCount.find('li').eq(0).text()) + quantity;
			var next = actual + 1;
			
			cartCount.find('li').eq(0).text(actual);
			cartCount.find('li').eq(1).text(next);
                        majSessionCart();
		}
	}


Voilà maintenant à toi de jouer!
Bonne continuation
Modifié par GJboba (27 Apr 2017 - 01:17)