Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

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

wwwkrem-brule    22.07.2013    11602    4.5 из 5.0 (18)

Оцените материал:

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

      не хотите:
    • изменить форму "ваш заказ" магазина на 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. Его вы можете увидеть в исходном коде формы.

    Название поляНазначениеНаши действия
    modeСлужебныйОставить как есть
    ssidИдентификатор сессииУстановить в атрибут value значение $SSID$
    payment_idИдентификатор способа оплатыУстановить value в значение способа по умолчанию*
    delivery_idИдентификатор способа доставкиУстановить value в значение способа по умолчанию*
    fld1Поле 1 для ввода данных пользователемОформить по своему усмотрению
    ...
    fldNПоле N для ввода данных пользователемОформить по своему усмотрению

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

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

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

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

    Отметим, что маска будет работать и без кастомизации страницы оформления заказа, если вы не решитесь на этот шаг, тогда просто разместите код, представленный ниже после $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

    Статьи по теме

    Обсуждение

    Всего комментариев: 61

    avatar
    1
    Добрый день.

    Хочу приобрести у Вас модуль доставки UCOZ для своего сайта. Как это можно сделать?
    avatar
    2
    Немного дополню данный пост. Недавно я столкнулся с необходимостью в поле почтовый индекс вводить только цифры, решение такое: полю input добавить onkeyUp="return proverka(this);" , а сам скрипт вот: <script type="text/javascript">function proverka(input) {
    ch = input.value.replace(/[^\d]/g, '');
    pos = ch.indexOf(',');
    if(pos != -1){
    if((ch.length-pos)>2){
    ch = ch.slice(0, -1);
    }
    }
    input.value = ch;
    };</script>
    Ответ: Спасибо за дополнение!
    avatar
    3
    А ещё, те кому нужно сделать чтобы фамилия или имя вводились с большой буквы если пользователь пишет без включенного капслука надо в style прописать text-transform: capitalize;
    avatar
    4
    amrita, спасибо большое, как раз искал маску для индекса почты РФ
    avatar
    5
    Данный скрипт также работает и на странице заказа если там его прописать.
    avatar
    6
    Здравствуйте ребята. Спасибо Вам за работу) Все сделала получилось, теперь вопрос, как с помощью события onClick при нажатии на определенный способ доставки, в способах оплаты checked устанавливался сам на нужную, при этом покупатель не видел вообще что выбирает(но это я знаю как)
    avatar
    7
    Елена, не понял Вашего вопроса. Нужно, чтобы была зависимость способа оплаты от способа доставки?
    avatar
    8
    да верно) но я уже сделала сама) немного по другому но сделала)
    T
    9
    а и есть еще вопрос, можно как-то скрыть способ доставки если сумма заказа меньше 2000?
    avatar
    10
    Tesa82,
    <?if $ORDER_AMOUNT_RAW$ < '2000'?>
    <script>
    $("#del-type-2").parent().parent().hide();
    </script>
    <?endif?>

    Только двойку в "#del-type-2" заменить на id своего способа доставки. Или Вы хотели все способы доставки скрыть? Тогда вместо "#del-type-2" надо поставить ".delivery-list" и без parent():
    <?if $ORDER_AMOUNT_RAW$ < '2000'?>
    <script>
    $("#delivery-list").hide();
    </script>
    <?endif?>
    T
    11
    спасибо, пошла пробовать)
    T
    12
    кх)кх) все бы хорошо, но это работает если ты уже надобавлял на 2000 и нажал оформить заказ в корзине, а если покупатель добавил на 1500, а потом решил добавить количество и нажал кнопку пересчитать на странице оформления заказа, то уже не работает...( нужно думать...
    avatar
    13
    Так, конечно) чуть позже напишу, что надо добавить, чтобы и при пересчете работало
    T
    14
    ага, спасибо, только странно что оно перестало работать( добавила товаров на 2020 р, доставка не появляется(
    а так еще очень сильно раздражает, что делаешь на пробном сайте все работает, как переносишь на рабочий так не хочет( в чем может быть проблема?
    а то переделала страницу заказа на пилотном сайте, поставила на рабочий, оно видишь ли не работает,пришлось полночи переделывать все(
    avatar
    15
    Странно, а у меня все работает. У Вас при нажатии на кнопку пересчитать страница перезагружается?

    Пришлите ссылку на сайт мне sm@ucozmagazines.ru
    T
    16
    да, перезагружается, это я немного ошиблась когда правила) все работает) спасибо)
    avatar
    17
    Анатолий, это штатная возможность, мы рассматривали ее в уроке про Поля заказа - http://ucozmagazines.ru/publ/urok_31_upravlenie_poljami_zakaza/1-1-0-31#h2t-2
    avatar
    18
    Анатолий, кастомизируйте после того, как настроите скрытие полей, тогда этот скрипт попадет в новый код. Я, честно, прямо сейчас не скажу, как именно надо настроить. Гляну чуть позже, сообщу.

    Вобще, проблема с получением переменной типа товара, в списках доступных полей заказа ее нет.
    S
    19
    Сергей, спасибо, даже и не мечтал реализовать в своем магазине то, что уже сделано после прочтения этого урока!

    Подскажите еще пожалуйста, как прописать, чтоб функция "function shEvOrd" снимала/ставила определенные галочки выбора способа доставки/оплаты. Мне нужно чтоб при выборе способа доставки снимались все галочки способов оплаты, чтоб клиент сам мог его выбрать.

    Спасибо!
    avatar
    20
    Сразу после
    if(type=='delivery' && act=='1'){
    Добавьте
    $(".payment-item").removeAttr("checked");
    S
    21
    Спасибо! Теперь я полностью доволен своей страницей служебных форм!
    S
    22
    Никак не могу разобраться со скролингом на способы оплаты при выборе типа доставки.
    Прочитал несколько статей по скрипту <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>, но моих знаний не хватает, чтоб реализовать это у себя.
    Возможно ли это объяснить кратко, в виде конкретного руководства к действию?
    Вот мой магазин: http://steelie.at.ua/shop, если это необходимо.
    Спасибо большое за помощь,
    avatar
    23
    А что не получается?
    При выборе способа доставки, нужно показать способ оплаты и промотать до него:
    $("#delivery-list input").click(function(){
    $("#sposob_oplaty").show();
    $.scrollTo("#sposob_oplaty");
    });
    S
    24
    Еще раз спасибо за помощь! Ситуация в том, что срочно понадобилось сделать сайт и магазин, и приступил я сразу к делу, делал все с уроков, по анологии и методом тыка. При этом знания элементарных азов отсутствует. Это в корне не верно, но так уж оно получилось. Уже вроде и сайт есть и магазин делаю, а вот на таких вроде элементарных вещах могу застопориться.

    Скажите пожалуйста, можно ли как-то отсрочить выполнение прокрутки на пару милесекунд, так как при первом клике прокрутка не происходит. На сколько я понимаю, это через то, что способы оплаты еще не открыты и страница и так в самом низу (нет еще полосы прокрутки). В результате функция выполняется, а прокручивать некуда.
    Или может можно эту проблему решить еще как то, не через отсрочку прокрутки.
    S
    25
    Мое предположение оказалось не верным.
    Прокрутка просто не срабатывает при первом клике, при втором срабатывает нормально.
    Подскажите пожалуйста выход.
    avatar
    26
    Попробуйте переместить скрипт вниз страницы перед </body>.
    S
    27
    Не помогло.
    avatar
    28
    Попробуйте так:
    $("#delivery-list input").click(function(){
    $("#sposob_oplaty").show("slow",function(){$.scrollTo("#sposob_oplaty"); });
    });
    S
    29
    Не помогает, пробовал и во втором варианте вниз страницы перед </body> размещать.
    a
    30
    Здравствуйте. Объясните пожалуйста по пунктам как изменить надпись "Оформить заказ" в $ORDER_BUTTON$.
    avatar
    0
    31
    Здравствуйте. Чтобы изменить надпись зайдите в Панель управления - Настройки - Замена стандартных надписей и выберите блок "КОРЗИНА ДЛЯ МОДУЛЯ "ИНТЕРНЕТ-МАГАЗИН". В нем найдите поле с надписью "Оформить заказ" и измените ее.
    a
    32
    Всё, понял. Нужно в странице служебных форм заменить $ORDER_BUTTON$ на код. В любом случае спасибо за ответ!
    avatar
    Здравствуйте!
    Огромное спасибо за статью- очень помогла!
    Я вас очень прошу помочь.
    Есть минимальная сумма заказа 1000 рублей и когда клиент жмет кнопку оформить заказ ему выдается сообщение: "сумма заказа меньше допустимой", а вот где подредактировать это сообщение, так и не нашли.
    avatar
    0
    34
    Здравствуйте!
    Честно говоря, сам не могу найти, где это редактируется :( Похоже, что такой возможности нет...
    avatar
    Сделали по-другому:
    Вывели условным оператором, если сумма меньше допустимой (вот пример):
    <?if($ORDER_TOPAY_RAW$<1000)?>
     Минимальная сумма заказа 1000 рублей. Докупите товаров на <? 1000-$ORDER_TOPAY_RAW$ ?> руб..
    <?endif?>
    Сюда можно что-нибудь написать, если заказ больше 1000 рублей
    <?else?> 

    Сейчас другая проблема:
    На странице "Заказ оформлен" не работает переменная  $PAYMENT$ (способ оплаты)
    Можно эти данные как-то подгрузить?
    Цель:
    Нужно для определенного способа оплаты вывести данные через условный оператор. Не обязательно выводить данные в зависимости от этой переменной, можно от определенного текста как-нибудь вывести?
    avatar
    0
    36
    Используйте . load()
    avatar
    Не получаеся, и GET  пробывала. Адрес страницы тот же ведь остается., она из juvery подгружается или инклудом скорее всего на сервере.
    avatar
    Вообще, переменные ни какие на этой долбанной странице "Заказ оформлен" не работают. 
    Как вариант можно было бы кнопку "распечатать заказ" раскодировать (там многие переменные работают, но не понятно какая переменная отвечает за формирование страницы "распечатать заказ", пробывала наобум типа $print_id$ и тому подобное, но все тщетно.
    avatar
    Хотя, можно создать отдельную страницу и направлять на нее в зависимости от выбранного способа оплаты и доставки, подменив кнопку "оформить заказ" на нужнуюстраницу.
    НО, как передать переменные $to_pay$ $order_id" с денамичной страницы /checkout ?
    avatar
    0
    40
    Может Вам тогда не использовать страницу. "заказ оформлен", а сразу направлять пользователя на страницу заказа?
    avatar
    В том то и дело, что можно.
    Но, подскажите пожалуйста как передать переменную "order_to_pay@ на на другую страницу?
    avatar
    0
    42
    Передать на другую страницу не получится. А вот со страницы загрузить это значение можно. Для этого надо с помощью load загрузить контейнер со значением переменной и поместить ее в требуемое место. По окончании загрузки, можно присвоить ее значение переменной и работать с ней непосредственно.

    Код
    $("куда загружать").load("откуда загружать");
    d
    43
    Добрый вечер!
    Пытаюсь скрыть вариант доставки товара самовывозом (#del-type-1) из общих вариантов доставки при выборе варианта оплаты картой (ID=2). 

    <?if $PAYMENT_ID$=2?> 
    <script> 
    $("#del-type-1").parent().parent().hide(); 
    </script> 
    <?endif?>

    Но скрипт работает только при обновлении страницы. Что нужно сделать чтобы указанный вариант доставки скрывался в момент клика мышью на вариант оплаты? Знаний не много. Заранее всем благодарен за помощь
    avatar
    44
    Добрый день! Проблема на странице оформления заказа. Через Google Chrome поле ввода адреса покупателя не работает. Где найти стили этого поля?
    avatar
    1
    45
    Здравствуйте, Егор.

    Посмотрите ID поля в "Управление полями заказа". Стили можете указать для него с помощью CSS магазина #order-fld-1 (1 - это ID).

    Но вобще, ссылку бы на сайт, чтобы понять проблему, так как не уверен, что ее можно решить с помощью стилей.
    avatar
    47
    Спасибо за помощь! Разобрался!
    avatar
    51
    Хочу сделать так же как на скриншоте Пример  1. Но как сделать не понятно.
    avatar
    46
    Добрый день, Сергей. Ссылка на сайт http://lvm.by
    avatar
    48
    Добрый день!
    Подскажите пожалуйста, если мне нужно, чтобы при выборе способа доставки №4, появлялась дополнительная строка для ввода телефона?
    T
    49
    Здравствуйте! Сделала сброс способа оплаты при выборе доставки) Спасибо, а как сделать что бы при первом входе на страницу все доставка и оплата были сняты?

    а при пересчете оставались.

    и как кастомно вывести галочку авторегисрация, в настройке я ее активировала, а ее нет рядом с полем.
    avatar
    50
    Сергей, доброго времени суток!
    Не хочет работать это:
    20 Сергей • 11:32, 02.06.2014
    Сразу после
    if(type=='delivery' && act=='1'){
    Добавьте
    $(".payment-item").removeAttr("checked");
    Только мне надо наоборот, чтобы сбрасывалась доставка при изменении способа оплаты
    a
    52
    Здравствуйте! А почему маска телефона не работает в мобильных браузерах, на компе все нормально, а на мобильном получается какая то ерунда типа  +7(122____) 121___-2121__  нужно вручную править чтобы убрать подчеркивание, автоматического переноса нет.
    z
    53
    Здравствуйте! Ничего не понимаю. Мне нужно, чтобы при выборе САМОВЫВОЗ система не требовала адреса доставки. Чтобы реализовать это, нужно кучу скриптов на сайт загружать? А в самом движке это не предусмотрели?
    avatar
    0
    54
    Здравствуйте!

    Кучу скриптов не надо, достаточно одной строчки в шаблоне страницы оформления заказа.
    z
    55
    И тогда не будет делаться системой запрос на ввод данных и не вылезет окошко ошибки? Можете помочь?
    avatar
    0
    56
    Окошко появляется, потому что поля обязательны для заполнения. Так было задумано?

    Помочь могу, нужно на сайт смотреть, какие именно поля скрывать при самовывозе.
    z
    57
    http://supermethodika.ru/ - поле доставка, по моему, выполнено как дополнительное. Сам не понял, если честно. Первый магазин у меня.
    avatar
    0
    58
    Откройте раздел в панели управления "Дизайн" / "Управление дизайном"  и найдите шаблон "Страница служебных форм". В нем перед закрывающим тегом </body> добавьте код:
    
    Код
    <?if $PAGE_ID$ = 'checkout'?>
    <script>
    if($('.delivery-item:checked').val() == 1){
      $('#order-fld-2').val($('#delivery-descr-1').text()).parent().slideUp();
    }
    $('.delivery-item').on('change', function(){
      var id = $(this).val();
      if(id == 1){
      $('#order-fld-2').val($('#delivery-block-1').text()).parent().hide();
      } else {
      $('#order-fld-2').val('').parent().slideDown();
      }
    })
    </script>
    <?endif?>
    z
    59
    Здравствуйте! Вроде сработало. Сколько я вам должен?
    avatar
    0
    60
    Здравствуйте! По желанию https://ucozmagazines.ru/donate
    z
    61
    Простите, в таких валютах нет денег. Есть на Вебмани и Киви. Пришлите кошельки на почту.
    Кастомизация Страницы Оформления заказа uCoz
    Кастомизация Страницы Оформления заказа uCoz