Буквально недавно, один мой знакомы в аське спросил у меня, не знаю ли я какого-нибудь «прикольного» модуля логина для 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->get('greeting')) : ?--> <div></div> <!--?php endif; ?--> <div align="center"><input class="button" name="Submit" type="submit" value="<?php echo JText::_( 'BUTTON_LOGOUT'); ?>" /></div> <input name="option" type="hidden" value="com_user" /> <input name="task" type="hidden" value="logout" /> <input name="return" type="hidden" value="<?php echo $return; ?>" /> </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!. И не забудьте сделать резервные копии оригинальных файлов.
Сергей
а если у кавото не будет отображаться? ну скажем из за браузера например?
Hiway
Метод основан на использовании стандартного модального окна Joomla!, которое работает во всех современных браузерах.
андрей
Здравствуйте! Модуль очень хорош! Установил в два шаблона. Но в одном отображение как-то совсем неправильное, т.е. совсем не просвечивается окно страницы, с которой был произведен старт модуля и при закрытии последнего отображается только фон ( ни контента, ни другого наполнения страницы не видно). В другом шаблоне отображение абсолютно правильное и в отличие от первого папку html в нем я создавал сам, т.к. ее просто там не было. Как мне исправить ситуацию с правильным отображением в первом шаблоне? Большое Вам спасибо! И если что не понятно написал, извините, я — новичок.
Илья
Делаю вроде все как написано, ничего сложного вроде :), но у меня не выходит модальное окошко, а просто перебрасывает на страницу входа и регистрации.
пс Красивый блог
Hiway
Илья, Я лично использовал этот метод. Проверял при создании поста. Внимательно посмотрите все пункты.
Илья
На локальной машинке сейчас попробовал, все вери гуд :). Видимо я что до намудрил в шаблоне или более того в стилях самого модуля и компоненты )). Учуся.. Спасибо!
Илья
Дело в самом шаблоне. Я его сам делал, с помощью плагина для DW JT3.1
Может мне в шаблон как-то нужно подключить это стандартное модальное окно?
hiway
Нет, вам стоит просто внимательно посмотреть код. Тем более, если работает нормально на локальной машине. А вы делали оверрайды для шаблона. Скачивали архив с файлами в конце статьи?
Илья
Архив скачивал, делал с ним.
На локальной я на другом шаблоне попробовал, работает. Потом попробовал на сервере, загрузил в другой шаблон, задефолтил его — работает. А на моем шаблон не работает 🙁
Илья
Проблема решена!
Все дело в том, что я делал шаблон с помощью расширения для DW — Joomla Template Kit 3.1, там в шаблоне примере подключалось меню на jquerry, вот видимо и законфликтовали. Меню все равно не использовал и удалил эти строчки, все заработало должным образом.
balck
замучался уже — форму входа выводит, но над ней пишет так:
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
Подскажите в чем могут быть грабли?
Артем
Ребята ,зачем мучаться, есть отличное расширение специально для этих целей. Много настроек. поставил себе на сайт. все круто. вот линк разработчика:
жду благодарностей)) шучу
Дмитрий
Подскажите, а как можно в модальном окне перейти например «забыли пароль»? сейчас оно закрывается и данные открываются просто на сайте, а надо чтобы всё происходило также внутри модального окна. Заранее спасибо!
Hiway
Можно. Принцип тот же. Своего рода ajax запрос делаем и место модуля подгружаем компонент через модульное окно.
Дмитрий
а как-то более предметно не могли бы объяснить?
Hiway
Дмитрий, мог бы. Но это тема отдельного поста. А сейчас нет времени просто. Чуть позже обязательно.
kolih
А у меня все получилось. Но вот окошечко где появляется форма очень маленькое и все туда не помещается! Как сделать окно определенных размеров подскажите?
hiway
Привет. Сделать это очень просто. Обратите внимание в файле mod_login/default.php после изменения кода есть строка a.setProperty(‘rel’, ‘{size: {x: 175, y: 225}, ajaxOptions: {method: «get»}}’); в статье в вставке кода ее номер 29. Так вот Значение x — это ширина, а y — высота всплывающего окна.
kolih
Не работает. Я вообще удалял эту строку, нет изменений!
vvv
Как сделать так чтобы при нажатии на ссылку, например, «ответ» или «подробнее», контент открывался в модальном окне.
kolih
спасибо большое! а интересно можно cb_login сделать всплывающим? а то обычный модуль входа не очень для Community Builder … за ранее благодарен!
Hiway
kolih. Вы писали: Не работает. Я вообще удалял эту строку, нет изменений!
Хочу сказать что таки работает. Проверял лично. Вот смотрите demoj.hiwayarts.com
Женька
мерси за хинт, как требовалось и отдельный плюс вашему шаблону приятно посмотреть
Local Master
Спасибо за такое, решение!!! Перепробовал много модулей, но это решение самое просто и действующее.
Но не работает например с форума Kunena 1.5.9, а ведь тоже хочется вывод такой-же сделать.
Не могли бы еще подсказать, как можно таким образом и регистрацию выводить? И например с форума Kunena 1.5.9, тоже хочется вывод такой-же сделать.
Иван
а у меня нет таких папок в папке с шаблоном:
/templates/template_name/html/mod_login/default.php
/templates/template_name/html/com_user/login/default_login.php
и файлов таких там нет. В папке /templates/template_name/html/ у меня всего два файла: index.html и modules.php. И куда тогда мне их копировать????
hiway
Читайте внимательно! Третий абзац данной статьи!
Ильмир
Спасибо большое! нашел то что нужно!
Ольга
Я вроде все сделала по инструкции, но у меня почему-то во всплывающем окошке открывается весь index.php со всеми флеш-баннерами, а не только модуль авторизации =(((
В чем может быть проблема?
jafff
Будет ли работать в компоненте которая требует входа, например компонент объявления, при нажатии добавить объявление, по умолчанию перекидывает на форму логин, пароль, и говорит войдите прежде чем… так вот будет ли всплывать данно емодальное окно?
Кирилл
Блин у меня что то не то получается вот посмотрите
в модальном окне высвечивается целая страница входа, помогите…
Shashel
Спасибо. Все работает. Только вопрос. Как убрать полосу прокрутки и уменьшить чёрную рамку вокруг окна?
Hiway
Строка 29 в файле html/mod_login/default.php
a.setProperty('rel', '{size: {x: 175, y: 225}, ajaxOptions: {method: "get"}}');x и y — это высота и ширина всплывающего окна.Dyadyavova
Скажите,пожалуйста,как поменять цвет текста (имя,пароль,запомнить меня),а то у меня белые буквы получаются на белом фоне?
Вика
Спасибо за статью, все очень понятно. Подскажите, как можно сделать отступ внутри всплывающего окна? а то весь текст и окошки логина и пароля плотно прилеплены к левой стороне. И еще вопрос, после закрытия этого окошка у меня пропадает картинка фона, приходится перегружать страницу, чтобы она снова появилась. Можно это как то исправить? Заранее спасибо.
RiCo
Спасибо большое
Lena
Все работает, спасибо! Только есть одна проблема — когда неправильно вводишь пароль он выбрасывает тебя на главную страницу все время, а должен оставаться на той же странице на которой находится пользователь. Помогите исправить это, пожалуйста!
Лена
А как сделать так, чтобы если введен неправильный пароль, меня не выбрасывало на главную страницу?
Hiway
Елена. Это делается в настройках самого модуля логина. Данный прием не действует ни на какие функции модуля. Здесь только переписывается разметка отображения.
Лена
Если я возвращаю стандартный модуль, все работает, а с этим модулем он игнорирует переадресацию…….
deestylov
А как сделать форму регистрации такого же вида???
Hiway
Елена, думаю, что могу упростить вам задачу. Вот здесь можно скачать прекрасный вариант модуля логина уже в виде готового модуля с таким же функционалом и без проблем редиректа. Только для скачивания нужно зарегистрироваться.
Rus
Все работает, только есть одна проблема:
Нажимаю вход — появляется модуль логина в отдельном окне. Если просто закрываю это отдельное окно без ввода логина, то в фоновом окне меняются параметры тэга body.
Было
body {
background-color: #cccccc;
}
стало
body {
background-attachment: scroll;
background-color: #ffffff;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
color: #222222;
font-family: «Helvetica Neue», «Arial», «Helvetica», sans-serif;
font-size: 75%;
}
Alejandro
Очень полезная и интересная статья! Однако, есть вопрос: когда я только начинал делать сайт локально, на денвере, всё сработало с первого раза. А сейчас его переношу в интернет, и там не работает. Уже 7 раз проверил всё, сделано буква в букву )) Но стандартные строчки ввода логина-пароля не исчезают. Может быть это вылезла несовместимость с чем-либо? Я постарался для тестов по максимуму отключить все джумловские модули, даже стандартные встроенные меню, но не помогает.
Rus
Мой вопрос, оказывается, был как у Вики. Я просто удалил /templates/system/css/template.css Вроде помогло.
Rus
Делаю то же самое, о чем писал jafff 3 августа, а именно вставил в контенте текст:
Осталось решить Ленину проблему с редиректом на главную страницу.
в этом случае не работает (не могу вызвать окно авторизации из контента).
Неужели нет решения?
Hiway
Alejandro, Проверьте, подгружается ли mootools. И не находится ли ваш сайт в поддомене. Просто там все завязано на одном AJAX запросе и ответе, запрос естественно написан с помощью mootools, так как Joomla! изначально содержит эту библиотеку.
Alejandro
Да, насчёт mootools я уже понял. И вообще с проблемой разобрался. Она была во мне )) В админке в определённую область страницы я пытался не главные строчки авторизации вывести, а те, что относятся к VirtueMart. Вывел нужную авторизацию-всё заработало. Прошу прощения за невнимательность )
Hiway
Rus, А какое отношение имеет текст «Добавить комментарий» в контенте к модулю логина???
Женя
Интересное решение. Но в опере 10.63 работает не коректно. Т. е. если страница не большая модальное окно закрывает не полностью.
Остаётся небольшой белый пробел. Напиши, пожалуйста, по этому поводу.
Rus
Нужно смотреть содержимое ссылки. Я не подумал, что здесь редактор сообщений понимает html, а функции редактирования сообщений нет.
Я имел ввиду текст:
<!— —>
Если и сейчас не отображается код, то прошу поправить мое сообщение.
Данную ссылку я располагаю в статье. По клику для неавторизованного пользователя появляется окно авторизации.
hiway
Rus. Так не работает это потому, что оно и не должно работать таким образом. Чтобы это работало вам нужно либо вставлять е просто текст а модуль авторизации с помощью плагина {mosloadposition}, либо же писать плагин для этого.
Объясняю почему не работает: потому что когда вы выводите именно модуль в таком виде, то у вас выводится не просто текст а и система знает что нужно подключить в хелпер компонент com_user, что будет использоваться AJAX (об этом говорит скрипт внутри шаблона модуля) и т.д.
А если вы просто вписали такую ссылку, то естественно вам выдастся просто комопнент логина без шаблона, а с использованием componenet.php в качестве разметки, который используется при вызове «tmpl=component» в URL
Rus
Похоже jComments не понимает {mosloadposition}, потому как в итоге отображается текст «{loadposition user1}» (joomla 1.5.22), а сам модуль не загружается.
Ну вроде бы можно было решить проблему загрузкой модуля сразу после содержимого комментариев, однако это тоже не решает проблему — после авторизации происходит редирект на главную страницу.
Михаил
Отличная статья! Ну раз уж вы так разбираетесь, может подскажете. Весь инет перерыл…
Как сделать проверку уникальности «имени пользователя» при регистрации (так же, как на «логине» и «емейле»). На форуме smf эта проверка работает. А как сделать в джумле?
(на типичный вопрос «на фига это нужно?» отвечаю: регистрация на форуме идет через сайт, и в итоге — у меня 10 Наташ и 15 Михаилов)
krontill
Все отлично работает…Но на одном сайте появился необычный баг. Если в поле логина или поле пароля ввести букву «ч» или в английской раскладке букву «x», то окно закрывается…
В чем может быть проблема? Может ли быть это связанно с версией мутулса?
krontill
Все нашел в чем была проблема:)
Если у кого то будет такая же проблема, то вот ту я описал что да как:
Павел
Все путем, попробовал и модуль описанный тут
Ребята ,зачем мучаться, есть отличное расширение специально для этих целей. Много настроек. поставил себе на сайт. все круто. вот линк разработчика:www.joomlaos.de/option,co…nfo/id,4030.html
жду благодарностей)) шучу
нормальный модуль, сделал перевод, убрал ссылку и все норм, рад)
Александр
Привет. Хорошая статья.
Но у меня возник вопрос, как сделать вместо ссылки кнопку?
Студент
Доброго дня! Спасибо за статью!
У меня такой вопрос по поводу {loadposition xxx}. На главной через модуль вывода новостей выводятся произвольные статьи сайта в три колонки. Дело в том, что в этих статьях на главной, в которых есть другие loadposition, отображается этот самый текст {loadposition rrr}, {loadposition mmm}. Как убрать этот текст?
Если вопрос обсуждался, направьте, где об этом почитать можно, два дня поисков на нем. и рус. яз. ни к чему пока не привели(((
Hiway
Собственно вариантов 2:
Сделать для модуля отдельные тексты. Поскольку в Joomla! 1.5 содержимое модулей не парсится плагинами.
Поставить плагин под названием Module everywhere , но тогда текст будет дублироваться поскольку плагин будет выводить его и в модуле.
Надежда
Добрый день, хотела уточнить, я так понимаю данный хак можно применить для любого модуля и компонента? Так как мне нужно вывести в модальном окне форму обратной связи стороннего компонента. Если подскажете как это можно организовать буду очень благодарна!
Hiway
для этого нужно использовать несколько иные решения. Самый простой способ — это опубликовать форму на отдельной странице, а потом использовать любой плагин с модальными окнами. Наиболее просто использовать JCEbox вместе с редактором JCE, думаю, для вас это будет самый оптимальный путь.
Надежда
Спасибо, я нашла другое решение, но и ваш совет возьму на заметку!
Павел
Добрый день!
У меня белая страница, после того как я установил…
Захожу в админку, а там ведите пароль, нажимаешь и белый лист.. чистый, чистый, белый белый…
Помогите, пожалуйста.
Евгениус
Не выходит в связке Joomla 1.5.22+Virtue Mart 1.7 начиная с 1-го пункта (првки — default.php), все выглядит по старому, mootools подгружается, но увы 🙁
иван
на Joomla 1.7 (шаблон JA Teline IV) не работает.
Ошибка: An error occurred.
Hiway
Этот метод нужно корректировать под 1.7, так как есть он будет работать только в 1.5