Вывод формы логина в Joomla! 1.5 в красивом всплывающем окне

Буквально недавно, один мой знакомы в аське спросил у меня, не знаю ли я какого-нибудь «прикольного» модуля логина для Joomla! 1.5. В принципе, подобных модулей существует великое множество, а если вы нормально разбираетесь в CSS и умеете немного рисовать, то можете красиво оформить и стандартный модуль логина. Однако, зачастую модуль логина занимает много полезного пространства на сайте и отвлекает внимание пользователей. Часто многие прячут его за ссылкой регистрации. Мне лично уже несколько раз приходилось прятать по просьбе клиента модуль логина в слайдер. Одним из решений красивой реализации логина в Joomla! 1.5 является использование всплывающего модального окна, которое можно реализовать на базе уже имеющихся функций ядра Joomla! в сочетании с библиотекой Mootools.

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

В этой статье мы будем использовать два простых способа переписывания разметки для модуля логина и страницы входа в com_user. Для начала скопируем родной шаблон в паку переписывания разметки активного шаблона сайта:

копируем:

/modules/mod_login/tmpl/default.php

в:

/templates/template_name/html/mod_login/default.php

и копируем:

/components/com_user/views/login/tmpl/default_login.php

в:

/templates/template_name/html/com_user/login/default_login.php


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

Сначала откройте файл переписывания разметки для модуля логина /html/mod_login/default.php и замените его содержимое на код из листинга ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!--?php // no direct access defined('_JEXEC') or die('Restricted access'); ?-->
 
<!--?php if ($type == 'logout') : ?-->
<form id="form-login" action="index.php" method="post" name="login"><!--?php if ($params-&gt;get('greeting')) : ?-->
<div></div>
<!--?php endif; ?-->
<div align="center"><input class="button" name="Submit" type="submit" value="&lt;?php echo JText::_( 'BUTTON_LOGOUT'); ?&gt;" /></div>
<input name="option" type="hidden" value="com_user" /> <input name="task" type="hidden" value="logout" /> <input name="return" type="hidden" value="&lt;?php echo $return; ?&gt;" />
 
</form><!--?php else : JHtml::_('behavior.modal', 'a.login'); ?--><script type="text/javascript">// <![CDATA[
window.addEvent('domready', function() {
    // Decorate the login windows to use a modal.
    $ES('a.login').each(function(a){
        a.setProperty('rel', '{size: {x: 175, y: 225}, ajaxOptions: {method: "get"}}');
        if (a.getProperty('href').contains('?')) {
            a.setProperty('href', a.getProperty('href')+'&tmpl=component');
        } else {
            a.setProperty('href', a.getProperty('href')+'?tmpl=component');
        }
    });
});
// ]]></script>
 
<!--?php echo JText::_('LOGIN') ?--> • <!--?php echo JText::_('REGISTER'); ?-->

Для зарегистрированного пользователя вид модуля не изменится. Но когда он не вошел в систему, то он увидит только две ссылки: «Войти» и «Зарегистрироваться». Для ссылки «Войти» был использован класс «login». Небольшой простой Javascript был использован для реализации возможности добавления модального всплывающего окна для любой ссылки с классом «login». Этот метод будет работать корректно в том случае, если Javascript включен, если нет, то нажав на ссылку, пользователь будет отправлен на обычную страницу входа.

Перед тем как мы начнем работу, модуль логниа будет иметь подобный вид.

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

Когда вы кликните на ссылку логина, то форма входа будет открыта в модальном всплывающем окне. Но вместе с формой будет выводится и описание, которое есть на странице логина компонента com_user. Это можно исправить.

Для начала откройте файл переписывания разметки /html/com_user/login/default_login.php. Там, где выводится описание логина (в районе 23 строки), «оберните» его в условие «if», для вывода только в модальном окне:

Переменная tmpl в Joomla предназначена для работы с шаблонами. Если мы используем значение !="component", то мы знаем, что в данном случае контент не будет отображаться в фронтенде (шаблоне) сайта.

Окончательный результат будет выглядеть следующим образом после того, как мы нажмем на ссылку «Войти»:

Вот, в принципе, и все, что нужно чтобы вывести форму логина в модальном всплывающем окне. Вы можете скачать файлы примеров из этой статьи с joomlacode.org: popup_login_box_layout_overrides.zip. Чтобы установить их, распакуйте файлы в /html/ папку используемого по умолчанию шаблона Joomla!. И не забудьте сделать резервные копии оригинальных файлов.