—»     —»   Разработка поиска по интернет-магазинам при помощи Google
  Раздел: Руководства   Комментариев: 1  

Разработка поиска по интернет-магазинам при помощи Google



В данном руководстве мы собираемся заняться разработкой простой системы поиска продукции. Используя jQuery и PHP, мы можем прикрутить Shopping Search API от Google и выдавать список единиц, доступных к приобретению, а также их цены, фотографии и другую полезную информацию. Shopping Search API дает нам прямой доступ к огромной базе продукции и цен в Google, позаимствованных с партнерских онлайн-магазинов. Еще одно преимущество использования данного сервиса заключается в том, что продукции автоматически выдаются рейтинги, и она фильтруется таким образом, чтобы сначала были представлены продукты, наиболее подходящие под запрос пользователя.

Разработка поиска по интернет-магазинам при помощи Google

Примечание: Google ограничивает количество дозволенных запросов на каждый день. Бесплатно можно сделать всего 2.5 тысячи запросов, так что если наше демо не будет отображать результатов, то скорее всего исчерпан лимит.

HTML-код

Первый этап, как и всегда, заключается в разработке HTML-разметке для нашей страницы. Мы будем использовать простой HTML5-документ, который вы можете видеть ниже:

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>

Здесь не происходит ничего удивительного. У нас есть форма, содержащая единственное текстовое поле, раздел с продукцией, который будет отображать продукцию магазинов, а также сообщение, которое отображается в случае, когда ничего по запросу не обнаружено. Давайте рассмотрим разметку элементов магазинного списка (который будет генерироваться при помощи jQuery, а зависимости от результатов, полученных по вызову 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>

Как только все это будет сделано, мы можем продолжить, сгенерировав ключ для API от Google:

Получение ключа для API от Google

Google предлагает API бесплатно, но нам нужно будет сгенерировать уникальный ключ для нашего приложения, если мы хотим его использовать. Это помогает компании составлять статистику использования и отслеживать авторизации каждого запроса. Мы это уже сделали ранее, когда создавали форму регистрации в один клик с помощью Google, и на этот раз процесс несильно отличается. Вам нужно зайти в консоль API Google, и создать новый проект, затем активировать Search API for Shopping; это позволит вам получить API-ключ, который нужно будет использовать в следующем разделе (здесь можно подробнее ознакомиться с этапами).

Учтите, что Google ограничивает число запросов к API на каждый ключ. API поиска для интернет-магазина позволяет вам делать всего 2.500 запросов в день (бесплатно), так что если вы метите на что-то серьезное, то придется заплатить.

Разработка поиска по интернет-магазинам при помощи Google

Пишем прокси

Для того, чтобы взаимодействовать безопасно, и сохранить приватность вашего API-ключа, нам нужно пропустить наши запросы через PHP-скрипт на сервере. Хотя API возвращает нам данные в JSON-формате, мы не можем их использовать напрямую из javascript, не раскрывая при этом нашего ключа (и без нарушения политики использования одного и того же источника).

Этот PHP-скрипт или прокси довольно понятен:

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);
}

Скрипт использует ввод из $_POST, шифрует его, и отсылает в Google, выдавая затем результат.

jQuery-код

Теперь, когда у нас все готово, мы можем продолжить писать код jQuery, который будет управлять нашим движком поиска по интернет-магазину:

assets/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');
}

});

Мы используем тот же трюк с тайм-аутом, который использовался в руководстве с AJAX-заметами. Выставив тайм-аут на две секунды в будущем, и очищая результат при каждом нажатии клавиши, мы можем запустить поиск только тогда, когда пользователь перестает печатать.

И на этом наш поиск продукции по интернет-магазинам готов!

В завершение

Вы можете использовать API поиска продукции для того, чтобы расширить функционал вашего уже существующего веб-приложения, чтобы предоставить пользователям схожие продукты, которые могут их заинтересовать. API дает вам больше функционала, который мы здесь представили: вы можете выставлять фильтры, сортировку, а также группировать результаты, применять проверку орфографии, а также отображать статистику. Вы даже можете принять участие в партнерской сети Google, и начать зарабатывать настоящие деньги при помощи вашего приложения.

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 4002   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 октября 2013 @ 15:23
Написал: Александр — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
C 17 сентября Google Shopping Search API не работает.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930