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– MGPMJan 3, 2019 at 7:35
-
Do you want this on product page only or in the listing page as well?– Sukumar GoraiJan 3, 2019 at 8:03
-
Just in product page– MGPMJan 3, 2019 at 8:05
-
You can check the answer. Its working perfectly for me.– Sukumar GoraiJan 3, 2019 at 8:23
-
Is it working correctly?– Sukumar GoraiJan 3, 2019 at 9:45
3 Answers
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)– MGPMJan 3, 2019 at 16:09
-
1Can 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.– MGPMJan 3, 2019 at 16:39
-
1
-
1Above 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
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>
-
This change doesn't seem to work with M2.4.4 though it prevents the MySQL error. May 18, 2022 at 13:10
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?