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


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


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

#1 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 22 Июль 2015 - 19:38

Здравствуйте. Понимаю, что вопрос довольно не новый и уже всем порядком надоел, но всё-же.
Подскажите, как сделать кнопку "Заказать обратный звонок" для темы Нефрит. Все топики форума, которые могли бы помочь относятся к разным темам (Весна, сияние, пластик и т.д.). После попытки применить описываемые там приёмы к теме Нефрит не получил никакого результата: либо нет нужного кода, либо получается жуткая ересь. Так всё-же, есть ли нормальная инструкция (без сторонних сайтов, капчи или перенаправления на связь с администрацией) по установке кнопки в теме Нефрит? Заранее спасибо за ответ. B)

#2 Vaccina

Vaccina

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

  • Модераторы
  • 23 665 сообщений

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

Галереи тем Весна и нефрит одинаковы, поэтому вам подойдет следующая инструкция:
http://forum.storela...-шаблона-весна/

Только в шаблоне HTML в необходимом для вывода надписи месте вместо:

Цитата

В шаблоне HTML находим
<span class="sup_phone"></span>
Заменяем на

<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/...y_body=1"><span class="sup_phone"></span></a>


вставьте просто:
<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Заказать обратный звонок</a>


#3 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 23 Июль 2015 - 04:42

Спасибо, сделал. Всё работает, но нельзя ли воплотить это в виде иконки в шапке магазина, при нажатии на которую появлялась бы всплывающая форма для заполнения?

#4 Vaccina

Vaccina

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

  • Модераторы
  • 23 665 сообщений

Отправлено 23 Июль 2015 - 05:15

Вместо надписи "Заказать обратный звонок" используйте:
<img src="ссылка на картинку" alt="" />


#5 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 23 Июль 2015 - 15:18

Спасибо. И ещё один вопросик: на данный момент "обратный звонок" находится в подвале сайта (артель54.рф). Как сделать так, чтобы он был в шапке сайта, примерно в районе логотипа?

#6 Vaccina

Vaccina

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

  • Модераторы
  • 23 665 сообщений

Отправлено 24 Июль 2015 - 02:25

Может лучше реализовать по аналогии с поиском в шапке сайта(установить иконку и при клике на нее будет всплывать форма), так как форма сама по себе крупноватая и расширит тем самым всю шапку сайта?

#7 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 24 Июль 2015 - 04:07

Хороший вариант. и как тогда поднять её вверх?)

#8 Vaccina

Vaccina

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

  • Модераторы
  • 23 665 сообщений

Отправлено 24 Июль 2015 - 05:59

В шаблоне HTML найдите:
<!-- Иконка поиска -->
					  <div class="search-header hidden-600">
						<a href="#" title="Поиск по магазину">
						  <span class="icon-magnifier"></span>
						</a>
					  </div>

после него вставьте:
<!-- Иконка заказа -->
					  <div class="zakaz-header hidden-600">
						<a href="#">
						  <span>Заказать звонок</span>
						</a>
					  </div>
далее найдите:
<!-- Поиск при нажатии -->
				<div class="search-active col-sm-10 col-md-10">
				  <a href="#" class="close"><span>Закрыть</span>×</a>
					<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
					  <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину..." maxlength="128"/>
					  <button type="submit" title="Искать" class="button search-submit">
						<span class="icon-magnifier"></span>
					  </button>
					</form>
				</div>
после него вставьте:
<!-- Заказ при нажатии -->
				<div class="zakaz-active col-sm-10 col-md-10">
				  <a href="#" class="close"><span>Закрыть</span>×</a>
				   <form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
				<input type="hidden" name="hash" value="{HASH}" />
				<input class="callbackredirect" type="hidden" name="return_to" />
				<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
				{ANTISPAM_CODE}
				<div>
				  <input class="form-control callback_person required" id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" placeholder="Представьтесь, пожалуйста" maxlength="50"/>
				</div>
				<div>
				  <input class="form-control callback_phone required" id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Введите номер телефона" maxlength="50"/>
				</div>
				{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="submit">Отправить</button>{% ENDIF %}
			  </form>
				</div>
далее в main.js найдите:
$('.search-header > a').click(function(event){
  event.preventDefault();
	$('.btn-group').removeClass('open');
	$('.search-active').fadeIn().addClass('open');
  });
 
  $('.phone-active .close, .search-active .close').click(function(event){
event.preventDefault();
	$(this).parent().fadeOut().removeClass('open');
  });
замените на:
$('.search-header > a').click(function(event){
  event.preventDefault();
	$('.btn-group').removeClass('open');
	$('.search-active').fadeIn().addClass('open');
  });
  $('.zakaz-header > a').click(function(event){
  event.preventDefault();
	$('.btn-group').removeClass('open');
	$('.zakaz-active').fadeIn().addClass('open');
  });
 
  $('.phone-active .close, .search-active .close, .zakaz-active .close').click(function(event){
event.preventDefault();
	$(this).parent().fadeOut().removeClass('open');
  });

далее в main.css найдите:
.phone-active, .search-active {bottom: 0;display: none;margin: 18px 0;overflow: hidden;position: absolute !important;right: 0;top: 0;z-index: 920;}
.phone-active .close, .search-active .close{float: right;font-size: 26px;margin: 24px 0 0 5px;}
.phone-active .close span, .search-active .close span {line-height: 18px;margin-right: 5px;margin-top: 0;text-transform: uppercase;}


замените на:
.phone-active, .search-active, .zakaz-active {bottom: 0;display: none;margin: 18px 0;overflow: hidden;position: absolute !important;right: 0;top: 0;z-index: 920;}
.phone-active .close, .search-active .close, .zakaz-active .close{float: right;font-size: 26px;margin: 24px 0 0 5px;}

.phone-active .close span, .search-active .close span, .zakaz-active .close span {line-height: 18px;margin-right: 5px;margin-top: 0;text-transform: uppercase;}


далее найдите:
.search-active .search-submit:hover {opacity:1;}
.search-active .search-string {background: #ffffff;}

после него вставьте:
.zakaz-active, .search-active, .zakaz-active {bottom: 0;display: none;margin: 18px 0;overflow: hidden;position: absolute !important;right: 0;top: 0;z-index: 920;}
.zakaz-active .close, .search-active .close, .zakaz-active .close{float: right;font-size: 26px;margin: 24px 0 0 5px;}
.zakaz-active .close span, .search-active .close span, .zakaz-active .close span {line-height: 18px;margin-right: 5px;margin-top: 0;text-transform: uppercase;}
.zakaz-active {background: #fff;color: #ebebeb;font-size: 48px;line-height: 58px;}
.zakaz-active strong {color: #1e1e1e;letter-spacing: 1px;}
.zakaz-active .close:hover {opacity: 1;}
.zakaz-active .callbackForm > div, .zakaz-active .callbackForm > button {
  display: inline-block;
  vertical-align: middle;
}
.zakaz-active .callbackForm input {
  margin: 0;
}
.zakaz-active .callbackForm > button {
  padding: 10px;
}

и в шаблоне HTML удалите старую форму обратного звонка:
<!-- Обратный звнок -->
			<div class="col-xs-12 col-sm-6 col-md-3 widget callback">
			  <div class="footer-header">
				<h3 class="title">Обратный звонок</h3>
			  </div>
			  <form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
				<input type="hidden" name="hash" value="{HASH}" />
				<input class="callbackredirect" type="hidden" name="return_to" />
				<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
				{ANTISPAM_CODE}
				<div>
				  <input class="form-control callback_person required" id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" placeholder="Представьтесь, пожалуйста" maxlength="50"/>
				</div>
				<div>
				  <input class="form-control callback_phone required" id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Введите номер телефона" maxlength="50"/>
				</div>
				{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="submit">Отправить</button>{% ENDIF %}
			  </form>
			</div>
			<!-- END Обратный звнок -->


#9 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 24 Июль 2015 - 16:54

Сделал, кнопка получилась между иконками: сравнения, поиск (сверху) и корзина, телефон (снизу)

#10 Vaccina

Vaccina

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

  • Модераторы
  • 23 665 сообщений

Отправлено 25 Июль 2015 - 02:04

В main.css найдите:
.phone-header a, .search-header a, .compare-header a {display: block;height: 23px;padding-top: 7px;width: 100%;text-decoration:none;overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transition: all .3s linear;transition: all .3s linear;-webkit-transform: translateZ(0px);}
.phone-header a:hover, .search-header a:hover, .compare-header a:hover {opacity: .5;filter: alpha(opacity=50);-webkit-transition: all .3s linear;transition: all .3s linear;text-decoration:none;}
замените на:
.phone-header a, .search-header a, .compare-header a, .zakaz-header a {display: block;height: 23px;padding-top: 7px;width: 100%;text-decoration:none;overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transition: all .3s linear;transition: all .3s linear;-webkit-transform: translateZ(0px);}
.phone-header a:hover, .search-header a:hover, .compare-header a:hover, .zakaz-header a:hover {opacity: .5;filter: alpha(opacity=50);-webkit-transition: all .3s linear;transition: all .3s linear;text-decoration:none;}

далее найдите(2мя строками выше):
.phone-header, .search-header, .compare-header {border-right: 1px solid #ccc;color: #1e1e1e;display: inline-block;height: 30px;margin: 8px 0;position: relative;text-align: center;vertical-align: top;width: 30px;}
замените на:
.phone-header, .search-header, .compare-header, .zakaz-header {border-right: 1px solid #ccc;color: #1e1e1e;display: inline-block;height: 30px;margin: 8px 0;position: relative;text-align: center;vertical-align: top;width: 30px;}
.zakaz-header {
  padding: 0 7px 0 3px;
  width: auto;
}


#11 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 27 Июль 2015 - 04:45

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

#12 Firefly

Firefly

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

  • Модераторы
  • 3 738 сообщений

Отправлено 27 Июль 2015 - 09:44

Просмотр сообщенияvencedor (27 Июль 2015 - 04:45) писал:

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

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.header .primary .navbar .nav {width:745px;}

Замените на:
.header .primary .navbar .nav {width: 635px;}

Найдите код:
.header .primary .navbar .nav {width:553px;}

Замените на:
.header .primary .navbar .nav {width: 445px;}


#13 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 27 Июль 2015 - 18:03

Всё, спасибо. Просто замечательно получилось!
Я так понял, что кнопка обратного звонка действует только для пк, а для мобильной/планшетной версии её не будет?

#14 Cupuyc

Cupuyc

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

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

Отправлено 27 Июль 2015 - 19:00

Просмотр сообщенияvencedor (27 Июль 2015 - 18:03) писал:

Всё, спасибо. Просто замечательно получилось!
Я так понял, что кнопка обратного звонка действует только для пк, а для мобильной/планшетной версии её не будет?

Здравствуйте, данная кнопка отображается и работает корректно при разрешении устройства более 600 пикселей по ширине(проверено на платформе Android).

#15 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 28 Июль 2015 - 04:32

А на меньшем экране не отображается( Это возможно сделать или на это нужно время?

#16 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 01 Август 2015 - 08:57

Подскажите, пожалуйста. Вставил кнопку "обратного звонка", но не могу выровнять её на уровень с другими иконками. В каком блоке это изменяется?
/* Телефон и Поиск */? или другом?

#17 vencedor

vencedor

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений
  • ГородНовосибирск

Отправлено 03 Август 2015 - 18:39

Кхе-кхе...

#18 Firefly

Firefly

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

  • Модераторы
  • 3 738 сообщений

Отправлено 03 Август 2015 - 19:12

Просмотр сообщенияvencedor (01 Август 2015 - 08:57) писал:

Подскажите, пожалуйста. Вставил кнопку "обратного звонка", но не могу выровнять её на уровень с другими иконками. В каком блоке это изменяется?
/* Телефон и Поиск */? или другом?

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.zakaz-header { padding: -30 7px 0 3px; width: auto;}

Замените на:
.zakaz-header {width: auto; padding: 0px 5px 0 5px;}

Найдите код:
.phone-header a, .search-header a, .compare-header a, .zakaz-header a {display: block;height: 23px;padding-top: 7px;width: 100%;text-decoration:none;overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transition: all .3s linear;transition: all .3s linear;-webkit-transform: translateZ(0px);}

Замените на:
.phone-header a, .search-header a, .compare-header a {display: block;height: 23px;padding-top: 7px;width: 100%;text-decoration:none;overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transition: all .3s linear;transition: all .3s linear;-webkit-transform: translateZ(0px);}
.zakaz-header a {display: block;height: 23px;margin-top: -10px;width: 100%;text-decoration:none;overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transition: all .3s linear;transition: all .3s linear;-webkit-transform: translateZ(0px);}


#19 kaminir

kaminir

    Новичок

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

Отправлено 01 Август 2016 - 22:07

Просмотр сообщенияVaccina (23 Июль 2015 - 03:33) писал:


вставьте просто:
<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Заказать обратный звонок</a>

Пытаюсь указанным в этой теме образом в шаблоне Нефрит заменить функцию "Быстрый заказ" на "Обратный звонок" в карточке товара.

Слетает стиль кнопки. Остается простая текстовая ссылка.
Либо если делаю с сохранением стиля через onclick - тогда форма открывается в новом окне, а скрипт всплывающего окна не срабатывает.

Помогите пожалуйста.

#20 kaminir

kaminir

    Новичок

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

Отправлено 04 Август 2016 - 16:19

решил вопрос сам




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

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