I'm trying to make a wishlist system in my website. When a user clicks on the heart,the product is added to the wishlist. My problem is,when I navigate from a page to another the cookie becomes empty. Below is my code :
$(document).ready(function() {
i = 1;
if ($.cookie("wishlis") != null && i == 1) {
var r = JSON.parse($.cookie("wishlis"));
$(".wishlist").each(function() {
if (r.indexOf($(this).data('id')) >= 0) {
$(this).children('i').attr('class', 'fa fa-heart active-wishlist');
i = 2;
}
});
$('.count').text(r.length);
}
});
$('.wishlist').on('click', function() {
if ($.cookie("wishlis") == null) {
var array = new Array();
array.push($(this).data("id"));
$.cookie("wishlis", "{ path: '/' }");
$.cookie("wishlis", JSON.stringify(array), "{ path: 'http://tunicompare.tn' }");
$(this).children('i').attr('class', 'fa fa-heart active-wishlist');
$('.count').text("1");
} else {
var r = JSON.parse($.cookie("wishlis"));
if ($(this).children('i').attr('class').indexOf('active-wishlist') >= 0) {
$(this).children('i').attr('class', 'fa fa-heart');
index = r.indexOf($(this).data("id"));
if (index > -1) {
r.splice(index, 1);
}
$.cookie("wishlis", JSON.stringify(r));
$('.count').text(r.length);
} else {
if (r.indexOf($(this).data("id")) == -1) {
r.push($(this).data("id"));
$.cookie("wishlis", JSON.stringify(r));
$(this).children('i').attr('class', 'fa fa-heart active-wishlist');
var r = JSON.parse($.cookie("wishlis"));
$('.count').text(r.length);
}
}
}
});
I figured out that the issue with the wishlist not persisting across page navigation is due to incorrect usage of the jQuery cookie plugin:
$(document).ready(function() {
if ($.cookie("wishlist") != null) {
var wishlist = JSON.parse($.cookie("wishlist"));
$(".wishlist").each(function() {
if (wishlist.indexOf($(this).data('id')) >= 0) {
$(this).children('i').attr('class', 'fa fa-heart active-wishlist');
}
});
$('.count').text(wishlist.length);
}
});
$('.wishlist').on('click', function() {
var wishlist = [];
if ($.cookie("wishlist") != null) {
wishlist = JSON.parse($.cookie("wishlist"));
}
var productId = $(this).data("id");
var heartIcon = $(this).children('i');
if (heartIcon.hasClass('active-wishlist')) {
// Remove from wishlist
var index = wishlist.indexOf(productId);
if (index > -1) {
wishlist.splice(index, 1);
}
heartIcon.attr('class', 'fa fa-heart');
} else {
// Add to wishlist
if (wishlist.indexOf(productId) == -1) {
wishlist.push(productId);
heartIcon.attr('class', 'fa fa-heart active-wishlist');
}
}
$.cookie("wishlist", JSON.stringify(wishlist), { path: '/' });
$('.count').text(wishlist.length);
});