Ajax call not working on Magento_Wishlist

Question

I have created a controller for products added wishlist or not, if available include class name,

Controller:

<?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]);
 }
}

The controller working, i want to include class using ajax

Path: 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()) : ?>
 <div class="product-id-<?php echo $block->getProduct()->getId();?>">
 <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" src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/whislist.png'); ?>" />
 <span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
 </a>
</div>
<?php endif; ?>
<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).addClass('in-wishlist');
}
}
});
});
</script>

The script not functioning, the class not included, how to included that, my condition if products added to the wishlist should include class ,

<div class="product-id-<?php echo $block->getProduct()->getId();?>">

• Rohan Hapani: Did you check value of itemLenth?

Answer 1

Assuming you're getting product_id from ajax call then I think there is a minor problem in your jquery. It should be $(".product-id-"+wislistAddedProductId).addClass('in-wishlist') not $(".product-id"+wislistAddedProductId).addClass('in-wishlist'). Check your div class name. Try below :

<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).addClass('in-wishlist');
}
}
});
});
</script>

• zus: In wishlist.phtml how to update image, i mean if the product already available in the wishlist i want to update wishlist icon (image)?
• Abdul Samad Abbasi: Since you're using custom jquery on that page,I think it's pretty easy to change img src attribute with jquery and give whatever image src you wish
• zus: Here is my code, can you pls help me with that, if products added to the wishlist, the wishlist icon should change. codeshare.io/5PrAKQ
• Abdul Samad Abbasi: Just give your <img> tag and id like ` <img id="test" class="whislist-icon" src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/whislist.png'); ?>" /> ` and then use $('#test').attr('src',"whateverurl.png"); obviously inside some condition, otherwise it'll replace everytime it encounters this file.
• zus: My condition: If the product already available on the wishlist the image should update, can you pls help me with this?