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


Обратный Звонок Для Шаблона Осень

Обратный звонок перезвони мне перезвонить Осень звонок

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

#1 Castiel

Castiel

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

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

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

Создаем форму обратного звонка при нажатии на иконку телефона.
Уведомления будут приходить в раздел Заказы - Заказы, На почту, а так же уведомления по СМС на номер администратора в магазине и на номер ICQ если в настройках он указан.

Для начала нам необходимо загрузить шаблон "Обратный звонок" (callback.zip)
Прикрепленный файл callback.zip 1,29К 243 Количество загрузок:

Далее нам необходимо указать при нажатии на какую кнопку выводить функцию с обратным звонком.
Сделаем на примере иконки телефона в шапке
В шаблоне HTML находим
<div id="header-right">
Перед ним вставляем
<div id="callback">
<a href="http://{NET_DOMAIN}/callback?only_body=1" class="callback fancybox.ajax">Обратный звонок</a>
</div>

Вставляем данный код перед </head>
<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

Далее добавляем стили в style.css
#callback {
float: left;
position: relative;
padding: 5px;
}
#callback a {
color: #FFF;
text-decoration: none;
font-size: 18px;
}


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

Прикрепленные файлы

  • Прикрепленный файл  callback.zip   1,29К   243 Количество загрузок:


#2 Vialex

Vialex

    Продвинутый пользователь

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

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

сделал как написано появилась полоса разделитель блоков, и ничего больше нет помогите!

#3 Ирина345

Ирина345

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

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

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

Просмотр сообщенияSL-227422 (14 Июль 2014 - 17:47) писал:

сделал как написано появилась полоса разделитель блоков, и ничего больше нет помогите!
ЗЗдравствуйте, просто кнопка белого цвета, для того чтобы поменять цвет найдите в style.css
#callback a {
color: #FFF;
text-decoration: none;
font-size: 18px;
}
замените на

#callback a {
color: #123456;
text-decoration: none;
font-size: 18px;
}
значение color: #123456; можно менять на требуемый цвет.
и что бы убрать полосу найдите в
#callback {
float: left;
position: relative;
padding: 5px;
}
замените на

#callback {
float: left;
position: absolute;
padding: 5px;
}


#4 Vialex

Vialex

    Продвинутый пользователь

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

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

Спасибо. все сделал, всё получилось. Подскажите пожалуйста,
1) а как мне переместить кнопку под телефоны?
2) можно ли сделать так, чтобы она не открывалось отдельным окном, а появлялось всплывающем окном? (как при "быстром заказе")

#5 Dars

Dars

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

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

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

Просмотр сообщенияSL-227422 (14 Июль 2014 - 18:13) писал:

Спасибо. все сделал, всё получилось. Подскажите пожалуйста, а как мне переместить кнопку под телефоны?
В шаблоне HTML найдите код:

<div id="callback">
	  <a href="http://{NET_DOMAIN}/callback?only_body=1" class="callback fancybox.ajax">Обратный звонок</a>
	  </div>

и переместите его под строку:

	  <img src="{ASSETS_IMAGES_PATH}phones.png" style="padding-top: 4px; margin-right: 50px;">	  </td>

Кнопка будет немного вылезать из-под шапки. Чтобы это исправить, немного выше найдите строку:

	<div style="padding-top:25px;">

и замените её на:

	<div style="padding-top:15px;">


#6 Vialex

Vialex

    Продвинутый пользователь

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

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

Спасибо DARS, разобрался. а как с этим
2) можно ли сделать так, чтобы она (обратный звонок) не открывалось отдельным окном, а появлялось всплывающем окном? (как при "быстром заказе")

#7 Castiel

Castiel

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

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

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

Просмотр сообщенияSL-227422 (14 Июль 2014 - 19:19) писал:

Спасибо DARS, разобрался. а как с этим
2) можно ли сделать так, чтобы она (обратный звонок) не открывалось отдельным окном, а появлялось всплывающем окном? (как при "быстром заказе")
В шаблоне "HTML"
Находим:
$(".callme").fancybox({

Заменяем на:
$(".callback").fancybox({


#8 Vialex

Vialex

    Продвинутый пользователь

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

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

Спасибо, Castiel! Заработала как надо.

#9 Vialex

Vialex

    Продвинутый пользователь

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

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

Добрый вечер! обнаружил, что в "форма обратного звонка" пропускает, если даже поля не заполнены. В редакторе шаблонов в шаблоне вроде прописано
                <label for="callback_person" class="required">Представьтесь пожалуйста<em>*</em></label>
                <div class="input-box">
                  <input id="callback_person" size="24" type="text" class="light" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required"/>
                </div>
              </div>
              <div class="field name-lastname">
                <label for="callback_phone" class="required">Телефон<em>*</em></label>

Форма пока находится на сайте находится внизу в левом углу. Чего еще не дописал?

#10 Сake

Сake

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

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

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

Ваша форма не проходит валидацию полей, так как необходимо событие не добавляется. Для добавления валидации попробуйте в шаблоне "HTML" найти следующий код

<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

и заменить его на

<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
afterShow: function() {
  $('.callbackForm').submit(function(){
	if($(this).valid()) {
	  SubmitButton = $(this).find('input:submit, button:submit');
	  if($(SubmitButton.get(0)).attr('disabled')) {
		return false;
	  }
	  SubmitButton.attr('disabled', true);
	  setTimeout('SubmitButton.attr("disabled", false);', 10000);
	}
  }).validate();
},
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>


#11 Vialex

Vialex

    Продвинутый пользователь

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

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

попробовал, все равно пропускает без заполнения полей ((

#12 Vialex

Vialex

    Продвинутый пользователь

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

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

помогите, хелп!

#13 Сake

Сake

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

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

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

Вероятно событие событие вызывается до появления элементов в окне. Попробуйте заменить в ранее добавленном коде текст

afterShow:

на следующий

afterLoad:

Если все же это не поможет, то можно попробовать установить задержку используя код (в замен имеющегося)

<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
afterShow: function() {
  setTimeout(function() {
	$('.callbackForm').submit(function(){
		if($(this).valid()) {
		  SubmitButton = $(this).find('input:submit, button:submit');
		  if($(SubmitButton.get(0)).attr('disabled')) {
				return false;
		  }
		  SubmitButton.attr('disabled', true);
		  setTimeout('SubmitButton.attr("disabled", false);', 10000);
		}
	}).validate();
  }, 1000);
},
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>


#14 Vialex

Vialex

    Продвинутый пользователь

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

Отправлено 17 Июль 2014 - 01:24

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

#15 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

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

Дополнительно можно добавить атрибут required непосредственно для самих полей. В вашем случае код примет вид

<label for="callback_person" class="required">Представьтесь пожалуйста<em>*</em></label>
				<div class="input-box">
				  <input id="callback_person" size="24" type="text" class="light" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required" required="required" />
				</div>
			  </div>
			  <div class="field name-lastname">
				<label for="callback_phone" class="required">Телефон<em>*</em></label>

Обратите внимание на атрибут required="required" - данный атрибут уже контролируется самим браузером.

#16 Vialex

Vialex

    Продвинутый пользователь

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

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

Заработала! Добавил еще required="required" и к телефону, получилось так:

<div class="customer-name">
<div class="field name-firstname">
<label for="callback_person" class="required">Представьтесь пожалуйста<em>*</em></label>
<div class="input-box">
<input id="callback_person" size="24" type="text" class="light" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]"
value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required" required="required" />
</div>
</div>

<div class="field name-lastname">
<label for="callback_phone" class="required">Телефон<em>*</em></label>
<div class="input-box">
<input id="callback_phone" size="24" type="text" class="light" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]"
value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required input-text" required="required" />
</div>
</div>
</div>

Спасибо всем за участие!
Теперь, когда не заполняя поля, нажимаем отправить, получаем вот что http://joxi.ru/P5nHU_3JTJB6DimGcqA

#17 velena168

velena168

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

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

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

Получилось, но
Во всплывающем окне - прокрутка, не видно кнопки ОТПРАВИТЬ.
Помогите, пожалуйста исправить.

Прикрепленные изображения

  • Снимок.JPG


#18 Сake

Сake

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

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

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

Вам необходимо в шаблоне "HTML" найти код

<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

и заменить в нем параметры

height : '70%',
maxHeight : 330,

установив в них допустимые для вас значения высоты окна.

#19 velena168

velena168

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

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

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

Просмотр сообщенияСake (21 Июль 2014 - 23:22) писал:

Вам необходимо в шаблоне "HTML" найти код

<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

и заменить в нем параметры

height : '70%',
maxHeight : 330,

установив в них допустимые для вас значения высоты окна.
Спасибо!

#20 Валерия

Валерия

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 102 сообщений

Отправлено 07 Сентябрь 2014 - 17:25

<div id="header-right">
Не нахожу такой код...





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

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

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