Wishlist button color on Magento 2.1
-
14-04-2021 - |
Вопрос
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.
Решение
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>
Другие советы
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>
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?