Fork me on GitHub
Você esta em:Home » Destaque » Saíba como adicionar o reconhecimento por voz nas buscas do Magento

Saíba como adicionar o reconhecimento por voz nas buscas do Magento

Conheça essa incrível técnica simples com HTM5 para reconhecimento por voz em suas buscas

Para quem é fã do Google Chrome e usa sua versão beta, já pode testar a mais nova tag HTML 5 implementada pelo browser. É a Speech Input (Speech Input API Specification), agora ao invés de digitar você pode implementos clicar e falar!

Clicando sobre o microfone você pode começar a falar, o sistema faz uma pesquisa no banco de voz do próprio Google e escreve o que disse no campo.

Demo online:

http://slides.html5rocks.com/#speech-input

Implementação no Magento:

Pensei em fazer um plugin em jquery para esse fim, mas como tô gripadão vou simplesmente explicar como fazer rs

A tag para incluir o Speech no html é facinho, basta add assim:

<input type="text" x-webkit-speech />

Mas mexi um pouco mais para que aceita-se o português e também para que remova o Placeholder holder que existe no Magento.

<input id="search" type="text" name="q" value="" maxlength="128" speech="speech" x-webkit-speech="x-webkit-speech" x-webkit-grammar="builtin:translate" lang="pt-br" onclick="this.value = &quot; &quot;" onwebkitspeechchange="this.form.submit();" autocomplete="off">

Demo online no Magento: http://54.232.97.46/

Inclui também um onClick que inclui o espaço vazio na busca para que remova o Placeholder holder, No exemplo que citarei seria a frase (pesquise em toda loja aqui…) Isso foi um hack simples para tratar esse bug, pois o Magento ignora o espaço em branco nas busca.

Mas você me pergunta: Para que serve isso????

Bem além de demostrar bom conhecimento da tecnologia por ser novidade e chamar a atenção do cliente, pois ao meu ver a chamada da atenção do cliente a algo é oque toda campanha de marketing almeja correto? Ele combinado com a busca Sphinx ajudará aos clientes que não sabem por exemplo escrever determinada palavra em inglês. Então a soma das tecnologias casas resulta em uma boa estratégia de marketing (note que em todos grandes players e-commerce o campo de busca se tem um certo destaque, no qual convida o cliente a ir atras do que ele quer!) Funciona muito bem como auxiliar no tratamento das pesquisas que o cliente está procurando.

Digamos que o filho do cliente solicita para ele o jogo Metal Gear e que esse mesmo cliente não esta habituado a linguá inglesa? Então ele fala no speech e o speech escreve Metol Giaer. O resultado junto com o Sphinx se dá no encontro não do produto mas sim do termo mais próximo cadastrado em sua loja que seria Metal Gear.

Faça o teste online: http://54.232.97.46 clique nele e fale Metal Gear

Se ele não entender a fonética da palavra ele ira para a tela seguinte e adicionará: Você quis dizer Metal Gear? (DID YOU MEAN METAL GEAR?)

 

Então é isso pessoal! att

 

Fontes:

Sobre o Autor

Designer, Web Developer & Linux Administrator

Meu nome é Deivison Arthur, tenho 29 anos, sou Administrador Linux, Analista de Sistema, Webdesigner e Pesquisador. há mais de dez anos. Nasci no Rio de Janeiro, atualmente trabalho como Gerente de Tecnologia e E-commerce at Grupo FFernandes e Freelancer nas horas vagas. Desenvolvimento em Joomla, Wordpress, Drupal, Magento e outros GPLs...

Quantidade de Artigos : 114

Comentários (12)

  • Olá adorei

    como adicionar no site magento, não entendi muito bem no post ai de cima , poderia explicar
    atenciosamente wagner f

    Responder
    • Luiz Santos

      Quebrei a cabeça mas consegui :D
      Pois bem, isso pode variar de tema para tema, no meu estava neste caminho:
      /public_html/app/design/frontend/base/default/template/catalogsearch/

      Vou dar mastigadinho, coisa que nenhum desenvolvedor faz, mas hoje estou “bonzinho” :D

      1- Faça um back up deste ficheiro “form.mini.phtml” a cópia backup o chame de “form.mini.phtml_ori”. Isso é questão de segurança, caso faças “caquita” :P

      2- Edite o ficheiro “form.mini.phtml”

      3- No código original, lá pela linha 30, verás esse trecho:
      <input id="search" type="text" name="helper(‘catalogsearch’)->getQueryParamName() ?>” value=”helper(‘catalogsearch’)->getEscapedQueryText() ?>” class=”input-text” />

      4- Substitua por este:
      <input id="search" type="text" name="q" value="" maxlength="128" speech="speech" x-webkit-speech="x-webkit-speech" x-webkit-grammar="builtin:translate" lang="pt-br" onclick="this.value = " "" onwebkitspeechchange="this.form.submit();" autocomplete="off" helper(‘catalogsearch’)->getQueryParamName() ?>” value=”helper(‘catalogsearch’)->getEscapedQueryText() ?>” class=”input-text” />

      Melhor do que isso, impossível!
      Espero que meu comentário seja aprovado :D

      Responder
  • Maya Oliver

    Para adicionar isso no site basta entrar na pasta

    /app/design/frontend/default/SEUTEMA/template/catalogsearch/form.mini.phtml

    e alterar o input da busca que provavelmente está na linha 30 do seu código!

    Obs: Cada tema tem a sua particularidade então esse caminho passado não é padrão. Para saber melhor onde se encontra esse de busca no seu site debug o site e ele mostrará pra você onde está o caminho correto!

    Responder
    • Marcelo

      concegui Instalar Perfeitamente porem está com um pequeno bug, Clico pra falar mas dai eu aperto cancelo, só que em qualquer lugar da pagina se eu clicar ele habilita a busca pra pode falar novamente. Oque será que aconteceu ?

      Responder
  • Beto

    Mais um tutorial perfect Deivison! Instalado e funcionando!!!

    Responder
  • Diogo Malimpense

    Perfeito Deivison! Instalado e funcionando.

    Responder
  • Rômulo

    Muito bom Deivison ! Obrigado por compartilhar mais uma super dica.

    Responder
  • Alcino Major

    Excelente dica, eu uso o prestashop e também funciona aqui está o tutorial para prestashop:

    1. ir até: /modules/blocksearch i abrir o ficheiro: blocksearch-top.tp
    2. procurar pelo seguinte código:
    ———————————————————————————————————————————————

    getPageLink(‘search’)|escape:’html’:’UTF-8′}” >

    {l s=’Search’ mod=’blocksearch’}

    ——————————————————————————————————————————————–

    3. na linha 42 adicionamos este novo código:
    ——————————————————————————————————————————————–
    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. O código final deverá ser igual a isto:
    ——————————————————————————————————————————————–

    getPageLink(‘search’)|escape:’html’:’UTF-8′}” >

    {l s=’Search’ mod=’blocksearch’}

    ——————————————————————————————————————————————-

    5. pudemos mudar a liguagem aletrando o código: lang=”pt-pt” para o código de linguagem que queremos, neste caso utilizo pt-pt de portugal,

    A questão que eu tenho é: como colocarmos suporte de tradução para várias linguagens
    já tentei lang=”pt-pt, de-de” ou ” lang=”pt-pt” lang=”de-de”
    mas não funciona, como adicionar suporte para várias linguagens especificas?

    Obrigado.

    Responder
  • Alcino Major

    Excelente dica, eu uso o prestashop e também funciona aqui está o tutorial para prestashop:

    1. ir até: /modules/blocksearch i abrir o ficheiro: blocksearch-top.tp
    2. procurar pelo seguinte código:
    ———————————————————————————————————————————————

    getPageLink(‘search’)|escape:’html’:’UTF-8′}” >

    {l s=’Search’ mod=’blocksearch’}

    ——————————————————————————————————————————————–

    3. na linha 42 adicionamos este novo código:
    ——————————————————————————————————————————————–
    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. O código final deverá ser igual a isto:
    ——————————————————————————————————————————————–

    getPageLink(‘search’)|escape:’html’:’UTF-8′}”>

    {l s=’Search’ mod=’blocksearch’}

    ——————————————————————————————————————————————-

    5. pudemos mudar a liguagem aletrando o código: lang=”pt-pt” para o código de linguagem que queremos, neste caso utilizo pt-pt de portugal,

    A questão que eu tenho é: como colocarmos suporte de tradução para várias linguagens
    já tentei lang=”pt-pt, de-de” ou ” lang=”pt-pt” lang=”de-de”
    mas não funciona, como adicionar suporte para várias linguagens especificas?

    Obrigado.

    Responder
  • Alcino Major

    lamentavelmente os codigos que eu inseri não são aceites

    deixo aqui o link para o tutorial que fiz no forum da prestashop

    http://www.prestashop.com/forums/topic/315242-tutorial-how-to-integrate-speech-recognition-search-on-prestashop/

    Responder

Enviar Comentário

© 2012 Powered By Wordpress, Deivison Arthur

Ir para cima