Boolean.org.ua - Использование AJAX в шаблонах Joomla

Использование AJAX в шаблонах Joomla

Автор: Бойко А. C
Обновлено: 2009-11-12 20:16:18
Просмотров: 507

ID: 221
Тип материала: Урок
Раздел: PHP

Не так давно Ajax был в диковинку, теперь он заполонил все и вся. Появляются целые порталы, работающие исключительно на Ajax. Не прошло это и мимо Joomla! — на некоторых зарубежных сайтах можно встретить в продаже шаблоны, использование которых должно привести Ваш ресурс в соответствие современным требованиям. Можно увидеть не только такие специализированные шаблоны, но и целый компонент призванный прийти Вам на помощь. В этой статье мы расскажем, как оживить ваш шаблон с помощью технологии Ajax.

Постановка задачи

Для начала нужно составить четкое представление, что мы хотим в итоге получить.

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

Наш шаблон должен быть полностью совместим со всеми расширениями Joomla!

Мы хотим добиться этого без компонентов, без хаков — т.е. наиболее простым способом

Реализация

Исходя из постановки задачи сразу возникает несколько вопросов. Как подгружать контент методом Ajax? Как потом его вставлять в нужное место? И основной вопрос: как взять то, что потом будем подгружать и вставлять? Ведь мы имеем дело не со статичными HTML страничками лежащими на сервере, а с CMS.

В основе Ajax лежит язык JavaScript область действия которого ограничивается браузером. Однако, ему под силу загружать различные документы с сервера, например изображения. Но опять же используя только возможности браузера — по протоколу HTTP.

Грубо говоря, если мы можем получить доступ к файлу в сети, набрав в строке браузера что-то типа: http://som_site.ru/file.html, то до этого файла можно получить доступ и из JavaScript.

В случае со статичными документами, мы могли бы легко обратиться к ним указанным выше способом (по ссылке). Но здесь есть небольшая проблема: нам нужно каким-то образом получить то содержимое, которое выводится в обычном шаблоне там, где стоит

<?php echo mosMainBody();?>

И это, хоть далеко не все об этом знают, возможно. Для этого в адресе ссылки Joomla необходимо заменить index.php на index2.php и в конец ссылки дописать параметр &no_html=1.

Таким образом, если обычная ссылка на главную страницу выглядит:

http://som_site.ru/index.php?option=com_frontpage&Itemid=1

то ссылка на страницу, содержащую только вывод самого компонента (то, что выводится функцией mosMainBody) будет иметь вид:

http://som_site.ru/index2.php?option=com_frontpage&Itemid=1&no_html

Как подгружать контент методом Ajax?

Для подгрузки контента с помощью Ajax мы воспользуемся уже готовой библиотекой. Библиотек сейчас много, сам выбор уже может вызвать трудности. При этом просить помощи на формах бесполезно — в лучшем случае, Вам назовут штук пять, и предложат попробовать какая Вам больше нравится.

У нас есть четкая цель, нам нужно выполнить только ее. Поэтому библиотеки с огромным функционалом, позволяющие заставить моргать и переливаться, как новогодняя елка, нашу страничку, мы не возьмем.

Для нашей задачи мы воспользуемся (по наводке Dutch) библиотекой Dynamic Ajax Content от DynamicDrive.

Сначала нужно подключить библиотеку на страницу. Это сделать не сложнее, чем подключить CSS файл. Достаточно поместить в HEAD шаблона строку:

<head> <script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/web2/ajaxlib.js"></script>  </head>

Что бы её использовать нужно в качестве ссылки указать:

<a href="javascript:ajaxpage('http://som_site.ru/file.html', 'content');">ajax link</a>

, где http://som_site.ru/file.html – адрес странички которую нужно загрузить content — это id контейнера DIV в котором нужно разместить содержимое file.html

Т.е. в нашем случаи ссылка будет выглядеть так:

<a href="javascript:ajaxpage('http://som_site.ru/index2.php?option=com_frontpage&Itemid=1&no_html=1', 'content');">test</a>

А в шаблоне должен быть предусмотрен div с уникальным идентификатором id="content".

<body> <div id="content">   <?php echo mosMainBody();?>  </div> </body>

В этот же контейнер при первой загрузке сайта будет выводиться mosMainBody().

Изменения ссылок

Все замечательно, но ссылки то Joomla выводит как

http://som_site.ru/index.php?option=com_frontpage&Itemid=1

, а не так как нам надо:

javascript:ajaxpage('http://som_site.ru/index2.php?option=com_frontpage&Itemid=1&no_html', 'content');

Поэтому нам нужно изменить вывод ссылок в модуле mod_mainmenu. (Измененный модуль (mod_ajaxmenu) прилагается к статье и устанавливается, так же как и любой другой — через инсталлятор).

mod_mainmenu выводит разные ссылки — ссылки открываемые в новом окне, ссылки открываемые в всплывающем окне, и наконец ссылки открываемые в родительском окне.

Изменения должны коснуться только тех ссылок, которые открываются в родительском окне. Их формирование происходит в районе 133 строки в mod_mainmenu.php.

// open in parent window $txt = ' <a href="'. $mitem->link .'" class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</a>';

Заменим index.php на index2.php:

  $ajaxLink = str_replace("index", "index2", $mitem->link);

Приведем полученный урл к нужному виду:

$ajaxLink = "javascript:ajaxpage('$ajaxLink', 'content');";

И теперь все вместе:

// open in parent window $ajaxLink = str_replace("index", "index2", $mitem->link);  $ajaxLink = "javascript:ajaxpage('$ajaxLink', 'content');"; $txt = '<a href="'. $ajaxLink .'" class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</a>';

Подведение итогов

Итак, что у нас есть? Теперь у нас есть модуль меню, выводящий ссылки в нужном виде и есть библиотека JavaScript позволяющая динамически подгружать контент. Посмотреть данное решение в работе можно на сайте: liteweb.maxaman-soft.ru

Итак, теперь, если вы хотите использовать AJAX в вашем шаблоне, вам необходимо: Подключить библиотеку Dynamic Ajax Content:

<head> <script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/web2/ajaxlib.js"></script> </head>

Установить модуль mod_ajaxmenu.

В шаблоне публичной части поместить в контейнер div с ID="content":

Планы на будущее

Итак, давайте подведем итоги, что у нас получилось, а что нет.

Мы отошли от требования полной совместимости с любыми расширениями Joomla – мы не можем использовать другой модуль меню.

Модули Joomla имеют привязку к пунктам меню, т.е. можно выводить некоторые модули только на одних пунктах меню, а на других не выводить. Мы лишились и этого – если модуль был выведен при первой загрузке, то он никуда не денется.

Любые ссылки не из меню, остаются ссылками без Ajax.

Если у пользователя в браузере отключен JavaScript он не сможет нормально использовать навигацию по сайту.

Все это будет работать только на родной Joomla, по причине используемых кодировок.

В принципе все эти проблемы можно решить, как это сделать мы расскажем в следующей статье

Скачать шаблон Web2 — пример использования технологии Ajax
Скачать модуль Ajax Menu

Обсудить данную статью, высказать свое мнение и просто задать вопросы автору можно у нас на форуме. Удачных экспериментов!

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