Авторизация для Joomla-сайта во всплывающем окне (Кейс #2)

15.10.2013

Wedal

Кейсы Joomla

Тренды современного дизайна диктуют нам легкость, адаптивность и удобство использования каждого элемента сайта. Не знаю как вам, а мне кажется, что большая форма авторизации на сайте (да, как на 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 готовыми решениями. Также есть раздел, посвященный продвижению сайтов. Короче говоря, посмотрите.

Wedal

(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

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

Комментарии

slovoblud

15.10.2013, 11:26

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