1

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.

1
0

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.

4
  • Hi ZealousWeb, For listing page, where should i add <?php if ($block->isWishListAllowed()) : ?> – zus Feb 23 at 13:06
  • Please check file vendor/magento/module-wishlist/view/frontend/layout/catalog_category_view.xml – ZealousWeb Feb 23 at 13:12
  • Hi ZealousWeb, if i click wishlist icon product added to wishlist, i need if customer click again i want that product removed from wishlist, can u pls help me on that? can u pls join the chat chat.stackexchange.com/rooms/120695/… – zus Mar 26 at 11:05
  • can u pls join the chat chat.stackexchange.com/rooms/121314/room-for-zus-and-zealousweb – zus Mar 26 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.