Animated gif displaying when search function is searching suggestions.

[Dolke]

Hi,

 

I would like to add some animated gif icon into search field, so when visitor types something to search for in the field it gives him this icon until search display some results or suggestions.

 

Something like this:

 

http://www.google.com/imgres?imgurl=http%3A%2F%2Fwww.pall.com%2Fimages%2Fcss_img%2Floading.gif&imgrefurl=http%3A%2F%2Fwww.pall.com%2F&docid=RDT1BX94HwTQTM&tbnid=NP-2wayMbahCGM&w=100&h=100&ei=yeOVUYu6McSt4AT1zoEY&ved=0CAkQxiAwBw&iact=ricl

 

Here is the screenshot of my website search function and some further explanation:

 

 

 

Ty in advance.

Dean

[vekia]

You use instant search or simple search?

[Dolke]

I use instant search.

 

P.S.

 

I'm trying to attach screenshot to this post and I'm unable to do so?

I think there is something wrong with the forum atm.

Edited May 17, 2013 by Dolke (see edit history)

[Dolke]

Now it added image 4 times and I cant edit any posts xD.

Edited May 17, 2013 by Dolke (see edit history)

[vekia]

okay

 

so you have to edit two files:

• blocksearch-top.tpl located in search module dir (blocksearch).
  

open this file and add code i pasted below. Put it for example, right after the: <div id="search_block_top">

<div style="display:none; width:32px; height:32px; background:url('http://www.museek.pl/music/design/templates/bluetheme/root/images/screen_blue/loader.gif')" id="ajaxsearchloader"></div>

 

this is a loadnig image, dont forget to use own image (now it is linked to other website)

 

save changes and open another file:

• blocksearch-instantsearch.tpl located in search module dir (blocksearch).
  

after:

$("#search_query_{$blocksearch_type}").keyup(function(){

add:

$("#ajaxsearchloader").show();

 

and after:

type: 'POST',
success: function(data){

 

add:

 

$("#ajaxsearchloader").hide();

[Dolke]

Ty for the instructions but in the module dir (blocksearch) there is no file blocksearch-top.tpl only blocksearch.tpl

 

Sry for my ignorance. I was searching within theme dir.

I found it, thank you.

 

I will apply these changes and let you know if this works.

Edited May 17, 2013 by Dolke (see edit history)

[vekia]

Ty for the instructions but in the module dir (blocksearch) there is no file blocksearch-top.tpl only blocksearch.tpl

 

Sry for my ignorance. I was searching within theme dir.

I found it, thank you.

 

I will apply these changes and let you know if this works.

 

okay, im waiting for your reply :-) for me it works like a charm

[Dolke]

It works great. Thank you Vekia, great stuff. You can check it out at http://www.dekom.co.rs/

 

There is only one thing I would like to do more with this thing.

 

How to put this loading gif image into that field so it doesn't move the whole search field down when gif is showed?

Edited May 17, 2013 by Dolke (see edit history)

[vekia]

you have to change the styles for this block with image.

 

add position:absolute; left:-40px;

 

<div style="position:absolute; left:-40px; display:none; width:32px; height:32px; background:url('http://www.museek.pl/music/design/templates/bluetheme/root/images/screen_blue/loader.gif')" id="ajaxsearchloader"></div>

 

effect:

 

[Dolke]

Nice! Bravo Vekia, you are one of my fav PrestaShop players around here thats for sure

 

I think I will make this gif image a bit bigger, 45x45

 

I noticed one bug though.

 

When you go to the home page, you type something in the search field gif appears After it give me some suggestions are results gif goes away. So far so good. But, then i delete all characters from the search field and gif is showing again, but it wont go away.

 

Is there a way to solve this as well?

 

I think this is the last step to mark this thread as solved.

 

Dean

[vekia]

in the blocksearch-instantsearch.tpl file you've got:

 

function tryToCloseInstantSearch() {
  if ($('#old_center_column').length > 0)
  {
   $('#center_column').remove();
   $('#old_center_column').attr('id', 'center_column');
   $('#center_column').show();
   return false;
  }
 }

 

add the:

 

$("#ajaxsearchloader").hide();

 

 

 

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;
  }
 }

 

 

can you try with this?

[Dolke]

It works like a charm

 

I will just make this image a little bit bigger. I will get back to you in a short moment.

[Dolke]

Beautiful. Here are the final results

 

 

www.dekom.co.rs

 

Thanks to Vekia, Prestashop is work and fun in the same time

 

I will mark this topic as solved.

Dean

[vekia]

loader looks great :-)

i will write tut about it, can i use your shop as an example? :-)

[Dolke]

Sure you can. Great idea too Vekia. Please go ahead.

 

P.S. Vekia, Im unabe to edit title of this topic and label it as solved. Can you try please?

Edited May 17, 2013 by Dolke (see edit history)

[caromax]

Hi,

I'm using PS 1.25.
How to do this effect on PS 1.25 please ?

 

[vekia]

as far as i remember prestashop 1.2 hasn't got search tips, so it will not work in ps 1.2

i might be wrong because i don't remember such old ps features

i have to install it first

[caromax]

@ vekia, Thank you for your answer.
There are blocksearch module ver 1.0 with autocomplete on the PS1.25.
I hope your help please

[vekia]

i installed 1.2.5 and this version hasn't got instant search only ajax search

so you want this effect for ajax search autocomplete tooltip?

[caromax]

Yes, I want this effect for ajax search autocomplete tooltip.

Thank's a lot.

 

Can you help me please ?

Edited April 21, 2014 by caromax (see edit history)

[caromax]

I saw a class ac_loading in prestashop1.25/css/jquery.autocomplete.css.

 

But how to use it to obtain this effect for ajax search autocomplete tooltip?

 

Thank's a  lot

 

 

Edit:

I had a background image in the input tag. I deleted it and applied the class ac_loading on this input.

It's work.

Edited April 28, 2014 by caromax (see edit history)