Magento 2 Cache – Why PHP Code is Cached on Listing Page

cachemagento2

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?

Best Answer

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("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("customer_id", true)->getItemCollection();
}

Related Solutions

Magento – Disable page cache for a single block

You can't disable single block cache like in magento 1,

Magento recommends handling customer related data via ajax.

So you need to create an api endpoint or section data and use javascript to retrieve the data and load it on front :)

https://amasty.com/blog/how-to-use-sections-in-magento-2/

Magento – Problem overrding .phtml file: Magento 2 Catalog module

It seems you have to set pager and sorting in your custom phtml file.

I have followed below steps pr add pagination and sorting.

In your block file add below code for add pagination:

public function __construct(
    \Magento\Catalog\Block\Product\Context $context,
    \Magento\Catalog\Model\ProductFactory $productFactory,
    \Magento\Framework\Url\Helper\Data $urlHelper,
    array $data = []
) {
    $this->_productFactory = $productFactory;
    $this->urlHelper = $urlHelper;
    parent::__construct($context, $data);

    // Get your custom collection here

    $collection = $this->getCustomCollection();

    $this->setCollection($collection);
}

public function _prepareLayout()
{

    parent::_prepareLayout();
    if ($this->getCollection()) {

        // create pager block for collection 

        $toolbar = $this->getToolbarBlock();

        $pager = $this->getLayout()->createBlock(
            'Magento\Theme\Block\Html\Pager', 'list.pager'
        )->setCollection(
            $this->getCollection() // assign collection to pager
        );
        $toolbar->setChild('product_list_toolbar_pager', $pager); // set pager block in layout
        // called prepare sortable parameters
        $collection = $this->getCollection();

        // use sortable parameters
        $orders = $this->getAvailableOrders();

        if ($orders) {
            $toolbar->setAvailableOrders($orders);
        }
        $sort = $this->getSortBy();
        if ($sort) {
            $toolbar->setDefaultOrder($sort);
        }
        $dir = $this->getDefaultDirection();
        if ($dir) {
            $toolbar->setDefaultDirection($dir);
        }
        $modes = $this->getModes();
        if ($modes) {
            $toolbar->setModes($modes);
        }
        $toolbar->setCollection($collection);

        $this->setChild('toolbar', $toolbar);
        $this->getCollection()->load();
    }

    return $this;
}

public function getToolbarHtml()
{
    return $this->getChildHtml('toolbar');
}

public function getToolbarBlock()
{
    $blockName = $this->getToolbarBlockName();
    if ($blockName) {
        $block = $this->getLayout()->getBlock($blockName);
        if ($block) {
            return $block;
        }
    }
    $block = $this->getLayout()->createBlock($this->_defaultToolbarBlock, uniqid(microtime()));

    return $block;
}

public function getMode()
{
    return $this->getChildBlock('toolbar')->getCurrentMode();
}

Also define below property:

protected $_defaultToolbarBlock = 'Magento\Catalog\Block\Product\ProductList\Toolbar';

In phtml file add below code before and after listing:

<?php echo $block->getToolbarHtml() ?>