Как сделать авторизацию пользователей во всплывающем окне на сайте Joomla.
На сегодняшний день для джумлы уже существует множество модулей позволяющих реализовать вход на сайт в всплывающем окне. Но не всегда их применение даёт нужный результат - могут появляться конфликты и ошибки при обновлении движка Joomla, версии PHP или установке на сайт разных расширений.
А есть готовый лёгкий Java скрипт работающий на JQuery, при помощи которого можно легко организовать всплывающие окна на сайте как с модулем авторизации, так и с любыми другими штуками.
Авторизация в всплывающем окне
Вход на сайт требуется для зарегистрированных пользователей, поэтому у вас на сайте должна быть включена регистрация пользователей. Если вы ещё этого не сделали, тогда вот инструкция как включить регистрацию в Joomla. Я этот момент пропускаю и перехожу к реализации входа на сайт в всплывающем окне.
Подключение скрипта всплывающего окна
Первым делом нам нужно будет подключить к нашему шаблону сайта скрипт Facebox. Данный скрипт работает на JQuery, поэтому нужно проверить и при необходимости подключить библиотеку JQuery .
Библиотека JQuery может быть уже подключена к шаблону. Если ваш сайт работает на Joomla 3, то скорее всего она уже включена. В стандартном шаблоне Protostar она точно есть и используется в большинстве остальных шаблонов.
Как проверить. Открываем сайт и кликаем по странице сайта правой кнопкой мышки. В появившемся меню выбераем пункт «Исходный код страницы» (в зависимости от браузера может быть немного другое название, но смысл такой же). В открывшейся вкладке с html-кодом страницы, нажимаем на клавиатуре «Ctrl+F» и вводим в открывшейся поисковой строке «jquery». Если текст будет найден, значит библиотека JQuery подключена к шаблону. Если нет - то нужно будет её подключить. Чуть ниже мы её подключим вместе со скриптом всплывающего окна.
Скачайте скрипт всплывающего окна:
После скачивания распакуйте архив. Папку facebox закачайте на сайт по следующему пути:
www/templates/ваш-шаблон/
Теперь подключаем скрипт 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, то подключаем её вместе со скриптом Facebox вставив следующий код:
<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>
Внимание!!!
В файле facebox.js необходимо исправить в путях название шаблона, чтобы были правильные пути к используемым в скрипте изображениям.
Путь к файлу:
templates/ваш-шаблон/facebox/facebox.js
в строках 20, 21, 28 нужно указать правильные пути и заменить protostar на название вашего шаблона:
/templates/protostar/facebox/loading.gif
/templates/protostar/facebox/closelabel.png
изменить на:
/templates/ваш-шаблон/facebox/loading.gif
Создание позиции для модуля авторизации
После того как подключили скрипт, создаём в шаблоне новую специально скрытую позицию для нашего модуля авторизации. Для этого открываем файл templates/ваш-шаблон/index.php, находим в нем закрывающий тег </body> и перед ним добавляем:
<div id="login-modal" style="display:none;">
<jdoc:include type="modules" name="login" style="none" />
</div>
Этим кодом мы создали в шаблоне позицию с названием login для вывода модулей. Теперь мы можем указывать эту позицию в настройках модулей. Данная позиция скрыта по умолчанию и все модули опубликованные в этой позиции будут в коде страницы, но не будут показаны по умолчанию. Собственно это и есть всплывающая позиция, которая вызывается кликом на кнопку или ссылку.
Создание модуля авторизации
После того как мы создали позицию в шаблоне, нужно создать сам модуль для авторизации.
Для этого в админке открываем менеджер модулей и создаём новый модуль тип - Вход на сайт. Можно использовать модули авторизации из других расширений: SLogin, Kunena, Community Builder и др.
Если у вас уже создан модуль авторизации, можно просто отредактировать его, изменив в нём позицию.
Итак, основная настройка в модуле необходимая для нас - это позиция. Вписываем позицию login. Изначально в списке позиций такой нет. Нужно просто прописать её вручную.
Так же проверьте чтобы модуль был опубликован.
Создание кнопки/ссылки.
Последним шагом будет создание кнопки или ссылки, при клике по которой будет появляться всплывающее окно с формой авторизации на сайте.
Теперь чтобы вызвать форму авторизации, нам необходимо использовать следующую ссылку:
#login-modal
<a href="#login-modal" rel="facebox">Вход</a>
Как вариант можно создать модуль тип HTML и в нём прописать две кнопки: Войти и Регистрация:
Модуль сделать доступным только для Public и гостей, чтобы не показывать его для авторизированных на сайте пользователей.
Переключаем редактор в режим html и вставляем в одну строку код:
<a href="#login-modal" rel="facebox"><button class="btn-login"><i class="icon-enter"></i> Войти</button></a> <a href="/registration"><button class="btn-login"><i class="icon-checkmark-circle"></i> Регистрация</button></a>
Ссылка на страницу регистрации у вас может быть другой. Создайте пункт меню на страницу регистрации и замените алиас из кода на вашу страницу регистрации.
Теперь в шаблоне прописываем CSS для этих кнопок. В шаблонах Gantry, Helix и им подобных, CSS можно прописывать в настройках шаблона, чтобы не терять внесённые стили при обновлении шаблона.
Если в настройках шаблона нет пользовательских стилей, то например как в protostar добавляем стили в файл template.css, где в самом низу дописываем следующий код:
/* Кнопка вход */
.btn-login {
margin-top: 10px;
width: 120px;
padding: 4px;
background-color: #3E5D75;
box-shadow: 1px 1px 2px rgba(0,0,0,0.4), inset 1px 1px 0px rgba(255,255,255,0.5);
font-family: Georgia;
font-size: 14px;
color: #ffffff;
text-shadow: none;
border: 1px solid #000000;
border-radius: 3px;
}
.btn-login:hover {background-color: #007f00}
Если что то не получается, задавайте вопросы в комментариях.
На этом всё. Удачного вам сайто-строения!
Комментарии
Затем (после того как установите новый менеджер модулей) в настройках модуля с этими кнопками, зайдите на вкладку Отображение по условиям, где в пункте Пользователи выберите в группах пользователей Исключить и укажите те группы для которых этот модуль нужно скрыть (Registered, менеджер, супер пользователи и т.д. отмечаете группы которые присваиваются зарегистрированным пользователям).
Сохраняетесь - и больше кнопки для авторизированных показываться не будут.