Надрукувати
Категорія: ЧаПи по Joomla
Перегляди: 8943524

Оцінка користувачів: 2 / 5

Активна зіркаАктивна зіркаНеактивна зіркаНеактивна зіркаНеактивна зірка
 
Увага! Стаття не актуальна, оскільки з'явився плагін AjaxModuleLoader. Лишаю статтю в освітніх цілях.

У-ха-ха! Ха! Я павук!Задача: Завантажувати певні модулі на сторінці лише після того, як сторінка вцілому завантажилась. Мати можливість перевантажувати певні модулі періодично (наприклад модуль з рахунком матчу).

Мати можливість використовувати як mootools, так і jquery.

Пояснення: Сайт переобтяжений модулями, через що сторінка вантажиться досить довго. Хочеться швидко завантажити основне, а різні додаткові модулі вантажити вже після завантаження сторінки.

Обмеження: Не буде праюцвати для деяких модулів, що самі по собі активно використовують javascript. Конфлікт помічений для модуля mod_jreviews_listings

Приклад з разовим завантаженням

Приклад з періодичним перевантаженням з вказанням інтервалу в 60 секунд

Вирішення.

  • Згенерувати на сайті http://ajaxload.info/ зображення для AJAX і розмісти його на вашому сайті у теці /images/ajax-loader.gif
  • Розташувати на вашому сайті файл templates/YOURTEMPLATE/mymodule.php із вмістом
  • Розмістити в потрібному місці на сайті (або врізати в статтю, або в текстовому модулі, або ж в index.html шаблона) код виду:
    • Для разового підвантаження модуля:
      <div rel="position-6" alt="xhtml" class="delayedmodule"><img src="/images/ajax-loader.gif"></div>
    • Для постійного перевантаження модуля з інтервалом за замовчуванням (5 секунд):
      <div rel="position-6" alt="xhtml" class="delayedmodule periodical"><img src="/images/ajax-loader.gif"></div>
    • Для постійного перевантаження шаблону з інтервалом, вказаним у коді (10 секунд):
      <div rel="position-6" alt="xhtml" class="delayedmodule periodical" id="10000"><img src="/images/ajax-loader.gif"></div>
      • Де в атрибуті rel вказано позицію з модулями, що буде вантажитись, а в атрибуті alt стиль модуля. Докладніше про стилі http://docs.joomla.org/What_is_module_chrome %3F. Атрибут alt не обов'язковий, можна не вказувати.
      • Наявність класу periodical каже скрипту, що модуль треба періодично перевантажувати.
      • Атрибуту id вказує інтервал перевантаження в мілісекундах (1000 мс = 1 сек)
  • Додати в index.php вашого шаблона такий код:
  • Якщо ви користуєтесь  jQuery замість Mootools, то змініть рядок в коді вище з $usejQuery = false; на $usejQuery = true;

Пояснення.

Нам знадобиться посилання, яке буде завантажувати лише певну позицію модулів, при чому не HTML сторінку з тегами <head>, <body>, а лише сам модуль. В Joomla є можливість задавати власний шаблон виводу інформації, про що розповідає ooffick на http://forum.joomla.org/viewtopic.php?p=1436858#p1436858 . Отже, спочатку створимо в нашому шаблоні файл, відповідальнй за виведення модуля, давши йому ім'я mymodule.php. Файл має бути розташовано тут: templates/YOURTEMPLATE/mymodule.php . Звернемось до нього через посилання  http://your-domain.com/index.php?tmpl=mymodule , або в цьому конкретному випадку https://gruz.ml/index.php?tmpl=mymodule .

Вміст файла templates/YOURTEMPLATE/mymodule.php такий:

З чого видно, що у посиланні ми можемо передавати ще два параметри: moduleposition (позиція модуля) і modulestyle (стиль модуля, або в термінології Joomla module chrome).

Отже, перейшовши по посиланню https://gruz.ml/index.php?tmpl=mymodule ми бачимо модуль з позиції за замовчуванням position-6 зі стилем відображення xhtml. Код сторінки приблизно такий:

Як бачимо, це не повна HTML сторінка, а саме фрагмент HTML коду суто з самим модулем. Перейшовши за посиланням https://gruz.ml/index.php?tmpl=mymodule& ;moduleposition=top&modulestyle= ми побачимо модулі з позиції top із відсутнім стилем виведення, що мінімізує виведення зайвого HTML коду, лише вміст модуля. Докладінше про стилі модулів: http://docs.joomla.org/What_is_module_chrome %3F

Таке посилання нам потрбіне для підвантаження AJAXom модулів без зайвого HTML коду.

Далі ми повинні потурбуватися про місце, де буде виводитись модуль. Для цього нам знадобиться зображення, що сигналізуватиме про завантаження. Візьмемо його, наприкад, на http://ajaxload.info/ і покладемо у /images/ajax-loader.gif нашого сайту. Ось воно:

Тепер розмістимо такий код у тому місці, де хочемо вивісити модуль:

<div rel="position-6" alt="xhtml" class="delayedmodule"><img src="/images/ajax-loader.gif"></div>

Як бачимо, у атрибуті rel ми зберігаємо позицію модуля чи модулів, а у атрибуті alt стиль відображення модуля.

Ну і власне AJAX частина, яку додаємо в index.php шаблона Joomla одразу після

defined( '_JEXEC' ) or die( 'Restricted access' );

Такий код для Joomla:

Якщо ви помітили помилку, то виділіть фрагмент тексту та натисніть Ctrl+Enter
FaLang translation system by Faboba