Куда идем?

Я решил немного отвлечься от уроков, посвященных компонентам и рассказать про один очень занимательный плагин. Этот плагин, при быстрой установке и настройке, позволяет сделать с Joomla нечто невероятное, а именно просматривать различные страницы сайта без перегрузки страниц. При этом существенно увеличивается скорость загрузки, да и что сказать, это выглядит очень круто :-). Сайт начинает работать через Ajax, при этом поисковая оптимизация совсем не страдает. Ну да ладно, всё по порядку…

Прежде всего познакомимся с плагином. Он называется Add FullAjax. Основан этот плагин на почти одноименной библиотеке FullAjax. Увидеть на что он способен можно перейдя по этой ссылке. На открывшемся сайте попробуйте кликнуть на любую из ссылок меню.

Все материалы сайта открываются быстро, не перезагружая при этом страницу в браузере. Как такое возможно? Ответ прост – Ajax. Если для вас это просто набор букв, советую заглянуть в википедию.

Началась вся история с FullAjax уже довольно давно. Вот статья о FullAjax на Хабре, написанная еще в 2008 году. Естественно, тогда никаких интеграций с конкретными CMS не было. К настоящему времени один хороший человек написал плагин, значительно упрощающий  работу с данной библиотекой.

Плагин Add FullAjax. Установка и настройка

Вот ссылка на страницу плагина Add FullAjax в каталоге расширений Joomla. Там есть прямая ссылка на скачивание последней версии плагина. Кстати, плагин совместим со всеми версиями Joomla, начиная с 1.5.

Устанавливается плагин через менеджер расширений Joomla, а вот для настройки придется немного поработать.

Настройка Add FullAjax

После того, как плагин установлен, потребуется внести некоторые изменения в шаблон Joomla.

1) Открываем файл index.php шаблона, который у вас используется, находим в нем вывод компонента и сообщения об ошибке(обычно они находятся рядом), находим контейнер, которые их окружает и добавляем к нему id="forajax". Получится что-то вроде:

<div id="forajax">
 <jdoc:include type="message" />
 <jdoc:include type="component" />
</div>

Если у вас используется платный шаблон или фреймворк, то весьма вероятно, что вам не удастся легко найти компонент.

2) После того, как п.1. выполнен, вы уже можете активировать плагин и посмотреть его в действии. Но обычно обновлять требуется не только контент, но и модули. Например, чтобы подсветить активный пункт меню, или скрыть/показать модуль только для определенных страниц. По умолчанию модули обновляться не будут. Для обновления модулей нужно:

– найти в файле index.php шаблона позицию вывода модуля, которую требуется обновлять, например, breadcrumbs:

<jdoc:include type="modules" name="breadcrumbs" />

– добавить к контейнеру, окружающему эту позицию выдуманный вами идентификатор, например:

<jdoc:include type="modules" name="breadcrumbs" />

или

<div id="myCoolModule">
 <jdoc:include type="modules" name="user3" />
</div>

– перейти в настройки плагина и в поле «Position parameters» вписать конструкцию вида: position:id|position2:id2. В случае с примером выше это будет:

breadcrumbs:pathway|user3:myCoolModule

– в настройках плагина в опции «Enable Positions update» выберите «semi-automatically».

На этом всё. Если всё сделано правильно, то модули в указанных позициях также будут обновляться с помощью Ajax. Заметьте, если модуль остается неизменным для всех страниц сайта, то не нужно обновлять его таким способом.

3) С чем плагин пока работает не очень хорошо, так это с другими скриптами и формами, поэтому разработчик рекомендует отключать его для таких страниц. Для этого есть соответствующая опция в настройках «Ignore menu items (id)», позволяющая исключить обработку плагином указанных пунктов меню. Это может быть полезно, например, если у вас есть пункт меню, ведущий на форму добавления статьи.

Вот и вся настройка. Согласитесь, довольно быстро, а результат впечатляет.

А что с SEO и сторонними компонентами?

Очень распространенный вопрос: как использование на сайте плагина Add FullAjax повлияет на индексацию и ранжирование сайта поисковыми системами? Ответ прост: никак. С одной стороны, поисковые системы не индексируют JavaScript, на котором основывается FullAjax, но плагин сделан таким образом, что ссылки с- и без- JavaScript выглядят совершенно одинаково. Проще говоря, если человек зайдет на сайт, то он сможет насладиться всеми прелестями FullAjax; если же зайдет поисковый робот, то он увидит сайт в классическом виде(в таком, как если плагин отключен).

Другим важным вопросом является взаимодействие плагина со сторонними расширениями Joomla. Здесь разработчик не обещает, что всё будет работать. Протестировать плагин со всеми существующими расширениями просто не представляется возможным. Скажу лишь, что я пробовал тестировать Add FullAjax с некоторыми известными расширениями. Проблемы есть но небольшие и связаны они больше с конфликтом скриптов расширения и плагина, нежели со структурой оных.

Да, что касается скриптов. Здесь все довольно печально. После установки Add FullAjax могут перестать работать многие скрипты сайта, например, Lightbox, редакторы, и.т.д. Всё это нужно проверять и если вы не сильны в JavaScript, решить такие проблемы будет достаточно сложно.

Заключение

В заключении хочу сказать, что плагин Add FullAjax весьма интересный и перспективный. Особенно актуально его использование для сайтов-визиток, которые практически не содержат форм, но где важна скорость и удобство просмотра страниц. Попробуйте показать Add FullAjax заказчикам. Думаю, многие из них захотят себе такую «примочку».

Скачать FullAjax.

Об авторе
Wedal
(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Добавить комментарий


Deprecated: Implicit conversion from float 126706.00000000001 to int loses precision in /home/p540446/www/wedal.ru/components/com_jcomments/classes/factory.php on line 201
Комментарии  
5
Действительно очень интересный плагин. Правда, как раз сайтами-визитками его применение и ограничится, а для большинства других случаев польза от AJAX незначительна, к тому же есть упомянутые конфликты со скриптами... Но для презентационных, простых по структуре сайтов - самое оно, спасибо за наводку.
1
Виталий, спасибо за статью! Будет полезно. Уже думал как бы Joomla так заставить работать.

athree, на самом деле так все сайты должны работать, а не только визитки. Просто это ещё в самом начале, но задаёт направление.
3
То же самое я делал подключая библиотеку jQuery, написав две строчки кода в .
Без плагинов.
Прелодера не было, разве что в момент перезагрузки страниц.
-3

Цитирую titaniMOZG:

То же самое я делал подключая библиотеку jQuery, написав две строчки кода в .
Без плагинов.
Прелодера не было, разве что в момент перезагрузки страниц.


Нельзя ли по-подробнее. Не силен в программировани - но очено интереско как реализовывается
2
Давно думал как такое осуществить на джумла.
Сам-то контент обновить не сложно, у джумлы это предусмотренно, тупиковым было это обновлять модули, надо будет поучится у этого плагина...
-1
Тоже хотелось бы пример. Если не затруднит на форуме тему сделать. Как сделали, что получилось в результате.
2
А что в конструкции breadcrumbs:pathway|user3:myCoolModule означает pathway то-есть для других позиций что там писать?
0
slovoblud, "pathway" - это просто id блока оформления.
4
Летом еще этот плагин использовал,немного повозиться пришлось - но почти все что хотел сделал http://bellaplaza.ru
0
Статья очень понравилась, спасибо Wedal! прикручу и себе эту приблуду ;-)
1
Russfox, симпатичный сайт, приятно пользоваться.
0
Да интересная разработка, тоже понравился эффект, когда нашел его неделю назад.
Но все еще пока в начальной стадии разработки.
Вижу применение только на сайтах визитках и промо-сайтах, где этот эффект будет очень уместен.
0
Почему это нужно только на сайтах визитках. Вы о самой концепции или об этом конкретном решении в силу того что оно ещё не развито?
0

Цитирую VARion:

Почему это нужно только на сайтах визитках. Вы о самой концепции или об этом конкретном решении в силу того что оно ещё не развито?


Второе. Использовать в продакшене на сложных проектах пока рановато.
0
Года три назад делал подобное для клиента - никаких тогда особых трудностей не увидел по внедрению ajax при загрузке страниц для Joomla(для визитки). Если бы использовал другие CMS, то уверен были бы проблемы со многими, но у Joomla превосходная структура разделения логики от вида.

Там тогда было где то 15-20 строчек на Jquery. К сожалению не могу показать как это выглядело, заказчик уже дропнул домен. Очень удивился, что только недавно все это кто-то додумался оформить в виде плагина.
0
Делал на стандартном шаблоне. Работает ЗАМЕЧАТЕЛЬНО !!!

У меня получилось так :
-div id="forajax"-
-jdoc:include type="message" />
-jdoc:include type="component" /-
-/div-
1
"Если у вас используется платный шаблон или фреймворк, то весьма вероятно, что вам не удастся легко найти компонент." - подскажите как его найти во фрейвоке
0
Пробуй поиском CTRL+F искать message или component И в тег
0
Добрый день,
Не подскажите, а можно ли при помощи данного расширения скрыть ссылки меню от поисковиков?
0
Михаил, в свете того, что Google начал индексировать и выполнять JavaScript - вряд ли.
0
Ребят, а подскажите, как можно сделать так что бы только одна позиция модуля была на аяксе. У меня есть сайт на котором не нужен аякс вообще - но нужно сделать что бы был аякс плеер - смысл такой: ты зашёл на сайт, плеер заиграл, ты переходишь на другую страницу - плеер не прекращает работать. Пытался использовать автоматически - но из-за множества используемых скриптов (слайдер, инстаграмм и галлерея) происходит конфликт скриптов.
0
Здравствуйте, может у кого нибудь есть Add FullAjax для Joomla 3? В данный момент сайт разработчика на реконструкции... если у кого то завалялось - поделитесь пожалуйста
0
Добавил ссылку на скачивание последней версии в конец статьи.
0
Большое спасибо!
0
У меня стоит j 2.5.4 стоит. Ядро сильно покоцано, много всего ставилось и тестировалось. Сейчас устанавливаю расширение, - и при его включении сервер начинает отдавать 500, - какая-то существенная ошибка. С чем это может быть связано, на ваш взгляд?
0
Антон, это может быть связано с чем угодно. Вам нужно посмотреть логи ошибок на сервере, чтобы установить точную причину ошибки.