How to add product to Wishlist without redirecting and without page refresh using ajax on Listing page
-
15-04-2021 - |
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.
Pas de solution correcte
Autres conseils
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.