Отключен JavaScript

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

Кнопкаобратный Звонок

Автор Paparam, 19 нояб. 2017 18:06

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

Авторизуйтесь для ответа в теме

Сообщений в теме: 12

#1 Paparam

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

Пользователи
118 сообщений

Отправлено 19 Ноябрь 2017 - 18:06

Здравствуйте!

Подскажите, пожалуйста:

1) Необходимо создать кнопку обратного звонка на сайте (указал примерно как должно выглядеть во вложении).

2) Во всплывающем окне сделать поле для заполнения "представьтесь пожалуйста" не обязательны тоесть запрашивать только номер телефона.

3)После нажатия на кнопку "отправить" появляется надпись "В ближайшее время с Вами свяжется наш сотрудник!"

Аккаунт SL-421285.

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

Наверх

#2 Stasya

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

Модератоpы
4 007 сообщений

Отправлено 24 Ноябрь 2017 - 14:22

Paparam (19 Ноябрь 2017 - 18:06) писал:

Здравствуйте. В любой форме поле ФИО обязательно для заполнения. В данном случае мы можем заполнять его каким-нибудь текстом, например Гость, и скрывать от пользователя.

Наверх

#3 Paparam

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

Пользователи
118 сообщений

Отправлено 24 Ноябрь 2017 - 14:24

Stasya (24 Ноябрь 2017 - 14:22) писал:

Если можно : "Представьтесь пожалуйста"

Наверх

#4 Stasya

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

Модератоpы
4 007 сообщений

Отправлено 29 Ноябрь 2017 - 17:18

Paparam (24 Ноябрь 2017 - 14:24) писал:

Если можно : "Представьтесь пожалуйста"

Здравствуйте. Простите за длительное ожидание ответа. В шаблоне HTML найдите код

<div class="login">
			  <ul>
				<li><a href="{USER_LOGIN_URL}">Вход</a></li>
				<li><a href="{USER_REGISTER_URL}">Регистрация</a></li>
			  </ul>
			</div>
			{% ENDIF %}

и сразу после него добавьте блок

<a href="#" class="orderCallHeader">Обратный звонок</a>
			<div class="fancyform" style="display:none;">
			  <h2>Заказать обратный звонок</h2>
			  <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 style="display:none;">
					<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="Представьтесь, пожалуйста" 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="right">
					{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
				  </div>
				</div>
			  </form>
			</div>

Затем в конец файла main.css добавьте код

.orderCallHeader{
	display: block;
	clear: both;
	background: #fff;
	width: 130px;
	margin: 0 auto;
	padding: 5px;
}

В конец файла man.js добавьте код

$(function(){
  $('.orderCallHeader').click(function(){
	var formFancy = $('.fancyform').html();
	console.log($('.fancyform').html())
	$.fancybox({
	   content : formFancy
   });
   return false;
  })
})

Наверх

#5 Paparam

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

Пользователи
118 сообщений

Отправлено 29 Ноябрь 2017 - 17:44

Stasya (29 Ноябрь 2017 - 17:18) писал:

Здравствуйте. Простите за длительное ожидание ответа. В шаблоне HTML найдите код

<div class="login">
			 <ul>
			 <li><a href="{USER_LOGIN_URL}">Вход</a></li>
			 <li><a href="{USER_REGISTER_URL}">Регистрация</a></li>
			 </ul>
		 </div>
		 {% ENDIF %}

и сразу после него добавьте блок

<a href="#" class="orderCallHeader">Обратный звонок</a>
		 <div class="fancyform" style="display:none;">
			 <h2>Заказать обратный звонок</h2>
			 <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 style="display:none;">
				 <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="Представьтесь, пожалуйста" 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="right">
				 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
				 </div>
			 </div>
			 </form>
		 </div>

Затем в конец файла main.css добавьте код

.orderCallHeader{
display: block;
clear: both;
background: #fff;
width: 130px;
margin: 0 auto;
padding: 5px;
}

В конец файла man.js добавьте код

$(function(){
$('.orderCallHeader').click(function(){
var formFancy = $('.fancyform').html();
console.log($('.fancyform').html())
$.fancybox({
	 content : formFancy
});
return false;
})
})

Спасибо! Кнопочка работает.
Единственное хотелось бы применить маленькие изменения. Во вложении.
Также хотелось бы сделать такую же кнопку в подвале сайта.
Спасибо!

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

Наверх

#6 Paparam

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

Пользователи
118 сообщений

Отправлено 08 Январь 2018 - 14:39

аууу

Наверх

#7 Stasya

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

Модератоpы
4 007 сообщений

Отправлено 16 Январь 2018 - 14:28

Paparam (29 Ноябрь 2017 - 17:44) писал:

Здравствуйте. Простите за длительное ожидание ответа.
1) В конец файла main.css добавьте код

.fancybox-wrap .right button.button {
	background: #22b14c;
}

2) Уточните, пожалуйста, необходимо кнопку в подвале "покрасить" зеленым цветом или сделать кнопку вызова формы как в шапке, а саму форму скрыть?
3) В файле main.css найдите код

.orderCallHeader{
		display: block;
		clear: both;
		background: #fff;
		width: 130px;
		margin: 0 auto;
		padding: 5px;
}

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

.orderCallHeader{
		display: block;
		clear: both;
		width: 180px;
		margin: 45px auto;
		padding: 5px;
		background: #22b14c;
		color: #fff;
		border: 4px solid #fff;
		font-size: 23px;
}

Наверх

#8 Paparam

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

Пользователи
118 сообщений

Отправлено 16 Январь 2018 - 14:31

Stasya (16 Январь 2018 - 14:28) писал:

Здравствуйте. Простите за длительное ожидание ответа.
1) В конец файла main.css добавьте код

.fancybox-wrap .right button.button {
background: #22b14c;
}

.orderCallHeader{
	 display: block;
	 clear: both;
	 background: #fff;
	 width: 130px;
	 margin: 0 auto;
	 padding: 5px;
}

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

.orderCallHeader{
	 display: block;
	 clear: both;
	 width: 180px;
	 margin: 45px auto;
	 padding: 5px;
	 background: #22b14c;
	 color: #fff;
	 border: 4px solid #fff;
	 font-size: 23px;
}

В ответ на второй пункт, сделать кнопку как в шапке, зеленым цветом.

Наверх

#9 Vaccina

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

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

Отправлено 17 Январь 2018 - 05:25

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.indexfeedb_button button{border:1px solid #ddd;padding:5px 15px; cursor:pointer;background:white;color:#666;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;}

замените на:

.indexfeedb_button button{border: 4px solid #fff;font-size: 23px;font-weight: bold;padding:5px 15px; cursor:pointer;background: #22b14c;color:#fff;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;}

Наверх

#10 Paparam

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

Пользователи
118 сообщений

Отправлено 17 Январь 2018 - 09:05

Vaccina (17 Январь 2018 - 05:25) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.indexfeedb_button button{border:1px solid #ddd;padding:5px 15px; cursor:pointer;background:white;color:#666;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;}

замените на:

.indexfeedb_button button{border: 4px solid #fff;font-size: 23px;font-weight: bold;padding:5px 15px; cursor:pointer;background: #22b14c;color:#fff;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;}

Здравствуйте! Произвел измененея, окрасилась только кнопка отправить, хотелось бы сделать как в шапке, просто одна кнопка Обратный звонок.

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

Наверх

#11 Paparam

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

Пользователи
118 сообщений

Отправлено 08 Февраль 2018 - 10:07

Stasya (29 Ноябрь 2017 - 17:18) писал:

Здравствуйте. Простите за длительное ожидание ответа. В шаблоне HTML найдите код

<div class="login">
			 <ul>
			 <li><a href="{USER_LOGIN_URL}">Вход</a></li>
			 <li><a href="{USER_REGISTER_URL}">Регистрация</a></li>
			 </ul>
		 </div>
		 {% ENDIF %}

и сразу после него добавьте блок

<a href="#" class="orderCallHeader">Обратный звонок</a>
		 <div class="fancyform" style="display:none;">
			 <h2>Заказать обратный звонок</h2>
			 <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 style="display:none;">
				 <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="Представьтесь, пожалуйста" 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="right">
				 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
				 </div>
			 </div>
			 </form>
		 </div>

Затем в конец файла main.css добавьте код

.orderCallHeader{
display: block;
clear: both;
background: #fff;
width: 130px;
margin: 0 auto;
padding: 5px;
}

В конец файла man.js добавьте код

$(function(){
$('.orderCallHeader').click(function(){
var formFancy = $('.fancyform').html();
console.log($('.fancyform').html())
$.fancybox({
	 content : formFancy
});
return false;
})
})

Здравствуйте еще раз! Столкнулся с проблемой, сделанная кнопка обратного звонка не показывается в мобильной версии сайта.

Наверх

#12 Vaccina

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

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

Отправлено 01 Июнь 2018 - 06:11

Здравствуйте.

Простите за ожидание. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.container .row2{display:block;position:static;height:180px;}

замените на:

.container .row2{display:block;position:static;height:280px;}

Наверх

#13 Paparam

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

Пользователи
118 сообщений

Отправлено 01 Июнь 2018 - 09:56

Vaccina (01 Июнь 2018 - 06:11) писал:

Здравствуйте.

Простите за ожидание. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.container .row2{display:block;position:static;height:180px;}

замените на:

.container .row2{display:block;position:static;height:280px;}

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

Наверх

Обратно в Изменение общей стилистики

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

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Страница товара → Добавить В Карточку Товара Автор Гость_magiya1984_* , 12 янв. 2015 об, ратный звонок и 1 еще...	4 Ответов 1 010 Просмотров	magiya1984 13 янв. 2015
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Изменение общей стилистики → Обратный Звонок Автор Гость_Zagadaika_* , 06 окт. 2014 об, ратныйзвонок	6 Ответов 1 389 Просмотров	Zagadaika 10 окт. 2014
Вопросы работы сервиса StoreLand → Дизайн → Вопросы общие для всех шаблонов → Страница товара → Нет Такого Товара Автор Гость_Константин1111_* , 23 авг. 2014 нет такого товара, об и 1 еще...	Популярная тема 16 Ответов 5 727 Просмотров	Константин1111 26 авг. 2014
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Радость → Главная → Добавление Обратного Звонка Автор Гость_janjak_* , 19 авг. 2014 об, ратный звонок 1 2 3	Популярная тема 42 Ответов 8 926 Просмотров	Татьяна777 09 мая 2016
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Сияние → Изменение общей стилистики → Логотип Автор Гость_Vladislav_* , 26 окт. 2013 Логотипб, изменение, об, ласть	Популярная тема 10 Ответов 1 330 Просмотров	Stasya 04 нояб. 2013

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

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

Кнопкаобратный Звонок

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

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

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

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

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

Войти

Google поиск