0

i am working on magento 1.9.2.4 wishlist, my code successfully adding product to wishlist-

what i do for adding product to wishlist is -

function ajaxWishlist(url,id){
    var messageBox = new Growler();
    url = url.replace("wishlist/index","ajaxwishlist/index");
    url += 'isAjax/1/';
    jQuery('#ajax_loading'+id).show();
    jQuery.ajax( {
        url : url,
        dataType : 'json',
        success : function(data) {
            jQuery('#ajax_loading'+id).hide();
            if(data.status == 'ERROR'){
                console.log(data.messasge)
                messageBox.warn(data.message, {
                    life: 2
                });
            }else{
                messageBox.growl(data.message, {
                    life: 2
                });
            }
        }
    });
}

This code works fine just to add product to wishlist, what i want to achieve is, as soon as the product added to the wishlist, icon for wishlist should change and when clicking on the icon again product should remove from the wishlist.

Even i am getting this scenario but that is after page.

So what i basically want now-

1: Change icon on first click and add product to wishlist.

2: If we again click on the wishlist changed icon product should get removed from wishlist with a notification

What i did so far:

write now i am using if else condition and checking for product in wishlist like this:

<?php if ($this->helper('wishlist')->isAllow()) : ?>
    <?php
    $productId = $_product->getId();
    $customerId = Mage::getSingleton('customer/session')->getCustomerId();
    $wishlist = Mage::getModel('wishlist/wishlist')->loadByCustomer($customerId, true);
    $collection = Mage::getModel('wishlist/item')->getCollection()
        ->addFieldToFilter('wishlist_id', $wishlist->getId())
        ->addFieldToFilter('product_id', $productId);
    $item = $collection->getFirstItem();
    $hasProduct = !!$item->getId();
    ?>
    <?php if ($hasProduct == 1){ ?>
        <?php 
            $_wishlistItem = Mage::getModel('wishlist/item')->loadByProductWishlist(
                $this->helper('wishlist')->getWishlist()->getId(),
                $_product->getId(),
                $_product->getStoreId()
            );
            $_wishlistRemoveUrl = $this->helper('wishlist')->getRemoveUrl($_wishlistItem);
        ?>
        <a title="<?php echo $this->__('Remove Product from Wishlist?') ?>" href="<?php echo $_wishlistRemoveUrl ?>" class="link-wishlist link-wishlist-remove fill">
            <img src="<?php echo $this->getSkinUrl("images/wishlistico_fill.png") ?>" class="img-responsive"/>
        </a>                                        
    <?php }else{ ?>
        <a title="<?php echo $this->__('Add to Wishlist') ?>" href="#" onclick='ajaxWishlist("<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>","<?php echo $_product->getId()?>");return false;' class="link-wishlist">
            <img id="wishlist_img" src="<?php echo $this->getSkinUrl('images/productWishList.png');?>" class="img-responsive"/>
        </a>
    <?php } ?>
<?php endif; ?>

please help me out in the function to achieve the same..

0

I have Edited your code it should help you,Edited two lines in phtml

    <a class="remove_wishlist"style="display:none" title="<?php echo $this->__('Remove Product from Wishlist?') ?>" href="<?php echo $_wishlistRemoveUrl ?>" class="link-wishlist link-wishlist-remove fill">
                <img src="<?php echo $this->getSkinUrl("images/wishlistico_fill.png") ?>" class="img-responsive"/>
            </a>                                        
        <?php }else{ ?>
            <a class="add_wishlist" style="display:block" title="<?php echo $this->__('Add to Wishlist') ?>" href="#" onclick='ajaxWishlist("<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>","<?php echo $_product->getId()?>");return false;' class="link-wishlist">
                <img id="wishlist_img" src="<?php echo $this->getSkinUrl('images/productWishList.png');?>" class="img-responsive"/>
            </a>


and in ajax added two lines

 if(data.status == 'ERROR'){
                console.log(data.messasge)
                messageBox.warn(data.message, {
                    life: 2
                });
            }else{
                jQuery('.add_wishlist').hide();
                jQuery('.remove_wishlist').show();
                messageBox.growl(data.message, {
                    life: 2
                });
            }

You can take idea with this code.

  • your code work as demand, but it still need to refresh to get remove url, Remove URL is not updating with ajax call, any idea how to do this? @akgola – Lalit838 Sep 8 '17 at 12:06
  • You can change remove url with add url as per your requirement by jquery and vice versa. – akgola Sep 11 '17 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.