Show different wishlist icon, if user has added the icon in his wishlist

Question

I need to show different wishlist icons when user has added the product to his wishlist.

So, there is icon A (default) and icon B (when user is logged in and has added product to his wishlist already)

I use bootstrap glyphicons.

I was able to achieve this on product pages, but cant get it done on Category listing pages.

Here is the code I have on addto.phtml which works on single product page.

<a href="<?php echo $_wishlistSubmitUrl ?>" onclick="productAddToCartForm.submitLight(this, this.href); return false;" class="link-wishlist btn btn-link">
    <?php 
        // Show different icons if product is already added in wishlist
        $isAddedInWishilist = false;
        $_wishlistCollection = Mage::helper('wishlist')->getWishlistItemCollection();
        if($_wishlistCollection){
            $_wishlistCollection->addFieldToSelect('product_id');
            $_wishlistCollection->addFieldToFilter('product_id',$_product->getId());
            if(count($_wishlistCollection)==1) {
                $isAddedInWishilist = true;
                echo '<span class="glyphicon glyphicon-heart" style="color:#ff0000;"></span>';
            } else {
                echo '<span class="glyphicon glyphicon-heart-empty"></span>';
            }
        }
 ?>

        <?php echo $this->__('Add to Wishlist') ?></a>

Same code on category pages doesnt work correctly. If user has added at least one product in his wishlist, then on category listing page, it displays icon B on all products, instead of showing icon B only on that specific product that user added to his wishlist.

Following is the code i have on list.phtml (for Category listing) right now.

                <?php if ($this->helper('wishlist')->isAllow()) : ?>
                    <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist btn btn-link wishlist-icon-category-page">
                        <span class="glyphicon glyphicon-heart-empty"></span><?php // echo $this->__('Add to Wishlist') ?></a>
                <?php endif; ?>

Answer 1

On the category page you could try something like this:

After initializing the product collection

$_productCollection = $this->getLoadedProductCollection();

you should add the following lines:

$wishlistProductsIds = array();
foreach (Mage::helper('wishlist')->getWishlistItemCollection() as $wishlistItem) {
    $wishlistProductsIds[] = $wishlistItem->getProductId();
}

then change the code for showing the wishlist link to:

<?php if ($this->helper('wishlist')->isAllow()) : ?>
<a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist btn btn-link wishlist-icon-category-page">
    <?php if (in_array($_product->getId(), $wishlistProductsIds)): ?>
        <span class="glyphicon glyphicon-heart"></span><?php //echo $this->__('Already in Wishlist') ?>
    <?php else: ?>
        <span class="glyphicon glyphicon-heart-empty"></span><?php //echo $this->__('Add to Wishlist') ?>
    <?php endif; ?>
</a>