вход на сайт  Как сделать авторизацию пользователей во всплывающем окне на сайте 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>

vnimanie Внимание!!!

В файле 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. Изначально в списке позиций такой нет. Нужно просто прописать её вручную.

vhod popup 2

 Так же проверьте чтобы модуль был опубликован.


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

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

Теперь чтобы вызвать форму авторизации, нам необходимо использовать следующую ссылку:

 #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}

 

Если что то не получается, задавайте вопросы в комментариях.

На этом всё. Удачного вам сайто-строения!

Комментарии  

Мартын
# Мартын 23.01.2017 14:22
Окно сделать получилось но не знаю как убрать теперь эти кнопки с регистрацией, чтобы их не было видно после того как заходишь на сайт. Можете подсказать как это сделать?
Ответить | Ответить с цитатой | Цитировать
Super User
# Super User 23.01.2017 14:58
Это решается очень легко. Установите себе на сайт вот такую штуку: модуль менеджер (он русифицирован), а бесплатной версии вам хватит сполна.
Затем (после того как установите новый менеджер модулей) в настройках модуля с этими кнопками, зайдите на вкладку Отображение по условиям, где в пункте Пользователи выберите в группах пользователей Исключить и укажите те группы для которых этот модуль нужно скрыть (Registered, менеджер, супер пользователи и т.д. отмечаете группы которые присваиваются зарегистрированным пользователям).
Сохраняетесь - и больше кнопки для авторизированных показываться не будут.
Ответить | Ответить с цитатой | Цитировать
Мартын
# Мартын 23.01.2017 17:57
Примного благодарен - теперь работает как надо.
Ответить | Ответить с цитатой | Цитировать

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

Для того чтобы ваши комментарии появлялись мгновенно (без модерации), авторизируйтесь или пройдите регистрацию на сайте. Комментарии добавленные анонимно добавляются только после модерации, из-за большого количества спама.

Защитный код
Обновить