Tutorial: How to integrate Speech recognition search on Prestashop

[ALMAJ]

In this tutorial I will show you how to integrate Speech recognition search on Prestashop

this is based on the new html5 webkit

1. go to: /modules/blocksearch and open the file: blocksearch-top.tpl
    
2. search for this code:
   

   <!-- Block search module TOP -->
   <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>

3. arround the line 42 we now add this line of code:
   

   speech="speech" x-webkit-speech="x-webkit-speech" x-webkit-grammar="builtin:translate" lang="pt-pt" onclick="this.value = " "" onwebkitspeechchange="this.form.submit();" autocomplete="off"

4. the final code should look like this:
   

   <!-- Block search module TOP -->
   <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}"speech="speech" x-webkit-speech="x-webkit-speech" x-webkit-grammar="builtin:translate" lang="pt-pt" onclick="this.value = " "" onwebkitspeechchange="this.form.submit();" autocomplete="off"/>
   			<button type="submit" name="submit_search" class="btn btn-default button-search">
   			<span>{l s='Search' mod='blocksearch'}</span>
   		</button>
   	</form>
   </div>
   

5. where lang="pt-pt" should be your lang code, in this case i'm using Portuguese, you must change this code for your languages. 
    

Hope it helps someone.

Edited March 17, 2014 by majority (see edit history)

[ALMAJ]

So, What i cannot do is to have multiple specific languages, I can have only one lang,

I'm thinking on load different versions of blocksearch-top.tpl based on the language chosen on the store

 

I'm thinking maybe this:

{if $language.iso_code == "pt"}{include file="$dir./blocksearch-top_pt.tpl"}
{elseif $language.iso_code == "de"}{include file="$dir./blocksearch-top_de.tpl"}

I've tried to put this code on blocksearch-top.tpl but did'n worked

 

or how to change/activate a code on blocksearch-top.tpl based on language iso code of the store

is that possible

 

anyone?

 

Tanks

Edited March 17, 2014 by majority (see edit history)

[Vinum]

Hi,

The correct name for the global in smarty is : {$lang_iso}

But I think it is more efficient to directly send to smarty the language code.
To do that assign the language code in blocksearch.php.
The language code can be get with that function : getLanguageCodeByIso($iso_code)

 

[ALMAJ]

Hi,

The correct name for the global in smarty is : {$lang_iso}

But I think it is more efficient to directly send to smarty the language code.

To do that assign the language code in blocksearch.php.

The language code can be get with that function : getLanguageCodeByIso($iso_code)

 

 

So you are suggesting that is better and more efficient to calling for a new code line on the same blocksearch-top file based on iso code, rather than calling for a different blocksearch-top file based on iso code?

 

So, how can I do that? 

can you please make an example what codes do i need and where to put them?

 

Sorry but I'm no coder, I did this tutorial based on the almighty google searching and on trial and error for days

it worked but I have my limitations.

 

Me and The prestashop community will be highly appreciated

 

Tanks

Edited March 17, 2014 by majority (see edit history)