Вывод формы логина в 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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <?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> • <a href="<?php echo JRoute::_( 'index.php?option=com_user&task=register' ); ?>"> <?php echo JText::_('REGISTER'); ?></a>. </p> <?php endif; ?> |
Для зарегистрированного пользователя вид модуля не изменится. Но когда он не вошел в систему, то он увидит только две ссылки: «Войти» и «Зарегистрироваться». Для ссылки «Войти» был использован класс «login». Небольшой простой Javascript был использован для реализации возможности добавления модального всплывающего окна для любой ссылки с классом «login». Этот метод будет работать корректно в том случае, если Javascript включен, если нет, то нажав на ссылку, пользователь будет отправлен на обычную страницу входа.
Перед тем как мы начнем работу, модуль логниа будет иметь подобный вид.
После того, как мы сделали переписывание разметки, для не вошедшего пользователя модуль будет иметь подобный вид:
Когда вы кликните на ссылку логина, то форма входа будет открыта в модальном всплывающем окне. Но вместе с формой будет выводится и описание, которое есть на странице логина компонента com_user. Это можно исправить.
Для начала откройте файл переписывания разметки /html/com_user/login/default_login.php. Там, где выводится описание логина (в районе 23 строки), «оберните» его в условие «if», для вывода только в модальном окне:
1 2 3 4 5 6 7 8 9 | <?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", то мы знаем, что в данном случае контент не будет отображаться в фронтенде (шаблоне) сайта.
Окончательный результат будет выглядеть следующим образом после того, как мы нажмем на ссылку «Войти»:
Вот, в принципе, и все, что нужно чтобы вывести форму логина в модальном всплывающем окне. Вы можете скачать файлы примеров из этой статьи с joomlacode.org: popup_login_box_layout_overrides.zip. Чтобы установить их, распакуйте файлы в /html/ папку используемого по умолчанию шаблона Joomla!. И не забудьте сделать резервные копии оригинальных файлов.
P.S.
Никогда не думал, что ветеринарная клиника — это место в которое я буду захаживать. Но когда купил кота, мои мысли на этот счет поменялись.
Loading ...
а если у кавото не будет отображаться? ну скажем из за браузера например?
Метод основан на использовании стандартного модального окна Joomla!, которое работает во всех современных браузерах.
Делаю вроде все как написано, ничего сложного вроде
, но у меня не выходит модальное окошко, а просто перебрасывает на страницу входа и регистрации.
пс Красивый блог
Илья, Я лично использовал этот метод. Проверял при создании поста. Внимательно посмотрите все пункты.
На локальной машинке сейчас попробовал, все вери гуд
. Видимо я что до намудрил в шаблоне или более того в стилях самого модуля и компоненты )). Учуся... Спасибо!
Дело в самом шаблоне. Я его сам делал, с помощью плагина для DW JT3.1
Может мне в шаблон как-то нужно подключить это стандартное модальное окно?
Нет, вам стоит просто внимательно посмотреть код. Тем более, если работает нормально на локальной машине. А вы делали оверрайды для шаблона. Скачивали архив с файлами в конце статьи?
Архив скачивал, делал с ним.
На локальной я на другом шаблоне попробовал, работает. Потом попробовал на сервере, загрузил в другой шаблон, задефолтил его — работает. А на моем шаблон не работает
Проблема решена!
Все дело в том, что я делал шаблон с помощью расширения для DW — Joomla Template Kit 3.1, там в шаблоне примере подключалось меню на jquerry, вот видимо и законфликтовали. Меню все равно не использовал и удалил эти строчки, все заработало должным образом.
замучался уже — форму входа выводит, но над ней пишет так:
Warning: Memcache::addserver () expects parameter 2 to be long, string given in /home/balck667/domains/wortaki.com/public_html/libraries/joomla/cache/storage/memcache.php
стоит joomla 1.5.14 + joomfish 2.04 + cb 1.2.1
Подскажите в чем могут быть грабли?
Ребята ,зачем мучаться, есть отличное расширение специально для этих целей. Много настроек. поставил себе на сайт. все круто. вот линк разработчика:
жду благодарностей)) шучу
Подскажите, а как можно в модальном окне перейти например «забыли пароль»? сейчас оно закрывается и данные открываются просто на сайте, а надо чтобы всё происходило также внутри модального окна. Заранее спасибо!
Можно. Принцип тот же. Своего рода ajax запрос делаем и место модуля подгружаем компонент через модульное окно.
а как-то более предметно не могли бы объяснить?
Дмитрий, мог бы. Но это тема отдельного поста. А сейчас нет времени просто. Чуть позже обязательно.
А у меня все получилось. Но вот окошечко где появляется форма очень маленькое и все туда не помещается! Как сделать окно определенных размеров подскажите?
Привет. Сделать это очень просто. Обратите внимание в файле mod_login/default.php после изменения кода есть строка a.setProperty ('rel', '{size: {x: 175, y: 225}, ajaxOptions: {method: «get»}}'); в статье в вставке кода ее номер 29. Так вот Значение x — это ширина, а y — высота всплывающего окна.
Не работает. Я вообще удалял эту строку, нет изменений!
спасибо большое! а интересно можно cb_login сделать всплывающим? а то обычный модуль входа не очень для Community Builder ... за ранее благодарен!
kolih. Вы писали: Не работает. Я вообще удалял эту строку, нет изменений!
Хочу сказать что таки работает. Проверял лично. Вот смотрите demoj.hiwayarts.com