Add/Remove Product from Wishlist using Ajax in Magento

Hello Guys,

There are many custom codes and extension(s) are available on Internet through which we can Add product in "WISHLIST" using Ajax but vice-versa is not available. i.e, we can not Remove product from WISHLIST using Ajax.So I have created a custom functionality which works fine for me. Hope this will help some one!!

I have extended VS AJAX extension to achieve "Remove Product from wishlist using AJAX".You can find VS AJAX extension @ http://www.magentocommerce.com/magento-connect/vs-ajax-8468.html

1) Download my Attachment and add it in your respective magento folder structure.

2)   After than Add below code in under your product list page

<?php
## Add this in top of your product list page ##
$loggedin_cus_id=Mage::helper('customer')->getCustomer()->getEntityId() ;
## Find logged in  sessions user id


## Finding users wishlist ##
$wishList = Mage::getSingleton('wishlist/wishlist')->loadByCustomer($loggedin_cus_id);//customer
$wishListItemCollection = $wishList->getItemCollection();
if (count($wishListItemCollection)) {
$arrProductIds = array();
foreach ($wishListItemCollection as $item) {
/* @var $product Mage_Catalog_Model_Product */
$product = $item->
getProduct();
$arrProductIds[] = $product->
getId();
}
}

/**************  Wishlist code *********************************************/
$wishlistcoll =   Mage::helper('wishlist')->
getWishlistItemCollection();
$wishlistcollarray =   Mage::helper('wishlist')->getWishlistItemCollection()->getData();
foreach($wishlistcoll as $item){
$itemarray[] = $item->getProductId();
}

## Add this in top of your product list page ##
?>

<?php // -----------------------------------------------------------------------
## Under  foreach loop Add  below code in place of existing wishlist code ?>

<?php if(Mage::getStoreConfig('ajax/wishlistcompare/enabledpro')){?>

<div style="float:left;">

  <ul class="add-to-links">
  <?php if ($this->helper('wishlist')->isAllow()) : ?>                     
                     
<?php  if (in_array($_product->getId(), $arrProductIds)) {
$checkUser=1;
}else {                              
$checkUser=0;
}

$wishlist = Mage::getModel('wishlist/item')->load($_product->getId(),'product_id');

if($wishlist->getId() && $checkUser==1) {

if (in_array($_product->getId(), $itemarray))
{
$itemId = $wishlistcollarray[$count]['wishlist_item_id'];

$itemLoad = Mage::getModel('wishlist/item')->load($itemId);
?>
<li style="float: left; display: block; width: 100%; text-align: center;">
<a href="#" onclick='removeWishlist("<?php echo $this->helper('wishlist')->getRemoveUrl($itemLoad) ?>","<?php echo $_product->getId()?>");return false;' class="link-wishlist">
  <span class="fabShopSprite selected">
  </span>
  <?php //echo $this->__('Remove to Wishlist') ?>
</a>
</li>
                     
<?php
$count++;
}
?>                    
                     
<?php } else { ?>
<li style="float: left; display: block; width: 100%; text-align: center;">
<a href="#" onclick='ajaxWishlist("
<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>","<?php echo $_product->getId()?>");return false;' class="link-wishlist">
  <span class="fabShopSprite" id="wishlist<?php echo $_product->getId()?>">
  </span>
  </a>
</li>
 <?php } ?>
<?php endif; ?>
</ul>
<span id='ajax_loading<?php echo $_product->getId()?>' style='display:none'>
  <img src='<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif')?>'/>
</span>
</div>
<?php }  ?>
<?php ##******************************************************?>

3) Please Note: You need to create CSS & 2 heart icon images by yourself for displaying Heart icon (Wishlist icon - from where we can add/ remove product from wishlist)