Ricerca personalizzata di Google - carico manuale / esecuzione da URL Params

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

Domanda

Ottenere un po 'di comportamento strano da Google Cerca ricerca che non riesco a sembrare fuori. Forse qualcuno ha un indizio.

Sto mettendo insieme un sito magento, che ha il proprio motore di ricerca interno - ma è limitato solo al prodotto. Voglio implementare anche Google Personalizza i risultati della ricerca sulla pagina dei risultati della ricerca. Immagino che dovrei essere in grado di eseguire semplicemente una ricerca in base alle query vars nell'URL (per restituire tutto il contenuto del non-prodotto), come tale: 

        <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>
.

Noto che ho tirato fuori tutti gli altri contenuti dalla logica (ma la sua implementazione in Magento è identica).

Quindi il comportamento va così: la pagina carica fine (sto ritardando la ricerca di Google con un timeout a scopo di test). Supponendo che ci sia una query var nell'URL la console si traccia come previsto. Quindi la pagina viene cancellata, senza contenuti da Google. "Spazzato via" ... Significa che tutti gli elementi sulla pagina TEH scompaiono o vengono sovrascritti da una nuova pagina che Google carica. Come se il controllo di ricerca non creane un iframe - è solo la sostituzione della pagina con una pagina HTML di <body>-Meno.

Ho pronto una serie di articoli sull'argomento e sono andato oltre il API - Questo codice sembra che dovrebbe funzionare. Ma chiaramente non lo è.

Cosa mi manca?

Cheers -

Aggiornamento

Continua Mettere in giro con questo ha rivelato che per qualsiasi motivo: 

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

è stata la causa del problema della pagina sostituita. La pagina ha risposto, tuttavia conteneva collegamenti al modulo di ricerca che Google ospiterà. E se ho collegato manualmente tali file (in corso permanendo un google.load), allora potrei eseguire una ricerca come previsto: 

<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
.

Poi ho trovato una sintassi alternativa su sviluppatori di google pagina che sembrava funzionare come previsto: < / P >. 

$(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);
        } 
    }
.

che funziona come previsto. Solo il vero problema a questo punto è l'host di

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

che ora viene lanciato.

Non so come le due diverse versioni della sintassi di caricamento cambiano qualcosa ... ma sembrava. Qualunque cosa il caso, non sono chiaro da come risolvere questi errori di dominio croce.

I pensieri sarebbero fantastici.

È stato utile?

Soluzione

Nothin Huh?

Bene - Ho praticamente elaborato una buona soluzione, usando un metodo alternativo che penso sarà più flessibile a lungo termine.Usando Googles API riposante API e semplice chiamata JQuery .ajax, posso ottenere risultati buoni e controllabili senza errori di dominio cross-dominio: 

<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 puoi anche tu; d

Cheers

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top