TakeOrder — это бесплатный скрипт формы приёма заказа. Форма может вызываться из разных мест сайта. Это удобно использовать на лендингах.
При установке скрипта вызов формы может быть привязан к любым кнопкам и ссылкам на сайте. Перед отправкой данных, введенных пользователем, происходит проверка обязательных для заполнения полей. Незаполненные поля подсвечиваются.
Есть возможность настраивать заказ одного из нескольких товаров на странице сайта. Это могут быть разные товары или разные цены на один товар. Внимание! Это не «корзина» с заказанным товаром.
Оформление заказа происходит мгновенно: без перезагрузки страницы, без регистрации, без ввода лишних данных, без суеты.
После отправки данных форма заменяется уведомлением об успешной отправке заказа. Это позволяет избежать дублирования данных. Повторный вызов формы возможен только после перезагрузки страницы сайта.
На e-mail администратора вместе с информацией, введенной пользователем, высылается url, по которому пользователь перешёл на сайт. Это позволяет пользоваться UTM метками. В форму также включена поддержка Яндекс.Метрики.
Кроме как на указанные e-mail адреса, информация никуда не передается и никак не используется. Скрипт не содержит вредоносного кода. Безусловно, эти гарантии распространяются только на оригинальные файлы, скаченные по ссылке, указанной на сайте.
Посмотреть работу формы можно при нажатии на ссылку: ДЕМОНСТРАЦИЯ
Если у Вас возникли вопросы или появились предложения по использованию скрипта, пожалуйста, оставьте свой комментарий ниже.
Вся установка и настройка производится буквально в пять шагов:
1. скачать архив;
2. распаковать два файла скрипта и отредактировать их в соответствии с данной инструкцией;
3. добавить в код Вашего сайта строку подключения скрипта и настроить вызов формы;
4. разместить скрипт на Вашем сервере;
5. проверить работу формы на Вашем сайте.
Теперь все это подробнее.
По ссылке на сайте скачиваете архив с последней версией скрипта. В архиве находятся два файла:
- файл takeorder.php (помещаете в корневой папке сайта);
- файл takeorder.js (помещаете в папку, где находятся все ява скрипты вашего сайта. Обычно это папка js).
Настройка скрипта TakeOrder.
Прежде всего нам необходимо, чтобы сообщения приходили на заданные e-mail адреса. Для этого открываем файл takeorder.php в редакторе кода и вносим исправления в следующие строки.
// емайл администратора
define('EMAIL1','mail@mail.ru');
// емайл аутсорсинга
define('EMAIL2','mail@mail.ru');
// header - подпись, от кого письмо
define('HEADER','Иванов Иван<mail@mail.ru>');
// subject
define('SUBJECT','Новый заказ наложенным платежом. Иванов Иван');
Вместо mail@mail.ru необходимо указать свои адреса. Если оставить значение по умолчанию, mail@mail.ru, то письма не высылаются.
В сообщении, приходящем на адрес администратора, кроме информации от клиента дополнительно указан url, с которого был осуществлен переход на страницу заказа. Это особенно удобно при использовании UTM-меток.
Исправляем тему сообщения. Подпись - от кого пришло письмо.
Заказываемый товар указывается в виде массива. Это может быть разный товар продаваемый с одной страницы сайта или разные варианты одного товара, разные цены, комплектация... Индекс массива используется при привязке кнопки вызова формы товара. Указывается цена, наименование товара.
// список товара в формате массива:
$tovar[1] = array('1990','Часы Clock');
$tovar[2] = array('2990','Часы Clock 2');
Сохраняем изменения.
Открываем файл takeorder.js. Здесь переменные minName, minPhone и minMail устанавливают минимальное количество знаков для полей с именем клиента, его телефоном и адресом соответственно. Значение 0 отменяет проверку. yandexKod и yandexCel - это номер счетчика и название цели для Яндекс.Метрики. Переменные topF и leftF задают отступ формы от верхнего левого угла экрана. Остальные поля - это все надписи на форме. При желании их можно поменять на свои.
Подключение скрипта.
Для работы используется библиотека jQuery. Проверьте: возможно, она уже подключена на Вашем сайте. Сделать это легко. Открываете нужную страницу сайта в редакторе кода и ищите там вот такую строку:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Ключевым здесь является подчеркнутый фрагмент. Путь к библиотеке и версия могут отличаться.
Если библиотека не подключена, добавьте вышеуказанную строку в код. Я рекомендую подключать скрипт в самом низу html кода.
Сразу после библиотеки jQuery подключаете сам скрипт. Для этого вставьте всего одну строку:
<script type="text/javascript" charset="utf-8" src="/js/takeorder.js"></script>
Убедитесь, что путь к скрипту (в примере подчеркнуто) указан верно.
Всё, скрипт подключен. Правда, просто?
Осталось привязать вызов формы заказа к кнопке «ЗАКАЗАТЬ» на Вашем сайте. Для этого находим в коде на сайте кнопку или ссылку, при клике по которой должна вызываться форма заказа. Необходимо присвоить этим элементам класс takeOrder.
Также надо указать какой именно товар будет заказываться при нажатии на эту кнопку. Для этого добавляется атрибут data-to со значением равным индексу ячейки массива с нужным товаром
Пример для ссылки:
<a class="takeOrder" data-to="1" href="#">ЗАКАЗАТЬ</a>
И для кнопки. Если элементу уже присвоен класс, то добавляем новый через пробел.
<input class="classA takeOrder" type="submit" data-to="1" value="Заказать" name="submit">
Поздравляю! Скрипт установлен, и вызов формы привязан. Можно перезагрузить страницу и проверить.
P.S. Маленький секрет. ) Если кнопке или ссылке вызывающей форму добавить атрибут data-off="2", то форма будет выводиться только с одним полем, первым. Чтоб форма принимала два значения надо отключить вывод последнего поля. Для этого установите data-off="1". То есть при необходимости можно вызывать форму с разным количеством полей настроив по разному ссылки или кнопки вызова.
Успешной работы! :)
