Jump to content

[tutorial] loading effect while searching

vekia
 Share

Recommended Posts

ALMAJ Newbie

ALMAJ

Posted
Posted (edited)

Hello vekia, this did not worked for me :(

I did everything you described on the tutorial but the gif animation image is not showing...

I did not understand the last code on the "blocksearch-instantsearch.tpl"

you say to "Use this script instead old one:" this means to clear everything on the blocksearch-instantsearch.tpl file and paste your new code?

 

my prestahop version: 1.5.4.1

no modifications

 

 

tanks in advance

Alcino Major

Edited by majority (see edit history)
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
  • Author
Posted

Hello vekia, this did not worked for me :(

I did everything you described on the tutorial but the gif animation image is not showing...

I did not understand the last code on the "blocksearch-instantsearch.tpl"

you say to "Use this script instead old one:" this means to clear everything on the blocksearch-instantsearch.tpl file and paste your new code?

 

my prestahop version: 1.5.4.1

no modifications

 

 

tanks in advance

Alcino Major

 

hello

 

it is possible to paste here an url to your website? I will check it ASAP

Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
Posted (edited)

OK, this is my test site: http://www.tekcenter.pt/ps1541/

 

i already turned off the cache

 

ps: after paste you new code over the original one in the"blocksearch-instantsearch.tpl" on the dreamweaver CS6 i'm having a message:

"there is a syntax error on line 27, Code hinting may not work until you fix this error."

 

tanks

Edited by majority (see edit history)
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
  • Author
Posted

i checed your store

 

instant search is turned off in your store?

 

you have to use this code:

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

 

{if $instantsearch}

HERE

{/if}

Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
Posted

My Instant Search is ON i checked on BO under Perferences / search

Also Ajax search is ON

 

it's not working....

 

here my original code for blocksearch-top.tpl file:

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!-- block seach mobile -->
{if isset($hook_mobile)}
<div class="input_search" data-role="fieldcontain">
<form method="get" action="{$link->getPageLink('search')}" id="searchbox">
 <input type="hidden" name="controller" value="search" />
 <input type="hidden" name="orderby" value="position" />
 <input type="hidden" name="orderway" value="desc" />
 <input class="search_query" type="search" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" />
</form>
</div>
{else}
<!-- Block search module TOP -->
<div id="search_block_top">
<form method="get" action="{$link->getPageLink('search')}" id="searchbox">
 <p>
  <label for="search_query_top"><!-- image on background --></label>
  <input type="hidden" name="controller" value="search" />
  <input type="hidden" name="orderby" value="position" />
  <input type="hidden" name="orderway" value="desc" />
  <input class="search_query" type="text" id="search_query_top" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" />
  <input type="submit" name="submit_search" value="{l s='Search' mod='blocksearch'}" class="button" />
</p>
</form>
</div>
{include file="$self/blocksearch-instantsearch.tpl"}
{/if}
<!-- /Block search module TOP -->

 

here my original code for blocksearch-instantsearch.tpl file:

{if $instantsearch}
<script type="text/javascript">
// <![CDATA[
 function tryToCloseInstantSearch() {
  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(){
  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){
  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>
{/if}
{if $ajaxsearch}
<script type="text/javascript">
// <![CDATA[
 $('document').ready( function() {
  $("#search_query_{$blocksearch_type}")
   .autocomplete(
 '{if $search_ssl == 1}{$link->getPageLink('search', true)}{else}{$link->getPageLink('search')}{/if}', {
  minChars: 3,
  max: 10,
  width: 500,
  selectFirst: false,
  scroll: false,
  dataType: "json",
  formatItem: function(data, i, max, value, term) {
   return value;
  },
  parse: function(data) {
   var mytab = new Array();
   for (var i = 0; i < data.length; i++)
    mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname };
   return mytab;
  },
  extraParams: {
   ajaxSearch: 1,
   id_lang: {$cookie->id_lang}
  }
 }
   )
   .result(function(event, data, formatted) {
 $('#search_query_{$blocksearch_type}').val(data.pname);
 document.location.href = data.product_link;
   })
 });
// ]]>
</script>
{/if}

 

please if you want access my BO site i will send you PM with access details

 

tanks again vekia

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
  • Author
Posted

i checked your website once again - now instant search works well

 

if it is possible - PM me with information (login+pass) to the backoffice + access to the ftp (i want to modify files)

 

regards

Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
Posted (edited)

Hello again vekia, guess what? it is working! :)

 

the problem was i erase everything below this code in the file blocksearch-instantsearch.tpl:

</script>
{/if}
{if $ajaxsearch}
<script type="text/javascript">

 

now the correct code for blocksearch-instantsearch.tpl file is this:

{if $instantsearch}
<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>
{/if}
{if $ajaxsearch}
<script type="text/javascript">
// <![CDATA[
 $('document').ready( function() {
  $("#search_query_{$blocksearch_type}")
.autocomplete(
 '{if $search_ssl == 1}{$link->getPageLink('search', true)}{else}{$link->getPageLink('search')}{/if}', {
  minChars: 3,
  max: 10,
  width: 500,
  selectFirst: false,
  scroll: false,
  dataType: "json",
  formatItem: function(data, i, max, value, term) {
   return value;
  },
  parse: function(data) {
   var mytab = new Array();
   for (var i = 0; i < data.length; i++)
	mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname };
   return mytab;
  },
  extraParams: {
   ajaxSearch: 1,
   id_lang: {$cookie->id_lang}
  }
 }
)
.result(function(event, data, formatted) {
 $('#search_query_{$blocksearch_type}').val(data.pname);
 document.location.href = data.product_link;
})
 });
// ]]>
</script>
{/if}

 

is this correct?

well its working now... :)

 

tanks again vekia for you support

Edited by majority (see edit history)
Link to comment
Share on other sites
  • 2 months later...
Alex A Newbie

Alex A

Posted
Posted

Hi Vekia, I guess it's not the best way to do it, but I've enabled the Instant Search and the played with the code a bit to basically stop it from showing, so now I have the effect that i needed. :rolleyes:

Thanks for you help.

Link to comment
Share on other sites
Alex A Newbie

Alex A

Posted
Posted (edited)

Sure, I've just added extra "d" to "data" at line 42. It's probably throwing error in the logs every time someone's using the search, but that's not affecting my website, so that's fine.

 

Here's the code. I've also added a line to show the product image:

 

{if $instantsearch}
<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").show();
  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') + '">'+ddata+'</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>
{/if}
{if $ajaxsearch}
<script type="text/javascript">
// <![CDATA[
 $('document').ready( function() {
  $("#search_query_{$blocksearch_type}")
   .autocomplete(
 '{if $search_ssl == 1}{$link->getPageLink('search', true)}{else}{$link->getPageLink('search')}{/if}', {
  minChars: 3,
  max: 10,
  width: 500,
  selectFirst: false,
  scroll: false,
  dataType: "json",
  formatItem: function(data, i, max, value, term) {
   return "<img src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-small_default.jpg\" alt=\"" + value + "\" />" + value;
  },
  parse: function(data) {
   var mytab = new Array();
   for (var i = 0; i < data.length; i++)
    mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname };
   return mytab;
  },
  extraParams: {
   ajaxSearch: 1,
   id_lang: {$cookie->id_lang}
  }
 }
   )
   .result(function(event, data, formatted) {
 $('#search_query_{$blocksearch_type}').val(data.pname);
 document.location.href = data.product_link;
   })
 });
// ]]>
</script>
{/if}

Edited by Alex A (see edit history)
Link to comment
Share on other sites
  • 1 year later...
heyho Newbie

heyho

Posted
Posted

jQuery autoCompleat Function inserts the class "ac_loading" while searching and removes it, when searching is finished...

So you can use:

#search_block_top #search_query_top.ac_loading
{
    background-image:url('/img/loading.gif');
    background-repeat: no-repeat;

    /*  ...color, position .... */
}

 

Im using PS 1.6

Link to comment
Share on other sites
  • 9 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...