Недавно я делал виджет, который пользователь может разместить на своей главной странице Яндекса. Здесь я опишу технические детали реализации простого виджета, показывающего информацию из внешнего источника (сайта).

Цель виджета — показывать все виды пиццы с сайта CheeseCafe в виде картинок, названий и ссылок на онлайн-заказ.

Виджеты для Яндекса создаются очень просто: создается почти обычный XHTML-документ, в котором содержатся данные/скрипты, либо методы для загрузки данных. В моем случае сам виджет будет только оболочкой, а данные будут загружаться извне.

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

После просмотра документации яндекса стало ясно что код виджета будет таким:

В этом документе содержатся описательные meta-теги виджета. Ключевым является атрибут src, значение content которого содержит ссылку на файл с данными, который будет предварительно подготовлен. Данные будут загружены в тело этого документа (между тегами <body/>).

Для легкого парсинга я использовал библиотеку phpQuery.

Код для парсинга каталога с пиццами, если выбросить проверки и обработку ошибок может выглядеть примерно так:

Собственно, этого и достаточно для backend’a виджета. На выходе получается HTML-файл со сграбленными данными сайта, URI которого указан в коде виджета (атрибут метатега src). Я использовал шаблон data-tpl.html, который является обычным HTML-документом, содержащим все стили и скрипты виджета. Скрипт парсинга я добавил в cron, чтобы данные обновлялись каждые сутки.

Естественно необходимо поработать над дизайном, графикой, стилями и скриптами виджета, которые будут расположены в подгружаемом файле с данными (data-tpl.html в данном случае). Внутри этого файла необходимо загрузить скрипт WidgetApi.js

Этот скрипт дополнительно загрузит библиотеку jQuery, что для меня оказалось очень удобным. Данные я решил представить в виде карусели, для чего использовал jQuery-плагин jCarousel Lite.

Далее необходимо все это скормить Яндексу. На странице добавления виджета выбираем тип XHTML, закачиваем виджет-оболочку, заполняем остальные поля, следуем простым инструкциям и смотрим результат.

Мой результат выглядит так:

Виджет для заказа пиццы в CheeseCafe

Ниже готовый виджет, который получился у меня. Теперь можно выбирать пиццу от CheeseCafe прямо на главной странице яндекса. Пользуйтесь и успешной разработки виджетов! 😉

Пицца от CheeseCafe в Пензе

Быстрый заказ пиццы в Пензе

добавить на Яндекс

UPD
Виджет перестал работать по причине прекращения работы сайта cheesecafe, откуда получались данные.