Обратный звонок (callback)

glGizma · 21 січня 2016

Таких чудо обратных звонков много, но задача стояла написать свой. За основу была взята трубка из callbackhunter.

Настройка:

1) Залить папку call в корень сайта.

2) В файле catalog/view/theme/{ваша тема}/template/common/header.tpl добавить до </head>:

<!-- call --><script type="text/javascript" src="call/modal.js"></script><link rel="stylesheet" type="text/css" href="call/modal.css"/><div id="kmacb-form" class="modal"><div class="modal-block"><div class="icon-close"></div><div class="title">Вызов замерщика</div><div class="content"><div class="padding"><img src="catalog/call/1.png" /><form method="post" action="call/send.php"><input type="text" placeholder="Имя" name="txtname" value="" required /><input type="text" placeholder="Телефон" name="txtmessage" value="" required /><input class="linkButton" type="submit" value="Вызвать" name="submit" /></form></div></div></div></div><!-- end call -->

3) В файле "send.php" нужно добавить эл.адрес.

DEMO

Скачать: call.zip

Змінено 21 січня 2016 користувачем glGizma

Akatyi · 21 січня 2016

Не плохо, но ещё хорошо бы прилепить маску, что бы в поле телефон нельзя было писать текст..

хотя у самого сейчас тоже нет подобной макси.. :-) когда стояла маска телефоны приходили в виде +7 (921) 111 - 11 - 11 как то так примерно.. в общем приводило в более читабельный вид.. нежели +79211111111

glGizma · 22 січня 2016

Ты имеешь ввиду:

		validatephone: function (phone) {
			var at = phone.lastIndexOf("@");

			if (!/^[0-9]{5,12}$/.test(phone))
				return false;

			return true;
		},

Akatyi · 22 січня 2016

Да, что то вроде того )

SpyderMC · 3 лютого 2016

К сожалению код для валидации не подошел, сделал с помощью паттерна.

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

К сожалению навыков программирования пока не хватает.

P.S. ссылки не убирал с индекс страниц.

Сайт: shop.sevidom.com

SpyderMC · 28 лютого 2016

Подключил этот скрипт

http://digitalbush.com/projects/masked-input-plugin/

id поля поменял на phone, а name оставил стандартный.

Так же сделал проверку паттерном html5.

И поправил файл send.php

В header.tpl вывел так:

<script src="call/maskedinput.js"></script>
<script type="text/javascript">
   jQuery(function($){
   $("#phone").mask("(999)999-9999");
   });
</script>
<!-- call --><script type="text/javascript" src="call/modal.js"></script><link rel="stylesheet" type="text/css" href="call/modal.css"/><div id="kmacb-form" class="modal"><div class="modal-block"><div class="icon-close"></div><div class="title">Перезвонить Вам в течении пары минут?</div>
<div class="content"><div class="padding"><form method="post" action="call/send.php">
<p style="text-align:center"><input type="text" name="txtmessage" id="phone" placeholder="Ваш номер?"  pattern="\([0-9]{3}\)[0-9]{3}\-[0-9]{4}" value="" required /></p><p style="text-align:center"><input class="linkButton" type="submit" value="ПЕРЕЗВОНИТЕ" name="submit" /></p></form></div></div></div></div><!-- end call -->

Надеюсь кому то поможет.

Так же правил Css что б трубка не такая настырная была.

Работает здесь: Shop.sevidom.com

Автору спасибо!

P.S. Остался вопрос как лучше организовать что б не выкидывало на лист чистый "Сообщение отправлено" А например в том модальном окне, запрос отправлен и всё..

Змінено 28 лютого 2016 користувачем SpyderMC

glGizma · 1 березня 2016

К сожалению код для валидации не подошел, сделал с помощью паттерна.

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

К сожалению навыков программирования пока не хватает.

P.S. ссылки не убирал с индекс страниц.

Сайт: shop.sevidom.com

http://dnl-sib.ru/1.rar

Качай, настраивай на сайт, наслаждайся ... Пример на сайте, как работает: http://dnl-sib.ru

su4efilo · 17 березня 2016

http://dnl-sib.ru/1.rar

Качай, настраивай на сайт, наслаждайся ... Пример на сайте, как работает: http://dnl-sib.ru

Как скачать то? если требуется имя пользователя и пароль по ссылке которую вы любезно разместили ?

Змінено 17 березня 2016 користувачем su4efilo

Azazello77 · 25 березня 2016

не в тему, но подскажите, почему на джумле не запустилось?) (про самый первый пост)

ведь никакой привязки к опенкарту нет...

Змінено 25 березня 2016 користувачем Azazello77

glGizma · 30 березня 2016

Как скачать то? если требуется имя пользователя и пароль по ссылке которую вы любезно разместили ?

Я поднял облачный сервер, ссылка больше не работает.

glGizma · 30 березня 2016

Как скачать то? если требуется имя пользователя и пароль по ссылке которую вы любезно разместили ?

лови: http://glGizma.ru/1.rar

pokryshkin · 26 лютого 2017

В 28.02.2016 в 22:02, SpyderMC сказал:

P.S. Остался вопрос как лучше организовать что б не выкидывало на лист чистый "Сообщение отправлено" А например в том модальном окне, запрос отправлен и всё..

Вопрос решился?

SofTeam · 5 травня 2017

Спасибо за модуль!

Может кто-то доработал, что бы не выкидывало на чистый лист "Сообщение отправлено" ?

Заранее спасибо!

zdevl · 13 червня 2017

В 30.03.2016 в 20:44, glGizma сказал:

лови: http://glGizma.ru/1.rar

А подключать также как и из первого поста?

zdevl · 14 червня 2017

14 часов назад, zdevl сказал:

А подключать также как и из первого поста?

Сорри, не сразу дошло, что в первый пост тоже Ваш

dhnfgg · 27 жовтня 2017

В 21.01.2016 в 14:42, glGizma сказал:

здравствуйте)

Змінено 27 жовтня 2017 користувачем dhnfgg

dhnfgg · 27 жовтня 2017

В 22.01.2016 в 06:25, glGizma сказал:

validatephone: function (phone) { var at = phone.lastIndexOf("@"); if (!/^[0-9]{5,12}$/.test(phone)) return false; return true; },

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

куда нужно добавить этот скрипт и что еще нужно сделать?

Andgul · 25 травня 2018

В 21.01.2016 в 15:23, Akatyi сказал:

Не плохо, но ещё хорошо бы прилепить маску, что бы в поле телефон нельзя было писать текст..

Показать контент

хотя у самого сейчас тоже нет подобной макси.. когда стояла маска телефоны приходили в виде +7 (921) 111 - 11 - 11 как то так примерно.. в общем приводило в более читабельный вид.. нежели +79211111111

Кому ещё актуально валидация (брал за основу Скачать: call.zip), просто копируете в header.tpl перед </head> код ниже. Собрал в инете в кучу скрипты (сразу скажу - я не программист), но работает:

Код для header.tpl

<script type="text/javascript" src="call/modal.js">
</script><link rel="stylesheet" type="text/css" href="call/modal.css"/>
<div id="kmacb-form" class="modal"><div class="modal-block">
<div class="icon-close"></div>
<div class="title">Перезвонить Вам в течении пары минут?</div>
<div class="content"><div class="padding">
<form method="post" action="call/send.php">
<p style="text-align:center">
<input id="cyr" type="text" maxlength="12" minlength="3" placeholder="Имя на русском" name="txtname" value="" required />
<p style="text-align:center">
<input type="text" name="txtmessage" id="tel" placeholder="Ваш номер" value="" required /></p>
<p style="text-align:center">
<input class="linkButton" type="submit" value="ПЕРЕЗВОНИТЕ"
name="submit" /></p></form></div></div></div></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
jQuery(function($) {
$('#cyr').on('keypress', function() {
var that = this;
setTimeout(function() {
var res = /[^А-Яа-яЁё]/g.exec(that.value);
that.value = that.value.replace(res, '');
}, 0);
});
});
})
</script>

<script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select()
}
}

Изменённый код файла send.php (скопируйте код ниже с заменой оригинального кода в файле send.php). Не будет в спам приходить.

код файла send.php

<?php if(!$_POST) exit;
$to    = 'вашаккаунт@mail.ru'; #почта куда придёт запрос - ваша почта
   $name   = $_POST['txtname'];
   $email = 'вашмагазин-callback'; #для почтовой службы - откуда отправлено письмо, что бы не было БЕЗ АДРЕСАТА
$comment = $_POST['txtmessage'];
   if(get_magic_quotes_gpc()) { $comment = stripslashes($comment); }
   $subject = 'Посетитель, ' . $name . ', запросил обратный звонок.'; #текст темы сообщения
   $msg = "$name, просит перезвонить на телефон: $comment\n "; #текст сообщения
   $msg .= "Телефон: $comment\r\n\n"; #текст сообщения
   $msg .= "-------------------------------------\r\n"; #текст сообщения
   $msg .= "Запрос обратного звонка с сайта ВАШСАЙТ.РУ \r\n"; #текст сообщения
   if(@mail($to, $subject, $msg, "From: $email\r\nReturn-Path: $email\r\n"))
   { echo "<span class='success-msg'>Сообщение отправлено. Нажмите <НАЗАД> для возврата на страницу сайта</span>";} else { echo "<span class='error-msg'>Сообщение не отправлено.</span>"; } ?>

Ещё раз СПАСИБО автору темы glGizma

Вот только ещё не смог сделать что бы после отправки появлялась не страница "Сообщение отправлено", а модальное окно "Сообщение отправлено" и пропадало оставляя пользователя страницу на которой он был

Змінено 25 травня 2018 користувачем Andgul
Добавил инфо

Andgul · 25 травня 2018

1 час назад, Andgul сказал:

Кому ещё актуально валидация (брал за основу Скачать: call.zip), просто копируете в header.tpl перед </head> код ниже. Собрал в инете в кучу скрипты (сразу скажу - я не программист), но работает:

Код для header.tpl


<script type="text/javascript" src="call/modal.js">
</script><link rel="stylesheet" type="text/css" href="call/modal.css"/>
<div id="kmacb-form" class="modal"><div class="modal-block">
<div class="icon-close"></div>
<div class="title">Перезвонить Вам в течении пары минут?</div>
<div class="content"><div class="padding">
<form method="post" action="call/send.php">
<p style="text-align:center">
<input id="cyr" type="text" maxlength="12" minlength="3" placeholder="Имя на русском" name="txtname" value="" required />
<p style="text-align:center">
<input type="text" name="txtmessage" id="tel" placeholder="Ваш номер" value="" required /></p>
<p style="text-align:center">
<input class="linkButton" type="submit" value="ПЕРЕЗВОНИТЕ"
name="submit" /></p></form></div></div></div></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
jQuery(function($) {
$('#cyr').on('keypress', function() {
var that = this;
setTimeout(function() {
var res = /[^А-Яа-яЁё]/g.exec(that.value);
that.value = that.value.replace(res, '');
}, 0);
});
});
})
</script>



<script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select()
}
}

function mask(event) {
var matrix = "+7 (___) ___ ____",
i = 0,
def = matrix.replace(/\D/g, ""),
val = this.value.replace(/\D/g, "");
if (def.length >= val.length) val = def;
this.value = matrix.replace(/./g, function(a) {
return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
});
if (event.type == "blur") {
if (this.value.length == 2) this.value = ""
} else setCursorPosition(this.value.length, this)
};
var input = document.querySelector("#tel");
input.addEventListener("input", mask, false);
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
});
</script>




Изменённый код файла send.php (скопируйте код ниже с заменой оригинального кода в файле send.php). Не будет в спам приходить.

код файла send.php

<?php if(!$_POST) exit;
$to    = 'вашаккаунт@mail.ru'; #почта куда придёт запрос - ваша почта
   $name   = $_POST['txtname'];
   $email = 'вашмагазин-callback'; #для почтовой службы - откуда отправлено письмо, что бы не было БЕЗ АДРЕСАТА
$comment = $_POST['txtmessage'];
   if(get_magic_quotes_gpc()) { $comment = stripslashes($comment); }
   $subject = 'Посетитель, ' . $name . ', запросил обратный звонок.'; #текст темы сообщения
   $msg = "$name, просит перезвонить на телефон: $comment\n "; #текст сообщения
   $msg .= "Телефон: $comment\r\n\n"; #текст сообщения
   $msg .= "-------------------------------------\r\n"; #текст сообщения
   $msg .= "Запрос обратного звонка с сайта ВАШСАЙТ.РУ \r\n"; #текст сообщения
   if(@mail($to, $subject, $msg, "From: $email\r\nReturn-Path: $email\r\n"))
   { echo "<span class='success-msg'>Сообщение отправлено. Нажмите <НАЗАД> для возврата на страницу сайта</span>";} else { echo "<span class='error-msg'>Сообщение не отправлено.</span>"; } ?>

Ещё раз СПАСИБО автору темы glGizma

Вот только ещё не смог сделать что бы после отправки появлялась не страница "Сообщение отправлено", а модальное окно "Сообщение отправлено" и пропадало оставляя пользователя страницу на которой он был

Исправил в файле send.php и сделал так:

заменил:

echo "<span class='success-msg'>Сообщение отправлено. Нажмите <НАЗАД> для возврата на страницу сайта</span>";} else { echo "<span class='error-msg'>Сообщение не отправлено.</span>";

на:

echo '<center><p class="success">СПАСИБО<br/>ЗАПРОС НА ОБРАТНЫЙ ЗВОНОК ОТПРАВЛЕН!</p></center>';
echo "<script type='text/javascript'>
window.history.go(-1) = function(){ alert('');}
</script>";

Всё вместе в файле callmy.rar

Нет предела совершенства - мне пока так хватит.

callmy.rar

Змінено 25 травня 2018 користувачем Andgul
замена файла

alehteam1 · 14 червня 2018

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

И как сделать что бы он автоматически через определенное время выводил окно где вводить номер телефона и имя?

Помогите пожалуйста, буду должен...

Вхід

Обратный звонок (callback)

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information