javascriptjquerysymfony-3.4jquery-cookie

How to call a jquery-cookie from anywhere in my website?


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

Solution

  • 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);
    });