Show Wishlist icon as selected when clicked

Question

I need to show the icon as selected (may be color change) when user add a product to wishlist. I've searched and tried the solution here How to check if a product is already on the wishlist in Magento 2? but not clear where to add this code. Please guide me in the correct direction.

Thanks.

Answer 1

You have to create a custom controller to provide wishlist data of current user. Using ajax call I got the data from this controller which gives refreshed wishlist data and not cached one. Controller code :

namespace Vendor\Module\Controller\Index;

class Wishlist extends \Magento\Framework\App\Action\Action {

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Wishlist\Helper\Data $wishlistHelper,
        \Magento\Framework\Controller\Result\JsonFactory $jsonFactory
        ) {
            parent::__construct($context);
            $this->wishlistHelper = $wishlistHelper;
            $this->jsonFactory = $jsonFactory;
    }

    public function execute() {
        $result = $this->jsonFactory->create();
        $data = $this->wishlistHelper->getWishlistItemCollection()->getData();

        return $result->setData(['status' => 200, 'items' => $data]);
    }
}

Aslo add following code in list.phtml

<script>
require(['jquery'], function($){
    $.ajax({
        url: '<?php echo $this->getUrl('catalogchanges/index/wishlist') ?>',
        method: 'get',
        dataType: 'json',
        success: function(data) {
            var wislistAddesCheckData = data;
            var itemLenth = wislistAddesCheckData.items.length;
            for(i=0;i<itemLenth; i++){
                var wislistAddedProductId = wislistAddesCheckData.items[i].product_id;
                $(".product-id"+wislistAddedProductId).addClass('in-wishlist');
            }
        }
    });
});
</script>

Answer 2

Here you got how to check if the product is in your wishlist:

How to check if a product is already on the wishlist in Magento 2?

As for second part of your question you would need to specify where you would like it to be ? catalog_category? catalog_search ? product page ?

I believe if you search in your project for phrase: "Add to Wish List" you will find the spot where to add the code you need ;)