0

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>
2
  • anybody can solve this issue?
    – MGPM
    Commented Jan 23, 2019 at 10:40
  • Did you get solution for this ? I'm having same issue. Its working at product page but not at category page. dumping data always print first product available in wishlist.
    – anonymous
    Commented May 1, 2019 at 7:28

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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