0

My wishlist code:

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

/** @var Magento\Wishlist\Block\Catalog\Product\ProductList\Item\AddTo\Wishlist $block */
?>
<?php if ($block->getWishlistHelper()->isAllow()) : ?>


<a href="#"
class="action towishlist"
title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>"
aria-label="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>"
data-post='<?= /* @noEscape */ $block->getAddToWishlistParams($block->getProduct()) ?>'
data-action="add-to-wishlist"
role="button">
<img class="whislist-icon product-id-<?php echo $block->getProduct()->getId();?>" src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/whislist_icon.jpg'); ?>" />
<span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
</a>

<?php endif; ?>
<?php
$_objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$storeManager = $_objectManager->get('Magento\Store\Model\StoreManagerInterface');
$currentStore = $storeManager->getStore();
$mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
$wishimage = $mediaUrl."after_added.jpg";
?>

<script>
require(['jquery'], function($){
jQuery.ajax({
url: '<?php echo $this->getUrl('addtowish/index/wishlist') ?>',
method: 'get',
dataType: 'json',
success: function(data) {
var wislistAddesCheckData = data;
var itemLenth = wislistAddesCheckData.items.length;
for(i=0;i<itemLenth; i++){
var wislistAddedProductId = wislistAddesCheckData.items[i].product_id;
$(".product-id-"+wislistAddedProductId).attr('src','<?php echo $wishimage ; ?>');
}
}
});
});
</script>

Now, if click wishlist icon its redirect to the wishlist landing page, how to stop that?

0

2 Answers 2

1

Please change code as per i have added here. Also modified it as per your need.

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

/** @var Magento\Wishlist\Block\Catalog\Product\ProductList\Item\AddTo\Wishlist $block */
?>
<?php if ($block->isWishListAllowed()) : ?>

    <a href="javascript:void(0);" class="action" id="custom-wishlist"
        title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>"
        aria-label="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>" role="button">
        <img class="whislist-icon product-id-<?php echo $block->getProduct()->getId();?>" src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/whislist_icon.jpg'); ?>" />
        <?php
            $_objectManager = \Magento\Framework\App\ObjectManager::getInstance();
            $storeManager = $_objectManager->get('Magento\Store\Model\StoreManagerInterface');
            $currentStore = $storeManager->getStore();
            $mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
            $wishimage = $mediaUrl."after_added.jpg";
        ?>
        <img class="whislist-icon show-img-<?php echo $block->getProduct()->getId();?>" src="<?php /* @escapeNotVerified */ echo $wishimage; ?>" style="display:none;"/>
        <span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
    </a>

    <script>
    require(['jquery','Magento_Customer/js/customer-data'], function($,customerData){
        $( "#custom-wishlist" ).click(function() {
            jQuery.ajax({
                url: '<?php echo $this->getUrl('hideorders/index/wishlist') ?>',
                method: 'get',
                dataType: 'json',
                data: {
                    productId: "<?php echo $block->getProduct()->getId() ?>"
                },
                success: function(data) {
                    console.log(data.productid);
                    var productId = data.productid;
                    $(".product-id-"+productId).hide();
                    $(".show-img-"+productId).show();
                    //Do whatever you want to do
                    var sections = ['wishlist'];
                    customerData.invalidate(sections);
                    customerData.reload(sections, true);
                }
            });
        });
    });
    </script>
<?php endif; ?>

Please create controller file Wishlist.php file

<?php
/**
 *
 * Copyright © 2015 Zmagecommerce. All rights reserved.
 */
namespace PackageName\Module\Controller\Index;

use Magento\Framework\Controller\Result\JsonFactory;

class wishlist extends \Magento\Framework\App\Action\Action 
{
    protected $_customerSession;

    protected $_resultJsonFactory;

    protected $wishlistProvider;

    protected $_wishlistRepository;

    protected $_productRepository;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Customer\Model\Session $customerSession,
        \Magento\Wishlist\Model\WishlistFactory $wishlistRepository,
        JsonFactory $resultJsonFactory,
        \Magento\Wishlist\Controller\WishlistProviderInterface $wishlistProvider,
        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
    ) {
        $this->_customerSession = $customerSession;
        $this->_wishlistRepository= $wishlistRepository;
        $this->_resultJsonFactory = $resultJsonFactory;
        $this->wishlistProvider = $wishlistProvider;
        $this->_productRepository = $productRepository;
        parent::__construct($context);
    }

    public function execute()
    {
        $response = [];
        $productId = $this->getRequest()->getParam('productId');
        $customerId = $this->_customerSession->getCustomer()->getId();
        if($productId && $customerId) {
            try {
                $product = $this->_productRepository->getById($productId);
            } catch (NoSuchEntityException $e) {
                $product = null;
            }

            if($product) {
                $wishlist = $this->_wishlistRepository->create()->loadByCustomerId($customerId, true);
                $wishlist->addNewItem($product);
                $wishlist->save();
                $response['productid'] = $productId; 
            }
        }

        $resultJson = $this->_resultJsonFactory->create();
        $resultJson->setData($response);
        return $resultJson;
    }
}
11
  • I want to update the wishlist icon after product added to the wishlist, can you pls help me with this also, thanks.
    – zus
    Feb 22, 2021 at 8:11
  • 1
    Yes , i will update my code in few mins.
    – ZealousWeb
    Feb 22, 2021 at 8:23
  • I have updated my answer in above both the file according to your need. Please check and let me know on this.
    – ZealousWeb
    Feb 22, 2021 at 9:08
  • Could you please approve and upvote this?
    – ZealousWeb
    Feb 22, 2021 at 10:09
  • 1 exception(s): Exception #0 (Magento\Framework\Exception\LocalizedException): Invalid method Magento\Wishlist\Block\Catalog\Product\ProductList\Item\AddTo\Wishlist\Interceptor::isWishListAllowed, any help thanks
    – zus
    Feb 22, 2021 at 10:19
0

I have checked your code. And you need to modify your code like below.

Because of "data-post" , it redirects.

data-post='<?= /* @noEscape */ $block->getAddToWishlistParams($block->getProduct()) ?>'  , this is passing data like below


{"action":"http:\/\/localhost\/magento2\/demo\/magento236\/wishlist\/index\/add\/","data":{"product":1,"uenc":"aHR0cDovL3NpdGVwcm9vZnMubmV0L21hZ2VudG8yL2Rod2FuaS9tYWdlbnRvMjM2L3Rlc3QtcHJvZHVjdC5odG1sP3F0eT00"}}

That's why it is redirects from above action. You have to remove "data-post" from your add to wishlist link and you have to pass data in your ajax call. Also you have to pass product id and other needed data in ajax call.

After that in your controller file , you have to load prodcut object by product id and add product in wishlist programmatically.

2
  • Thank you, and how to implement ajax for wishlist icon, i need if click wishlist icon the product added wishlist without refresh the page.
    – zus
    Feb 22, 2021 at 7:23
  • I will post my answer in few mins for you
    – ZealousWeb
    Feb 22, 2021 at 7:24

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.