Mini Tutorial: How to Fix Welcome Message With Full-Page Cache Enabled

About two weeks ago, a client filed an issue that he was getting logged out after he placed an order. So I went to the site to place a order. When I went back to homepage after completing my order, the name in welcome message became another person. My first instinct as a dev was to go to my account. Phew…. It’s full-page cache issue.

I dug around.  The first thing that I tried was commenting out the welcome cache block in cache.xml in PageCache. No luck with that.

I asked around and one of my colleagues suggested, “you may want to move it to a non-cached block like the page block or mini-cart”. Hm….. so here is what I came up with:

FROM

In page/header.phtml


<p class="welcome-msg">$this->getWelcome()</p>

TO

In page/header.phtml


<p class="welcome-msg"></p>

In cartheader.phtml


<p class="welcome-msg-container">Mage::app()->getHeader()->getWelcome()</p>
<script>
jQuery('path to .welcome-msg').html(jQuery('.welcome-msg-container').html());
</script>

Hooray!! The welcome message is no longer cached. That’s a bit hacky, but it works. Oh well.

From my experience, many page cache systems seem to suffer in similar situations. When I was working with Drupal, its cache would cache the states of menu. So when you visit a page, the menu would expand/close based on the cached menu states. I had to write some JS code to reset it.