Magento2.1 wishlist on category page

Question

How to set an active class to magento2.1 wish-list button on list page? I mean that, when i go to product page, if marked that product to my wish-list before, just shows already added to wish-list or change the color of the button. I used below code on the product page and its ok but not works on the category page

    <?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var \Magento\Wishlist\Block\Catalog\Product\View\AddTo\Wishlist $block */
?>
<?php if ($block->isWishListAllowed()) : ?>
    <?php $_product = $block->getProduct(); ?>
    <?php $isAdded = $this->helper('Magento\Wishlist\Helper\Data')->getWishlistItemCollection()->addFieldToFilter('product_id', $_product->getId())->count(); ?>
    <?php if($isAdded): ?>
        <a href="javascript:void(0)" class="action towishlist already-added" data-action="add-to-wishlist"><span><?= $block->escapeHtml(__('Added to Wish List')) ?></span></a>
    <?php else: ?>
        <a href="#" class="action towishlist" data-post='<?= /* @noEscape */ $block->getWishlistParams() ?>' data-action="add-to-wishlist"><span><?= $block->escapeHtml(__('Add to Wish List')) ?></span></a>
    <?php endif; ?>
<?php endif; ?>
<script type="text/x-magento-init">
    {
        "body": {
            "addToWishlist": <?= /* @noEscape */ $block->getWishlistOptionsJson() ?>
        }
    }
</script>

Answer 1

I do realize it is late, but maybe I can help a bit.

You can add a bit of JS to add a class to the wishlist so that you can style it the way you want to:

<script>
    require(['jquery', 'jquery/ui'], function ($) {
        $(window).load(function(e) {
            $('.action.towishlist').addClass('added');
        });
    });
</script>

My complete code looks like this:

<?php
$wishlistHelper = $this->helper('Magento\Wishlist\Helper\Data');
$_product = $block->getProduct();
if ($wishlistHelper->isAllow()) {

    $wishlistCollection = $wishlistHelper->getWishlistItemCollection();
    foreach ($wishlistCollection as $_wishlist_item) {
        $in_wishlist = false;
        if ($_product->getId() == $_wishlist_item->getProduct()->getId()) {
            $in_wishlist = true;
            break;
        }
    }
}
?>
<?php if (!empty($in_wishlist) && $in_wishlist): ?>
    <a href="javascript:void(0)" class="action towishlist" data-action="add-to-wishlist">
        <span><?=$block->escapeHtml(__('Added to Wish List'))?></span>
    </a>
    <script>
        require(['jquery', 'jquery/ui'], function ($) {
            $(window).load(function(e) {
                $('.action.towishlist').addClass('added');
            });
        });
    </script>
    <?php else: ?>
    <a href="#" class="action towishlist" data-post='<?=/* @noEscape */$block->getWishlistParams()?>' data-action="add-to-wishlist">
        <span><?=$block->escapeHtml(__('Add to Wish List'))?></span>
    </a>
    <?php endif;?>
<?php endif;?>
<script type="text/x-magento-init">
    {
        "body": {
            "addToWishlist": <?=/* @noEscape */$block->getWishlistOptionsJson()?>
        }
    }
</script>