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? 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>
8
  • 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 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. 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.