Редактирование страницы "оформить заказ" в VirtueMart

Страница "оформить заказ"

Переходим от простого к более сложному.

Что имеем?

  • попадаем на пустую страницу с тремя кнопками сверху -- "вход", "купить  без регистрации", "зарегистрироваться и купить"
  • ужасный дизайн блока "купить без регистрации", который покупатели чаще всего выбирают
  • отсутствие проверки без перезагрузки страницы "купить без регистрации" вводимых полей

Что хотим видеть?

  • после нажатия на кнопку "оформить заказ" переход сразу же на форму оформления заказа без регистрации
  • три кнопки сверху нам теперь не нужны, убираем одну из них в соответствии с тем, какой блок выбран. Если выбран "без регистрации" оставляем "вход" и "зарегистрироваться и купить". Если выбран "зарегистрироваться и купить" оставляем "вход" и "без регистрации".
  • измененный дизайн данного блока
  • проверка введенных данных на стороне пользователя (т.е. браузерная проверка на 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. Что от него требовалось:
  1. Проверка полей "Имя", "Телефон" и "Адрес" на заполненность
  2. Т. к. поле "email" не является обязательным, то просто проверить, если уж поле заполнялось, то email адрес является верным
  3. Если какое-то поле не заполнено, либо адрес почты не верен показать окошко с кнопкой "ок" и соответствующей надписью
  4. После нажатия "ок" направить пользователя в нужное поле
Я вставил скрипт после известных нам уже инпутов в файле 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 и передаем форму обработчику. Вот, собственно говоря, и все.