Пример сайта, созданного на Joomla

пятница, 9 апреля 2010 г.

Регистрация в Joomla 1.5 во всплывающем окне

modal_login_window
Буквально недавно, один мой знакомы в аське спросил у меня, не знаю ли я какого-нибудь «прикольного» модуля логина для 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 и замените его содержимое на код из листинга ниже:

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
 
<?php if ($type == 'logout') : ?>
<form action="index.php" method="post" name="login" id="form-login">
<?php if ($params->get('greeting')) : ?>
    <div>
    <?php if ($params->get('name')) : {
        echo JText::sprintf( 'HINAME', $user->get('name') );
    } else : {
        echo JText::sprintf( 'HINAME', $user->get('username') );
    } endif; ?>
    </div>
<?php endif; ?>
    <div align="center">
        <input type="submit" name="Submit" class="button" value="<?php echo JText::_( 'BUTTON_LOGOUT'); ?>" />
    </div>
    <input type="hidden" name="option" value="com_user" />
    <input type="hidden" name="task" value="logout" />
    <input type="hidden" name="return" value="<?php echo $return; ?>" />
</form>
<?php else :
    JHtml::_('behavior.modal', 'a.login');
?>
<script type="text/javascript">
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>
    <p>
        <a href="<?php echo JRoute::_('index.php?option=com_user&view=login'); ?>"
class="login" title="<?php echo JText::_('LOGIN') ?>">
            <?php echo JText::_('LOGIN') ?></a>
        &bull;
        <a href="<?php echo JRoute::_( 'index.php?option=com_user&task=register' ); ?>">
                <?php echo JText::_('REGISTER'); ?></a>.
    </p>
<?php endif; ?>

Для зарегистрированного пользователя вид модуля не изменится. Но когда он не вошел в систему, то он увидит только две ссылки: «Войти» и «Зарегистрироваться». Для ссылки «Войти» был использован класс «login». Небольшой простой Javascript был использован для реализации возможности добавления модального всплывающего окна для любой ссылки с классом «login». Этот метод будет работать корректно в том случае, если Javascript включен, если нет, то нажав на ссылку, пользователь будет отправлен на обычную страницу входа.
Перед тем как мы начнем работу, модуль логниа будет иметь подобный вид.
layout_overrides_normal_login_module
После того, как мы сделали переписывание разметки, для не вошедшего пользователя модуль будет иметь подобный вид:
layout_overrides_login_module
Когда вы кликните на ссылку логина, то форма входа будет открыта в модальном всплывающем окне. Но вместе с формой будет выводится и описание, которое есть на странице логина компонента com_user. Это можно исправить.
Для начала откройте файл переписывания разметки /html/com_user/login/default_login.php. Там, где выводится описание логина (в районе 23 строки), «оберните» его в условие «if», для вывода только в модальном окне:

 
<?php if (JRequest::getVar('tmpl') != 'component') :?>
  <div>
   <?php echo $this->image; ?>
   <?php if ( $this->params->get( 'description_login' ) ) : ?>
    <?php echo $this->params->get( 'description_login_text' ); ?>
    <br /><br />
   <?php endif; ?>
  </div>
  <?php endif; ?>
 

Переменная tmpl в Joomla предназначена для работы с шаблонами. Если мы используем значение !="component", то мы знаем, что в данном случае контент не будет отображаться в фронтенде (шаблоне) сайта.
Окончательный результат будет выглядеть следующим образом после того, как мы нажмем на ссылку «Войти»:
layout_overrides_login_popup
Вот, в принципе, и все, что нужно чтобы вывести форму логина в модальном всплывающем окне. Вы можете скачать файлы примеров из этой статьи с joomlacode.org: popup_login_box_layout_overrides.zip. Чтобы установить их, распакуйте файлы в /html/ папку используемого по умолчанию шаблона Joomla!. И не забудьте сделать резервные копии оригинальных файлов.

Комментариев нет:

Отправить комментарий