show search icon in blocktopmenu search - prestashop 1.6

[Junaid Khawaja]

I am customizing a theme so I want to add small magnifier icon in searchbar appeared in top menu. Moreover, I want to add a default value in that searchbox that will be hide when user click on the searchbox.

 

I edited the template block search files under themes folder but no help. Is there any other way to do this?

 

P.S. I am using the Prestashop 1.6 with default bootstrap theme.

My website is play.game5ive.com

Edited May 4, 2014 by Junaid Khawaja (see edit history)

[dioniz]

That search bar is located in topmenu. You can add search icon in css.

 

For text in search box open yourtheme/modules/blocktopmenu/blocktopmenu.tpl and change this code

<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

to this

<input type="text" placeholder="Yourtext" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

[Junaid Khawaja]

 

That search bar is located in topmenu. You can add search icon in css.

 

For text in search box open yourtheme/modules/blocktopmenu/blocktopmenu.tpl and change this code

<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

to this

<input type="text" placeholder="Yourtext" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

 

 

That search bar is located in topmenu. You can add search icon in css.

 

For text in search box open yourtheme/modules/blocktopmenu/blocktopmenu.tpl and change this code

<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

to this

<input type="text" placeholder="Yourtext" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

 

I was making all those changes to blocksearch.tpl and blocksearchtop.tpl. Got to know that blocktopmenu.tpl have the same codes repeated for searchbar for top menu. Thanks a lot man. Can I now follow these instructions too?

http://www.prestashop.com/forums/topic/248300-solved-put-default-text-in-the-search-bar/?p=1232661

 

It works!

 

Thanks A Lot!

[dioniz]

You are welcome.

 

I think you don't need that from other post. If you put placeholder="your text" in input it should do the work. When you start to type in the field, your text dissapears.

[Junaid Khawaja]

You are welcome.

 

I think you don't need that from other post. If you put placeholder="your text" in input it should do the work. When you start to type in the field, your text dissapears.

Yeah you're right. It's working fine!

[gr_fenix]

Hi,

 

I want the search icon but whith this code:

<input type="text" placeholder="Yourtext" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

Don't show a submin button

 

Thanks

[sirDonald]

Hi, how can I show a translated string as a placeholder? I tried the following:

<input type="text" name="search_query" placeholder="{l s='Search'}" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

but it just displays the english version on all languages...

[dioniz]

@sirDonald

You need to translate it in BO > Localization > Translations

[sirDonald]

@sirDonald

You need to translate it in BO > Localization > Translations

 

The translation is already there (under Search -> Search = Suche).

Sorry should have added that

[dioniz]

Are you translating modules?

[gr_fenix]

How to show the icon search?

 

Thanks

[Junaid Khawaja]

How to show the icon search?

 

Thanks

It just require few lines of CSS and all done.. Follow this link.

 

http://jsfiddle.net/handtrix/HDmw2/

[sirDonald]

@dioniz

No, I just wanted to show a placeholder in the search field of the top menu bar. It should change according to the currently selected language. Under Localization > Translations there already is a translated string for "Search" (probably from the search module? which I have disabled) So I thought I could just use this one. But no matter which language I select, it always just displays "Search", in English.

[dioniz]

@sirDonald If you are using search field in top menu bar you need to translate it in Localization > Translations > Installed modules translations.

Search for blocktopmenu and translate there

[sirDonald]

Didn't think of that, thanks! Is it possible to add new strings?

[dioniz]

You can add strings like this in module tpl files:

{l s='Some string.' mod='somemodule'}

[gr_fenix]

Adding this code on the blocktopmenu.tpl of the theme, it works:

 

    <form id="searchbox" method="get" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" >
                        <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 form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
                        <button type="submit" name="submit_search" class="btn btn-default button-search">
                            <span>{l s='Search' mod='blocksearch'}</span>
                        </button>
                    </form>
            

[upngo]

Adding this code on the blocktopmenu.tpl of the theme, it works:

 

    <form id="searchbox" method="get" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" >

                        <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 form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />

                        <button type="submit" name="submit_search" class="btn btn-default button-search">

                            <span>{l s='Search' mod='blocksearch'}</span>

                        </button>

                    </form>

          

 

Hello, i add this code on blocktopmenu.css but don't possible see icon search on my website. store.nyro.es. What is the problem?

 

Thanks.