Страница "оформить заказ"
Переходим от простого к более сложному.
Что имеем?
- попадаем на пустую страницу с тремя кнопками сверху -- "вход", "купить без регистрации", "зарегистрироваться и купить"
- ужасный дизайн блока "купить без регистрации", который покупатели чаще всего выбирают
- отсутствие проверки без перезагрузки страницы "купить без регистрации" вводимых полей
Что хотим видеть?
- после нажатия на кнопку "оформить заказ" переход сразу же на форму оформления заказа без регистрации
- три кнопки сверху нам теперь не нужны, убираем одну из них в соответствии с тем, какой блок выбран. Если выбран "без регистрации" оставляем "вход" и "зарегистрироваться и купить". Если выбран "зарегистрироваться и купить" оставляем "вход" и "без регистрации".
- измененный дизайн данного блока
- проверка введенных данных на стороне пользователя (т.е. браузерная проверка на js)
С чего следует начать?
Первый шаг -- это определиться, какие файлы отвечают за внешний вид данной страницы и выбранных блоков. Это:
/administrator/components/com_virtuemart/html/checkout.without_register_form.php -- покупка без регистрации и
/administrator/components/com_virtuemart/html/checkout.index.php -- страница, куда включены все три блока.
После нажатия на кнопку "оформить заказ" переходим сразу же на форму оформления заказа без регистрации:
Открываем для редактирования файл checkout.index.php. Находим код, который находится в самом низу страницы:
<div id="layer_login" style="display: none;">
<br />
<?php include(PAGEPATH. 'checkout.login_form.php'); ?>
</div>
<div id="layer_without_register" style="display: none;">
<br />
<div style="width: 100%; text-align:center;"><strong>(* = <?php echo $VM_LANG->_('CMN_REQUIRED') ?>)</strong></div>
<?php include(PAGEPATH. 'checkout.without_register_form.php'); ?>
</div>
<div id="layer_register" style="display: none;">
<br />
<?php include(PAGEPATH. 'checkout_register_form.php'); ?>
</div>
Три тега <div> отвечают за включения того или иного блока в страницу. Как видим, у всех трех стоит стиль display: none. Для отображения нужного нам блока в теге <div id="layer_without_register" style="display: none;"> меняем display: none на display:block. Сохраняем страницу, обновляем окно браузера, и видим отображение блока "без регистрации".
Вместо трех кнопок оставляем две:
Для этого необходимо править html код самих кнопок. Добавляем атрибут id к кнопкам "без регистрации" и "зарегистрироваться и купить" со значениями "noreg" и "reg" соответственно. Далее в событии onClick вписываем следующие события: "document.getElementById('reg').style.display='block'; document.getElementById('noreg').style.display='none';" для инпута noreg и "document.getElementById('reg').style.display='none'; document.getElementById('noreg').style.display='block';" для инпута reg.
Также задаем атрибуты style -- "float:left; display:none;" для noreg и "float:left; display:block" для reg. float:left необходим для корректного отображения кнопок. Код целиком выглядит так:
<input id="noreg" class="button" type="button" name="register" value="Купить без регистрации" style="float:left; display:none;" onclick="document.getElementById('layer_register').style.display='none'; document.getElementById('layer_login').style.display='none'; document.getElementById('layer_without_register').style.display='block'; document.getElementById('reg').style.display='block'; document.getElementById('noreg').style.display='none';" />
<input id="reg" class="button" type="button" name="register" value="Зарегестрироваться и купить" style="float:left; display:block" onclick="document.getElementById('layer_register').style.display='block'; document.getElementById('layer_without_register').style.display='none'; document.getElementById('layer_login').style.display='none'; document.getElementById('reg').style.display='none'; document.getElementById('noreg').style.display='block';" />
Обновляем страницу и наслаждаемся эффектом.
Изменяем дизайн блока "без регистрации"
Ну тут ничего сложного нет. Открываем файл checkout.without_register_form.php, находим форму, и меняем на свое усмотрение дизайн как душе угодно. Я не буду вдаваться в тонкости html и css, просто приведу код, который использовал сам. Он не оптимален, использует таблицы, поэтому сейчас я бы его переделал, но если кому-то интересно, можете посмотреть:
<form method="post" action="index.php" id="without_register_form" name="without_register_form" >
<?php if($error) echo '<fieldset><legend>Ошибка</legend>'.$error.'</fieldset>'; ?>
<fieldset>
<div style="margin-top:10px; margin-bottom:10px"><p align='center'>Покупка без регистрации.</p></div><br /><br />
<div style='margin-left:10px;'><p align='left'>Как Вас зовут?*:</p></div>
<table>
<tr>
<td>
<input id="name" name="checkout[name]" class="inputbox" /><br />
</td>
<td>
<div style='margin-left:20px;'>Напишите как к Вам<br />обращаться</div>
</td>
</tr>
</table>
<div style='margin-left:10px;'><p align='left'>Телефон*: </p></div>
<table>
<tr>
<td>
<input id="phone" name="checkout[phone]" class="inputbox" /><br />
</td>
<td>
<div style='margin-left:20px;'>Чтобы мы могли с<br />Вами связаться</div>
</td>
</tr>
</table>
<div style='margin-left:10px;'><p align='left'>E-mail: </p></div>
<table>
<tr>
<td>
<input id="email" name="checkout[email]" class="inputbox" /><br />
</td>
<td>
<div style='margin-left:20px;'>На указанный e-mail вышлем<br />все подробности о заказе</div>
</td>
</tr>
</table>
<div style='margin-left:10px;'><p align='left'>Адрес*: </p></div>
<table>
<tr>
<td>
<input id="address" name="checkout[address]" class="inputbox" /><br />
</td>
<td>
<div style='margin-left:20px;'>Адрес, куда доставить Ваш<br />заказ</div>
</td>
</tr>
</table>
<br />
<div style='margin-left:10px;'><p align='left'>Комментарий: </p></div>
<table>
<tr>
<td>
<textarea id="comment" name="checkout[comment]" class="inputbox"><?php if ( $checkout ) echo $checkout['comment']; ?></textarea><br />
</td>
<td>
<div style='margin-left:20px;'>Если у Вас есть<br />пожелания к заказу, то<br />напишите их здесь</div>
</td>
</tr>
</table>
<div style='margin-left:5px; margin-top:8px;'><p align='left'>Поля помеченные * обязательны для заполнения </p></div>
<br />
<div id="submit_wrap">
<input type="submit" value="Отправить" class="button" style="width:auto;text-align:center" />
</div>
<input type="hidden" name="option" value="com_virtuemart" />
<input type="hidden" name="page" value="checkout.without_register_form" />
</fieldset>
</form>
Получаем нормальную, непугающую с первого взгляда форму.
Проверка введенных данных на стороне пользователя
Для проверки я использовал обыкновенный JavaScript с выводом окошка alert. Что от него требовалось:
- Проверка полей "Имя", "Телефон" и "Адрес" на заполненность
- Т. к. поле "email" не является обязательным, то просто проверить, если уж поле заполнялось, то email адрес является верным
- Если какое-то поле не заполнено, либо адрес почты не верен показать окошко с кнопкой "ок" и соответствующей надписью
- После нажатия "ок" направить пользователя в нужное поле
Я вставил скрипт после известных нам уже инпутов в файле checkout.index.php.
Итак, сам скрипт выглядит следующим образом:
Итак, сам скрипт выглядит следующим образом:
<script type="text/javascript">
function validForm()
{
if(document.getElementById('name').value == '')
{
alert('Укажите, пожалуйста, Ваше имя.');
document.getElementById('iname').focus();
return false;
}
else if(document.getElementById('phone').value == '')
{
alert('Укажите, пожалуйста, Ваш телефон.');
document.getElementById('phone').focus();
return false;
}
else if((! (/^\w+[-_\.]*\w+@\w+-?\w+\.[a-z]{2,4}$/.test(document.getElementById('email').value))) && (document.getElementById('email').value != ''))
{
alert('Вы ввели неверный email.');
document.getElementById('email').focus();
return false;
}
else if(document.getElementById('address').value == '')
{
alert('Укажите, пожалуйста, Ваш адрес.');
document.getElementById('address').focus();
return false;
}
else
{
return true;
}
}
</script>
Дописываем к атрибутам тега <form ...> событие "onSubmit="return validForm()";" для передачи данных нашей функции.
Разбермся. Функцию для проверки введенных данных я назвал "validForm()". С помощью "if(document.getElementById('нужный_нам_id').value == '')" проверяем нужное нам поле на заполненность. Если условие срабатывает, то выкидываем окошко "alert('нужное нам сообщение в окне');", фокусируемся на незаполненном поле "document.getElementById('address').focus();", и возвращаем ложь"return false;".
Правильность введенного email проверяем с помощью регулярного выражения "/^\w+[-_\.]*\w+@\w+-?\w+\.[a-z]{2,4}$/" и функции test(), которой передаем значение поля email. Если ни одно из условий не срабатывает, то передаем истину "return true;" конструкцией else и передаем форму обработчику. Вот, собственно говоря, и все.