Why php code is getting cached in Magento 2 listing page?

Question

I have built in full page cache enabled in Magento.

I have added following code in app/design/frontend/Vendor/Module/Magento_Catalog/templates/product/list.phtml which shows whether an item is already in wishlist or not

<?php $wishlistHelper = $this->helper('Magento\Wishlist\Helper\Data'); 
// other code
foreach ($_productCollection as $_product): 
$_in_wishlist = false;
    foreach ($wishlistHelper->getWishlistItemCollection() as $_wishlist_item){
        if(($_product->getId() == $_wishlist_item->getProduct()->getId()) && $customerLoggedin) {
             $_in_wishlist = true;
        }
       }
var_dump($_in_wishlist);
endforeach;
?>

Now I have some code on the same page which adds product to wishlist via Ajax call which works fine.

If I reload the page after product is added to wishlist, above code shows bool(false) but when I clean cache by running bin/magento cache:clean it shows the correct value which is bool(true).

Why this code is getting cached and how to fix it?

Answer 1

When FPC is enabled, prefer always factory method. Factory method will create new object. So, it will return always updated data :

By Object Manager :

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$wishlist = $objectManager->create('\Magento\Wishlist\Model\Wishlist');
$wishlist_collection = $wishlist->loadByCustomerId(your_customer_id, true)->getItemCollection();

By Factory Method :

protected $_wishlistFactory;

public function __construct(
    \Magento\Wishlist\Model\WishlistFactory $wishlistFactory
){
    $this->_wishlistFactory = $wishlistFactory;
}

public function yourFunction()
{
    $wishlist = $this->_wishlistFactory->create();
    $wishlist_collection = $wishlist->loadByCustomerId(your_customer_id, true)->getItemCollection();
}

Answer 2

This issue is because of enabled full page cache on listing pages.

Due to enabled full page cache, content of listing page is considered as public content. Public content is stored server side in your reverse proxy cache storage (e.g., file system, database, Redis, or Varnish) and same data is available to multiple customers.

To fix the issue I have created a custom controller to provide wishlist data of current user. Using ajax call I got the data from this controller which gives refreshed wishlist data and not cached one.

Sharing my controller code which might be helpful to someone:

<?php

namespace Vendor\Module\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]);
    }
}

And added following code in list.phtml

<script>
require(['jquery'], function($){
    $.ajax({
        url: '<?php echo $this->getUrl('catalogchanges/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>