Подсказки в форме регистрации...

[tim21701]

Решил реализовать подсказки в форме регистрации, ибо, совсем "не айс" - когда пользователь указал свои данные и увидел об ошибке только после нажатия кнопки "Вперёд".

Конечно, можно сделать validation мгновенным, но (ИМХО) и это сойдёт.

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

И так, если наш потенциальный клиент, ставит курсор в поле ввода - справа появляется подсказка к этому полю (эффект fade). Пример:

1). Необходимо обновить файл jquery-1.3.2.min.js. Для этого, качаем с офф-сайта последнюю версию скрипта (на сегодня это jquery-1.5.1.min.js).

Копируем его в папку catalog/view/javascript/jquery и в файле catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl меняем строку:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>

На:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.5.1.min.js"></script>

2). Далее, открываем файл catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl и дописываем (перед тегом </head>) этот код:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.poshytip.js"></script>

	<script type="text/javascript">
		$(function(){

			$('#tips').poshytip({
				className: 'tips',
				showOn: 'focus',
				alignTo: 'target',
				alignX: 'right',
				alignY: 'center',
				offsetX: 5
			});
		});
	</script>

3). Теперь, копируем нашу рамку (фон) для подсказки в папку catalog/view/theme/ВАША_ТЕМА/image/

4). Открываем файл catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и дописываем стили для подсказки:

.tips {
	z-index:1000;
	text-align:left;
	border:1px solid #c7bf93;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	padding:6px 8px;
	min-width:50px;
	max-width:300px;
	color:#000;
	background-color:#fff9c9;
}
.tips .tip-inner {
	font:12px/16px arial,helvetica,sans-serif;
}

.tips .tip-arrow-top {
	margin-top:-6px;
	margin-left:-5px; /* approx. half the width to center it */
	top:0;
	left:50%;
	width:9px;
	height:6px;
	background:url('../image/tips.gif') no-repeat;
}
.tips .tip-arrow-right {
	margin-top:-4px; /* approx. half the height to center it */
	margin-left:0;
	top:50%;
	left:100%;
	width:6px;
	height:9px;
	background:url('../image/tips.gif') no-repeat -9px 0;
}
.tips .tip-arrow-bottom {
	margin-top:0;
	margin-left:-5px; /* approx. half the width to center it */
	top:100%;
	left:50%;
	width:9px;
	height:6px;
	background:url('../image/tips.gif') no-repeat -18px 0;
}
.tips .tip-arrow-left {
	margin-top:-4px; /* approx. half the height to center it */
	margin-left:-6px;
	top:50%;
	left:0;
	width:6px;
	height:9px;
	background:url('../image/tips.gif') no-repeat -27px 0;
}

5). Открываем файл catalog/view/theme/ВАША_ТЕМА/template/account/create.tpl и в строке (у меня это 21):

<td><input type="text" name="firstname" value="<?php echo $firstname; ?>" />

Добавляем теги для нашей подсказки:

<td><input id="tips" size="30" title="Введите Ваше имя" type="text" name="firstname" value="<?php echo $firstname; ?>" />

Тоже самое, делаем со всеми остальными полями формы - где хотим, что бы появлялась подсказка.

(У свойства тега title="ВАШ ТЕКСТ" - пишем то, что хотим видеть).

Всё. Мойжно зайти на страницу регистрации и проверить.

=============================================================================================================

Теперь, самое главное - по поводу данного примера.

Сама подсказка прописана в самом шаблоне create.tpl, что не совсем корректно (а точнее совсем не правильно).

Пробовал (в 5-ом пунке) изменить свойства у тега title="_" на <?php echo $firstname; ?> (к примеру) то подсказка появляется пустая!

Вопрос: почему??? Получается, что скрипт, не может выполнить команды другого скрипта, или как? А это значит, что "мультиязычними" эти подсказки не сделать?

Подскажите, как быть?

tips.zip

[aliden64]

Если я правильно понял, нужно например добавить переменную в языковой файл /catalog/language/russian/account/create.php

$_['entry_firstname_tip'] = 'Введите Ваше имя';

а также в /catalog/controller/acount/create.php:

$this->data['entry_firstname_tip'] = $this->language->get('entry_firstname_tip');

Использовать так:

<td><input id="tips" size="30" title="<?php echo $entry_firstname_tip; ?>" type="text" name="firstname" value="<?php echo $firstname; ?>" />