Перейти к содержимому


Добавлен Обратный Звонок

обратный звонок обновления

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 188

#1 support

support

    Активный участник

  • Модераторы
  • 3 649 сообщений
  • ГородМосква

Отправлено 11 Июль 2014 - 22:20

Сегодня был добавлен функционал, позволяющий покупателям отправлять заявки на обратный звонок с вашего сайта через форму, которую можно разместить на любой странице вашего сайта. Такая форма позволяет клиенту быстро и просто делать заказы на вашем сайте, заполняя всего лишь 2 поля: Имя и телефон.
Не редко её переназывают, например в "Заказ в 1 клик" или "Быстрый заказ", но суть формы при этом не меняется, в ней всё также остаётся 2-3 поля.

Выглядит в жизни этот функционал таким не хитрым образом:
Форма в которую мы отправляем запрос
1.png

Так она выглядит в момент когда запрос отправлен:
2.png
Поддерживаются как ajax запросы с ответом на json, так и обычные POST запросы, в этом случае произойдёт редирект на ту страницу, откуда был сделан запрос, либо на ту, которая будет указана в переменной "return_to", например так:
<input type="hidden" name="return_to" value="/feedback" />

На почту сразу приходит письмо с информацией о поступлении обратного звонка:
3.jpg


Через несколько мгновений, если у нас включена галочка напротив пункта "уведомлять меня о новых заказах" в разделе "Настройки" > "SMS", мы увидим сообщение на телефон следующего содержания:
IMG_3439.jpg

Также сообщение отправляется в ICQ, если указан ваш номер и стоит галочка напротив пункта "Отправлять уведомления на icq по поступлению заказа" в разделе "Настройки" > "Основные".
Если у Вас стоит расширение для Google Chrome и Yandex Браузер для уведомления о новых заказах, уведомление придёт и туда.

В панели управления сразу создаётся пустой заказ, с заполненными данными из формы и открытыми для ввода полями, в которые потребуется добавить информацию от пользователя, позвонив ему по телефону:
4.jpg
Дополнительным удобством формы является то, что она настраивается так, как Вам удобно, можно добавлять поля, которые сразу заполнятся в карточке заказа, их соотношение с названиями переменных в HTML коде выглядит так:
  • Адрес доставки: form[callback_address]
  • Город: form[callback_city]
  • Область: form[callback_region]
  • Почтовый индекс: form[callback_zip_code]
  • Страна: form[callback_country]
  • Удобное время доставки. Дата: form[callback_convenient_date]
  • Удобное время доставки. С: form[callback_convenient_hour_from]
  • Удобное время доставки. По: form[callback_convenient_hour_to]
  • Email: form[callback_email]
  • Код купона на скидку: form[coupon_code]
А также можно добавлять свои произвольные поля, они будут дописаны в поле комментария, например так:
  • form[Этаж]
  • form[Подъезд]
  • form[Метро]
  • form[Удобное_время_для_звонка]
  • form[Callback_time]
  • form[Страница_товара]
  • form[Название_понравившегося_товара]
  • ...
Форма защищена от спам атак, различного характера, начиная от банальных проверок бот это или не бот на javascript-е и логике видимости блоков на странице в CSS и заканчивая лимитами на IP адреса отправителей, так что  ложных уведомлений от ботов ждать не стоит, не смотря на отсутствие ввода проверочных картинок (капч).

Приведу пару примеров формы, основанную на коде страницы обратной связи шаблона "Весна".
Простой базовый пример где есть всего 2 необходимых для ввода поля и комментарий, как на скриншоте выше:
<h1>Заказ обратного звонка</h1>
<form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
	
	 <input type="hidden" name="hash" value="{HASH}" />
	 <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
	 {ANTISPAM_CODE}
	 <table class="form">
		 <tr>
		 <td><label for="callback_person" class="required">Представьтесь пожалуйста<em>*</em></label></td>
		 <td><input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required"/></td>
		 </tr>
		 <tr>
		 <td><label for="callback_phone" class="required">Телефон<em>*</em></label></td>
		 <td><input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required input-text"/></td>
		 </tr>
		 <tr>
		 <td><label for="callback_comment">Комментарий</label></td>
		 <td><textarea id="callback_comment" rows="7" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" >{FORM_CALLBACK_COMMENT}</textarea></td>
		 </tr>
	 </table>
	 <div class="buttons">
	 <div class="left">
		 <p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p>
	 </div>
	 <div class="right">
		 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
	 </div>
	 </div>
</form>

Такая же форма, с дополнительными полями, которые проставляются в карточке заказа, а также с 1 произвольным полем:
<h1>Заказ обратного звонка</h1>
<form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
<input type="hidden" name="hash" value="{HASH}" />
<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
{ANTISPAM_CODE}
<table class="form">
<tr>
	 <td><label for="callback_person" class="required">Представьтесь пожалуйста<em>*</em></label></td>
	 <td><input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required"/></td>
</tr>
<tr>
	 <td><label for="callback_phone" class="required">Телефон<em>*</em></label></td>
	 <td><input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required input-text"/></td>
</tr>
<tr>
	 <td><label for="callback_comment">Комментарий</label></td>
	 <td><textarea id="callback_comment" rows="7" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" >{FORM_CALLBACK_COMMENT}</textarea></td>
</tr>
<tr>
	 <td><label for="callback_region">Область</label></td>
	 <td><input id="callback_region" type="text" name="form[callback_region]" value="{FORM_CALLBACK_REGION}" maxlength="255" class="input-text"/></td>
</tr>
<tr>
	 <td><label for="callback_address">Адрес</label></td>
	 <td><input id="callback_address" type="text" name="form[callback_address]" value="{FORM_CALLBACK_ADDRESS}" maxlength="255" class="input-text"/></td>
</tr>
<tr>
	 <td><label for="callback_city">Город</label></td>
	 <td><input id="callback_city" type="text" name="form[callback_city]" value="{FORM_CALLBACK_CITY}" maxlength="255" class="input-text"/></td>
</tr>
<tr>
	 <td><label for="callback_zip_code">Почтовый индекс</label></td>
	 <td><input id="callback_zip_code" type="text" name="form[callback_zip_code]" value="{FORM_CALLBACK_ZIP_CODE}" maxlength="255" class="input-text"/></td>
</tr>
<tr>
	 <td><label for="callback_country">Страна</label></td>
	 <td><input id="callback_country" type="text" name="form[callback_country]" value="{FORM_callback_country}" maxlength="255" class="input-text"/></td>
</tr>
<tr>
	 <td><label for="callback_convenient_date">Удобная дата доставки dd.mm.yyyy</label></td>
	 <td><input id="callback_convenient_date" type="text" name="form[callback_convenient_date]" value="{FORM_CALLBACK_CONVENIENT_DATE}" maxlength="255" class="input-text"/></td>
</tr>
<tr>
	 <td><label for="callback_convenient_hour_from">Удобное время доставки</label></td>
	 <td>
	 С: <input id="callback_convenient_hour_from" type="text" name="form[callback_convenient_hour_from]" value="{FORM_CALLBACK_CONVENIENT_HOUR_FROM}" maxlength="255" class="input-text"/>
	 По: <input id="callback_convenient_hour_to" type="text" name="form[callback_convenient_hour_to]" value="{FORM_CALLBACK_CONVENIENT_HOUR_TO}" maxlength="255" class="input-text"/>
	 </td>
</tr>
<tr>
	 <td><label for="callback_email">Email</label></td>
	 <td><input id="callback_email" type="text" name="form[callback_email]" value="{FORM_CALLBACK_EMAIL}" maxlength="255" class="input-text"/></td>
</tr>
<tr>
	 <td><label for="coupon_code">Код купона на скидку</label></td>
	 <td><input id="coupon_code" type="text" name="form[coupon_code]" value="{FORM_COUPON_CODE}" maxlength="255" class="input-text"/></td>
</tr>
<tr>
	 <td><label for="callback_floor">Этаж</label></td>
	 <td><input id="callback_floor" type="text" name="form[этаж]" value="{FORM_ЭТАЖ}" maxlength="255" class="input-text"/></td>
</tr>
</table>
<div class="buttons">
<div class="left">
	 <p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p>
</div>
<div class="right">
	 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
</div>
</div>
</form>

Данные об источнике прихода покупателя, все UTM метки по рекламе, также как и в обычном заказе собираются в карточку заказа, для удобства ведения аналитики продаж.

Запросы для отправки формы можно также отправлять через ajax запросы, чтобы у пользователя не скролился экран, например если форма находится в середине страницы, а он смотрел интересный для него товар, в этом случае к запросам следует добавить специальный параметр ajax_q=1 через GET или POST и результат обработки запроса вернётся в JSON формате, например так:
{"status":"ok","message":"Всё прошло хорошо"}
или так:
{"status":"error","message":"Не удалось выполнить действие, потому что сервер заболел..."}
В поле message будет текст результата выполнения операции.

Для случаев, когда требуется разместить форму заказа обратного звонка на отдельной странице, например, в случаях, когда на странице расположена только ссылка или кнопка "Заказать обратный звонок", а сама форма будет загружаться через ajax запрос на адрес
http://вашсайт.ру/callback
Или когда есть желание отправить пользователя на отдельную страницу, как на форму обратной связи, например если Вы продаёте услугу и Вам нужен простой конструктор заявок с сайта, то в этом случае можно закачать файл callback.htm в редактор шаблонов. Вот пример такого файла для шаблона "Весна":
Прикрепленный файл  callback.zip   1,54К   408 Количество загрузок:
Просто распаковываем и закачиваем в раздел "Сайт" > "Редактор шаблонов". После закачки он появится в блоке "Шаблоны" с названием "Обратный звонок".

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

#2 sibulba

sibulba

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 261 сообщений

Отправлено 11 Июль 2014 - 23:57

Круто!!!

#3 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 08:15

Просмотр сообщенияsupport (11 Июль 2014 - 22:20) писал:

посмотрите что получается , форма не прячется

http://botanicus-2.ru/

#4 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 12 Июль 2014 - 08:33

Просмотр сообщенияБотаникус (12 Июль 2014 - 08:15) писал:

посмотрите что получается , форма не прячется

http://botanicus-2.ru/

Выполните данную инструкцию, обновил код формы обратного звонка с новыми переменными.

#5 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 09:03

Просмотр сообщенияCastiel (12 Июль 2014 - 08:33) писал:

Выполните данную инструкцию, обновил код формы обратного звонка с новыми переменными.
спасибо!
мне на Осень нужно поставить,подойдёт?
вот на этот сайт:
http://botanicus-cosmetic.ru/

#6 MikDark

MikDark

    Активный участник

  • Модераторы
  • 5 764 сообщений

Отправлено 12 Июль 2014 - 15:19

Просмотр сообщенияБотаникус (12 Июль 2014 - 09:03) писал:

спасибо!
мне на Осень нужно поставить,подойдёт?
вот на этот сайт:
http://botanicus-cosmetic.ru/

Для Осени попробуйте в шаблоне Страница весь код заменить на:
{% IFNOT PAGE_NAME = Обратный звонок %}
{% IFNOT index_page %}
<div class="breadcrumb">
<a href="http://{NET_DOMAIN}/" title="Перейти на главную">Главная</a>
<span class="navigation-pipe"></span>
{PAGE_NAME}
</div>
{% ENDIF %}
<div class="rte">

<h2>{PAGE_NAME}</h2>

{% IF FORM_NOTICE %}<ul class="messages"><li class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}error{% ENDIF %}">{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}

<div class="htmlDataBlock">
{PAGE_CONTENT}
</div>

<!-- Короткое SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_SHORT %}
<div style="padding-top:1em;" class="htmlDataBlock">
	 {PAGE_SEO_DESCRIPTION_SHORT}
</div>
{% ENDIF %}
<!-- END Короткое SEO-описание -->

<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
<div style="padding-top:1em;" class="htmlDataBlock">
	 {PAGE_SEO_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Полное SEO-описание -->
</div>
{% ELSE %}
{% IFNOT index_page %}
<div class="breadcrumb">
<a href="http://{NET_DOMAIN}/" title="Перейти на главную">Главная</a>
<span class="navigation-pipe"></span>
{PAGE_NAME}
</div>
{% ENDIF %}
<div class="rte">

<h2>{PAGE_NAME}</h2>

{% IF FORM_NOTICE %}<ul class="messages"><li class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}error{% ENDIF %}">{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}

<div class="htmlDataBlock">
{PAGE_CONTENT}
<form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">

<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="return_to" value="/page/callback" />
<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
{ANTISPAM_CODE}
<table class="form">
<tr>
<td><label for="callback_person" class="required">Представьтесь пожалуйста<em>*</em></label></td>
<td><input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required"/></td>
</tr>
<tr>
<td><label for="callback_phone" class="required">Телефон<em>*</em></label></td>
<td><input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required input-text"/></td>
</tr>
</table>
<div class="buttons">
<div class="left">
<p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p>
</div>
<div class="right">
{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
</div>
</div>
</form>

</div>

<!-- Короткое SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_SHORT %}
<div style="padding-top:1em;" class="htmlDataBlock">
	 {PAGE_SEO_DESCRIPTION_SHORT}
</div>
{% ENDIF %}
<!-- END Короткое SEO-описание -->

<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
<div style="padding-top:1em;" class="htmlDataBlock">
	 {PAGE_SEO_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Полное SEO-описание -->
</div>
{% ENDIF %}

Далее в шаблоне HTML перед </head> добавляем:
<script>
		 $(document).ready(function() {
$(".callme").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

и в том месте, где Вы хотите видеть кнопку, пишем:
<a class="callme fancybox.ajax" href="http://{NET_DOMAIN}/page/callback?only_body=1">Обратный звонок</a>


#7 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 15:38

НЕ закрытый тег ELSE строка 35

#8 MikDark

MikDark

    Активный участник

  • Модераторы
  • 5 764 сообщений

Отправлено 12 Июль 2014 - 15:47

Просмотр сообщенияБотаникус (12 Июль 2014 - 15:38) писал:

НЕ закрытый тег ELSE строка 35

Код поменяли, попробуйте еще раз.

#9 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 15:53

Просмотр сообщенияMikDark (12 Июль 2014 - 15:47) писал:

Код поменяли, попробуйте еще раз.
При нажатии на звонок вот что вылазиет:


The requested content cannot be loaded.
Please try again later.

#10 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 12 Июль 2014 - 15:57

Просмотр сообщенияБотаникус (12 Июль 2014 - 15:53) писал:

При нажатии на звонок вот что вылазиет:


The requested content cannot be loaded.
Please try again later.

Данное сообщение выходит из-за того что вы не верно выполнили инструкции по установке данной кнопки.
Вы упустили часть по созданию страницы с названием Обратный звонок, а название страницы в URL callback

#11 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 15:59

Просмотр сообщенияCastiel (12 Июль 2014 - 15:57) писал:

Данное сообщение выходит из-за того что вы не верно выполнили инструкции по установке данной кнопки.
Вы упустили часть по созданию страницы с названием Обратный звонок, а название страницы в URL callback

так я сделал как Михаил написал....

Ну Михаил, ну шалун!))))

#12 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 16:08

Просмотр сообщенияCastiel (12 Июль 2014 - 15:57) писал:

Данное сообщение выходит из-за того что вы не верно выполнили инструкции по установке данной кнопки.
Вы упустили часть по созданию страницы с названием Обратный звонок, а название страницы в URL callback

помогите!!!!
в мозилле и эксплорере Строка в шапке Обратный звонок сьехала влево!!!

#13 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 16:14

Просмотр сообщенияMikDark (12 Июль 2014 - 15:47) писал:

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

#14 MikDark

MikDark

    Активный участник

  • Модераторы
  • 5 764 сообщений

Отправлено 12 Июль 2014 - 16:35

Просмотр сообщенияБотаникус (12 Июль 2014 - 16:08) писал:

помогите!!!!
в мозилле и эксплорере Строка в шапке Обратный звонок сьехала влево!!!

В style.css добавьте:
.callme{display:block;}


#15 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 12 Июль 2014 - 16:37

Просмотр сообщенияБотаникус (12 Июль 2014 - 16:14) писал:

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

Доделали до конца обратный звонок, переделали в шапке контакты (вы использовали много лишних классов).

#16 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 16:40

Просмотр сообщенияMikDark (12 Июль 2014 - 16:35) писал:

В style.css добавьте:
.callme{display:block;}

большое спасибо!

скажите, а уведомления о новом звонке так и будут приходить ко мне в виде новых заказов?

#17 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 12 Июль 2014 - 16:41

Просмотр сообщенияБотаникус (12 Июль 2014 - 16:40) писал:

большое спасибо!

скажите, а уведомления о новом звонке так и будут приходить ко мне в виде новых заказов?

Да, так же будут приходить СМС сообщения о новых заказанных звонках

#18 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 16:44

Просмотр сообщенияCastiel (12 Июль 2014 - 16:41) писал:

Да, так же будут приходить СМС сообщения о новых заказанных звонках
так у меня эти звонки как заказы приходят) в админке)

#19 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 12 Июль 2014 - 16:46

Просмотр сообщенияБотаникус (12 Июль 2014 - 16:44) писал:

так у меня эти звонки как заказы приходят) в админке)

Все верно, так и должно быть.

#20 Ботаникус

Ботаникус

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 527 сообщений
  • ГородМосква

Отправлено 12 Июль 2014 - 16:52

Просмотр сообщенияCastiel (12 Июль 2014 - 16:46) писал:

Все верно, так и должно быть.
я конечно запутаюсь в доску, ну ладно))
спасибо





Темы с аналогичным тегами обратный звонок, обновления

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных