Expandable search box

[viblic]

Hi

 

I'm trying to replace the default search box in Prestashop with an expandable search box. Basically it's going to be only the magnifying glass initially and then when I click over it the search box expands. 

The expandable search box is not a problem itself, I managed to do it with simple css (larger width on hover state). The problem is that I need to override the default behavior of the magnifying glass (the button). By default it takes the query in the search box and searches for it. Instead, I need it to activate the hover state of the search box when clicked ...

 

Can someone please help me with it. In simple words I need to do something like this in Presta:

 

http://tympanus.net/Tutorials/ExpandingSearchBar/

 

Thanks,

[adversor]

Old post, but maybe my solution can still help someone.

 

You have to change the main container of markup from:

<div id="sb-search" class="sb-search">
	<form>
		<input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
		<input class="sb-search-submit" type="submit" value="">
		<span class="sb-icon-search"></span>
	</form>
</div>

to something like this:

<div id="sb-search" class="sb-search">
	<form method="get" action="{$link->getPageLink('search_query', true, null, null, false, null, true)|escape:'html':'UTF-8'}" 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="sb-search-input" placeholder="{l s='Search' mod='blocksearch_mod'}" type="text" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" name="search_query" id="search">
		<input class="sb-search-submit" type="submit" value="">
		<span class="sb-icon-search"></span>
	</form>
</div>

works for me at least with PS 1.6.0.14

Edited June 29, 2015 by adversor (see edit history)

[nosnevetzy]

I'm also facing this one right now. Any solution guys? Thanks!