Вывод модуля «Login» во всплывающем окне.

Разработка шаблона модуля Разработка шаблона модуля «Login»: вывод формы регистрации в SqueezeBox (Joomla 1.6/Joomla 1.7/Joomla 2.5).

SqueezeBox — стандартный для Joomla тип модального окна, использующий в качестве основной библиотеки mootools.

Для подключения SqueezeBox в шаблоне используется конструкция:

JHTML::_('behavior.modal');

, это добавит в страницы следующий JS:

window.addEvent('domready', function() { SqueezeBox.initialize({}); SqueezeBox.assign($$('a.modal'), { parse: 'rel' }); }); 

В Joomla 1.6/1.7/2.5 есть возможность создания собственных альтернативных шаблонов компонентов/модулей, и возможность выбора их в настройках, ей и воспользуемся.

  1. В папке шаблона создаем папку templates/ваш_шаблон/html/mod_login и копируем в нее шаблон модуля mod_login (/modules/mod_login/tmpl/default.php).
  2. Если на сайте кроме нашего компактного варианта будет использоваться и полный вариант формы, то создаем копию данного шаблона, назвав ее lightbox.php (имя может быть любым, за исключением default.php), в итоге в папке должно быть два файла lightbox.php и default.php, для работы нам понадобиться lightbox.php.
  3. Далее работаем с файлом lightbox.php Добавляем в начало файла (сразу после defined('_JEXEC') or die; Jhtml::_('behavior.keepalive');) следующий код:
    JHTML::_('behavior.modal');
     JHTML::_('stylesheet', $filename = 'style.css', $path = 'templates/ваш_шаблон/html/mod_login/' , $attribs = array() );
  4.  Создаем в папке templates/ваш_шаблон/html/mod_login файл style.css (если вы планируете проводить оптимизацию сайта, то рекомендую все стили сразу прописывать в основном файле стилей используемого шаблона, в этом случае вторую строку добавлять не следует). Первая строка кода подключит SqueezeBox, вторая добавит ссылку на файл стилей данного шаблона.

  5. Шаблон модуля «Login» состоит из двух частей: первая отвечает за вывод формы выхода, выторая за вывод формы входа, нам потребуется только вторая, находится в районе 34 строки и начинается с кода:

    <form id="login-form" action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post"></form>
  6. Для вывода ссылки вывода SqueezeBox используется ссылка с указанием id стиля блока (так же указываются: класс modal и размер модального окна), в котором находится контент для вывода в модальном окне.
    <a class="modal" href="#login-form" rel="{size:{x:300,y:300}}">Форма входа</a>
  7. Заключаем всю форму входа в блок с id=«login-form».
  8. В итоге получаем следующую конструкцию:
    <a class="modal" href="#login-form" rel="{size:{x:300,y:300}}">Ссылка на html-элемент</a>
     <div id="login-form">
       <form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" >
       ...
       </form>
     </div>
  9. Дописываем в файле стилей:
    #login-form { display: none }
  10. Выбор шаблона производится в настройках модуля/компонента на спойлере Дополнительные параметры, параметр — Альтернативный макет.
13 comments