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

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

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



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

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


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

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

Перемещение поля с промо-кодом под таблицу с товарами

Сергей    17.06.2015    4856    5.0 из 5.0 (6)

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

    О чем здесь?

    В заметке рассмотрено решение о перемещении поля с вводом промо-кода под таблицу с товарами. Если у покупателя есть промо-код, мы рассчитываем, что сначала он его введет, а затем приступит к выбору способов оплаты, доставки и заполнения полей заказа.

    Данное решение неоднократно применялось на практике. После ввода и проверки промо-кода страница перезагружается. Иногда сбрасываются заполненные поля, а также выбранные способы оплаты и доставки.

    Такое поведение поля с промо-кодом встречается и у тех, кто установил наш скрипт Полной автоматизации и стилизации страницы оформления заказа.

    Пишем скрипт

    Прежде чем начать, мы должны знать id поля с промо-кодом. Посмотреть можно в панели управления - интернет магазин - управления полями заказа:

    Теперь пишем скрипт. На самом деле алгоритм такой - мы не будем перемещать поле с промо-кодом, а просто скроем его. Под таблицу с товарами добавим ссылку "Есть промо-код?" при нажатии на которую будет появляться новое поле и кнопка "Проверить". При нажатии на кнопку проверить значение из поля скопируется в скрытое и будет запущена функция проверки промо-кода:

    $('#order-fld-5').parent().parent().parent().parent().parent().hide();
    $('#order-table tr:last-child td:first-child').prepend('<div style="float: left;display:none">промо-код: <input type="text" > <input type="button" onclick="$(\'#order-fld-5\').val($(this).prev().val());checkPromo(5)" value="Проверить">');
     $("#order-table tr:last-child td:first-child").prepend('<div style="float: left;"><a href="#" onclick="$(this).hide();$(this).parent().next().show();return false;">Есть промо-код?</a></div>');
    

    Cкрипт написан с ходу, его можно назвать скорее костылем, но со своей задачей справляется. Обратите внимание, в скрипте три раза встречается цифра пять (5) - это id поля с промо-кодом. Замените его на свой.

    Размещаем скрипт

    Теперь давайте откроем панель управления Дизайн - Управления дизайном (шаблоны) - Страница служебных форм и добавим в шаблон перед закрывающим тегом body:

    <?if $PAGE_ID$ = 'checkout' and $NUM_ENTRIES$?>
    <script>
    $('#order-fld-5').parent().parent().parent().parent().parent().hide();
    $('#order-table tr:last-child td:first-child').prepend('<div style="float: left;display:none">промо-код: <input type="text" > <input type="button" onclick="$(\'#order-fld-5\').val($(this).prev().val());checkPromo(5)" value="Проверить">');
     $("#order-table tr:last-child td:first-child").prepend('<div style="float: left;"><a href="#" onclick="$(this).hide();$(this).parent().next().show();return false;">Есть промо-код?</a></div>');
    </script>
    <?endif?>
    

    Готово!

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

    Обсуждение

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

    g
    1
    Сергей, здравствуйте. А как придать вид кнопки? Она у нас просто текстом встает без окантовки.
    avatar
    2
    2
    
    Код
    <?if $PAGE_ID$ = 'checkout' and $NUM_ENTRIES$?><script>
    $('#order-fld-5').parent().parent().parent().parent().parent().hide();
    $('#order-table tr:last-child td:first-child').prepend('<div style="float: left;display:none">промо-код: <input type="text" > <input type="button" class="btn-promo" onclick="$(\'#order-fld-5\').val($(this).prev().val());checkPromo(5)" value="Проверить">');
      $("#order-table tr:last-child td:first-child").prepend('<div style="float: left;"><a href="#" onclick="$(this).hide();$(this).parent().next().show();return false;">Есть промо-код?</a></div>');
    </script>
    <?endif?>
    Замените на этот код. В нем у кнопки есть класс btn-promo, можете прописать для него стили в CSS магазина
    L
    11
    Не получается. Как я понял нужно добавить 
    Код
    type="button" class="btn-promo"
    в последнюю <a href=""> но если просто добавить ничего не произойдет.
    avatar
    3
    У меня кнопка "проверить" стоит криво относительно других. Игралась настройками в Css - выравнять не получилось. Помогите пожалуйста.
    avatar
    1
    4
    Елена, попробуйте добавить в CSS магазина:
    
    Код
    #order-table input [type='button']{
    margin-top: 0px;
    }
    #order-but-continue {
       margin-top: 6px;
    }
    avatar
    5
    попробовала, не помогло(
    сайт http://www.line-l.ru
    avatar
    1
    6
    такс. надо переписать немного скрипт, запендюрить эту кнопку в какое-нибудь другое место и больше не мучиться...
    avatar
    7
    видать съезжает из-за измененного css.
    прописала сейчас методом подгона себе так - 
    #order-but-continue { 
       margin: 0 0 0 20px ; 
    }

    вроде более менее ровно
    S
    8
    Сергей, вот уж спасибо за скрипт. Не надеялся уже, а тут такое... Да еще летом! ))

    Владис.
    S
    9
    Кстати, сделал вот так:
    avatar
    1
    10
    По-моему, все отлично получилось, Владис.
    Я добавлю скриншот в статью.
    Перемещение поля с промо-кодом под таблицу с товарами
    Перемещение поля с промо-кодом под таблицу с товарами