Я решил немного отвлечься от уроков, посвященных компонентам и рассказать про один очень занимательный плагин.
Joomla + FullAjax. Удивительное рядом.

Я решил немного отвлечься от уроков, посвященных компонентам и рассказать про один очень занимательный плагин. Этот плагин, при быстрой установке и настройке, позволяет сделать с 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.

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

+5 # athree 17.02.2012 06:07
Действительно очень интересный плагин. Правда, как раз сайтами-визитками его применение и ограничится, а для большинства других случаев польза от AJAX незначительна, к тому же есть упомянутые конфликты со скриптами... Но для презентационных, простых по структуре сайтов - самое оно, спасибо за наводку.
Ответить | Ответить с цитатой | Цитировать
+1 # VARion 17.02.2012 07:47
Виталий, спасибо за статью! Будет полезно. Уже думал как бы Joomla так заставить работать.

athree, на самом деле так все сайты должны работать, а не только визитки. Просто это ещё в самом начале, но задаёт направление.
Ответить | Ответить с цитатой | Цитировать
+3 # titaniMOZG 17.02.2012 11:11
То же самое я делал подключая библиотеку jQuery, написав две строчки кода в .
Без плагинов.
Прелодера не было, разве что в момент перезагрузки страниц.
Ответить | Ответить с цитатой | Цитировать
-3 # KocH 17.02.2012 11:23
Цитирую titaniMOZG:
То же самое я делал подключая библиотеку jQuery, написав две строчки кода в .
Без плагинов.
Прелодера не было, разве что в момент перезагрузки страниц.

Нельзя ли по-подробнее. Не силен в программировани - но очено интереско как реализовывается
Ответить | Ответить с цитатой | Цитировать
+2 # Merkury 21.02.2012 21:36
Давно думал как такое осуществить на джумла.
Сам-то контент обновить не сложно, у джумлы это предусмотренно, тупиковым было это обновлять модули, надо будет поучится у этого плагина...
Ответить | Ответить с цитатой | Цитировать
-1 # VARion 17.02.2012 11:28
Тоже хотелось бы пример. Если не затруднит на форуме тему сделать. Как сделали, что получилось в результате.
Ответить | Ответить с цитатой | Цитировать
+2 # slovoblud 17.02.2012 11:27
А что в конструкции breadcrumbs:pathway|user3:myCoolModule означает pathway то-есть для других позиций что там писать?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 18.02.2012 02:09
slovoblud, "pathway" - это просто id блока оформления.
Ответить | Ответить с цитатой | Цитировать
+4 # Russfox 17.02.2012 11:53
Летом еще этот плагин использовал,немного повозиться пришлось - но почти все что хотел сделал http://bellaplaza.ru
Ответить | Ответить с цитатой | Цитировать
0 # koshsh 17.02.2012 15:56
Статья очень понравилась, спасибо Wedal! прикручу и себе эту приблуду ;-)
Ответить | Ответить с цитатой | Цитировать
+1 # VARion 18.02.2012 08:37
Russfox, симпатичный сайт, приятно пользоваться.
Ответить | Ответить с цитатой | Цитировать
0 # vyatka 17.02.2012 20:04
Да интересная разработка, тоже понравился эффект, когда нашел его неделю назад.
Но все еще пока в начальной стадии разработки.
Вижу применение только на сайтах визитках и промо-сайтах, где этот эффект будет очень уместен.
Ответить | Ответить с цитатой | Цитировать
0 # VARion 18.02.2012 08:33
Почему это нужно только на сайтах визитках. Вы о самой концепции или об этом конкретном решении в силу того что оно ещё не развито?
Ответить | Ответить с цитатой | Цитировать
0 # vyatka 18.02.2012 10:20
Цитирую VARion:
Почему это нужно только на сайтах визитках. Вы о самой концепции или об этом конкретном решении в силу того что оно ещё не развито?

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

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

У меня получилось так :
-div id="forajax"-
-jdoc:include type="message" />
-jdoc:include type="component" /-
-/div-
Ответить | Ответить с цитатой | Цитировать
+1 # Bot 16.03.2012 10:03
"Если у вас используется платный шаблон или фреймворк, то весьма вероятно, что вам не удастся легко найти компонент." - подскажите как его найти во фрейвоке
Ответить | Ответить с цитатой | Цитировать
0 # Илья 22.03.2013 11:31
Пробуй поиском CTRL+F искать message или component И в тег
Ответить | Ответить с цитатой | Цитировать
0 # Михаил 29.10.2012 19:11
Добрый день,
Не подскажите, а можно ли при помощи данного расширения скрыть ссылки меню от поисковиков?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 30.10.2012 02:27
Михаил, в свете того, что Google начал индексировать и выполнять JavaScript - вряд ли.
Ответить | Ответить с цитатой | Цитировать
0 # indorill.empty 21.12.2013 13:54
Ребят, а подскажите, как можно сделать так что бы только одна позиция модуля была на аяксе. У меня есть сайт на котором не нужен аякс вообще - но нужно сделать что бы был аякс плеер - смысл такой: ты зашёл на сайт, плеер заиграл, ты переходишь на другую страницу - плеер не прекращает работать. Пытался использовать автоматически - но из-за множества используемых скриптов (слайдер, инстаграмм и галлерея) происходит конфликт скриптов.
Ответить | Ответить с цитатой | Цитировать
0 # 123 08.07.2014 19:41
Здравствуйте, может у кого нибудь есть Add FullAjax для Joomla 3? В данный момент сайт разработчика на реконструкции... если у кого то завалялось - поделитесь пожалуйста
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 09.07.2014 05:07
Добавил ссылку на скачивание последней версии в конец статьи.
Ответить | Ответить с цитатой | Цитировать
0 # 123 09.07.2014 11:07
Большое спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # Антон 13.05.2016 21:00
У меня стоит j 2.5.4 стоит. Ядро сильно покоцано, много всего ставилось и тестировалось. Сейчас устанавливаю расширение, - и при его включении сервер начинает отдавать 500, - какая-то существенная ошибка. С чем это может быть связано, на ваш взгляд?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 16.05.2016 05:32
Антон, это может быть связано с чем угодно. Вам нужно посмотреть логи ошибок на сервере, чтобы установить точную причину ошибки.
Ответить | Ответить с цитатой | Цитировать