В этой статье я расскажу, как добавить такую функцию к вашему сайту на Joomla.
Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).

Тренды современного дизайна диктуют нам легкость, адаптивность и удобство использования каждого элемента сайта. Не знаю как вам, а мне кажется, что большая форма авторизации на сайте (да, как на wedal.ru справа) давно уже не является необходимостью, а представляет собой скорее раздражающий фактор. Почему бы не заменить ее одной красивой кнопкой или ссылкой «Вход», при нажатии на которую появляется всплывающее окно с формой для ввода логина и пароля? Мне кажется, это смотрится очень лаконично. В этой статье я расскажу, как добавить такую функцию к вашему сайту на Joomla.

Данная задача решается быстро и просто. Ниже я распишу ее по пунктам.

1) Подключение JQuery и Facebox.

Прежде всего, нам потребуется подключить к используемому шаблону Joomla JQuery и Facebox.

JQuery в вашем шаблоне может быть уже подключен. Если вы используете Joomla 3, то скорее всего подключен. Как узнать наверняка? Откройте главную страницу сайта, кликните по ней правой кнопкой мыши и выберите код «Просмотр исходного кода»(в разных браузерах этот пункт называется по-разному, но смысл такой же). В открывшимся окне html-кода страницы нажмите «ctrl + F» и введите в строке поиска «jquery». Если текст будет найдет, то библиотека JQuery подключена. Если же нет, значит нет и нужно ее подключить.

Скрипт Facebox нужно скачать по этой ссылке. После скачивания извлеките архив. Из него нам понадобится только папка src. Переименуйте ее в facebox и закачайте на сайт в папку templates/ваш_шаблон/

Подключить JQuery и Facebox можно добавив в файле index.php вашего шаблона между тегами <head></head> следующий код:

Если  JQuery уже подключен:

<script src="/templates/<?php echo $this->template ?>/facebox/facebox.js"></script>
<link href="/templates/<?php echo $this->template ?>/facebox/facebox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	jQuery(document).ready(function(jQuery) {
	  jQuery('a[rel*=facebox]').facebox({
	  })
	})
</script>

Если JQuery еще не подключен:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script src="/templates/<?php echo $this->template ?>/facebox/facebox.js"></script>
<link href="/templates/<?php echo $this->template ?>/facebox/facebox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	jQuery(document).ready(function(jQuery) {
	  jQuery('a[rel*=facebox]').facebox({
	  })
	})
</script>

После подключения в исходном коде страницы появятся ссылки, которые ведут к файлам. При клике по ним должен открываться код файлов. Так можно проверить, что все подключено правильно.

Еще одна деталь – в файле templates/ваш_шаблон/facebox/facebox.js в строках 88, 89, 96 нужно указать правильные пути к картинкам. Это будет:

/templates/ваш_шаблон/facebox/loading.gif и остальные по аналогии.

2) Создание позиции для модуля.

Теперь, когда скрипт подключен, нам нужно создать специальную скрытую позицию для модуля авторизации. Для этого открываем файл templates/ваш_шаблон/index.php, находим в нем закрывающий тег </body> и перед ним добавляем:

<div id="login-modal" style="display:none;">
	<jdoc:include type="modules" name="login" style="none" />
</div>

Этим кодом мы создали позицию с именем login, которую теперь можем использовать в админке. При чем, эта позиция скрыта по умолчанию и все, что в ней опубликовано, будет в коде страницы, но не будет на ней видно. Так нужно.

3) Создание модуля.

После того, как позиция создана, нужно создать сам модуль. Для этого идем в менеджер модулей, добавляем новый модуль типа Авторизация(login), либо, если он уже создан, редактируем его, изменяя позицию на login. В списке позиций таковой не будет. Нужно просто записать ее вручную. Модуль нужно опубликовать.

4) Создание кнопки/ссылки.

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

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

4.1) Добавить в templates/ваш_шаблон/index.php, сразу после открывающего тега <body>:

<a id="login-button" href="#login-modal" rel="facebox">Вход</a>

4.2) В файле templates/ваш_шаблон/facebox/facebox.css добавить в конец:

#login-button{
    background: none repeat scroll 0 0 #0088CC;
    border-radius: 0 0 5px 5px;
    color: #FFFFFF;
    display: block;
    font-size: 14pt;
    height: 30px;
    left: 45%;
    line-height: 20pt;
    position: absolute;
    text-align: center;
    top: 0;
    width: 10%;
}

Вот и все. Если вы нигде не ошиблись, то справа экрана появится вот такая кнопка, открывающая всплывающее окно:

joomla modal login

Напоследок добавлю, что таким способом можно выводить не только модуль авторизации. Вообще любой модуль, который будет помещен в позицию login. Можно придумать много интересных решений.

----------------------------------------

Если вам интересна данная тема, а также Joomla и Virtuemart в общем, то советую заглянуть на сайт http://site-on.net. Этот сайт приятно удивил. Я даже задержался и прочитал несколько статей автора. Удивительно, но почерпнул для себя кое-что новое. Есть статьи по Joomla и Virtuemart 2 c готовыми решениями. Также есть раздел, посвященный продвижению сайтов. Короче говоря, посмотрите.

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

4.4615384615385 1 1 1 1 1 4.46

Комментарии  

+1 # Всплывающее окно не активно.Masnerin 11.11.2014 13:25
Привет Wedal! Делал всё по инструкции. Ссылку разместил в HTML-модуле. Всплывающее окно открывается, но затемнённым как и вся страница. При клике в любом месте, уходит. Где может быть ошибка? Спасибо!
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Всплывающее окно не активно.Wedal 12.11.2014 03:09
Masnerin, скорее всего какой-то конфликт с CSS шаблона. Так не сказать. Нужно смотреть. Покажите живой пример.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Всплывающее окно не активно.Masnerin 12.11.2014 19:35
Вот сайт:
http://www.interart.masnerin.com/index.php/ru/
Ссылка на "вход/регистрацию" в правом верхнем углу.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Всплывающее окно не активно.Wedal 13.11.2014 03:52
Masnerin, в файле:
/templates/ot_sexyqueen/facebox/facebox.css
исправьте:
Код:
#facebox {
left: 0;
position: absolute;
text-align: left;
top: 0;
z-index: 100;
}

на:
Код:
#facebox {
left: 0;
position: absolute;
text-align: left;
top: 0;
z-index: 65560;
}
Ответить | Ответить с цитатой | Цитировать
0 # RE: Всплывающее окно не активно.Masnerin 13.11.2014 17:21
Спасибо большое! Заработало!!!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).falmael 25.02.2014 13:11
получилось сделать форму во всплывающем окне
теперь другой вопрос, а как сделать так чтобы модуль был виден авторизованному пользователю?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).Wedal 27.02.2014 02:44
falmael, сам модуль можно настроить с помощью уровней доступа. Эта опция есть в настройках модуля. А вот ссылка "Вход" - это уже другой вопрос. Проще всего создать под нее еще один модуль простого HTML и настроить для него аналогичный уровень доступа. Подробнее про контроль доступа можно почитать здесь: http://wedal.ru/uroki-joomla/joomla-1-6-chast-4-acl.html
Ответить | Ответить с цитатой | Цитировать
0 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).hels 19.05.2014 03:40
Отличная статья! Но возник вопрос как например вместо слова Вход вывести например: Привет "имя пользователя"! я пытался, но ничего не вышло, вот что я писал в index.php в head: Код:<?php if($user->id!=0){ <div><ins><a href="#login-modal" rel="facebox" class="linkvhoda">Вход в интернет-магазин</a></ins><div>} endif; ?>но кроме белого экрана я ничего не увидел..
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).Wedal 20.05.2014 02:44
hels, про белый экран можно почитать здесь: http://wedal.ru/uroki-joomla/joomla-faq.html
Это ошибка PHP. Направление мыслей у вас верное, но проверка на авторизованного пользователя выполняется немного не так. Вот правильный код:
Код:
$user = JFactory::getUser();
if (!$user->guest) {
echo 'Привет, ' . $user->username;
}
Ответить | Ответить с цитатой | Цитировать
0 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).hels 20.05.2014 12:30
Цитирую Wedal:
hels, про белый экран можно почитать здесь: http://wedal.ru/uroki-joomla/joomla-faq.html
Это ошибка PHP. Направление мыслей у вас верное, но проверка на авторизованного пользователя выполняется немного не так. Вот правильный код:
Код:
$user = JFactory::getUser();
if (!$user->guest) {
echo 'Привет, ' . $user->username;
}

Спасибо, но уже сделал по своему, вот можно глянуть на сайте fetra.com.ua (там ссылка в хедере, я просто накладываю сверху через z-index при входе новую надпись с белым фоном, может как-то коряво но как смог.. очень интересно была бы реализация без такой химии, а через php (но я в нем не силен, я учил только С билдер..) я понимаю как должно быть по логике, что if ($user->guest) {
Вход в интернет магазин
}
ELSE { echo 'Привет, ' . $user->username; } но так не пашет.. и да в моем варианте коряво выглядит ссылка в IE(одни проблемы с ним..)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).Wedal 21.05.2014 02:57
hels, все правильно написали в этот раз. Почему не работает? Включите отображение ошибок PHP и увидите, где ошиблись. Скорее всего где-то в синтаксисе. В логике ошибок нет.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).falmael 25.02.2014 12:53
добрый день!
Все сделала, как вы сказали, но форма авторизации не открывается.
В чем может быть проблема?

http://iti.yostudio.ru
Ответить | Ответить с цитатой | Цитировать
0 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).Wedal 24.02.2014 03:06
Ilchyk, дело в том, что всплывающее окно с условиями обслуживания вызывается тем же атрибутом, что и с авторизацией. Просто измените код:
Код: jQuery('a[rel*=facebox]').facebox({

на:
Код:
jQuery('a[rel*=facebox2]').facebox({

и ссылку:
Код:<a id="login-button" href="#login-modal" rel="facebox">Вход</a>
на:
Код:<a id="login-button" href="#login-modal" rel="facebox2">Вход</a>
Ответить | Ответить с цитатой | Цитировать
0 # конфликт кейса с корзинойIlchyk 22.02.2014 10:29
Привет! Недавно заметил что у меня этот кейс конфликтует с корзиной. Добавляем товар, заходим в корзину видим добавленный товар. Внизу кликаем по ссылке "Условия обслуживания" и открывается всплывающее окно с этими условиями. Но вместе с этим окном на заднем плане открывается еще одно вспл. окно авторизация. Писал jQuery.noConflict() не помогает. Когда убираю подключения jQuery с этим кейсом тогда корзина работает правильно. Если вставляю код первого варианта "jQuery уже подключен" то корзина вообще не работает.
Ответить | Ответить с цитатой | Цитировать
0 # Кейс 2Ilchyk 04.02.2014 11:13
Привет Wedal! Очень полезная статья. Поставил скрипт, все работает. Только ты забыл указать что в файле tempaleDetails.xml надо прописать в разделе files каталог facebox и в разделе position login.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Кейс 2Wedal 05.02.2014 03:42
Ilchyk, это необходимо только если вы собираетесь устанавливать этот шаблон где-то еще. Если в уже установленном, то не обязательно.
Ответить | Ответить с цитатой | Цитировать
0 # А обработка формы????Myaff 23.12.2013 06:32
вот таких статей миллион, на тему как сделать всплывающее окно (кстати, а чем вас предустановленный скрипт не устроил? зачем подключать еще?)
и ни в одной из подобных статей почему-то нет дальнейшей обработки формы, обработки ошибок в том же всплывающем окне... или может я чего-то не понимаю? напишите пожалуйста про это, полезнее будет, имхо
Ответить | Ответить с цитатой | Цитировать
+2 # Регистрация пользователя во всплывающем окнеInsider 13.12.2013 16:40
Добрый день! хотел бы спросить как можно сделать что бы при нажатии на ссылки,например Регистрация,модуль регистрации нового пользователя открывались в этом же окне,как это сделать?
Ответить | Ответить с цитатой | Цитировать
0 # Проблемы после авторизацииkanevlife 25.10.2013 12:09
До: http://uaimage.com/image/d07cc737
После : http://uaimage.com/image/267704a6
Ответить | Ответить с цитатой | Цитировать
0 # RE: Проблемы после авторизацииWedal 26.10.2013 02:19
kanevlife, пол секунды - это ерунда. Значит дело в другом. Что могу еще посоветовать? Попробуйте провести такой же эксперимент с чистой версией Joomla. Если будет работать быстро, значит вы что-то намудрили, если также, то нужно попробовать с реальным хостингом. Вообще, я не замечал, чтобы после авторизации сайт начинал работать сильно медленнее.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).promomean 24.10.2013 07:11
Тоже делаю сайты на joomla авторизацию для сайта во всплывающем окне еще делать не приходилось но возможно столкнусь с этим. Возьму статью на заметку.
Ответить | Ответить с цитатой | Цитировать
0 # Проблемы после авторизацииkanevlife 24.10.2013 13:36
Прошу заметить, что с этим я столкнулся лишь после того, как на сайте стал устанавливать права доступа. Вариантов авторизации протестировал n-е количество, включая предложенный автором статьи. Чтобы исключить любые ошибки, связанные со сторонними расширениями, я их просто удалил и оставил авторизацию "родную" Joomla 3. Оказалось, что результат тот же: - после авторизации скорость загрузки страниц падает в разы (сайт на локалке). Остается только вариант с установкой на хостинг.
С уважением Андрей.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Проблемы после авторизацииWedal 25.10.2013 03:15
kanevlife, включите в настройках Joomla отладку системы и сравните данные, которые она выдаст(внизу страницы) до и после авторизации.
Ответить | Ответить с цитатой | Цитировать
0 # Проблемы после авторизацииkanevlife 25.10.2013 12:04
Цитирую Wedal:
kanevlife, включите в настройках Joomla отладку системы и сравните данные, которые она выдаст(внизу страницы) до и после авторизации.

Спасибо за совет. Включил отладку. Так выглядят запросы к базе данных до авторизации: , а так после: . Если Вас не затруднит, то подскажите, пожалуйста, как удалить дубликаты запросов. Может где-то уже есть такой урок для чайников?
Буду благодарен.
С уважением Андрей.
Ответить | Ответить с цитатой | Цитировать
0 # Проблемы после авторизацииkanevlife 24.10.2013 04:40
Вопрос к знающим.
Сайт на Joomla 3. Пока тестируется на локалке. Проблема в том, что после авторизации пользователя, сайт заметно очень тормозит. Если не авторизоваться, то работает "на щелчок". Сторонние расширения авторизации отключены. На форуме Joomla говорят, что на реальном хостинге эта проблема исчезнет ввиду ряда причин, связанных с работой на локалке. Так ли это? Буду благодарен.
Андрей.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).slovoblud 15.10.2013 11:26
Нормуль статья. Сталкивался с подобной необходимостью сделать авторизацию во всплывающем окне, правда тогда решал ее с помощью одного из многочисленных модулей.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх