Magento 2 Mini Cart values with Full Page Cache

Question

Running Magento 2.1.10 CE, with multiple stores.

We have all the cache enabled, with Full Page Cache running with Varnish. Having an issue with the minicart values since enabling cache

Steps: 1- Open an individual product page (frontend) 2- clicked add to cart button, 3- Minicart is updated with the count and the content 4- Refresh the page, Minicart shows that the cart is empty 5- Open the cart page (www.site.com/checkout/cart), the count on the mini cart is correct!

When I disable the FullPageCache, it shows the correct count.

I have edited the minicart.phtml file and take out most of the knockout js code. Replaced it with the following

$helper = $this->helper('\Magento\Checkout\Helper\Cart');
$quote = $helper->getQuote();
$quoteitems = $quote->getAllItems();
$totalItemsCount = $helper->getSummaryCount();
echo $totalItemsCount; exit;

On individual product pages, the output is empty, but on cart page the value is correct.

One issue is that we do not cache the cart and checkout pages. With the above code, the value returned is correct, but on other CACHED pages, the value is empty, although. the values on all other cached pages gets updated with the sections ajax call, it does not update on the individual page!

UPDATE

One more thing is with Varnish Full Page Cache enabled,, i am not able to get Customer Session on the cached pages. Need the session to set customer menu in the header! Even after login, the cached pages display the Login form in the header file.

Answer 1

Firstly, check private data. On chrome browser -> use Inspect -> Application -> Local Storage And check mage-cache-storage key. Is cart updated?

And you can check it on Magento issue https://github.com/magento/magento2/issues/4170

If you cannot find out any solution. you can use my temporary solution (not recommend). Override sections.xml in Checkout module etc/frontend/sections.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="*">
        <section name="cart"/>
    </action>
</config>

Load minicart (cart section data) in all action (effect for performance)

Answer 2

Well, I think you should you load/Cache cart components independently, instead of caching the whole page. I reckon that might solve the problem.