Главная » Opencart » Всплывающий обратный звонок для Opencart без модулей

Всплывающий обратный звонок для Opencart без модулей

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

Что он собой представляет?

Просто говоря – это небольшая форма, в которой всего два поля: имя и телефон, которая открывается в сплывающем окне.

Наверняка, существуют модули, возможно, некоторые из них и платные, но я хотел бы вам показать как сделать все вручную, полностью собственными силами. Используя мой метод, вы сможете оформить данную функцию максимально под свои требования.

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

Ну что ж, давайте приступим к работе.

Шаг 1. Подключаем скрипт в файле /catalog/view/theme/default/template/common/header.tpl. Вставлять код нужно перед закрывающимся тегом .

<script type="text/javascript" src="/jquery.leanModal.min.js"></script>
		<script type="text/javascript">
			$(function() {
    			$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
			});
		</script>

Шаг 2. Прописываем ссылку обратного звонка в нужном нам месте сайта.

<a id="go" rel="leanModal" name="signup" href="#signup">Заказать обратный звонок</a>

Шаг 3. Подключаем CSS. Для этого, добавляем его в файл — /catalog/view/theme/default/stylesheet/stylesheet.css.

#lean_overlay {
    position: fixed;
    z-index: 10000;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#go { margin: 0 auto; width: 200px; padding-right: 85px; }

#signup form p {
padding-left:15px;
padding-right:15px;
}

#signup {

     width: 404px;

    display:none;

    background: #FFF;
        border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
        box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);

}

#signup-header { background: url(../image/hd-bg.png); padding: 18px 18px 14px 18px; border-bottom: 1px solid #CCC; border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }

#signup-header  h2 { color: #444; font-size: 1.5em; font-weight: 700; margin-bottom: 3px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); }
#signup-header  p { color: #444; font-size: 1.3em; margin: 0; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); text-shadow: none; }

#signup .txt-fld { position: relative; width: 364px; padding: 14px 20px; border-bottom: 1px solid #EEE; text-align: right; }
#signup .btn-fld { width: 254px; overflow: hidden; padding: 12px 20px 12px 130px; }

#signup .txt-fld label { display: block; float: left; width: 90px; padding-top: 8px; color: #222; font-size: 1.3em; text-align: left;  }
#signup .txt-fld input { width: 244px; padding: 8px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-size: 1.2em; color: #222; background: #F7F7F7; font-family: "Helvetica Neue"; outline: none; border-top: 1px solid #CCC; border-left: 1px solid #CCC; border-right: 1px solid #E7E6E6; border-bottom: 1px solid #E7E6E6; }
#signup .txt-fld input.good_input { background: #DEF5E1 url(../imgage/good.png) 236px center no-repeat; }
#signup .txt-fld input.error_input { background: #FDE0E0; }

.modal_close { position: absolute; top: 12px; right: 12px; display: block; width: 14px; height: 14px; background: url(../image/modal_close.png); z-index: 2; }

#signup .bt1 {
	float: right;
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	background: #3F9D4A;
	border: none;
  width: auto;
  overflow: visible;
  font-size: 1.4em;
  margin-bottom: 15px;
  color: #FFF;
 padding: 7px 10px;  border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; font-weight: bold; text-shadow: 0 1px 0 rgba(0,0,0,0.4);}

 #liv {
 margin-top:-35px;
 }

Шаг 4. Вставляем форму обратного звонка. Для этого открываем файл  /catalog/view/theme/default/template/common/footer.tpl и перед закрывающимся тегом body, вставляем html код формы.

<div id="signup">
			<div id="signup-ct">
				<div id="signup-header">
					<h2>Заказать обратный звонок</h2>
					<a class="modal_close" href="#"></a>
				</div>

<form action="http://site.com/options.php" method="post">
 <p><span style="padding-right:55px;">Ваше имя:</span>
 <input type="text" name="fio" width="20"></p>
 <p style="padding-top:15px;"><span style="padding-right:10px;">Номер телефона:</span>
 <input type="text" name="email" width="20"></p>
 <p><span style="padding-right:28px;">Тема вопроса:   </span>
 <input type="text" name="ask" width="20"></p>
<p><span style="padding-right:10px;">Введите числа с картинки: </span>
		<?php
		$i=1;
		do
		{
		$num[$i] = mt_rand(0,9);
		echo "<img src='img/".$num[$i].".gif' border='0' align='bottom' vspace='5px'>";
		$i++;
		}
		while ($i<5);
		$captcha = $num[1].$num[2].$num[3].$num[4];
		?>
<input name="captcha" type="hidden" value="<?php echo $captcha ;?>">
<input name="pr" style=" margin-bottom:11px" type="text" size="6" maxlength="4"></p>
<p><input type="submit" class="bt1" value="Отправить сообщение"></p>
</form>
			</div>
		</div>
 

Обратите внимание на строчку:

<form action="http://site.com/options.php" method="post">

, в ней нужно указать путь к файлу options.php, на вашем сервере. На данный момент – это корневая папка сайта. Обязательно вставьте url своего сайта вместо – site.com!!!

Шаг 5. На этом шаге, нужно забросить все нужные нам файлы на сервер.

Все нужные файлы я прикреплю внизу статьи.

Для этого:

1.) В корневую папку сайта закидаем файлы: options.php и jquery.leanModal.min.js, а также папку с картинками кап тчи img.

2.) Идем в директорию — /catalog/view/theme/default/image/ и забрасываем туда, два изображения из папки bg_theme.

Настройка отправки письма

Теперь давайте детальнее рассмотрим файл options.php.

Основные настройки:

1.) 1 строчка файла

<meta http-equiv='refresh' content='2; url=http://site.com/'>

, здесь вам нужно указать домен своего сайта вместо site.com. А также, в можете задать время в секундах, через которое пользователя перебросит на главную страницу. Чтобы было более понятно, после отправки письма пользователю высветится страница с текстом: спасибо, что воспользовались нашими услугами, и т.п. , данный текст вы сможете настроить ниже. После того как он увидит окно, его будет перенаправлено на главную страницу вашего сайта, или же на любую другую страницу, урл которой вы можете указать в этой строке.

2.) Далее идет проверка отправляемых полей, там, в файле все расписано.

3.) Обязательно! Поменяйте адрес почты в строке:

$address = "test@site.com";

4.) В самом низу файла вы можете поправить текст, который покупатель увидит после отправки письма.

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

Вот файлы для создания всплывающей формы обратного звонка:

Файлы для создания формы

Подписывайтесь на мой блог, ставьте лайки и оставляйте комментарии.

69 комментариев

  1. Привет! Сделал все как у тебя и написано, вроде бы все работает. Но сообщения на почту не приходят — перепробовал уже пару почт… сайт сейчас на denwere. Из-за чего могут не приходить письма?

  2. Все правильно, поскольку Вы работаете на Денвере, то письма не будут отсылаться, они будут приходить в папку где установлен Денвер, а конкретнее в подкаталоге — /tmp/!sendmail/, ищите по дате отправки. Когда установите на хостинг все должно работать.

  3. Спасибо все работает. Перепутаны местами в форме поля Имя и телефон (в footer.tpl нужно поменять местами fio и email )

  4. подправил

  5. Спасибо за статью, очень полезно. Форма красивая. Opencart использует загруженные шаблон (не default). И при нажатии на ссылку, форма не всплывает. Почему не пойму, делала все по инструкции. Помогите пожалуйста.

  6. В вашем случае необходимо все эти действия проводить к файлам расположенным в установленном вами шаблоне. Если вы все делали именно так, то может быть две проблемы:
    1.) Существует конфликт между этим и другими скриптами.
    2.) У вас не подключена библиотека jQuery.
    Попробуйте для начала подключить библиотеку в файле header.tpl вашей темы между тегами:

    <head></head>

    Я бы даже советовал попробовать различные версии попробовать библиотеки, так как показывает практика проблема может быть именно в них.
    Пример подключения библиотеки jQuery:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    
  7. Все получилось, действительно был конфликт с другим скриптом. Автору респект за труды.

  8. Привет ! начал устанавливать, я новичок.. 2 шага выполнил и у меня затупил слайдер… Не подскажите как исправить ? Спасибо

  9. А еще вместо слов «заказать звонок»- ромбики с вопросиками.

  10. привет, во-первых, нужно последовательно проделать все шаги до конца. На всякий случай, особенно для начинающих, советую в отдельной папки делать бекапы всех файлов. Даже для меня эта не раз пригодилось :).
    Заверши весь процесс и отпишись.
    А ромбики, наверное, потому, что не правильно выставлена кодировка в файле footer.tpl. Желательно выставить ее значение в UTF-8 (без BOM). Сделать это можно с помощью редактора Notepad++, во вкладке «Кодировка».

  11. Спасибо, но к сожалению не получается… Я редактирую непосредственно в редакторе хостинга.. но и скачав и переделав что то не получается… может потому, что я поместил ОпенКарт по адресу сайт/шоп … ? ну да ладно, будем пока без обратного звонка))

  12. еще раз здравствуйте! Сделала на реальном сайте. Но почему-то сообщения не приходят. Форма выходит, после нажатия кнопки отправки, выходит окно. Но сами письма на ящик не приходят. Папку спам проверяла — пусто. Все файлы кинула в директории, как написано в статье

  13. решила удалить скрипт. После удаления всех файлов, сайт не открывается. Выдает «На этой странице обнаружена циклическая переадресация». Что это?

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

  15. Здравствуйте! А как быть с полем от кого? Приходит в поле от кого такая абракадабра ac152371a31aa530.invalid@internationalized.invalid

    Наверное вы в скрипте забыли сделать переменную для поля от кого.

  16. Ответ для Михаила. Можно использовать просто html код этой формы, без подключения javascript и css. Насчет каптчи, то ее желательно не убирать, поскольку вам будет приходить огромное количество спама, от путевок на карибы, то супер ручек. В следующих статьях я дам пример формы-калькулятора без каптчи.

  17. Ответ для Марианны. Добрый день. Проблем с получением данных не наблюдал. Все необходимое — имя, телефон, Email, всегда приходило на почту. Попробуйте заново пройтись по всем шагам и заново отправьте запрос.

  18. Все работает, все круто, но после закрытия формы — скролит вверх страницы.
    Как от этого избавиться? Сильно раздражает, когда внизу страницы заказал обратный звонок, потом закрываешь форму, а он тебя поднимает вверх (даже если не заказал и закрываешь — в любом случае поднимает)

  19. Ответ для Эльвиры. Данная форма устанавливалась мной не один раз, и никаких проблем с отправкой писем не было. У Вас могут возникнуть проблемы из-за хостинга, особенно если он бесплатный. Рекомендую обратится в поддержку, или же просмотреть почтовые логи.
    Если Вы последовательно удалите все строки, которые вы добавляли, то сайт должен работать — это 100%. Наверное Вы, либо удалили лишнее, или же забыли что-то подправить. Посмотрите на код в футере перед закрывающимся тегом body, возможно вы забыли удалить код формы и он вполне может вызывать циклическую ошибку. Рекомендую Вам всегда делать бэкап, перед тем как устанавливать любой, даже самый проверенный модуль. Это позволит сохранить время и нервы.

  20. Ответ для Михаила. К сожалению с этой фишкой я пока не разобрался. Если будет решение я обязательно о нем напишу.

  21. Здравствуйте, у меня такой вопрос, эта форма должна всплывать в отдельном Pop up окне, или же просто располагается ниже в футоре. Я сделал все как описано и у меня появилась форма обратного звонка в футоре, так и должно быть? Или же эта форма звонка появляется в отдельном окне при нажатии на ссылку?

  22. Она должна всплывать в поп-ап окне. Если она в футере, то значит Вы пропустили какой-то шаг. Я предполагаю, что не был добавлен весь CSS код в ваш файл стилей шаблона. Проверьте все еще раз, должно работать, я ставил эту фишку много раз, проблем никогда не было.

  23. Спасибо все получилось.

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

  25. al, конечно можно. Используйте тот же алгоритм, просто создайте под свою вторую форму отдельный html шаблон и обработчик.

  26. спасибо за ответ, но можете как дураку объяснить по подробнее?
    про html шаблон я понял, а что такое обработчик?

  27. в нашем случае это файл options.php. Посмотрите как там обрабатываются данные, и сделайте по аналогии, вписав нужные вам значения полей.

  28. Подскажите, что делать, если в шаблоне в хидере уже есть

    $(function() {$(‘a[data-id*=leanModal]’).leanModal({ top : 210, closeButton: «.modal_close» });});
    Конфликт получается, как быть?

  29. Evgeniy, просто пропустите этот шаг и делайте все остальные.

  30. Если пропустить этот шаг, то вообще ничего не происходит по нажатию на «Заказать обратный звонок»

  31. Evgeniy, насколько я понял у Вас уже подключен этот скрип, поэтому я посоветовал пропустить этот шаг. Решение рабочее на 100%. Если оно конфликтует с другими нужными Вам скриптами, тогда возможно есть смысл поискать другой вариант подключение всплывающего обратного звонка.

  32. Привет !
    1. мне не понятно куда добавлять 2шаг.
    2. перед закрывающимся тегом . это куда я новичек плохо соображаю
    За ранее спасибо !

  33. Иван, на 2 шаге Вам нужно прописать ссылку в нужном месте шаблона. Обычно ее размещают в файле header.tpl, который размещается по адресу — catalog/view/theme/default/template/common/header.tpl, где default — это имя Вашего шаблона, можете разместить возле валют или переключателя языков.
    Закрывающийся тег — это имеется в виду тег: body.

  34. И возможно ли соединить ссылку с картиной чтоб функция срабатывала при нажатии на картинку.

  35. Иван, да можно. Для этого в шаге 2 вместо «Заказать обратный звонок» вставьте адрес картинки.

  36. Здравствуйте, спасибо, все работает нормально кроме одного, при заполнении всех форм и при неправельно введенной капчи — появляется пустая страница (без надписи «вы не правельно ввели проверочный код») и перебрасывает на страницу магазина, но при этом сообщения не приходят, как сделать что бы проверка на правильность введенный капчи работала? тоесть что бы выводился текст «вы не правильно ввели проверочный код»? Спасибо.

  37. Сергей Нечипорук. Подскажите, что нужно подправить, чтобы обработчик результата, ошибок и т.д. появлялись не на новой (черном по белому) странице, а в самой форме обратного звонка?

  38. Тут возникал вопрос по поводу того что страница скорлит и ещё перебрасывает на главную при закрытии окна с любой другой страницы данный вопрос можно решить следующим образом. Вместо Пишем то есть говорим браузеру «Закрой нафик окно и больше нечего не делай»

  39. Спасибо огромное — перепробовал кучу душных форм заказать обратный звонок — ваша самая лучшая!

  40. как раз этим вопросиком на сайте займемся у себя..спасибо

  41. А как сделать чтобы данная форма отправляла название продукта, или адрес страницы с которой она была отправлена?
    Чтобы менеджер мог в момент понять что нужно клиенту?

  42. Привет,
    спасибо за код

  43. Здравствуйте!
    Хочу на сайте сделать несколько форм на отдельных страницах. Формы на html. Подскажите пожалуйста как подключить эти формы, что бы они отправлялись с помощью встроенных в движок средств отправки писем. На эл. адрес администратора магазина указанный в настройках магазина.

  44. oleg, я пользуюсь html формами по типу приведенной в статье. Для того чтобы настраивать формы с админки Вам нужно купить готовый модуль. На официальном сайте опенкарт видел похожий.

  45. Арсений, это уже нужно прикручивать модуль «Быстрый заказ». Они имеют этот функционал.

  46. Здравствуйте.
    Было бы хорошо если бы выложили скрин как в итоге выглядит кнопка (и где) и при нажатии всплывающее окно как выглядит!
    Спасибо.

  47. Здравствуйте!!! Скажите а как вместо слов » заказать звонок » вставить картинку?

  48. Сори… Прочитал пост. Теперь вопрос в другом как пишется ссылка на картину)))

  49. Доброго времени суток!

    Хочу выразить отдельное спасибо автору! Спасибо Сергей!
    У меня возник следующий вопрос, как подкорректировать данную форму, чтобы осталось только одно поле, и в формате +7(___)___-__-__ и кнопка «отправить»

    все остальное нужно убрать, в том числе и капчу.

    P.S: сам все убрал, внешне вроде все работает… но после того как убрал капчу, письма перестали приходить на почту… как грамотно подправить все?

  50. Спасибо!

  51. Спасибо Сергей Все работает поставил за 15 минут!

  52. Добрый день!
    Спасибо Вам за простое решение!
    Но у меня проблема с работой данной формы: когда нажимаю отправить меня перекидывает вот на этот сайт:
    Заявка не приходит на почту.
    Все делал, как Вы описали!
    Не подскажите как это исправить?

  53. Сергей, вопрос разрешился, исправил в options.php название сайта, а вот footer.tpl нет, поэтому не работало! Еще раз большое спасибо!

  54. Добрый день, как устранить проблему, обратная связь встала, все хорошо, но есть такая незадача, если её закрыть ни чего не указывая, и когда она перебрасывается на главную страницу выводиться такая штука в командной строке «http://power-profi.ru/#» , как убрать «/#» ?

  55. Артем, для того чтобы убрать каптчу, нужно еще подправить файл options.php. Как прикрутить маску к форме постараюсь написать об этом отдельную заметку.

  56. Спасибо за форму!

    Не получается подключить правда. Opencart 2.0.1.1. Тема default
    По какой-то причине не открывается модальное окно. Форма отображается в footer.tpl, хотя должна вызываться по клику. Хочу разместить в шаблоне product_tpl. Была проблема с открытием ссылки /#overlay(открывалась главная/#overlay), но вроде как решил через $currenturl.
    Буду благодарен, если укажите на ошибку мне.

  57. Очень хорошая штука. Автору респект и уважуха! Всё работает красиво и ровно! Кто будет ставить себе на сайт , убирайте Н2 заголовок это не очень сказывается на индексировании, если у вас конечно тематика сайта не связана с обратными звонками.

  58. Добрый день! Вопрос уже поднимался, но все же. При нажатии на кнопку » обратный звонок» в место букв видны ромбики со знаком вопроса. Лечение в виде смены кодировки не помогает ни как. Перепробовал все. Подскажите куда копать, вообще с footer.tpl что то не понятное после добавления кода кнопки яндекс метрика, сама кнопка не отображается и яндекс ее тоже не видит. Думал проблема в хосте, тех. поддержка морозится. Заранее благодарю.

  59. Огромное спасибо!!! Ты реально помог!!!

  60. Здравствуйте, подскажите пж как сделать что бы после отправки сообщение об успешной отправке открывалось на этой же странице

  61. Здравствуйте почитал ваши статьи очень интересно. У меня такой вопрос скажите как можно вывести надпись товар в наличии или под заказ рядом с ценой на карточке товара в категориях, и при изменении статуса товара (в наличии или под заказ) что бы менялось автоматом из админики. Опенкарт 2.1.0.1. Спасибо за ранее за ответ.

  62. Спасибо огромное автору, контактная форма для опенкарт работает отлично. Задавали вопрос в комментариях как убрать капчу в файле опшион в строке
    «if (isset($fio) && isset($email) && isset($ask) && isset($pr))»
    удаляем && isset($pr) после чего должен быть такой вид:
    if (isset($fio) && isset($email) && isset($ask))

  63. Установил. Всё работает. Спасибо. Но есть вопрос. Фон всплывающего окна прозрачный. Невозможно разобрать текст. Прошк помочь.

  64. Извините ! а как переименовать на украинский язык ? Спасибо

  65. Здравствуйте, подскажите как реализовать это так что бы при нажатии на кнопку отправить не перебрасывало на файл option.php а действия проходило в том же окне.
    То есть если ошибка то она выскакивает на нужном месте(Вы не правильно ввели числа с картинки…)
    А так решение рабочее!

  66. А как сделать отправку на два ящика? как прописать адреса, через запятую? или не канает на 2 ящика?

  67. Всё отлично, вот только не понятно как пустить мыло через SMTP…

  68. Сергей, судя по вашим ответам на комментарии, у Вас железное терпение! ))) Нижайший поклон.

  69. Если почта доменная можно с нее сделать редирект на несколько ящиков.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *