Меню Рубрики

Установка ajax на joomla

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

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

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

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

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

– перейти в настройки плагина и в поле «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 заказчикам. Думаю, многие из них захотят себе такую «примочку».

Читайте также:  Установка mac os на нетбук acer

источник

AJAX функциональность с помощью AJAX интерфейса com_ajax

Сразу хочу обратить ваше внимание на то, что этот материал относится к Joomla 3.2+, так как именно в этой версии появился удобный AJAX интерфейс в виде компонента com_ajax . Компонент является точкой входа для AJAX запросов в модули и плагины.

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

Итак, наш модуль выводит список последних зарегистрированных пользователей. Чтобы показать, как легко можно реализовать AJAX функциональность в модуле, в качестве примера сделаем следующее – при клике на пользователя будут отображаться заголовки последних трех материалов пользователя.

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

Подготавливаем макеты вывода

В макетах нам нужно предусмотреть вывод ID пользователя, чтобы затем передать его в AJAX запрос. Также нам нужно добавить контейнер для вывода списка материалови обернуть вывод пользователя в ссылку, чтобы привязаться к событию клика.

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

Добавляем AJAX запрос

Для составления AJAX запроса в модуле мы должны придерживаться определенных правил, которые диктует нам интерфейс компонента com_ajax . Следующие параметры являются обязательными при формировании запроса:

  • option=com_ajax – всегда используем компонент com_ajax ;
  • module=module_name – передаем имя модуля, в который мы делаем запрос. Важный момент – имя модуля должно быть без префикса mod_ ;
  • format=json – указываем формат возвращаемых данных: raw , json или debug .

Код AJAX запроса мы добавляем в конце точки входа модуля mod_latest_users.php :

Совет. Используйте в качестве возвращаемых данных формат json . В таком случае com_ajax использует класс JResponseJson, который очень удобен в плане обработки возвращенных данных. Подробнее об этом классе вы можете прочитать в материале JResponseJson – возвращаем данные в формате JSON.

Не забудьте добавить в языковые файлы константы:

Добавляем AJAX обработчик

Поддержка модулей в AJAX интерфейсе реализована через вызов метода в файле хелпера модуля, название которого должно заканчиваться на Ajax . По умолчанию префиксом метода является get , в итоге мы получаем getAjax() .

Мы можем вызвать метод с другим именем, задав имя метода в переменной method при формировании запроса, например method=myMethod . Таким образом, будет вызван метод myMethodAjax() . Это дает возможность реализовать в модуле несколько различных обработчиков AJAX запросов.

Вот как выглядит обработчик в нашем модуле:

В принципе, метод достаточно прост и не требует особых комментариев. Единственное, можно отметить, что ID пользователя мы получаем из запроса с помощью JInput.

На примере этого материала мы с вами убедились в том, что добавление AJAX в модуль Joomla является довольно простой задачей благодаря AJAX интерфейсу. Удачной вам разработки!

Код модуля

Исходный код модуля доступен на GitHub: для Joomla 2.5 и для Joomla 3.
Также вы можете скачать архив: для Joomla 2.5 и для Joomla 3.

источник

Использование tmpl=component в AJAX запросах для Joomla! на примере AJAX пагинации в блоге материалов

Для любого современного сайта функционал с использованием AJAX запросов не является чем-то новым. К тому же использование AJAX запросов в Joomla! значительно упрощает большое количество различных инструментов, которым можно посвятить отдельный рассказ. В этой статье хотелось бы поделиться мыслями на счет одного не совсем стандартного способа использования параметра tmpl=component при выполнении AJAX запросов и обновлении контентного блока сайта. А также обратить внимание на подводные камни, которые возникают при использовании данного метода.

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

В первую очередь стоит сформулировать задачу, чтобы понимать в каких именно случаях можно воспользоваться описанным ниже методом. Предположим, что нам нужно полностью обновить контентную область сайта. Основной блок без шапки, подвала сайта и т.д. В шаблоне сайта на Joomla! этот блок выводится как .

Также мы знаем запрос, с помощью которого можно получить новый html. Нам не нужно самим формировать какие-либо методы для выборки данных из базы и их подготовки к отображению на сайте. Это особенно удобно, если мы не являемся разработчиком компонента, для которого хотим добавить AJAX функционал. Главное условие, чтобы запрос отправлялся AJAX-ом и полученный html обновлялся в контентном блоке сайта без перезагрузки страницы.

Пример с Блогом материалов в Joomla!

Теперь приведем пример конкретной задачи, которая подходит под описанные выше условия. Возьмем самый обычный менеджер материалов Joomla!, который тоже является ее отдельным компонентом, и попробуем сделать на странице блога категории из обычного блока с пагинацией (блок со ссылками на страницы 1, 2, 3, . ), AJAX пагинацию. Этот пример не требует сложной установки/настройки дополнительных элементов сайта.

Поскольку Менеджер материалов уже есть в базовом пакете поставки Joomla!, нам нужно только добавить несколько тестовых статей через для какой либо категории. Далее создать пункт меню с типом Блог категории (можно и Список материалов категории, но дальше в примерах рассматривается случай с блогом), выбрать категорию, в которую добавили тестовые материалы и установить ее параметры так, чтобы на этой странице появилась пагинация.

Читайте также:  Установки для сжигания нефтесодержащих шламов

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

В результате мы хотим, чтобы при нажатии на ссылки в блоке пагинации отправлялся AJAX запрос и обновлялся контентный блок страницы со списком новых материалов и новым блоком пагинации. При этом мы знаем сам запрос, он присутствует в href ссылки в блоке пагинации. Компонент управления материалов в Joomla! умеет выводить как постраничную навигацию, так и список материалов на конкретной странице. Тут нам не нужно ничего придумывать или дописывать. Достаточно воспользоваться имеющейся ссылкой, которая и является нашим GET запросом. Этот запрос и будет отправляться при помощи AJAX. Например

Пример с AJAX пагинацией в блоге материалов тут в большей мере для иллюстрации принципа и не является оптимальным или универсальным решением.

О параметре tmpl=component

Использование этого параметра упоминается в официальной документации для Joomla! в контексте создания для компонента функционала печати страниц в модальном окне. Этот функционал нам сейчас никак не поможет, но на счет модального окна стоит рассмотреть подробнее. Особенность в том, что при запросе к какому-либо компоненту с использованием параметра tmpl=component Joomla! возвращает html, который содержит тег с подключением всех метатегов, css, js и т.д. А в теге содержится весь контент страницы без хедера, футера и других дополнительных элементов шаблона.

Такое поведение определяется наличием файла component.php в корневой директории текущего шаблона сайта. Официальная документация Joomla! говорит о том, что возможность создания такого файла в шаблоне появилась еще в Joomla! версии 1.5 и предназначена для формирования страниц удобных для печати материалов сайта.

Например, для Joomla! 3.6.4 в шаблоне protostar , который поставляется вместе с CMS, этот файл имеет следующий вид

Все это отлично работает, если мы хотим вывести какую-то страницу в модальном окне, например, для печати. Но при AJAX запросе нам нужно будет обновлять контент текущей страницы сайта, а повторное подключение всех скриптов может сломать логику их поведения. Конечно, мы уже знаем, где лежит тот самый component.php и могли бы изменить его как угодно, но это в свою очередь может навредить страницам печати (или каким-то другим, мы не можем знать заранее как этот функционал используют разработчики других приложений). Исходя из этого, будем решать поставленную задачу не меняя данный файл шаблона.

Пишем код AJAX пагинации материалов

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

Шаблон блога материалов Joomla!

В первую очередь нужно воспользоваться перекрытием вывода блога категории в текущем шаблоне Joomla!. Для этого достаточно скопировать php файлы каталога

Это перекроет вывод, как стандартного вида категории, так и блога. Если не хотите перекрывать стандартный вид категории, ограничьтесь при копировании php файлами, имя которых начинается на blog .

Если такой подход перекрытия вывода в шаблоне Joomla! вам еще не знаком, то подробнее о нем рассказывается в статье Перекрытие вывода компонентов и модулей в шаблоне Joomla!.

Теперь отображение страницы блога материалов из тестовой категории определяется в файле blog.php , что несложно проверить добавив в этот файл какой-то новый тег или css класс. После обновления страницы на сайте эти изменения должны быть видны.

Чтобы заменить контент текущей страницы новым html, который мы получим в результате работы AJAX запроса, обернем все содержимое файла blog.php в новый блок с . В этом же файле нужно подключить скрипт будущей AJAX пагинации, который будет оформлен как небольшой jQuery плагин, и css файл с дополнительными стилями (тут будут стили для блокировки страницы и отображения иконки загрузки на время выполнения AJAX запроса). В результате файл blog.php схематично будет иметь следующий вид

Стоит обратить внимание на то, что файл jQuery плагина и css файл стилей загружаются из папки media . Пути к данным файлам будут следующими

Соответственно при подключении файлов указывается только путь к папке компонента и название файла com_content/jquery.ajax.pagination.js , а третий параметр в функции подключения $relative = true .

jQuery плагин для AJAX пагинации

Основной скрипт, который отвечает за отправку AJAX запроса и обновление контентного блока на странице сайта — jquery.ajax.pagination.js . Он оформлен в виде jQuery плагина. Сам jQuery уже подключается в Joomla!, либо его можно подключить самостоятельно в шаблоне следующим php кодом: JHtml::_(‘jquery.framework’);

Читайте также:  Установка sap suse linux

Тема написания плагинов для jQuery выходит за рамки данной статьи. Ссылка на скачивание полного кода всех файлов есть в конце статьи. Рассмотрим только части данного плагина, которые касаются особенностей работы с запросом Joomla! и методики обновления контента страницы.

В этой функции на все ссылки блока пагинации навешивается обработчик события нажатия на данную ссылку. В первую очередь отменяется стандартное действие при нажатии на нее — это переход по URL указанном в href параметре. Далее скрипт извлекает href параметр ссылки и передает управление функции sendNextPageRequest .

В этой функции в первую очередь проверяется наличие параметра tmpl=component в полученной ссылке и, если такого параметра нет, то он добавляется к ней. Таким образом при запросе мы получим интересующий нас контент страницы без лишнего html кода. Далее вызывается функция отображения иконки при выполнении AJAX запроса. Сам AJAX запрос выполняется стандартными методами, присутствующими в библиотеке jQuery.

AJAX запрос проинициализирован следующим образом

url: nextPageUrl — определяет URL запроса, в котором уже добавлен параметр tmpl=component. При этом все параметры для перехода на конкретную страницу (страница 1, 2, 3 и т.д.) Joomla! добавила самостоятельно при формировании страницы блога материала с пагинацией.

type: ‘GET’ — параметр, определяющий тип запроса, в данном случае GET

dataType: ‘html’ — тип получаемых в результате запроса данных

На этой функции стоит остановиться отдельно. Она вызывается при успешном выполнении данного AJAX запроса и получении html в результате его работы. Этот html код записывается в параметр result и именно его мы хотим вставить вместо имеющегося содержимого страницы. Но как мы уже упоминали выше, если вставить этот html как есть, то на странице продублируются все метатеги, подключения js файлов и все остальное, что находится в теге текущего шаблона Joomla!. Чтобы избежать данной ситуации нам нужно выделить в данном коде только основной блок, который изначально был нами обернут в тег

Но здесь есть еще один подводный камень. Если мы просто преобразуем результирующий html в jQuery объект, то получим целый массив объектов, в котором будет сложно выполнить поиск нужного нам тега.

покажет что-то похожее на следующий скрин

Чтобы удобно было выполнить поиск нужного тега методами jQuery мы можем создать обертку и поместить результирующий html в нее.

И уже в получившемся объекте используя метод find находим нужный нам тег с контентом, помещая его при этом в отдельную переменную. Осталось только заменить содержимое этого же блока на текущей страницы, что просто делается с использованием jQuery метода replaceWith .

Эта функция вызывается при возникновении ошибки во время выполнения AJAX запроса. В ней мы только выводим в консоль сообщение об ошибке.

Данная функция вызывается при завершении AJAX запроса вне зависимости от того, возникли ли ошибки в процессе его выполнения. В ней мы только убираем иконку загрузки, которая отображалась во время работы AJAX запроса.

Инициализация плагина в шаблоне блога

После завершения работы над файлом jQuery плагина его нужно проинициализировать в файле blog.php. Там же нужно добавить тег, который будет отвечать за отображение иконки выполнения AJAX запроса.

Кроме этого блок пагинации также обернут тегом с , который используется при инициализации плагина AJAX пагинации.

После этого можно проверять работу пагинации в блоге материалов.

Выводы

В результате мы узнали, что для любого запроса в Joomla! можно добавить параметр tmpl=component , который позволяет получить только ту часть страницы, которую генерирует компонент, без лишних элементов шаблона. Также разобрались как можно адаптировать полученный html для обновления на текущей странице сайта, используя простые jQuery методы. А это значит, что в отдельных случаях не обязательно самостоятельно писать собственные контроллеры для получения данных и специально адаптировать их под конкретный шаблон, а можно воспользоваться уже имеющейся и универсальной возможностью движка Joomla!.

Еще раз обратим внимание на то, что пример с AJAX пагинацией блога материалов выступает в качестве иллюстрации работы описанного подхода. Реализовать AJAX пагинацию для компонента материалов Joomla! или для другого компонента можно используя разные подходы, а данный способ не претендует на звание оптимального.

Схожий принцип мы также использовали и в собственных проектах. Например, в модуле фильтрации товаров для JoomShopping, который также является иллюстрацией работы описанного подхода. Посмотреть на его работу можно на нашем демо-сайте.

Скачать архив со всеми файлами AJAX пагинации для блога материалов можно по ссылке. Для его установки достаточно просто скопировать файлы архива в корень папки с установленной Joomla!.

Внимание! Не используйте этот вариант AJAX пагинации на рабочих сайтах без предварительного тестирования и адаптации. Сделайте резервную копию сайта перед копирование файлов приложения.

Тестирование проводилось на Joomla! версии 3.6.4 и стандартном шаблоне — protostar , но при этом перекрыть файлы блога материалов можно в любом установленном на Joomla! шаблоне.

источник

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