Перемещение поля с промо-кодом под таблицу с товарами
О чем здесь?
В заметке рассмотрено решение о перемещении поля с вводом промо-кода под таблицу с товарами. Если у покупателя есть промо-код, мы рассчитываем, что сначала он его введет, а затем приступит к выбору способов оплаты, доставки и заполнения полей заказа.
Данное решение неоднократно применялось на практике. После ввода и проверки промо-кода страница перезагружается. Иногда сбрасываются заполненные поля, а также выбранные способы оплаты и доставки.
Такое поведение поля с промо-кодом встречается и у тех, кто установил наш скрипт Полной автоматизации и стилизации страницы оформления заказа.
Пишем скрипт
Прежде чем начать, мы должны знать 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
