Кастомизация Страницы Оформления заказа uCoz

Не читайте эту заметку, если...

не хотите:
• изменить форму "ваш заказ" магазина на uCoz
• встроить маску проверки правильности введенных данных, например, номере телефона, адрес или e-mail
• выполнить процесс оформления заказа в несколько шагов, например, выбор способа доставки - 1ый шаг, способа оплаты - 2ой, ввод данных - 3ий
• полностью настроить вид полей для ввода данных, а также способов оплаты и доставки
• контролировать количество нажатий на кнопку "Оформить заказ" через Яндекс.Метрика или другие аналитические платформы

Форма для ввода данных по заказу

Для начала, посмотрим, какой код выдаст нам оператор $ORDER_FIELDS$. Для этого открываем страницу оформления заказ /shop/checkout и смотрим исходный код. Этот оператор представляет из себя форму с id = "checkout-form". Вот его исходный код:

<form id="checkout-form" method="POST" action="" class="methods-list" onsubmit="return shopCheckOut();">
 <input type="hidden" name="mode" value="order" id="checkout-form-mode">
 <input type="hidden" name="ssid" id="checkout-form-ssid" value="$SSID$">
 <input type="hidden" name="payment_id" value="2" id="payment_id">
 <input type="hidden" name="delivery_id" value="0" id="delivery_id">
 <div>
 <span class="label">Контактный телефон:</span>
 <input type="text" class="fw text" name="fld1" id="order-fld-1" value="">
 </div>
</form>

Рассмотрим подробнее, за что отвечает каждый input формы. В таблице приведены все поля формы по значению атрибута name. Его вы можете увидеть в исходном коде формы.

* Узнать идентификатор способа оплаты или доставки можно в Панели управления сайтом в разделе "Способы оплаты, доставки, валюты и курсы" модуля Интернет Магазин.

Теперь мы можем смело сверстать эту форму в удобном для нас виде.

Для поля ввода номера телефона используем маску:

Контактный телефон:

Отметим, что маска будет работать и без кастомизации страницы оформления заказа, если вы не решитесь на этот шаг, тогда просто разместите код, представленный ниже после $ORDER_FIELDS$:

<script type="text/javascript" src="/js/jquery.maskedinput.js"></script> 
 <script type="text/javascript"> $(function() {
$("#order-fld-1").mask("(999) 999-9999");
});
 </script>

Убедитесь, что загрузили в папку /js/ своего сайта скрипт jquery.maskedinput.js. Скачать его можно здесь.

Способы доставки и оплаты

Так же, как и с формой заказа, смотрим исходный код способов доставки и способов оплаты: $DELIVERY_LIST$ и $PAYMENT_LIST$.

<table width="100%" border="0" celspacing="0" celpadding="2" id="payments-list" class="methods-list"><tbody>
  <tr valign="top">
  <th><input type="radio" name="payment" value="1" class="payment-item" id="pay-type-1" onclick="shEvOrd('payment',this)"></th>
  <td><label class="label" for="pay-type-1">Наличными при получении</label>Рассчитаться можно с курьером наличными при получении товара</td>
  </tr>

  <tr valign="top">
  <th><input type="radio" name="payment" value="2" class="payment-item" id="pay-type-2" onclick="shEvOrd('payment',this)" checked=""></th>

  <td><label class="label" for="pay-type-2">Перевод на банковскую карту</label>Оплата банковской (кредитной) картой Visa/MasterCard</td>
  </tr>

  <tr valign="top">

  <th><input type="radio" name="payment" value="3" class="payment-item" id="pay-type-3" onclick="shEvOrd('payment',this)"></th>
  <td><label class="label" for="pay-type-3">По безналичному расчету</label>Вы присылаете нам Ваши реквизиты, мы выставляем Вам счет, после чего производите оплату через банк.</td>
  </tr>
</tbody></table>

Нас интересуют только input с type="radio". Остальное можете менять по своему желанию.

name

payment или delivery для оплаты и доставки соответственно

value

содержит идентификатор способа оплаты или доставки, как узнать его значение мы писали выше

id

идентификатор для распознавания способа оплаты или доставки, поможет нам установить связи между способом оплаты и доставки

onclick

для вызова функции shEvOrd(name,this), которая пересчитывает сумму к оплате, не забудьте разместить эту функцию в шаблоне

<script type="text/javascript">
 //<!--
 function shEvOrd(type,obj,act){
 if(type=='delivery' && act=='1'){
 $('input[name=custom_delivery_tax]').remove();
 }
 if($('#checkout-form').length){
 $('#'+type+'_id').attr('value',obj.value);
 if((type == 'payment') || (type == 'delivery')){
 $('span.osum').html('<img alt="" src="http://s80.ucoz.net/img/icon/ajsml.gif" style="vertical-align:-4px;">');
 $('#checkout-form-mode').attr('value','change');
 _uPostForm('checkout-form');
 }
 }
 }

 function shopCheckOut(){
 if(_shopLockButtons()) return false;
 _shopFadeControl('cont-shop-checkout');
 $('#checkout-form-mode').attr('value','order');
 _uPostForm('checkout-form');
 return false;
 }


 //-->
 </script>

Скрытие не подходящих способов оплаты при нажатии на определенные способы доставки.

Например, вы сверстали каждый способ оплаты в контейнере <div> с уникальным id или способы оплаты у вас находятся каждый в новой строке таблицы, тогда строкам нужно задать уникальные id.

Далее принцип простой: с помощью .hide и .show прописываем, какие блоки отображать, а какие скрывать при выборе способа оплаты.

<input type="radio" name="delivery" value="13" class="delivery-item" id="del-type-13" onclick="shEvOrd('delivery',this); 
 $('#balans_blk,#pay_blk,#note,#sber_blk,#qiwi_blk').show(); 
 $('#nalozh_blk,#indeks,#adres,#punkt_blk,#nalozh2_blk,#privat_blk,#paysys_blk').hide();"/> 
 <label class="label" for="del-type-13">Забрать в пункте самовывоза</label> 

Контейнеры (или строки таблиц) с идентификаторами #balans_blk, #pay_blk, #note, #sber_blk, #qiwi_blk будут отображаться. А с #nalozh_blk, #indeks, #adres, #punkt_blk, #nalozh2_blk, #privat_blk, #paysys_blk - скрыты.

Вы можете задать любые идентификаторы в атрибут id любого HTML тега.

Также, имеет смысл скрывать поле "Адрес доставки", если пользователь выбрал способ доставки "Самовывоз". Или отобразить поле "Почтовый индекс" при выборе способа "Почта РФ".

Кнопка оформления заказа $ORDER_BUTTON$

Для чего это нужно:
• Чтобы изменить надпись на кнопке
• Изменить элемент, отправляющий данные заказа (button, input, a и т.д.)
• Чтобы добавить обработчики событий, например, отправку данных по количеству нажатий на кнопку пользователями в сервис Яндекс.Метрика.

Действуем по прежнему сценарию: на странице оформления заказа смотрим исходный код кнопки. Вот он:

<a href="#" class="btn btn-large btn-success" id="order-button" onclick="shopCheckOut()">Оформить заказ</a>

Думаю, с надписью на кнопке проблем не возникнет, а вот на сборе статистики остановимся подробнее.

Для начала посмотрим, что должно получиться:

<input type="button" onclick="yaCounterXXXXXX.reachGoal('ORDERBUTTON');shopCheckOut()" value="Далее: Отправить данные на проверку">

XXXXXX - код счетчика в Яндекс.Метрике

ORDERBUTTON - идентификатор цели

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

Дальше в ход вступает ваша фантазия, вот, что получилось у нас:

Пример 1

Пример 2