3

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

  • You would need to find some other way rather cacheable="false" on that block because if you set cacheable false on any block it invalidates cache of whole page, for more you can check devdosc. devdocs.magento.com/guides/v2.1/config-guide/cache/… – Naveed Asim Mar 19 at 5:59
  • Yes, that's why I have added in question Not cacheable="false" – Shoaib Munir Mar 19 at 6:05
  • just want to share this stackoverflow.com/questions/9120413/… – fmsthird Mar 19 at 7:11
  • 1
    @magefms thanks for sharing, but the post is too old, and it is related to Magento 1 – Shoaib Munir Mar 19 at 7:17
  • 1
    @magefms I had read this article, it is telling to disable whole page from Page cache or Flush cache when something is changed. I don't think this article is good read. – Shoaib Munir Mar 19 at 9:52
5

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 ajax, 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.

  • What's your opinion on using ko templating? Do you find it works well with caching? – Dominic Xigen May 31 at 12:03
  • Yes, I have implemented it, and it is working. The only issue I am facing is that It is not showing wishlist count on page load, it is updating it after few seconds of page load – Shoaib Munir Jun 2 at 5:04

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.