02 октября 2009

Создание всплывающей формы входа

Привет!

Ничего сверх красиво тут сделано не будет, просто будет показано элегантное решение по использованию системы шаблонизации Joomla и штатного (в смысле из коробки Joomla) расширения под mootools SqueezeBox для создания модальных окон. Т.ё. это больше урок, чем готовое решение. Если нужно что-то красивое, то лучше сходить на JED и поискать там.

Приступим!

1) Скопируем шаблон модуля:
/modules/mod_login/tmpl/default.php
в /templates/название_шаблона/html/mod_login/default.php

2) Скопируем шаблон компонента:
/components/com_user/views/login/tmpl/default_login.php
в /templates/название_шаблона/html/com_user/login/default_login.php

3) Откроем /templates/название_шаблона/html/mod_login/default.php и заменим весь код на:
<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($type == 'logout') : ?>
<form action="index.php" method="post" name="login" id="form-login">
<?php if ($params->get('greeting')) : ?>
	<div>
	<?php if ($params->get('name')) : {
		echo JText::sprintf( 'HINAME', $user->get('name') );
	} else : {
		echo JText::sprintf( 'HINAME', $user->get('username') );
	} endif; ?>
	</div>
	<?php endif; ?>
	<div align="center">
		<input type="submit" name="Submit" class="button" value="<?php echo JText::_( 'BUTTON_LOGOUT'); ?>" />
	</div>
	<input type="hidden" name="option" value="com_user" />
	<input type="hidden" name="task" value="logout" />
	<input type="hidden" name="return" value="<?php echo $return; ?>" />
</form>
<?php else :
	JHTML::_('behavior.modal', 'a.login');
?>
<script type="text/javascript">
window.addEvent('domready', function() {
	// Decorate the login windows to use a modal.
	$ES('a.login').each(function(a){
		a.setProperty('rel', '{size: {x: 175, y: 225}, ajaxOptions: {method: "get"}}');
		if (a.getProperty('href').contains('?')) {
			a.setProperty('href', a.getProperty('href')+'&tmpl=component');
		} else {
			a.setProperty('href', a.getProperty('href')+'?tmpl=component');
		}
	});
});
</script>
<p>
	<a href="<?php echo JRoute::_('index.php?option=com_user&view=login'); ?>" class="login" title="<?php echo JText::_('LOGIN') ?>">
		<?php echo JText::_('LOGIN') ?></a>
	•
	<a href="<?php echo JRoute::_( 'index.php?option=com_user&task=register' ); ?>">
		<?php echo JText::_('REGISTER'); ?></a>.
</p>
<?php endif; ?>

После этого в модуле логина будет отображаться 2 ссылки: «Войти» и «Регистрация».


4) Откроем /templates/название_шаблона/html/com_user/login/default_login.php и заменим следующих блог кода:
<table width="100%" border="0" align="center" cellpadding="4" cellspacing="0" class="contentpane<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
<tr>
	<td colspan="2">
		<?php if ( $this->params->get( 'show_login_title' ) ) : ?>
		<div class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
			<?php echo $this->params->get( 'header_login' ); ?>
		</div>
		<?php endif; ?>
		<div>
			<?php echo $this->image; ?>
			<?php if ( $this->params->get( 'description_login' ) ) : ?>
				<?php echo $this->params->get( 'description_login_text' ); ?>
				<br /><br />
			<?php endif; ?>
		</div>
	</td>
</tr>

</table>

на:
<?php if (JRequest::getVar('tmpl') != 'component') :?>
<table width="100%" border="0" align="center" cellpadding="4" cellspacing="0" class="contentpane<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
<tr>
	<td colspan="2">
		<?php if ( $this->params->get( 'show_login_title' ) ) : ?>
		<div class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
			<?php echo $this->params->get( 'header_login' ); ?>
		</div>
		<?php endif; ?>
		<div>
			<?php echo $this->image; ?>
			<?php if ( $this->params->get( 'description_login' ) ) : ?>
				<?php echo $this->params->get( 'description_login_text' ); ?>
				<br /><br />
			<?php endif; ?>
		</div>
	</td>
</tr>

</table>
<?php endif; ?>

После этого в модальном окне не будет отображаться заголовок компонента, картинка при входе и описание.

В итоге получим:


Вот и всё! Да красоты нет, но и вреда тоже бо файлы самой Joomla мы не трогали. Это просто урок.
+2

Комментарии:5

avatar
Хороший урок.
Взял на заметку. Надо бы еще для 1.0 & Joostina сделать. Подумаю на досуге (если нет готовых решений)
avatar
да решения есть, только в JED их уже нет. но на жумлафоруме точно есть, от того же Адептуса
avatar
Если не найду — будет интересней самому написать и разобраться
avatar
Урок-то хороший только не много не доделанный! Надо что бы и регистрация проходила в этом окне. И еще где поправить размер этого окна?
avatar
С чего вы взяли что он не доделанный? Заголовок соответствует написанному.
a.setProperty('rel', '{size: {x: 175, y: 225}, ajaxOptions: {method: «get»}}');
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.