En este tutorial, crearemos un motor de búsqueda de productos simple. Usando jQuery y PHP, accederemos a la API de búsqueda de compras de Google y devolveremos una lista de artículos disponibles para comprar, junto con precios, fotos y otra información útil. La API de búsqueda de compras nos brinda acceso directo a la gran base de datos de productos y precios de Google, obtenida de tiendas en línea asociadas. Otro beneficio de usar este servicio es que los productos se clasifican y filtran automáticamente detrás de escena para que coincidan mejor con la consulta de búsqueda del usuario.
¡Empecemos a programar!
El HTML
El primer paso, como de costumbre, es establecer el diseño HTML de la página. Haremos uso de un documento HTML5 simple, que puede ver a continuación:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Google Product Search | Tutorialzine Demo</title>
<!-- CSS Includes -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" />
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Product Search</h1>
<form action="" method="get">
<input type="text" id="q" name="q" placeholder="what do you want to buy?" />
<img id="preload" alt="preload" src="assets/img/325.gif"/>
</form>
<h2>Powered by <b>Google</b></h2>
</header>
<section id="products">
<!-- The product list will go here -->
</section>
<p id="message">
<!-- Error messages will be displayed here -->
</p>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html> Nada demasiado emocionante está pasando aquí. Tenemos un formulario que contiene un solo campo de texto, los productos sección, que contendrá los artículos de compra, y un mensaje que se muestra cuando no se encuentra nada. Y aquí está el marcado de un elemento de la lista de compras (será generado por jQuery dependiendo del resultado de la llamada API):
<a class="product" data-price="$73.99" href="http://ebay.com/..." target="_blank">
<img alt="eBay" src="http://i.ebayimg.com/.." />
<span>eBay</span>
</a> Una vez que tengamos esto en su lugar, podemos continuar generando nuestra clave API de Google.
Obtención de una clave API de Google
Google ofrece su API de forma gratuita, pero tenemos que generar una clave única para nuestra aplicación para poder usarla. Esto les ayuda a rastrear el uso y autenticar cada solicitud. Ya hicimos esto antes, cuando estábamos creando un formulario de registro con un solo clic con Google, y esta vez no es muy diferente. Lo que debe hacer es visitar la consola API de Google y configurar un nuevo proyecto, luego active la API de búsqueda para compras; esto le dará una clave API que usaremos en la siguiente sección (lea aquí para obtener más detalles sobre los pasos).
Tenga en cuenta que Google impone límites en la cantidad de solicitudes de API por clave. La API de búsqueda de compras solo permite 2500 solicitudes por día de forma gratuita, por lo que si planea hacer algo serio con ella, probablemente tendrá que pagar.
Escribir el proxy
Para comunicarnos de forma segura y mantener privada su clave API, tendremos que enrutar nuestras solicitudes a través de un script PHP en el servidor. Aunque la API devuelve datos con formato JSON, no podemos usarlos directamente desde JavaScript sin exponer nuestra clave (y sin violar la misma política de origen).
Este script PHP, o proxy, es bastante sencillo:
proxy.php
// Enter your Google API key here
// you can obtain it from the API console
$key = 'YOUR API KEY GOES HERE';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['search'])) {
$search = urlencode($_POST['search']);
$url = 'https://www.googleapis.com/shopping/search/v1/public/products?key=' . $key . '&country=US&q=' . $search . '&maxResults=24';
echo file_get_contents($url);
} El script toma su entrada de $_POST, la codifica y la envía a Google, imprimiendo el resultado.
El código jQuery
Ahora que tenemos todo en su lugar, podemos proceder a escribir el código jQuery que impulsará nuestro motor de búsqueda de compras:
activos/js/script.js
$(document).ready(function(){
var saveTimer,
searchBox = $('#q'),
products = $('#products'),
message = $('#message'),
preloader = $('#preload');
preloader.css('visibility','hidden');
searchBox.on('input',function(e){
// Clearing the timeout prevents
// saving on every key press
clearTimeout(saveTimer);
// If the field is not empty, schedule a search
if($.trim(searchBox.val()).length > 0) {
saveTimer = setTimeout(ajaxProductsSearch, 2000);
}
});
$('form').submit(function(e){
e.preventDefault();
if($.trim(searchBox.val()).length > 0) {
clearTimeout(saveTimer);
ajaxProductsSearch();
}
});
function ajaxProductsSearch(){
products.empty();
preloader.css('visibility','visible')
// Issue a request to the proxy
$.post('proxy.php', {
'search' : searchBox.val()
},
function(data) {
if(data.totalItems == 0){
preloader.css('visibility','hidden');
message.html("We couldn't find anything!").show();
return false;
}
$.each(data.items, function(i, item){
var html = ' <a class="product" data-price="$ '+item.product.inventories[0]['price']+'" href="'+item.product['link']+'" target="_blank">';
// If the product has images
if(item.product.images && item.product.images.length > 0){
html += '<img alt="'+item.product.author['name']+'" src="'+ item.product.images[0]['link']+'"/>';
}
html+='<span>'+item.product.author['name'].substr(0, 20)+'</span></a> ';
products.append(html);
});
preloader.css('visibility','hidden');
},'json');
}
}); Estoy usando el mismo truco de tiempo de espera que usamos en el tutorial de notas de AJAX hace unas semanas. Al configurar un tiempo de espera de dos segundos en el futuro y borrarlo con cada pulsación de tecla, podemos ejecutar la búsqueda solo cuando el usuario ha dejado de escribir.
¡Con esto nuestro sitio web de búsqueda de productos está completo!
¡Es una envoltura!
Puede usar la API de búsqueda de productos para mejorar su aplicación web existente con productos relevantes que serán de interés para sus visitantes. La API le brinda mucha más funcionalidad que la que se muestra aquí:puede filtrar, ordenar y agrupar resultados, aplicar revisión ortográfica y mostrar estadísticas. Incluso puede participar en la red de afiliados de Google y ganar dinero real con su aplicación.