Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
litespeed_wiki:cache:litemage:troubleshooting:templates-ajax-based-navigation-error [2016/05/06 14:18] Michael Alegre created |
litespeed_wiki:cache:litemage:troubleshooting:templates-ajax-based-navigation-error [2017/05/09 12:26] (current) Lisa Clarke |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Error Message When Using Templates With AJAX Based Navigation ====== | + | ~~NOTOC~~ |
+ | ====== Page 2 showing Page 1 content in AJAX-Based Navigation ====== | ||
- | If you are using a Magento theme that has AJAX based navigation, it is possible that you will encounter an error when trying to navigate to certain pages. This can be caused by your browser receiving the wrong cached response as a result of the way your template handles AJAX requests. | + | ====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. | ||
- | For example: | + | ====Cause==== |
- | Let's assume that your current URL is something like "your_site_url.html" and you are looking at page one. By visiting this page, the HTML response is now cached by LiteMage using it's URL. You then click on the second page which will be an AJAX call, the JSON response is also cached by LiteMage using it's URL. | + | 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 URL''your_site_url.html#'' is requested, which the browser will interpret as ''your_site_url.html'' and serve the cached content of Page 1. |
- | Now say you want to click on your current page (page 2) again. You would assume that the cached JSON response for page 2 would be returned, but the URL used for requesting the current page is: | ||
- | your_site_url.html# | + | ====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''): | ||
- | Which your browser will interpret as "your_site_url.html", thereby requesting the previously cached copy of page 1 instead. This happens because both requests are pointing to the same cached URL, so whatever is cached first will be returned. | + | Original |
+ | <code> | ||
+ | <?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;?> | ||
+ | </code> | ||
+ | |||
+ | Modified to | ||
+ | <code> | ||
+ | <?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;?> | ||
+ | </code> | ||
- | You can fix this easily by modifying your theme's template with a single line change as we do below for the example sm_market theme (located under app/design/frontend/sm_market/default/template/page/html/pager.phtml): | + | 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. |
- | Note: 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. This appended information will vary from theme to theme. | + | ====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. | |
- | 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 | + | |
- | <?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;?> | + | |
- | + | ||
- | Which will now ensure that the full page URL is used for each page request. This guarantees that each HTML and AJAX request will have their own unique URL and therefore, their own unique cached copies. | + | |