Loading image effect while searching in Prestashop

Today i want to show you how to create nice loading effect, when customers searching products in your store based on prestashop engine. If you don't know what I mean, take a look at this video that I attached below:

This tutorial is based on prestashop 1.5.4.1 but you can use it in all prestashop version (1.5.x). The most important thing - is to turn on instant search under the preferences -> search tab in your prestashop back office. So, if instant search is enabled you can read next part of this tut.

Create loading animation while searching

When your customers searching something in your store - they using usually blocksearch module. So, all changes we must apply to this module. For the first, we must edit blocksearch-top.tpl file located in the /modules/blocksearch/ directory. Remember, that sometimes this directory & files also exist in themes/your_theme/modules/ directory. If so - all changes apply there. Okay, so, as I said, open the blocksearch-top.tpl file. Near line 38 you've got this:

...
<div id="search_block_top">
   <form method="get" action="{$link->getPageLink('search')}" id="searchbox">
...

To this code we must add block with our loader, URL_TO_YOUR_LOADING_IMAGE - this is an url to loading image, you can easily find it in google, just open graphic search, and look for loading.gif ;-) Okay, so below you can find code with loading block:

<div style="position:absolute; left:-40px; display:none; width:32px; height:32px; background:url('URL_TO_YOUR_LOADING_IMAGE'></div>

paste it between the div and form, exactly as I show below:

<div id="search_block_top">
<div style="position:absolute; left:-40px; display:none; width:32px; height:32px; background:url('URL_TO_YOUR_IMAGE')" id="ajaxsearchloader"></div>
<form method="get" action="{$link->getPageLink('search')}" id="searchbox">

After changes you can save this file and read next step.

Open blocksearch-instantsearch.tpl file

This file is most important piece of code for instant search mode. 

Use this script instead old one:

	<script type="text/javascript">
	// <![CDATA[
		function tryToCloseInstantSearch() {
                        $("#ajaxsearchloader").hide(); 
			if ($('#old_center_column').length > 0)
			{
				$('#center_column').remove();
				$('#old_center_column').attr('id', 'center_column');
				$('#center_column').show();
				return false;
			}
		}
		
		instantSearchQueries = new Array();
		function stopInstantSearchQueries(){
			for(i=0;i<instantSearchQueries.length;i++) {
				instantSearchQueries[i].abort();
			}
			instantSearchQueries = new Array();
		}
		
		$("#search_query_{$blocksearch_type}").keyup(function(){
  		  $("#ajaxsearchloader").show();
			if($(this).val().length > 0){
				stopInstantSearchQueries();
				instantSearchQuery = $.ajax({
					url: '{if $search_ssl == 1}{$link->getPageLink('search', true)}{else}{$link->getPageLink('search')}{/if}',
					data: {
						instantSearch: 1,
						id_lang: {$cookie->id_lang},
						q: $(this).val()
					},
					dataType: 'html',
					type: 'POST',
					success: function(data){
					   $("#ajaxsearchloader").hide();
						if($("#search_query_{$blocksearch_type}").val().length > 0)
						{
							tryToCloseInstantSearch();
							$('#center_column').attr('id', 'old_center_column');
							$('#old_center_column').after('<div id="center_column" class="' + $('#old_center_column').attr('class') + '">'+data+'</div>');
							$('#old_center_column').hide();
							$("#instant_search_results a.close").click(function() {
								$("#search_query_{$blocksearch_type}").val('');
								return tryToCloseInstantSearch();
							});
							return false;
						}
						else
							tryToCloseInstantSearch();
					}
				});
				instantSearchQueries.push(instantSearchQuery);
			}
			else
				tryToCloseInstantSearch();
		});
	// ]]>
	</script>