0

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();?>">
1
  • Did you check value of itemLenth? – Rohan Hapani Feb 16 at 4:16
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>
7
  • In wishlist.phtml how to update image, i mean if the product already available in the wishlist i want to update wishlist icon (image)? – zus Feb 16 at 5:44
  • 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 – Abdul Samad Abbasi Feb 16 at 6:14
  • 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 – zus Feb 16 at 7:15
  • 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. – Abdul Samad Abbasi Feb 16 at 7:27
  • My condition: If the product already available on the wishlist the image should update, can you pls help me with this? – zus Feb 16 at 7:40

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.