Теле2

Создание формы обратной связи. Есть сообщение для пустой корзины

Вся установка и настройка производится буквально в пять шагов:
1. скачать архив;
2. распаковать два файла скрипта и отредактировать их в соответствии с данной инструкцией;
3. добавить в код Вашего сайта строку подключения скрипта и настроить вызов формы;
4. разместить скрипт на Вашем сервере;
5. проверить работу формы на Вашем сайте.

Теперь все это подробнее.

По ссылке на сайте скачиваете архив с последней версией скрипта. В архиве находятся два файла:
- файл takeorder.php (помещаете в корневой папке сайта);
- файл takeorder.js (помещаете в папку, где находятся все ява скрипты вашего сайта. Обычно это папка js).

Настройка скрипта TakeOrder.

Прежде всего нам необходимо, чтобы сообщения приходили на заданные e-mail адреса. Для этого открываем файл takeorder.php в редакторе кода и вносим исправления в следующие строки.

// емайл администратора
define ("EMAIL1 ","[email protected] ");

// емайл аутсорсинга
define ("EMAIL2 ","[email protected] ");

// header - подпись, от кого письмо
define ("HEADER ","Иванов Иван ");

// subject
define ("SUBJECT ","Новый заказ наложенным платежом. Иванов Иван ");

Вместо [email protected] необходимо указать свои адреса. Если оставить значение по умолчанию, [email protected] , то письма не высылаются.
В сообщении, приходящем на адрес администратора, кроме информации от клиента дополнительно указан url, с которого был осуществлен переход на страницу заказа. Это особенно удобно при использовании UTM-меток.

Исправляем тему сообщения. Подпись - от кого пришло письмо.

Заказываемый товар указывается в виде массива. Это может быть разный товар продаваемый с одной страницы сайта или разные варианты одного товара, разные цены, комплектация... Индекс массива используется при привязке кнопки вызова формы товара. Указывается цена, наименование товара.

// список товара в формате массива:
$tovar = array ("1990 ","Часы Clock ");
$tovar = array ("2990 ","Часы Clock 2 ");

Сохраняем изменения.

Открываем файл takeorder.js . Здесь переменные minName , minPhone и minMail устанавливают минимальное количество знаков для полей с именем клиента, его телефоном и адресом соответственно. Значение 0 отменяет проверку. yandexKod и yandexCel - это номер счетчика и название цели для Яндекс.Метрики. Переменные topF и leftF задают отступ формы от верхнего левого угла экрана. Остальные поля - это все надписи на форме. При желании их можно поменять на свои.

Подключение скрипта.

Для работы используется библиотека jQuery. Проверьте: возможно, она уже подключена на Вашем сайте. Сделать это легко. Открываете нужную страницу сайта в редакторе кода и ищите там вот такую строку:

Ключевым здесь является подчеркнутый фрагмент. Путь к библиотеке и версия могут отличаться.

Если библиотека не подключена, добавьте вышеуказанную строку в код. Я рекомендую подключать скрипт в самом низу html кода.
Сразу после библиотеки jQuery подключаете сам скрипт. Для этого вставьте всего одну строку:

Убедитесь, что путь к скрипту (в примере подчеркнуто) указан верно.

Всё, скрипт подключен. Правда, просто?

Осталось привязать вызов формы заказа к кнопке «ЗАКАЗАТЬ» на Вашем сайте. Для этого находим в коде на сайте кнопку или ссылку, при клике по которой должна вызываться форма заказа. Необходимо присвоить этим элементам класс takeOrder .
Также надо указать какой именно товар будет заказываться при нажатии на эту кнопку. Для этого добавляется атрибут data-to со значением равным индексу ячейки массива с нужным товаром

ЗАКАЗАТЬ

И для кнопки. Если элементу уже присвоен класс, то добавляем новый через пробел.

Поздравляю! Скрипт установлен, и вызов формы привязан. Можно перезагрузить страницу и проверить.

P.S. Маленький секрет.) Если кнопке или ссылке вызывающей форму добавить атрибут data-off="2" , то форма будет выводиться только с одним полем, первым. Чтоб форма принимала два значения надо отключить вывод последнего поля. Для этого установите data-off="1" . То есть при необходимости можно вызывать форму с разным количеством полей настроив по разному ссылки или кнопки вызова.

Быстрый заказ может значительно облегчить шоппинг в интернет-магазине и, как следствие, повысить конверсию (конверсия сайта — соотношение итоговых реальных заказов от числа всех посетителей).

В статье рассмотрены основные принципы организации быстрого заказа товаров без регистрации , приведены иллюстрации. Это может наглядно продемонстрировать работу данного типа модулей интернет-магазинов и послужить заказчикам веб-услуг и владельцам сайтов в качестве ознакомительного экскурса. Кроме того, материал содержит пошаговую фрагментацию функционального кода, и может оказаться полезным для веб-разработчиков в практическом применении.

Давно известна закономерность: чем меньше в форме регистрации полей, тем охотнее пользователи её заполняют — тем охотнее осуществляет покупки в интернет-магазине. Не удивительно, что всё более популярной становится практика создания формы быстрого заказа на сайте, где посетитель может указать лишь необходимые данные для доставки (имя, адрес, телефон), минуя необходимость заполнения имейлов, паролей, почтовых индексов (где они не нужны) и пр. В то же время, стоит учитывать фактор физического местонахождения магазина / склада. Рационально использовать форму быстрого заказа именно в том городе, где расположен магазин с товаром (например — Москва). При этом, для жителей других городов оставить полную регистрацию, где они смогут указать почтовый индекс, способ доставки и другую необходимую информацию.

Принципы организации быстрого заказа товара без регистрации

Итак, мы определились с целями и задачами, теперь перейдем к средствам реализации. Форму быстрого заказа я писала для интернет-магазина, разработанного на движке osCommerce v.2.3 (чит. также « «), хотя аналогичный скрипт можно написать под любую другую CMS. По сути, всё, что нам нужно для отправки заказа товара на имейл продавца — это ID товара, который предполагается извлечь со страницы, на которой будет размещена кнопка быстрого заказа (страница товара, страница категории товаров). Задумка конструкции такова — данная кнопка «Быстрый заказ» вызывает модульное окошко, в котором пользователю предлагается следующее.

Подтвердить локацию («Да, я из Москвы»), или опровергнуть («Нет, я НЕ из Москвы»). При опровержении, в том же окошке должно появиться извинительное сообщение и кнопка «Зарегистрироваться» — для полной регистрации на сайте. При подтверждении, переходим к пункту 2:

Указать имя, адрес в Москве и контактный телефон. При желании, можно также отправить произвольный комментарий. После нажатия кнопки «Заказать» / «Купить», в скрипте складывается письмо с данными заказа (включая скрытый ID товара), которое отправляется на имейл администратора сайта — менеджера продаж интернет-магазина (позже менеджер может отзвониться покупателю, уточнить адрес и удобное время доставки). Покупателю выводиться сообщение: «Заказ успешно отправлен».

Рис. 1. Быстрый заказ для интернет-магазина. Кнопка быстрого заказа на странице товара. При нажатии открывается модульное окошко поверх страницы (см. рис. 2).

Рис. 2. Быстрый заказ в интернет-магазине. Опровержение локации — «Нет, я НЕ в Москве». Далее — переход к инструкции пройти полную регистрацию, заполнив все необходимые данные покупателя (рис. 3).

Рис. 3. Другой город — покупка возможна только при регистрации.

Рис. 4. Быстрый заказ для интернет-магазина без регистрации (город Москва). Переходим к форме заказа товара (рис. 5):

Рис. 5. Быстрый заказ в интернет-магазине без регистрации. Форма заказа товара.

Скрипт быстрого заказа для интернет-магазина

С интерфейсом определились, теперь пройдемся по коду для данной реализации.

У нас будет 1 основной php-файл — страница, которая будет вызываться в модульное окошко. Назовем его bistriy_zakaz_s_sayta.php . Вспомогательные функции, как то: проверка полей, брейк-тайм (время сессии — скажем, 5 мин, — в течении которого невозможно отправить заказ с того же компьютера дважды) будем использовать по аналогии с формой обратной связи, уже существующей в движке. Собственно, их мы прописывать не будем, а только вызывать. Для этого, прежде всего, запросим рабочие файлы движка:

В шапке подключим основные стили сайта, а также js-скрипты и jquery-библиотеку.

Дополнительно, пропишем стили для двух блоков, определяющих взаимодействие с пользователем на шаге уточнения локации. Внешне это выглядит так, будто перед нами разные страницы (сравните рис. 2 и рис. 5). Но это муляж. На самом деле, в первом случае основная форма просто загорожена пластом блока, растянутым по ширине и высоте окошка.

Собственно, изначально, перед посетителем откроется блок подтверждения / опровержения города местонахождения (см. рис. 2). Класс «displaymoscow» и id #moscow. Его положение на странице зададим в стилях как абсолютное и с z-индексом 1800 над остальным содержимым страницы. (Подробнее о z-индексах и прочих фокусах с блоками читайте здесь: « «.) Тот же класс (displaymoscow) используется для второго блока #moscownot, изначально скрытого на странице.

Пропишем динамику в .

При нажатии на кнопку «Да, я из Москвы» (#tdb1), блок #moscow переходит в режим hide(), т.е. становится скрытым, открывая содержимое страницы и саму форму быстрого заказа. (См. рис. 4-5, строки кода 125-126 )

При нажатии на кнопку «Нет, я НЕ в Москве» (#tdb2), блок #moscow переходит в режим hide(), а вот блок #moscownot, напротив, выходит в режим show() т.е. выходит на первый план, предлагая пройти полную регистрацию. (См. рис. 2-3, строки кода 128-130 )

Стоит обратить внимание на строку 135: блоки «Москвы» выводятся только при условии, что заказ еще не отправлен, а также — если не произведена сессия «moscow» (в случае прошлых заказов с данного компьютера). А иначе нам не нужно подтверждение местонахождения — посетитель уже подтвердил его ранее.

Еще одна деталь — кнопка «Зарегистрироваться». Указываем у ссылки атрибут target=»_top». Мы работаем в модульном окне через frame, и ссылки должны быть соответствующими.

Быстрый заказ: html,body{ margin:0; padding:0; } body { background: #fff url("workimages/bg_foot.jpg") no-repeat right 34px; color: #000; font-size: 13px; text-align:left; } h2 { font-size: 20px; line-height:34px; margin-bottom: 0; font-weight:bold; color: #333; padding-top:0px; padding-bottom: 12px; margin:0; } .contentContainer,.contentText,.contentText table,.contentText table td{background:transparent!important;} .contentContainer{padding:10px 20px;} p{color:#524d4e; font-size:15px;} input,textarea,.fieldKey{font-size:15px!important;} .fieldKey{width:180px;} .fieldValue{width:360px;} .ovr2{width:100%; height:110px; overflow:auto; margin-bottom:10px;} .displaymoscow{ width:560px; padding:10px 20px; height:400px; background: #fff url("workimages/bg_foot.jpg") no-repeat right 34px; position:absolute; z-index:1800; } .displaymoscow#moscownot{display:none;} jQuery(function($) { $("#tdb1").click(function() { $("#moscow").hide(); return false;}); $("#tdb2").click(function() { $("#moscow").hide(); $("#moscownot").show(); return false;});

Внимание! Сервис быстрого заказа доступен только для жителей Москвы. Это связано с тем, что для жителей других городов требуется более детальная информация.

Быстрый заказ очков и оправ на StarOptic

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

Зарегистрироваться$("#tblnew").button({icons:{primary:"ui-icon-extlink"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");

Следующим шагом мы посмотрим, отправлялся ли заказ. Если да, то выводим сообщение об успешной отправке.

Быстрый заказ очков и оправ на StarOptic

Заказ успешно отправлен в отдел обслуживания магазина. Наш менеджер свяжется с Вами по контактному телефону для уточнения деталей заказа и времени доставки.