1

How to set active class to magento2.1 wish-list button on product page? I mean that, when i go to product page, if i marked that product to my wish-list before, just shows already added to wish-list or change the color of button.

  • For example: show red heart on products that already added to wishlist – MGPM Jan 3 at 7:35
  • Do you want this on product page only or in the listing page as well? – Sukumar Gorai Jan 3 at 8:03
  • Just in product page – MGPM Jan 3 at 8:05
  • You can check the answer. Its working perfectly for me. – Sukumar Gorai Jan 3 at 8:23
  • Is it working correctly? – Sukumar Gorai Jan 3 at 9:45
1

Copy the following file:

/vendor/magento/module-wishlist/view/frontend/templates/catalog/product/view/addto/wishlist.phtml

to you desired theme like below:

/app/design/frontend/Dapl/demo/Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml

and add the following code to your theme's wishlist.phtml like below:

<?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>

Use the following css for color change or you can add any other color according to your requriement and add it to your respective css or less file.

<style type="text/css">
    .product-social-links .action.towishlist.already-added{color: #ff0000;}
</style>
  • Thanks for your answer. i tried it but it adds new wish-list icon and no action. just says: javascript:void(0) – MGPM Jan 3 at 16:09
  • 1
    Can you update what you have tried? I think you have missed something – Sukumar Gorai Jan 3 at 16:12
  • I just created Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml and put your code on it then added css to one of my CSS files related to product page. but it still has no changed color and will add to wish-list again. – MGPM Jan 3 at 16:39
  • 1
    Can you share a screenshot what you are seeing? – Sukumar Gorai Jan 3 at 16:48

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.