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)