Делаем информационный виджет для Drupal сайта

http

Недавно передо мной возникла задача — сделать информационный виджет для одного сервиса, что бы размещать его на сторонних сайтах.
Коротко о сервисе — Сайт «Умное слово на каждый день» — это первый образовательный ресурс подобного рода. Неизвестные широким массам слова появляются каждый день и составляют крупнейший в рунете словарь «умных» слов. Заходи на Everydayword.ru каждое утро и повышай словарный запас.

Перед созданием видждета передо мной встал вопрос, каким образом мне получать данные и в каком формате. Мой выбор пал на AJAX в связке с JSON.

Приступим

PHP

Первым делом нужно создать страницу на которую будет идти ajax запрос. Поэтому в файле модуля объявляем hook_menu() и функцию в которой мы будем возвращать данные:
function mymodule_menu() {
$items['output'] = array(
'page callback' => 'mymodule_output', //функция для вывода данных
'access arguments' => array('access content'),
);
return $items;
}

function mymodule_output() {
$data = array(
'title' => t('Your title'),
'body' => t('Your body'),
);
drupal_json_output($data);
}

Чистим кэш с помощью инструмента Drush "Drush cc all", переходим на страницу yoursite.ru/output
Вы должны увидеть вот такой текст и ничего кроме {"title":"Your title","body":"Your body"}

JS

Ну вроде json формируется и отдается по определенному url, все хорошо, можно и js начинать писать.
$(document).ready(function () {
$.ajax({
url: 'http://yoursite.ru/output',
dataType: "json",
success: function(data) {
console.log(data)
}
});
});


Разбор ошибок и временные правки

К сожалению, вместо наших данных в консоли нас поджидает вот такая вот ошибка:
XMLHttpRequest cannot load http://yoursite.ru/output. Origin http://your-test-site.ru is not allowed by Access-Control-Allow-Origin.
Можно конечно просто разрешить ajax для домена yoursite.ru, но это же не будет делать каждый кто хочет установить наш виджет.
Однако у метода .ajax есть такая настройка как crossDomain, но работает она только с типом данных jsonp (dataType: 'jsonp')
Модернизируем наш скрипт:
$(document).ready(function() {
$.ajax({
url: 'http://yoursite.ru/output',
crossDomain: true,
dataType: 'jsonp',
success: function(data) {
console.log(data)
}
});
});

На этом дело не заканчивается и мы встречаем новую ошибку:
Uncaught SyntaxError: Unexpected token :
Оказывается браузер подключает нашу страницу как JS и пытается её исполнить. Немого изучив теорию jQuery.ajax() модернизируем наш код.

Итоговый, рабочий вариант.

JS

$.ajax({
url: 'http://yoursite.ru/output?callback=?',
crossDomain: true,
dataType: 'jsonp',
success: function(data) {
var code = '<div class="widget-title">' + data.title + '</div>'
code += '<div class="widget-body">"' + data.body + '"</div>'
$('#widget-content').html(code)
}
});
});

PHP

function mymodule_output() {
drupal_add_http_header('Content-Type', 'application/x-javascript');
$data = array(
'title' => t('Your title'),
'body' => t('Your body'),
);
$json = drupal_json_encode($data);
echo $_GET['callback'] . "($json);";
drupal_exit();
}

Размещение виджета

Для того, что бы разместить виджет необохдимо:
Подключить js файл <script src="http://yoursite.ru/path/to/file/widget.js"></script>
По желанию подключить css файл с некоторыми готовыми стилями <link rel="stylesheet" type="text/css" href="http://yoursite.ru/path/to/file/widget.css">
В месте где необходимо отображать виджет создать div с определенным id <div id="content-widget"></div>

UPD.
Если кого заинтересовал мой виджет, то
<script src="http://everydayword.ru/sites/all/themes/edw/scripts/output-word.js"></script>
<link rel="stylesheet" type="text/css" href="http://everydayword.ru/sites/all/themes/edw/css/output-word.css">
<div id="content-word">


Источник: http://habrahabr.ru

Добавить комментарий:
Имя:
E-mail:
2022 © Обсуждение Joomla и других CMS-систем управления сайтами  Правила | О проекте | Обратная связь