Magento 2 - Page cache with hole punch

Question

Magento page cache cached some of the blocks that has dynamic value, like Wishlist count on header for logged in customers

I can make it dynamic using Ajax, but then it came to my knowledge that it could also be done using Hole punch. (Not cacheable="false")

My question is, how can I set hole punch for wishlist count on header? I need a path where I can do some research on this

I have checked this post, but it has no a satisfactory answer: How to use Identities for to implementing hole punching in my custom module magento 2

Answer 1

I find out hole punching criteria, I hope this would help others too.

We use hole punching for private contents only, like

• Items in cart on header
• Wishlist count on header
• etc

While we apply Full page cache, we need to use hole punch on private contents to make it call dynamically without cache. To do this we have these types of hole punching

• Ajax based
• Local storage

Ajax:
We already know what is ajax calling, so, if you want the data to load without cache, then call it through ajax.

Local Storage:
We can use local storage to call our private data. Good thing is, Magento already stores local storage in it's default functionality. So, we just need to use it anywhere we want.

Example:
If you want wishlist count on header then we can call it using ko templating like this:

<div data-bind="scope: 'wishlist'">
    <!-- ko if: wishlist().counter  -->
    <span class="counter wishlist_count" data-bind="text: wishlist().counter"></span>
    <!-- /ko -->
    <!-- ko ifnot: wishlist().counter  -->
    <span class="counter wishlist_count" data-bind="html:'<?php echo __('0 item'); ?>'"></span>
    <!-- /ko -->
</div>

After this, we just need to call wishlist component like this:

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wishlist": {
                        "component": "Magento_Wishlist/js/view/wishlist"
                    }
                }
            }
        }
    }

</script>

I have tried it by myself, and it is working perfectly along with magento Full Page Cache.