Default text in search-bar

pwb · July 8, 2014

Hi all.

I have Prestashop 1.5.6.1. I would like to have default text ("Search") in the search bar, which disappears when you click the search bar and start typing.

Is this possible?

Best regards

PSfever.com · July 8, 2014

Hi,

when editing the blocksearch.tpl file, there should be the input field, which the customer fills in the search query.

add placeholder = {l s='Search:' mod='blocksearch'}.

For the default theme, the blocksearch.tpl would look like this. (Prestashop 1.6.)

<div id="search_block_top" class="col-sm-4 clearfix">
<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>
</div>

pwb · July 8, 2014

Hi,

when editing the blocksearch.tpl file, there should be the input field, which the customer fills in the search query.

add placeholder = {l s='Search:' mod='blocksearch'}.

For the default theme, the blocksearch.tpl would look like this. (Prestashop 1.6.)

<div id="search_block_top" class="col-sm-4 clearfix">
<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>
</div>

Hi, thanks for fast answer.

My block search.tpl look like, what to change?:

<h4 class="title_block">{l s='Search' mod='blocksearch'}</h4>

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

<label for="search_query_block">{l s='Enter a product name or description.' mod='blocksearch'}</label>

</p>

</form>

</div>

{include file="$self/blocksearch-instantsearch.tpl"}

What about the blocksearch-top.tpl? Don't i need to change in that file?

Thank you again.

PSfever.com · July 8, 2014

This

<input class="search_query" type="text" id="search_query_block" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />

Into this

<input class="search_query" type="text" id="search_query_block" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" placeholder="{l s='Search' mod='blocksearch'}">

Don't forget to clear cache afterwards.

pwb · July 15, 2014

This

<input class="search_query" type="text" id="search_query_block" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />

Into this

<input class="search_query" type="text" id="search_query_block" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" placeholder="{l s='Search' mod='blocksearch'}">

Don't forget to clear cache afterwards.

It doesn't seem to work. My code now looks like the following, and is placed in /themes/theme/modules/blocksearch/blocksearch.tpl

<!-- Block search module -->
<div id="search_block_left" class="block exclusive">
<h4 class="title_block">{l s='Search' mod='blocksearch'}</h4>
<form method="get" action="{$link->getPageLink('search', true)|escape:'html'}" id="searchbox">
<p class="block_content">
<label for="search_query_block">{l s='Enter a product name or description.' mod='blocksearch'}</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_block" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" placeholder="{l s='Search' mod='blocksearch'}">
<input type="submit" id="search_button" class="button_mini" value="{l s='Go!' mod='blocksearch'}" />
</p>
</form>
</div>
{include file="$self/blocksearch-instantsearch.tpl"}
<!-- /Block search module -->

What can be wrong?

PSfever.com · July 15, 2014

That's odd, have you tried to delete the cache?

vekia · July 15, 2014

what browser you use (type and version)

im affraid that some old browsers don't support placeholder="" tag

compatibility with browsers:

http://caniuse.com/input-placeholder

pwb · July 15, 2014

what browser you use (type and version)

im affraid that some old browsers don't support placeholder="" tag

compatibility with browsers:

http://caniuse.com/input-placeholder

I've tried newest version of Chrome and Firefox. I have deleted cache, both in browser and in PS back office.

EDIT: Could it be, that something in the blocksearch-top.tpl should be edited aswell?

Edited July 15, 2014 by pwb (see edit history)

vekia · July 15, 2014

sure,

apply changes also to this file

i think that this is main case in this problem

PrestaShark · July 15, 2014

Hi use this
for 1.5.6.2

modules/blocksearch/blocksearch-top.tpl

{*
* 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')|escape:'html'}" 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="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
    </form>
</div>
{else}
<!-- Block search module TOP -->
<div id="search_block_top">
    <form method="get" action="{$link->getPageLink('search')|escape:'html'}" 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="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" placeholder="{l s='Search' mod='blocksearch'}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{l s='Search' mod='blocksearch'}'" />
            <input type="submit" name="submit_search" value="{l s='Search' mod='blocksearch'}" class="btn btn-primary btn-sm" />
        </p>
    </form>
</div>
{include file="$self/blocksearch-instantsearch.tpl"}
{/if}
<!-- /Block search module TOP -->

Works like a charm

This line (44) makes the job

<input class="search_query" type="text" id="search_query_top" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" placeholder="{l s='Search' mod='blocksearch'}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{l s='Search' mod='blocksearch'}'" />

Edited July 15, 2014 by PrestaShark (see edit history)

pwb · July 15, 2014

Hi. Now my codes look like this:

blocksearch.tpl

{*
* 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 search module -->
<div id="search_block_left" class="block exclusive">
	<h4 class="title_block">{l s='Search' mod='blocksearch'}</h4>
	<form method="get" action="{$link->getPageLink('search', true)|escape:'html'}" id="searchbox">
		<p class="block_content">
			<label for="search_query_block">{l s='Enter a product name or description.' mod='blocksearch'}</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="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" placeholder="{l s='Search' mod='blocksearch'}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{l s='Search' mod='blocksearch'}'" />
			<input type="submit" id="search_button" class="button_mini" value="{l s='Go!' mod='blocksearch'}" />
		</p>
	</form>
</div>
{include file="$self/blocksearch-instantsearch.tpl"}
<!-- /Block search module -->

blocksearch-top.tpl

{*
* 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')|escape:'html'}" 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="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
	</form>
</div>
{else}
<!-- Block search module TOP -->
<div id="search_block_top">
	<form method="get" action="{$link->getPageLink('search')|escape:'html'}" 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="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" placeholder="{l s='Search' mod='blocksearch'}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{l s='Search' mod='blocksearch'}'" />
			<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 -->

Still blank search field:

I've deleted cache.

PrestaShark · July 15, 2014

Hi. Now my codes look like this:

blocksearch.tpl

i told about other file -> your_shop_catalogue_on_server/modules/blocksearch/blocksearch-top.tpl

pwb · July 15, 2014

i told about other file -> your_shop_catalogue_on_server/modules/blocksearch/blocksearch-top.tpl

I've also edited that file, like my post before also mentioned - but it still doesn't work

PrestaShark · July 15, 2014

Show me link to Your site via PM. I'll try to help you with.

PrestaShark · July 18, 2014

This problem was solved.

pwb's custom template was made by TM and the default search module was TMBlockSearch instead of BlockSearch. So we need to modify tmblocksearch-top.tpl in /modules/tmblocksearch catalogue.

Regards!

Default text in search-bar

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in