Wednesday 16 November 2011

Jquery history plugin in magento

Main aspect of this is , at the time of using ajax powered search some one has search some thing and they have refreshed the page then they need to make the search another one time but using this plugin you can achieve the same result after the user have refreshed their page. Although it will work in the startergy for browser back and front button

Add history plugin js in your layout.xml as below [You can download the jquery plugin here :  http://tkyk.github.com/jquery-history-plugin/]

<reference name="head">
      <action method="addJs"><script>javascript/jquery.history.js</script></action>
</reference>

And then add the hash (#store | #product) to your href for example you have store and product search in your application the it will goes like below.

href="#store" onclick="jQuery.history.load('store');" [to search stores]

href="#product" onclick="jQuery.history.load('product');" [to search products]


You need to add the below script in your basic template if your using for 1column page then you need to add the below snippet inside the head tag.

<script type="text/javascript">
    //<![CDATA[
        $j(document).ready(function(){
        var flag = false;
            $j.history.init(function(url){
                if(!flag)
                {
                    flag =true;
                    SwapBwnStoreProducts(url == "" ? "" : url);
                }else
                    SwapBwnStoreProducts(url == "" ? "product" : url);
            });
        });
        //]]>
    </script>

use the below function for your ajax call you can write this function in a separate file and then you need to include the same in the layout xml of your module.

function SwapBwnStoreProducts(swap){  
     ajax call goes here
 }












No comments:

Post a Comment