3

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.

4
  • Can you upload any screenshot how it should look? Nov 29, 2018 at 11:54
  • Here you got how to check in an item is in the wishlist: magento.stackexchange.com/questions/152913/… Nov 29, 2018 at 11:54
  • @GosuPrzmak if you notice, the link I shared is the same which you mentioned.
    – user54226
    Nov 29, 2018 at 12:43
  • 1
    @SukumarGorai Can't upload any image right now, but you may think as a grey heart image for the normal state, and when clicked (item added to wishlist) the heart image will be replace with a colored one.
    – user54226
    Nov 29, 2018 at 12:46

2 Answers 2

4

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>

enter image description here

2
1

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 ;)

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.