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

[glGizma]

Таких чудо обратных звонков много, но задача стояла написать свой. За основу была взята трубка из 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]

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

  Показати вміст

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

[glGizma]

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

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

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

			return true;
		},

[Akatyi]

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

[SpyderMC]

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

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

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

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

 

Сайт: shop.sevidom.com

[SpyderMC]

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

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]

  В 03.02.2016 в 10:18, SpyderMC сказав:

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

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

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

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

 

Сайт: shop.sevidom.com

 

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

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

[su4efilo]

  В 01.03.2016 в 07:05, glGizma сказав:

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

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

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

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

[Azazello77]

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

 

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

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

[glGizma]

  В 17.03.2016 в 16:46, su4efilo сказав:

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

 

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

[glGizma]

  В 17.03.2016 в 16:46, su4efilo сказав:

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

 

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

[pokryshkin]

  В 28.02.2016 в 20:02, SpyderMC сказав:

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

Expand  

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

[SofTeam]

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

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

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

[zdevl]

  В 30.03.2016 в 17:44, glGizma сказав:

 

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

Expand  

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

[zdevl]

  В 13.06.2017 в 17:59, zdevl сказав:

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

Expand  

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

[dhnfgg]

  В 21.01.2016 в 11:42, glGizma сказав:

 

Expand  

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

 

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

[dhnfgg]

  В 22.01.2016 в 03:25, glGizma сказав:

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

Expand  

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

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

[Andgul]

  В 21.01.2016 в 12:23, Akatyi сказав:

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

  Показати вміст

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

Expand  

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

Код для header.tpl

<!-- 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 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>
 <!-- end запрет латиницы -->

<!-- запрет букв для телефона -->
    <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>
<!-- end запрет букв для телефона -->

<!-- end call -->

 

Изменённый код файла 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.05.2018 в 06:01, Andgul сказав:

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

Код для header.tpl

<!-- 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 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>
 <!-- end запрет латиницы -->

<!-- запрет букв для телефона -->
    <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>
<!-- end запрет букв для телефона -->

<!-- end call -->

 

Изменённый код файла 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

 

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

Expand  

Исправил в файле 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]

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

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

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