Page 2 showing Page 1 content in AJAX-Based Navigation

Problem

When using a Magento theme that has AJAX-based navigation, an incorrect page is served. For example: On a two-page site, when Page 2 is first visited, the behavior is normal; when Page 2 is refreshed, the cached content of Page 1 is served instead.

Cause

This is due to the way the template handles AJAX requests. Using our earlier example: let's say the Page 1 URL is your_site_url.html. When we visit this page, the HTML response is cached by LiteMage using that URL. When we click on Page 2, which is an AJAX call, the JSON response is also cached by LiteMage using it's URL. When we visit Page 2 again, the URLyour_site_url.html# is requested, which the browser will interpret as your_site_url.html and serve the cached content of Page 1.

Solution

Modify the theme's template with a single line change as in the following example sm_market theme (located under app/design/frontend/sm_market/default/template/page/html/pager.phtml):

Original

<?php foreach ($this->getFramePages() as $_page): ?>
   <?php if ($this->isPageCurrent($_page)): ?>
	<li class="current"><a href="#" onclick="javascript:void(0);"><?php echo $_page ?></a></li>
   <?php else: ?>
	<li class=""><a href="<?php echo $this->getPageUrl($_page) ?>"><?php echo $_page ?></a></li>
   <?php endif;?>
<?php endforeach;?>

Modified to

<?php foreach ($this->getFramePages() as $_page): ?>
	<?php if ($this->isPageCurrent($_page)): ?>
		<li class="current"><a href="<?php echo $this->getPageUrl($_page) ?>"><?php echo $_page ?></a></li>
	<?php else: ?>
		<li class=""><a href="<?php echo $this->getPageUrl($_page) ?>"><?php echo $_page ?></a></li>
	<?php endif;?>
<?php endforeach;?>

This change will ensure that the full page URL is used for each page request. It guarantees that each HTML and AJAX request will have its own unique URL and therefore, its own unique cached copy.

Notes

The sm_market theme appends additional information to the end of a URL to notify the back-end when it wants to make an AJAX request. For example, an AJAX request for page 2 of test.html would become test.html?p=2&isLayerAjax=1 when using the sm_market theme. The appended information will vary from theme to theme.