Add To Wishlist Feature Using JQuery

Hey Guys, As we know that user visits e-commerce sites (like E-bay, Amazon, Flipkart etc) to buy online things. User selects the favourite products to add his wish list and remove product from wish list. Point is what will be the functionality to add product in the wish list.

wishlist

Live Demo  [sociallocker]Download[/sociallocker]

In this tutorial, we will create functionality to add product into user wish list.  Let’s divide the functionality into sub functionalities.

  1. Check product in the list or not
  2. If not then add product into wish list, notify to user
  3. If product is already in wish list
  4. Count the number of products added into wish list
  5. Remove product from the wish list, notify to user and count the products into wish list.

So I divided the whole functionality into 5 sub functionalities.

  1. Check product in the list or not: We will create one array wishlist in Javascript and search the product id in array if not available then move to second.
 var wish_list = new Array();

// check product id is not in wish list.

if(jQuery.inArray($product_id,wish_list)==-1){

}
  1. If not then add product into wish list, notify to user: Product will be added into wishlist block and add product id into wishlist array.
$product_str = "<tr class='wishlist-item' id='list_id_"+$product_id+"'><td class='w-pname'>"+$product_name+"</td><td class='w-price'>$ "+$prduct_price+"</td><td class='w-premove' wpid='"+$product_id+"'>x</td></tr>";

                        jQuery("#wish_list_item").append($product_str);     

                        wish_list.push($product_id);

                        show_message("Product added");

add above code inside the IF block

  1. If product is already in wish list: if IF block is false then nothing will happen.
  2. Count the number of products: Count the number of products in wish list. We will count the product ids of wish list
    jQuery("#listitem").html(wish_list.length);

     if(wish_list.length>1){

              jQuery("#p_label").html("Products");

              }else{

              jQuery("#p_label").html("Product");

     }
  1. Remove product from the wish list , notify user and count the products: Before removing the product from wish list block and wish list array, first we have to find product id. So we have to add product id as attribute into product remove button.

By the help of product id which will be extracted from button attribute, we will remove product from wish list and product id from wish list array.

   

jQuery("#wish_list_item").on("click",".w-premove",function(){

              $product_id = jQuery(this).attr("wpid");

              jQuery("#list_id_"+$product_id).remove();

              wish_list = jQuery.grep( wish_list, function( n, i ) {

                        return n != $product_id;

              });

              show_message("Product removed");

              count_items_in_wishlist_update();

     });

Again we have to count products, so we will call same functionality

jQuery("#listitem").html(wish_list.length);

     if(wish_list.length>1){

              jQuery("#p_label").html("Products");

              }else{

              jQuery("#p_label").html("Product");

     }

So above code is common for both functionalities (add & remove). We will add above code inside one function and call same functionality in both functionalities ..

function count_items_in_wishlist_update(){

     jQuery("#listitem").html(wish_list.length);

     if(wish_list.length>1){

              jQuery("#p_label").html("Products");

              }else{

              jQuery("#p_label").html("Product");

     } 

}

There is one more function to show notification

function show_message($msg){

     jQuery("#msg").html($msg);

     $top = Math.max(0, ((jQuery(window).height() - jQuery("#msg").outerHeight()) / 2) + jQuery(window).scrollTop()) + "px";

    $left = Math.max(0,((jQuery(window).width() - jQuery("#msg").outerWidth()) / 2) + jQuery(window).scrollLeft()) + "px";

     jQuery("#msg").css("left",$left);

     jQuery("#msg").animate({opacity: 0.6,top: $top}, 400,function(){

              jQuery(this).css({'opacity':1});

     }).show();

     setTimeout(function(){jQuery("#msg").animate({opacity: 0.6,top: "0px"}, 400,function(){

              jQuery(this).hide();

     });},1000);

}

 

6 thoughts on “Add To Wishlist Feature Using JQuery”

    1. Hi Ajeet,

      You can do one thing. Give the id for every image product and give the reference of product image into add to wishlist button like add one more attribute in wish list button like imgid=’product image id’ and extract the source of image by a small snippet javascript code..

      Thanks
      Jayant

Comments are closed.