How to do add to compare and add to wishlist functionality using ajax. I want to do ajax functionality for wishlist and compare in homepage hot seller block products and listing page products.

Without reload page using ajax add to wishlist and add to compare functionality.

  • Hi, did you get the solution or any helpful resources?
    – vedu
    Commented Jan 25, 2018 at 12:28
  • Did you find a solution?
    – Condor
    Commented Apr 30, 2018 at 7:14
  • Did you solve this?
    – Ashna
    Commented May 22, 2018 at 5:38
  • Did you find any solution?
    – zus
    Commented Feb 23, 2021 at 6:45

3 Answers 3


Don't want to advertise anything but Tigren ajax compare and wishlist module has fulfilled our requirements. Oh and also it is free and includes ajax add to cart and customer login functions too.



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


<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

function addProductToWishlist() {
    require(["jquery"], function($){
            url: '<?php echo $this->getUrl('general/index/addtowishlist') ?>',
            method: 'get',
            data: { productId: <?php echo $productId ?>},
            dataType: 'json',
            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 logic of adding product to wishlist.



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;

    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);


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

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

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


I've managed to come up with a fairly simple solution for AJAX Wishlist functionality:

1) Use the following helper method which returns JSON-encoded parameters:


This returns something like the following:

    "action": "https://www.mywebsite.com/wishlist/index/add/",
    "data": {
        "product": "1",
        "uenc": "a0bLy9tMhZGlhLWVsZXljbGFya2oZWxY29tL25i5hc3RsZW1lbnRzLXNUusLmhHR0cHM6Ww,"

2) Include the form key in your data when making a POST request, similar to the following:

var url  = "https://www.mywebsite.com/wishlist/index/add/";
var data = {
    action   : "add-to-wishlist",
    form_key : "xyC5IcaqeNg2um6g",
    product  : "1",
    uenc     : "a0bLy9tMhZGlhLWVsZXljbGFya2oZWxY29tL25i5hc3RsZW1lbnRzLXNUusLmhHR0cHM6Ww,"

$.post(url, data);

The item should now be in your wishlist.

Note: the form key can be obtained either via JavaScript by getting the value of a cookie called form_key or through Magento's getFormKey() function.

Edit: there are a couple of drawbacks when using this method:

  1. There's no success callback from the POST request.
  2. Once you add an item, you'll see a message on the next page you visit saying "[item] has been added to your Wish List. Click here to continue shopping."

So although this works, it's far from a robust solution.

  • 1
    Perfect answer with explanation ! wonderful! made my day! +1 :) Commented Jul 30, 2020 at 6:26

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.