Динамически подгружаемый контент в Joomla
Динамически подгружаемый контент в Joomla
Не так давно я программировал сайт, основная задумка дизайнера – мы находимся в кабине лифта, кнопки переключения этажей – меню «Новости», «Контакты» и т.п. Основной контент находится «в дверях лифта». При нажатии на кпонку этажа, двери закрываются, происходит загрузка содержимого, двери открываются.
В результате сайт получился полностью динамическим, т.е. все содержимое (включая поиск) загружается с помощью AJAX, на каждую страницу устанавливается собственная ссылка. В тоже время, посетители у которых отключен джаваскипт смогут пользоваться сайтом, и соотвественно сайт будет проиндексирован поисковыми роботами.
Подготовка системы
Для работы с AJAX запросами в Joomla реализован метод выдачи «голого» содержимого которое генерируется компонентом. Для этого в запросе необходимо добавить параметр format=raw
Для того чтобы компонент смог отдавать raw данные необходимо сделать отдельный вид, файл которого должен называться view.raw.php
К сожалению стандартный com_content не имеет возможности отдавать raw данные, поэтому нам необходимо реализовать такой функционал. Для этого создаем копию файла components/com_content/views/article/view.html.php с названием view.raw.php
Для проверки работоспособности нужно открыть любую статью на сайте и дописать в адрес &format=raw
Javascript
Для реализации javascript функций будет использовать библиотеку jQuery версии не ниже 1.3. Для реализации ссылок-якорей понадобится плагин jQuery Address. Собственно сам плагин: jquery.address-1.5
// jQuery может конфликтовать с Mootols - используем noConflict var j = jQuery.noConflict(); j(function(){ // перехватываем нажатие на ссылку j('a[target!="_blank"]').click(function(){return false;}) .click(function(){loadPage(this.href);}); // загружаем страницу if (j.address.value() != '/'){ // имеется ссылка якорь, загружаем требуемую страницу loadPage(j.address.value().substr(1)); } }); function loadPage(page){ // maincontent - основной div куда загружается контент j('#maincontent').load(page, {format: 'raw'}, function(){ // добавляем перехват нажатия для ссылок в контенте j('#maincontent a[target!="_blank"]').click(function(){return false;}) .click(function(){loadPage(this.href);}); // устанавливаем ссылку якорь j.address.value(page); }); }
Данный код реализует основной функционал загрузки страниц. В моем случае требовались ещё функции анимации дверей, переключение этажей и др. которые синхронизировались с функциями загрузки.
Заключение
CMS Joomla имеет много возможностей, и даже те функции которые не были заложены изначально разработчиками легко добавляются с помощью расширений и небольших «хаков» встроенных компонентов.