4

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.

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

3 Answers 3

5

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>
16
  • 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, 2019 at 16:09
  • 1
    Can you update what you have tried? I think you have missed something Jan 3, 2019 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, 2019 at 16:39
  • 1
    Can you share a screenshot what you are seeing? Jan 3, 2019 at 16:48
  • 1
    Above answer is for Product Details Page and you are working on Listing page I think. Remove .product-social-links from css and check it in Product Details Page. Feb 10, 2021 at 10:57
2

For anyone who meets the same MySQL error posted by David B, please use main_table.product_id or cat_index.product_id to replace product_id in addFieldToFilter.

vendor/magento/module-wishlist/view/frontend/templates/catalog/product/view/addto/wishlist.phtml
<?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('main_table.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>
1
  • This change doesn't seem to work with M2.4.4 though it prevents the MySQL error. May 18, 2022 at 13:10
1

The answer from @SukumarGorai look like a good solution. But with Magento 2.3 it generates a MySQL error message for the resulting query.

The query to generate isAdded produces this SQL:

SELECT main_table.* FROM wishlist_item AS main_table INNER JOIN catalog_category_product_index_store1 AS cat_index ON cat_index.product_id = main_table.product_id AND cat_index.category_id = '2' AND cat_index.visibility IN (3, 2, 4) WHERE (wishlist_id = '') AND (main_table.store_id IN('1')) AND (product_id = '4317');

The error message reports that product_id is ambiguous.

Can you suggest a way to generate isAdded that avoids this error?

Your Answer

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

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