Динамічне підвантаження модулів сторінки за допомогою AJAX : Joomla!

Динамічне підвантаження модулів сторінки за допомогою AJAX

Детальна інформація: Опубліковано: Середа, 01 червня 2011 10:45; Автор Gruz

Сучасні веб-сторінки можуть містити багато інформації, різного роду.

Часто, очікування завантаження усього сайту, його блоків, "затримує" дії відвідувача і відволікає від перегляду основного наповнення.

Було б дуже добре швидко завантажити основну інформацію, а вже потім, після завантаження сторінки, довантажити усі потрібні модулі.

Асинхронні методи що пропонує технологія AJAX допоможе нам вирішити цю проблему.

Будь який крутий AJAX-ефект починається з крутого малюнка який показує що на тлі триває робота — "Завантажувач AJAX ". Згенерувати красивий анімаційний малюнок можна, наприклад, на цьому сайті.

Це може бути, для прикладу, щось таке: .

Збережіть його як /images/ajax-loader.gif у каталозі шаблону.

Підготуємо місце для нашого модулю, що буде підвантажуватись.

У каталозі templates/YOURTEMPLATE/mymodule.php створіть файл з таким наповненням:

<?php
 
 // no direct access
 defined( '_JEXEC' ) or die( 'Restricted access' );
 
 $moduleposition = JRequest::getVar('moduleposition','user1');
 $modulestyle = JRequest::getVar('modulestyle','xhtml');
 
 ?>
 
 <jdoc:include type="modules" name="<?php echo $moduleposition?>" style="<?php echo $modulestyle?>"/>

Тут задаються параметри: moduleposition (позиція модулю — user1) і modulestyle (стиль модулю, або в термінології Joomla 1.5 — "module chrome").

А у файлі шаблону, в місці де повинен з’являтись модуль, вставте такий код:

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

Атрибут rel задає назву позиції для модулів, а alt вказує на його стиль (докладніше про стилі в Joomla!, англ.).

Тепер, у файл шаблону index.php відразу після

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

треба додати таке:

<div class="moduletable">
 <h3>Останні новини</h3>
 <ul class="latestnews">
 <li class="latestnews">
 <a href="/uk/about-joomla/25-faq/49-problemy-z-copyright-i-qpidvalomq-u-bezkoshtovnomu-shabloni-dlja-joomla-16-as-template-002024-.html" class="latestnews">
 Проблеми з copyright і &quot;підвалом&quot; у безкоштовному шаблоні для Joomla! 1.6 —  AS Template 002024 </a>

 </li>
 <li class="latestnews">
 <a href="/uk/about-joomla/29-joomla-extensions/22-notifyarticlesubmit-get-email-notification-when-an-article-is-added-or-changed.html" class="latestnews">
 NotifyArticleSubmit -  отримуйте сповіщення на e-mail коли хтось додає чи редагує статтю на сайті</a>
 </li>
 <li class="latestnews">
 <a href="/uk/about-joomla/29-joomla-extensions/9-joomla-install-many-extensions-as-one-package.html" class="latestnews">
 Install a bunch - встановлюємо купу розширень одним пакетом</a>

 </li>
 <li class="latestnews">
 <a href="/uk/about-joomla/34-virtuemart/6-virtuemart-ask-seller-captcha.html" class="latestnews">
 Додаємо CAPTCHA на сторінку &quot;Запитати в продавця&quot; (ask seller) virtuemart</a>
 </li>
 <li class="latestnews">
 <a href="/uk/about-joomla/34-virtuemart/47-jak-vymknuty-mootools-u-virtuemart.html" class="latestnews">

 Як вимкнути mootools у virtuemart?</a>
 </li>
</ul>        </div>

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

А завдяки AJAX він підвантажується лише після того як завантажиться уся сторінка.

Відвідувачі і пошукові системи будуть Вам вдячні.

Ще раз, коротко, як ми цього досягли:

Створили файл mymodule.php який створює на сторінці потрібну позицію ("назву позиції") для модулів.
В потрібному місці сторінки виводимо модуль ("закріплюємо" позицію у шаблоні)
Вносимо зміни у код сторінки для автоматичного підвантаження нашої позиції з використанням AJAX

Детальнішу інструкцію та приклади використання можна переглянути на веб-сторінці автора (Gruz).

Теги: AJAX модуль модулі