How to add product to Wishlist without redirecting and without page refresh using ajax on Listing page

Question

My controller:

app\code\Vendor\Mymodule\Controller\Index\Wishlist.php

<?php

namespace Vendor\Mymodule\Controller\Index;

class Wishlist extends \Magento\Framework\App\Action\Action {

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Wishlist\Helper\Data $wishlistHelper,
        \Magento\Framework\Controller\Result\JsonFactory $jsonFactory
        ) {
            parent::__construct($context);
            $this->wishlistHelper = $wishlistHelper;
            $this->jsonFactory = $jsonFactory;
    }

    public function execute() {
        $result = $this->jsonFactory->create();
        $data = $this->wishlistHelper->getWishlistItemCollection()->getData();

        return $result->setData(['status' => 200, 'items' => $data]);
    }

    
}

app\code\Vendor\Mymodule\etc\frontend\routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route frontName="customwishlist" id="customwishlist">
<module name="Heart_Listcolor"/>
</route>
</router>
</config>

Now the product added but redirect to the wishlist landing page, how to add the product to Wishlist without redirecting and without refresh using ajax

My custom theme Magento_Wishlist

app\design\frontend\Zero\my_theme\Magento_Wishlist\templates\catalog\product\list\addto\wishlist.phtml

<?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()) ?>'

role="button">
<!-- data-action="add-to-wishlist" -->
<img class="whislist-icon product-id-<?php echo $block->getProduct()->getId();?>" src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/whislist.png'); ?>" />
<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);
$img = $mediaUrl."yt.png";
?>
<script>
require(['jquery'], function($){
jQuery.ajax({
url: '<?php echo $this->getUrl('customwishlist/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 $img; ?>');
}
}
});
});
</script>

Now i created a controller to update the wishlist icon after the product added to the wishlist. this is working good but redirects to a wishlist landing page,

How to achieve without redirecting and without refresh page to add the product to wishlist.

Answer 1

I have added Ajax add to wishlist functionality on product page following below method:

Added custom "Add to wishlist" button to following file inside <?php if ($block->isWishListAllowed()) : ?> condition

app/design/frontend/Vendor/Module/Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml

<button name="add-to-wishlist" onclick="addProductToWishlist()"> Add to Wishlist</button>
<?php $productId = json_decode($block->getWishlistParams(), true)['data']['product']; ?>

It calls addProductToWishlist() javascript function which I have added in the same wishlist.phtml file

<script>
function addProductToWishlist() {
    require(["jquery"], function($){
        $.ajax({
            url: '<?php echo $this->getUrl('general/index/addtowishlist') ?>',
            method: 'get',
            data: { productId: <?php echo $productId ?>},
            dataType: 'json',
            showLoader:true,
            success: function(data){
                var redirect = data.result.redirect;
                if(redirect) {
                    window.location.href = '<?php echo $this->getUrl('customer/account/login') ?>';
                } else {
                  // show successfully added message 
                }
            }
        });
    });
}

Here is my controller code which has a logic of adding products to the wishlist.

app/code/Vendor/Module/Controller/Index/Addtowishlist.php

<?php

namespace Vendor\General\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\ResultFactory;

class Addtowishlist extends Action {

    protected $customerSession;
    protected $wishlistRepository;
    protected $productRepository;

    public function __construct(
    Context $context,
    \Magento\Customer\Model\Session $customerSession,
    \Magento\Wishlist\Model\WishlistFactory $wishlistRepository,
    \Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
    ResultFactory $resultFactory,
    \Magento\Framework\Controller\Result\JsonFactory $jsonFactory
        ) {
        $this->customerSession = $customerSession;
        $this->wishlistRepository= $wishlistRepository;
        $this->productRepository = $productRepository;
        $this->resultFactory = $resultFactory;
        $this->jsonFactory = $jsonFactory;
        parent::__construct($context);
    }

    public function execute() {
        $customerId = $this->customerSession->getCustomer()->getId();
        if(!$customerId) {
           $jsonData = ['result' => ['status' => 200, 'redirect' => 1,'message' => 'Customer not logged in.']]; 
            $result = $this->jsonFactory->create()->setData($jsonData);
            return $result;
        }
        $productId = $this->getRequest()->getParam('productId');

        try {
            $product = $this->productRepository->getById($productId);
        } catch (NoSuchEntityException $e) {
            $product = null;
        }

        $wishlist = $this->wishlistRepository->create()->loadByCustomerId($customerId, true);

        $wishlist->addNewItem($product);
        $wishlist->save();

        $jsonData = ['result' => ['status' => 200, 'redirect' => 0, 'message' => 'Added to wishlist']];
        $result = $this->jsonFactory->create()->setData($jsonData);
        return $result;
    }
}

The above code works fine on the product page. Similar way you can add Ajax add to wishlist functionality on the listing page.

Note: Above code needs some improvement like validating form_key in the controller file.