I am developing a site like http://charitybuzz.com using Magento. If you can check they have shown all the products in home page and by clicking on a category the page URL changes but without any reload. I need the same thing done on my site, Can anybody help me out?


See the answer provided here

The idea is to make ajax calls for certain urls and then use window.onpopstate.
Something like this (copy/paste from the answer mentioned above).

window.onpopstate = function(e){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;

You ajax response handling function can look like this (copy/paste again because of the lack of imagination)

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);

you can make changed in onpopstate function in order to achieve the desired sliding or fading effects.

oh yeah...and not all the browsers support this. Only Chrome, Safari, FF4+, and IE10pp4+

| improve this answer | |

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.