tim21701

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

Рекомендуемые сообщения

tim21701    497

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

Конечно, можно сделать 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    0

Если я правильно понял, нужно например добавить переменную в языковой файл /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; ?>" />

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу