УрокДелаем popup логин на jquery.ui.dialog

В ядре Drupal 7 появились дополнительные js библиотеки, которые можно подключать по необходимости (по умолчанию они отключены). В частности, библиотка jquery.ui, которая в 6й версии Друпала была отдельным модулем. Теперь же достаточно вызвать функцию drupal_add_library() с нужными параметрами - и необходимые скрипты и стили будут подключены автоматически.

Итак, делаем красивый попап логин. Для начала в template.php подключаем скрипт jquery.ui.dialog, который будет отвечать за вывод блока во всплывающее окно. Подключение происходит на этапе препроцесса страницы:

function ИМЯТЕМЫ_preprocess_page(&$vars) {
  global $user;
  // Подключаем библиотеку только для анонимов
  if (!$user->uid) {
    drupal_add_library('system', 'ui.dialog');
    // Добавляем ссылку, при нажатии на которую будет показываться логин
    $vars['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login'))));
  }
}

Далее в page.tpl.php выводим эту ссылку:

<?php print $login_button; ?>

Далее просто перейдите в раздел блоков и выставьте блок с логином в любой удобный вам регион. Там он будет показываться для тех пользователей, у которых браузеры не поддерживают js.

Теперь создаём свой скрипт (назовём, например, theme.js) с таким кодом:

(function ($) {
 
  Drupal.behaviors.themeName= {
    attach:function (context, settings) {
 
      // Здесь указываем ID блока с логином.
      var $login_block = $('#block-user-login');
      if ($login_block.length > 0) {
 
        // Далее при загрузке страницы
        // блок переместится в попап, но не покажется.
        $login_block.dialog({
          autoOpen: false,
          title: Drupal.t('Login'),
          resizable: false,
          modal: true
        });
 
        // По клику на ссылку логина - показываем попап.
        $('.user-login', context).click(function() {
          $login_block.dialog('open');
          return false;
        });
 
      }
    }
  };
 
})(jQuery);

Подключаем js к теме. Далее раскрашиваем попап стилями - и красивая форма входа готова.

К форме можно прикрутить красивые визуальные эффекты, которые тоже входят в стандартную комплектацию Drupal 7. Давайте добавим эффекты при появлении и исчезновении всплывающего окна:

template.php

function ИМЯТЕМЫ_preprocess_page(&$vars) {
  global $user;
  if (!$user->uid) {
    drupal_add_library('system', 'ui.dialog');
    drupal_add_library('system', 'effects.explode');
    drupal_add_library('system', 'effects.slide');
    $vars['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login'))));
  }
}

theme.js:

(function ($) {
 
  Drupal.behaviors.themeName= {
    attach:function (context, settings) {
 
      // Здесь указываем ID блока с логином.
      var $login_block = $('#block-user-login');
      if ($login_block.length > 0) {
 
        // Далее при загрузке страницы
        // блок переместится в попап, но не покажется.
        $login_block.dialog({
          autoOpen: false,
          title: Drupal.t('Login'),
          resizable: false,
          modal: true,
 
          // Новые эффекты.
          show: 'slide',
          hide: 'explode'
        });
 
        // По клику на ссылку логина - показываем попап.
        $('.user-login', context).click(function() {
          $login_block.dialog('open');
          return false;
        });
 
      }
    }
  };
 
})(jQuery);

К тому же, jquery.ui позволяет его ещё и потаскать по всему сайту, если схватить за верхушку :) Пример работы вы можете посмотреть нажав на кнопку "Вход" справа вверху.

Spleshka
02.11.2011
52551

Так и должна выводиться ссылка и пести на страницу с юзером. Но если у вас будет работать скрипт - вместо перехода на /user откроется попап. И сбросьте кэш сайта на всякий случай.

04.11.2011 00:41

Гость написал:

Кэш, разумеется, сбрасывал.
Ладно, попробую еще раз и отпишусь

04.11.2011 01:27

Spleshka написал:

Как результаты?

06.11.2011 02:35

#10

Алексей написал:

Жень, большое вам спасибо за интересные посты. Многое уже в закладках :)

Теперь по теме поста. С блоками все понятно, а как по клику выцепить нужную страницу. К примеру, я установил модуль Contact.
В самом template.php достаточно поменять uri ссылки и класс.
В theme.js я изменил селектор (в моем случае, это id формы - #contact-site-form) и класс по клику на ссылку.

Модальное окно показывается только в том случае, если я уже нахожусь на странице контактов. В Аяксе я не силен, помогите, пожалуйста, подкорректировать код.

13.11.2011 15:04

#11

Spleshka написал:

Для вашего случая подойдёт функция load(), которая позволяет вытягивать контент со страницы по селектору. Пример:

// Создаём div внизу страницы
$('body').append('<div id = "contact-form"></div>');
 
//Загружаем в этот div форму с ID #contact-site-form со страницы /contact 
$('#contact-form').load(Drupal.settings.basePath + 'contact #contact-site-form);

Чтобы load() по селектору работал в Drupal 6 - ставьте модуль jquery update.

13.11.2011 15:57

#12

oleg написал:

Notice: Undefined variable: login_button в функции eval() (строка 1 в файле X:\home\dru7.loc\www\modules\php\php.module(74) : eval()'d code).
Здравствуйте!
вот такая вот ошибка вместо ссылки
Чтобы она могла значить ?
Спасибо!

02.12.2011 04:24

#13

pantey написал:

так тут же все написано...не определена переменная login_button в функции eval() (строка 1 в файле по адресу X:\home\dru7.loc\www\modules\php\php.module(74) : eval()'d code)....открывай файл, и смотри че не так...или код файла кидай сюда...

02.12.2011 09:01

#14

oleg написал:

02.12.2011 23:38

#15

oleg написал:

А как ее определить функцию эту ?
все делаю так как в уроке, но выводит ошибку
и вообще это возможно реализовать на Drupal 7.9 ?

04.12.2011 17:09

#16

Spleshka написал:

Хм. Вы вставляете кусок кода в блок, обрабатывая это форматом ввода php??

04.12.2011 18:23

#17

oleg написал:

Я вставляю в созданный блок и обрабатывая это форматом ввода php получаю ошибку.
также я получаю ошибку когда вставляю этот же кусок кода в page.tpl.php.
По идее должно выводиться кнопка входа.
а выводиться ошибка.

04.12.2011 21:16

#18

Spleshka написал:

Нет, если вы всё делали по уроку и в page.tpl.php выводили кнопку, то там она и выведется. В блок никакие переменные не передаются, т.к. вот этим кодом:

function ИМЯТЕМЫ_preprocess_page(&$vars) {
  global $user;
  // Подключаем библиотеку только для анонимов
  if (!$user->uid) {
    drupal_add_library('system', 'ui.dialog');
    // Добавляем ссылку, при нажатии на которую будет показываться логин
    $vars['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login'))));
  }
}

переменная добавляется только в шаблон page.tpl.php. В нём надо вывести её так:

<?php if (isset($login_button)): ?>
  <?php print $login_button; ?>
<?php endif; ?>

И никаких ошибок не будет. Я сам именно этим способом себе сделал логин на этом сайте.

04.12.2011 23:44

#19

Evseenkov написал:

Здравствуйте, огромное спасибо, всё получилось с первого раза.
А вот ещё хотелось бы, чтобы была кнопка "Выход", ну и при залогинивании на сайте появлялась надпись, типа "Вы зашли, как User-Name, мы просто счастливы вас видеть".
Чтобы пользователь мог видеть, что он не анонимус, вошёл а на сайт.

Понятно, что можно сделать соответствующий блок, но как это сделать красиво?

11.02.2012 12:51

#20

Spleshka написал:

Можно вот так написать в page.tpl.php:

<?php if ($user->uid): ?>
  Вы зашли как <?php print $user->name; ?>, мы просто счастливы вас видеть.
<?php endif;?>

Кнопка выйти делается ещё проще:

<?php if ($user->uid): ?>
  <?php print l('Выход', 'user/logout'); ?>
<?php endif; ?>

Оба кусочка кода можете положить в page.tpl.php в любое место.

11.02.2012 14:52

#21

Evseenkov написал:

Спасибо, получились, всё так просто и понятно! Даже я сразу въехал )))
Думаю, что и на вашем мегасуперсайте не помешало бы тоже какое-нибудь отображение зарегистрированного пользователя, ну, чтоб я видел, что зашёл, а то только кнопка "Вход" пропадает, и всё.

Пытаюсь изучать PHP, но, пока тяжко идёт. С таблицами и стилями было проще )))
Офигенно полезный сайт, огромное спасибо!
Хочу ещё задать вопрос по поиску...

11.02.2012 17:57

#22

Spleshka написал:

Спасибо, я подумаю про кнопку "Выход". Скорее всего в блок вынесу.

12.02.2012 22:09

#23

Evseenkov написал:

Ещё момент, может быть кому-то полезно, типа таких чайников, как я.
Скрипт поп-окна не будет подхватываться, если отключён стандартный блок "Вход на сайт"

11.02.2012 19:40

#24

Саша написал:

Спасибо очень полезный вариант исполнения. Я использовал ваш скрипт на 6 друпале и вот вернулся к нему на семерке. Но я хотел бы сказать вам про баг на вашем сайте: Если выключить яваскрипт в настройках браузера, то показывается блок входа на ваш сайт о обрезанном виде! (У меня браузер Мозила 10.0.1

17.02.2012 10:23

#25

Evseenkov написал:

Ещё раз спасибо за этот материал и ваще за весь сайт.

Хочу указать на один маленький косячок со стилями CSS, хотя может этот коммент больше относится к теме drupalace, но, думаю, в любом случае косячок затронет все темы, где применяется это окошко.

Дело в том, что классы, в к-рых задаётся ширина и др. фигня в этом popup окошке (в данном случае .ui-dialog), применяются и к остальным окошкам Друпала, я заметил, как открываются окна типа "добавить..." в панели управления Views. Смотрится с этим оформлением довольно забавно.

Думаю, надо бы прицепить дополнительный класс к конкретно этому окошку, и всё будет неплохо.

21.02.2012 21:23

#26

Spleshka написал:

Спасибо, записал в список доработок темы :)

22.02.2012 04:46

#27

Алексей написал:

У меня проблема. Всё работает. За исключением того, что когда я захожу на сайт и захожу на другие страницы, то drupal выдаёт ошибку:

Notice: Undefined variable: login_button в функции include() (строка 174 в файле Z:\home\..\www\sites\all\themes\..\templates\page.tpl.php).

То бишь строка print $login_button;

Как решить?

28.03.2012 19:27

#28

Алексей написал:

Короче!

Всё решил!

Хорошенько прочитал этот форум и вместо " print $login_button;" написал

" if ($user->uid):
print l('Выход', 'user/logout');
else: print $login_button;
endif;"

и - вуаля! - всё работает!

28.03.2012 19:59

#29

Алексей написал:

Хреноватенький код я придумал. Барахлит. Вобщем, перечитал внимательно я форум и впечатал ранее предложенные схемы.

Вопрос к автору данной классной штуки. Вобщем, всё хорошо, только при вызове этой формы куда-то пропадает курсор из поля ввода имени пользователя. Приходится мышкой заново его туда устанавливать для набора имени. Мелочь, а не приятно. Вобщем, как сделать, что бы он не пропадал?

28.03.2012 23:33

#30

Алексей написал:

Вобщем, приглашаю всех на страницу http://drupalace.ru/tehnologiya-sozdaniya-popup-okon для дальнейшего развития этой темы.

29.03.2012 23:49

#31

Serj написал:

В теме kanji не заработало сразу же т.к. $vars называется $variables
Т.е. строка подключения кнопки выглядит так:

  // Добавляем ссылку, при нажатии на которую будет показываться логин
    $variables['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login'))));

Я же так понимаю, нельзя определять вторую препроцесс функцию?
Все остальное получилось сразу же. Спасибо

21.04.2012 11:17

#32

Serj написал:

Замеченные минусы:

1)Если пользователь неверно вбил пароль, то его выкидывает на основную страницу сайта, что не удобно
2) не закрывается окно логина, если кликнуть вне области окна.

Это возможно исправить?

21.04.2012 21:31

#33

Spleshka написал:

да.
1) Пишем AJAX логин или используем модуль ajax_register.
2) Да, пишем обработчик, который по клику вне окна закрывает его.

22.04.2012 00:08

#34

Serj написал:

Плагины для меня писать пока слишком сложно.
Можете подсказать насчет модуля ajax_register?
Как его настроить вообще.
Я его установил, но на странице осталась стандартный блок логина, но при логине видно что Ajax отрабатывает. И после завершения он мне в блоке пишет:
Login successful. You are now being redirected. И все. даже не показывается мне что я залогинился.
В итоге при переходе н а любую ссылку. страница перересовывается и блок исчезает.

Попровал как альтернативу fancy_login но там не отображаются соц.кнопки для логина ( модуль ulogin),что не подходит, а исравить я сам не представляю как

22.04.2012 04:12

#35

Gusev написал:

Как подгрузить форму динамически через скрипт?

04.05.2012 10:57

#36

tyuirk написал:

Все делаю по инструкции, пишет ошибку что не может предопределить

07.06.2012 08:01

#37

Владимир_Р написал:

С Jquerty последних версий скрипт не работает, а он необходим (и новая версия и скрипт). Возможно как-то доработать?

26.10.2012 23:29

#38

Руслан написал:

Fatal error: Cannot redeclare corporate_preprocess_page() (previously declared in /home/name/public_html/avtobelor.ru/sites/all/themes/corporate/template.php:45) in /home/name/public_html/avtobelor.ru/sites/all/themes/corporate/template.php on line 145
выводит такую ошибку что значит?

30.10.2012 15:02

#39

sergeybelya написал:

Скорее всего в файле template.php дважды записана одна и та же функция corporate_preprocess_page()

30.10.2012 16:46

#40

Гость написал:

30.10.2012 17:10

#41

sergeybelya написал:

Если такая функция уже имеется, то пишите нужный код в ней, а повторное ее определение приводит к ошибке.

30.10.2012 17:32

#42

Константин написал:

Всем привет! Сделал все по инструкции из первого поста, но что-то не работает

04.11.2012 17:59

#43

Константин написал:

После ввода логина и пароля и нажатия на кнопку войти вываливается такое сообщение

Notice: Undefined variable: login_button в функции include() (строка 7 в файле /home/navros/k/sites/all/themes/bluemasters/page.tpl.php).

Что это?

04.11.2012 18:14

#44

Mash написал:

Подскажите как при проверке валидации (по этому примеру прикручена webform) сделать так, чтобы не выкидывало на страницу вебформы при неверных значениях? То есть чтобы форма оставалась в том же окне?

01.12.2012 13:03

#45

Spleshka написал:

Это вам к вебформе надо ajax прикручивать. Иначе - никак.

01.12.2012 15:17

#46

Yarri написал:

У меня не получается это сделать.
D7. Скрипт зарегистрирован через info.
page.tpl.php прописал.

А вот когда вставляю код в template.php, то сайт просто перестает открываться. Белая страница.
ИМЯТЕМЫ как положено заменил на имя своей темы с сохранением подчерка перед preprocess
Может быть глюк из-за длинного имени темы?
new_cons_woblik1_preprocess_page(&$vars) - вот такая у меня строка получается.

З.Ы. Увы. Сменил название темы, но белый лист все одно выпадает.
Закомментил все внутри функции - то же самое. Т.е. система ругается на само имя функции.
Вставлял в начале файла template после объявления <?php

10.12.2012 20:06

#47

Гость написал:

Все работает, но есть проблемка, хочу вывести кнопку вход в "main-menu". Через модуль menu attributes сделал, все работает, но после того как залогинился, кнопка вход не исчезает и если на нее нажать ведет на форму профиля. Хотелось бы чтобы появлялась вместо нее кнопка Выход когда пользователь зашел. Пробую сейчас просто жестко поставить туда ссылку, прописав в page.tpl.php... как привязать к ссылке "user-login"? и как написать такое условие php? Не силен в php прошу помочь! Заранее спасибо!

05.01.2013 11:45

#48

Гость написал:

А все, решено:) можно еще вопрос, проблема с кодировкой. В page.tpl.php создал новый див с ссылкой. На русском пишу "Вход" между и , но на сайте выходят знаки вопроса. Менял кодировку на utf-8, но тогда сайт съезжает, можно создать свою переменную которая будет переводить формат и просто тут вывести ее через php?

05.01.2013 14:59

#49

bifrost написал:

Убрать ошибку Notice: Undefined variable: login_button в функции include() (строка ....
можно таким кодом:

<?php if (isset($login_button)): ?>
  <div><?php print $login_button; ?></div>
<?php endif; ?>

25.01.2013 17:42

#50

Дмитрий написал:

Добрый день!

А возможно сделать так, чтобы форма входа в модальном окне появлялась при входе на страницу /user из адресной строки, чтобы не делать ссылку входа на страницах сайта?

12.02.2013 11:16

#51

Дмитрий написал:

То есть, пользователь вводит в адресной строке Site/user или site/admin и видит модальное окно с формой входа, а после входа переходит на главную.

12.02.2013 11:46

#52

ERET1K написал:

Все работает! Очень классно, красиво! Но вылетает такая назойливая ошибка
Notice: Undefined variable: login_button в функции include()
чтоб предпринять?

13.09.2013 01:26

#53

Сергей написал:

Сделал вроде все как по уроку. Появляется окошко как надо. потом переходит на строницу входа пользователя (что вроде тоже так надо). Но потом окошко модальное окно пропадает, даже не удается ввести хоть какие данные. Где можно порыться?

07.01.2014 19:46

#54

goodwin написал:

Добрый день!
Прежде всего спасибо Вам за труды, Вы делаете интернет лучше :)
Есть вопросик. У меня все заработало, но... В заголовке окна вместо надписи "Вход на сайт" выводится слово "Имя" и я никак не могу его побороть. По идее должно быть все просто, но увы. Подскажите куда рыть, пожалуйста.

17.02.2014 11:58

#55

Иван написал:

Замените t('Login') на 'Вход на сайт'

10.03.2014 23:04

#56

Довран написал:

Не получилось, делал все как написана в уроке. Несколько раз. Тема skeleton.

21.04.2014 23:28

#57

Redik написал:

тож не получилось. вставляю в темплейт функции - интерфейс не грузится - белое окно... убираю - все нор.

07.10.2014 16:40

Комментировать

Последние комментарии

Можно ли привязать термины

5 лет 3 месяца назад
Классная сборка.

5 лет 4 месяца назад
Привет, а если первый вариант

5 лет 4 месяца назад
Не совсем понятно для чего

5 лет 5 месяцев назад
8 МБ очень мало, такие

5 лет 5 месяцев назад
Бля, похоже спамботы дыру

5 лет 5 месяцев назад
Добрый. Как менять местами и

5 лет 6 месяцев назад
Добрый. Как менять местами и

5 лет 6 месяцев назад
UPD. Строка добавляется в

5 лет 7 месяцев назад
Если в файл devel/devel

5 лет 7 месяцев назад

УрокДелаем popup логин на jquery.ui.dialog

Похожие материалы

Комментарии

Комментировать

Вопросы пользователей

Последние комментарии

Записи в блоге

Drupal development

Популярные уроки

Просмотры за день:

Просмотры за всё время:

Последнее из моего Твиттера

Последние обновления