Pesquisa personalizada do Google - carregamento/execução manual a partir de parâmetros de URL

StackOverflow https://stackoverflow.com//questions/10689070

Pergunta

Obtendo algum comportamento estranho na pesquisa personalizada do Google que não consigo entender.Talvez alguém tenha uma pista.

Estou montando um site Magento, que possui seu próprio mecanismo de busca interno - mas é limitado apenas ao produto.Quero implementar também os resultados de pesquisa personalizados do Google na página de resultados de pesquisa.Acho que deveria ser capaz de simplesmente executar uma pesquisa com base nas consultas vars no URL (para retornar todo o conteúdo que não seja do produto), como tal:

        <section style="min-height:600px">
            <div style="background-color:#DFDFDF; min-height:800px; width:100%;">
                <div id="cse">Loading</div>
            </div>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript"> 
        //<![CDATA[

            $(document).ready( function(){ 
                console.log('search initiated');
                var t = window.setTimeout( function(){ customSearch(); }, 5000 );
            });

            function customSearch(){
                var q = urlParams()['q'];
                if (q != undefined && q != ""){
                    console.log('q : %s', q); //outputs successfully

                    google.load('search', '1');
                    google.setOnLoadCallback(function () {
                        var customSearchControl = new google.search.CustomSearchControl(MY CUSTOM ID KEY);
                        var cseDrawOptions = new google.search.DrawOptions();
                        cseDrawOptions.setAutoComplete(true); //unknown if this is required... 
                        customSearchControl.draw('cse',cseDrawOptions);                    
                        customSearchControl.execute(q);

                    }, true);

                } 
            }

           function urlParams(){
                    var vars = []; 
                    var hash;
                    var index = window.location.href.indexOf('?');
                    if( index != -1 ){
                        var hashes = window.location.href.slice(index + 1).split('&');
                        for(var i = 0; i < hashes.length; i++){
                            hash = hashes[i].split('=');
                            vars.push(hash[0]);
                            vars[hash[0]] = hash[1].replace(/\+/g, " ");
                        }
                    }
                    return vars;
                }

        //]>
        </script>
        </section>

Observo que retirei todos os outros conteúdos da lógica (mas sua implementação no magento é idêntica).

Então o comportamento é assim:a página carrega bem (estou atrasando a pesquisa no Google com um tempo limite para fins de teste).Supondo que haja uma consulta var no URL, o console rastreia conforme o esperado.Então a página é simplesmente apagada, sem nenhum conteúdo do Google."Apagado"...o que significa que todos os elementos da página desaparecem ou são substituídos por uma nova página que o Google carrega.Como se o controle de pesquisa não estivesse criando um iframe - apenas substituindo a página por um <body>-menos página HTML.

Eu preparei vários artigos sobre o assunto e revisei API - este código parece que deveria funcionar.Mas claramente não é.

o que estou perdendo?

Saúde -

ATUALIZAR

Continuar brincando com isso revelou que, por qualquer motivo:

google.load('search', '1');
google.google.setOnLoadCallback( console.log('loaded') )

Foi a causa do problema da página substituída.A página respondida, entretanto, continha links para o módulo de pesquisa que o Google está hospedando.E se eu vinculasse manualmente esses arquivos (renunciando a um google.load) então eu poderia executar uma pesquisa conforme esperado:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/?file=search&v=1" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
  ... search logic

Então encontrei uma sintaxe alternativa no desenvolvedores do Google página que parecia funcionar conforme o esperado:

$(document).ready( function(){ 
        google.load("search", "1", {"callback" : customSearch});
    });

    function customSearch(){
        var q = urlParams()['q'];
        if (q != undefined && q != ""){
            var cseControl = new google.search.CustomSearchControl('MY CUSTOM KEY');

            var cseDrawOptions = new google.search.DrawOptions();
            cseDrawOptions.enableSearchResultsOnly()
            cseControl.draw('cse', cseDrawOptions);
            cseControl.execute(q);
        } 
    }

O que funciona conforme o esperado.O único problema real neste momento é a série de

Unsafe JavaScript attempt to access frame with URL http://mydomain from frame with URL http://www.google/cse?...

Isso agora é jogado.

Não sei como as duas versões diferentes da sintaxe de carregamento mudam alguma coisa...mas parecia que sim.Seja qual for o caso, não estou certo de como resolver esses erros entre domínios.

Pensamentos seriam ótimos.

Foi útil?

Solução

Nada, hein?

Bem, basicamente encontrei uma boa solução, usando um método alternativo que acho que será mais flexível no longo prazo.Usando o Google API RESTful e jquery simples .ajax chamada, posso obter resultados bons e controláveis, sem erros entre domínios:

<div id="cse">Loading</div>
<script>
    //https://developers.google.com/custom-search/v1/getting_started
    //https://developers.google.com/custom-search/v1/using_rest#query-params
    //https://developers.google.com/custom-search/v1/cse/list

    var _url    = "https://www.googleapis.com/customsearch/v1";
    var _key    = 'AIzaSy... your api key here'; 
    var _cx     = '001809... your engine id';
    var _q      = urlParams()['q'];                         //query param

    jQuery(document).ready(function() {

        $j.ajax({
            url     : _url,
            type    : 'GET',
            dataType : 'jsonp',
            data :{
                key : _key,
                cx  : _cx,
                q   :_q 
            },
            success     : function(data, textStatus, jqXHR){ responseHandler(data); },
            error       : function(jqXHR, textStatus, errorThrown){ console.log('error: %s'), errorThrown},
            beforeSend  : function(){ console.log('sending request')},
            crossDomain : true
        });

    });

    function responseHandler( response, status) {
        console.log(response);

        var cse = $j('#cse');  // render vars as needed...
        for (var i = 0; i < response.items.length; i++) {
            var item = response.items[i];
            cse.append( "<br>" + item.htmlTitle);
        }
    }

    function urlParams(){
        var vars = []; 
        var hash;
        var index = window.location.href.indexOf('?');
        if( index != -1 ){
            var hashes = window.location.href.slice(index + 1).split('&');
            for(var i = 0; i < hashes.length; i++){
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
        }
        return vars;
    }

</script>

E você também pode;D

Saúde

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top