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


Добавление Обратного Звонка

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

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

#1 janjak

janjak

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

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

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

Напишите, пожалуйста, инструкцию по добавлению функции "обратного звонка" для шаблона Радость
и как вставить саму кнопку в указанное место?

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

  • 12.png


#2 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

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

Просмотр сообщенияjanjak (19 Август 2014 - 12:24) писал:

Напишите, пожалуйста, инструкцию по добавлению функции "обратного звонка" для шаблона Радость
и как вставить саму кнопку в указанное место?
Здравствуйте.
Для начала нам необходимо загрузить шаблон "Обратный звонок" (callme.zip)

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

В шаблоне HTML Вставляем после
<div class="bottommain over clr">
	 <div class="headleft fleft txtalgncnt fmlptn fnt16 ">
		 <ul>
			 <li class="title"><a href="http://{NET_DOMAIN}/feedback"><span>Связаться</span> с Нами</a></li>
			 {% IF SETTINGS_STORE_ICQ %}<li class="headerIcq"><img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" />{SETTINGS_STORE_ICQ}</li>{% ENDIF %}
			 <li class="skype">{% IF SETTINGS_STORE_SKYPE %}<span>Skype:&nbsp;</span><a href="skype:{SETTINGS_STORE_SKYPE}">{SETTINGS_STORE_SKYPE}</a>{% ENDIF %}</li>
			 <li class="phone">
									 <span class="phoneNum">
										 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<a class="tel1" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}{SETTINGS_STORE_PHONE_CITY_CODE1}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}</a>{%ENDIF%}
										 {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<a class="tel2" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}"><span class="telColor">&nbsp;|&nbsp;</span>{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</a>{%ENDIF%}
										 {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<a class="tel3" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}"><span class="telColor">&nbsp;|&nbsp;</span>{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</a>{%ENDIF%}
									 </span>

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

Вставляем данный код перед </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>

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

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


#3 janjak

janjak

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

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

Отправлено 19 Август 2014 - 15:35

Спасибо!
1) как изменить размер шрифта самой надписи "обратный звонок"?
при этом не меняя размер шрифта "связаться с нами" и размер номера телефона
2) и как сместить надпись под телефон, чтобы она получилась в одну строчку под телефоном?

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

  • 12.png


#4 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 19 Август 2014 - 15:39

Просмотр сообщенияjanjak (19 Август 2014 - 15:35) писал:

Спасибо!
1) как изменить размер шрифта самой надписи "обратный звонок"?
при этом не меняя размер шрифта "связаться с нами" и размер номера телефона
2) и как сместить надпись под телефон, чтобы она получилась в одну строчку под телефоном?

В main.css добавьте:
a.callback.fancybox.ajax {
font-size:16px;
}

где 16px - это размер шрифта.

2) Изменения произвели.

#5 janjak

janjak

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

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

Отправлено 19 Август 2014 - 15:57

Просмотр сообщенияMikDark (19 Август 2014 - 15:39) писал:

2) Изменения произвели.
Убрал адрес и "обратный звонок" перескочил к телефону, исправьте пожалуйста снова

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

  • 12.png


#6 Danil

Danil

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

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

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

Просмотр сообщенияjanjak (19 Август 2014 - 15:57) писал:

Убрал адрес и "обратный звонок" перескочил к телефону, исправьте пожалуйста снова

Здравствуйте.
В шаблоне html найдите код
<span class="phoneNum">
										  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<a class="tel1" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}{SETTINGS_STORE_PHONE_CITY_CODE1}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}</a>{%ENDIF%}
										  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<a class="tel2" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}"><span class="telColor">&nbsp;|&nbsp;</span>{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</a>{%ENDIF%}
										  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<a class="tel3" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}"><span class="telColor">&nbsp;|&nbsp;</span>{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</a>{%ENDIF%}
										</span>
После него добавьте
<br>


#7 janjak

janjak

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

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

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

Здравствуйте!
Спасибо!
А можно вместо текста "обратный звонок" вставить вот такую кнопку с этим же функционалом?

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

  • callback3.png


#8 Castiel

Castiel

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

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

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

Просмотр сообщенияjanjak (19 Август 2014 - 16:19) писал:

Здравствуйте!
Спасибо!
А можно вместо текста "обратный звонок" вставить вот такую кнопку с этим же функционалом?

Попробуйте такой вариант
Находим
<a class="callback fancybox.ajax" href="http://avnsport.ru/callback?only_body=1">Заказать обратный звонок</a>
Заменяем на
<a class="callback fancybox.ajax" href="http://avnsport.ru/callback?only_body=1"><img src="ссылка на новую картинку"></a>


#9 janjak

janjak

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

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

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

Просмотр сообщенияCastiel (19 Август 2014 - 16:24) писал:

Попробуйте такой вариант
Находим
<a class="callback fancybox.ajax" href="http://avnsport.ru/callback?only_body=1">Заказать обратный звонок</a>
Заменяем на
<a class="callback fancybox.ajax" href="http://avnsport.ru/callback?only_body=1"><img src="ссылка на новую картинку"></a>
Что-то пошло не так.. вместо картинки просто значок, что делать?

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

  • 12.png


#10 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

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

Просмотр сообщенияjanjak (19 Август 2014 - 16:33) писал:

Что-то пошло не так.. вместо картинки просто значок, что делать?

У Вас просто прописано название картинки, а нужно ссылку на нее.

#11 janjak

janjak

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

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

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

Просмотр сообщенияMikDark (19 Август 2014 - 16:36) писал:

У Вас просто прописано название картинки, а нужно ссылку на нее.

Всё получилось! А как кнопку немного ниже сдвинуть?

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

  • 12.png


#12 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

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

Просмотр сообщенияjanjak (19 Август 2014 - 16:44) писал:

Всё получилось! А как кнопку немного ниже сдвинуть?
В mail.css допишите
.callback img {
display: block;
margin-top: 5px;
margin-left: 65px;
}


#13 janjak

janjak

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

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

Отправлено 19 Август 2014 - 17:22

Просмотр сообщенияbatta (19 Август 2014 - 16:54) писал:

В mail.css допишите
.callback img {
display: block;
margin-top: 5px;
margin-left: 65px;
}
Супер!
Подскажите, как изменить саму форму отправки данных?
много лишних полей

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

  • 12.png


#14 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 19 Август 2014 - 17:28

Просмотр сообщенияjanjak (19 Август 2014 - 17:22) писал:

Супер!
Подскажите, как изменить саму форму отправки данных?
много лишних полей
изменения производятся в шаблоне "обратный звонок"
Удаляйте не нужные поля
Например:
		<tr>
		  <td><label for="coupon_code">Код купона на скидку</label></td>
		  <td><input id="coupon_code" type="text" name="form[coupon_code]" value="{FORM_COUPON_CODE}" maxlength="255" class="input-text"/></td>
		</tr>


#15 janjak

janjak

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

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

Отправлено 19 Август 2014 - 18:14

Просмотр сообщенияbatta (19 Август 2014 - 17:28) писал:

изменения производятся в шаблоне "обратный звонок"
Удаляйте не нужные поля
Например:
	 <tr>
		 <td><label for="coupon_code">Код купона на скидку</label></td>
		 <td><input id="coupon_code" type="text" name="form[coupon_code]" value="{FORM_COUPON_CODE}" maxlength="255" class="input-text"/></td>
	 </tr>
А как можно сделать следующее:
1) Убрать красную окантовку и сделать эти две надписи жирными?
2) Предлог "По" перенести под "С"?
3) "Перейти на главную" поместить по центру окна?

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

  • 12.png


#16 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 19 Август 2014 - 18:36

Просмотр сообщенияjanjak (19 Август 2014 - 18:14) писал:

А как можно сделать следующее:
1) Убрать красную окантовку и сделать эти две надписи жирными?
2) Предлог "По" перенести под "С"?
3) "Перейти на главную" поместить по центру окна?
1)
В main.css
.required {
border: 1px solid red;
}
изменить на
.required {
/* border: 1px solid red; */
font-size: 12px;
font-weight: bold;
}
2)
в шаблоне HTML
<div class="box">
<div class="content">
{% IF FORM_NOTICE %}
	 <div class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}warning{% ENDIF %}">{FORM_NOTICE | nl2br}</div>
{% ENDIF %}
<h1>Заказ обратного звонка</h1>
	 <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>
		 <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="{FORM_CALLBACK_PERSON}" 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>
					 <tr>
		 <td><label for="callback_convenient_hour_from">Удобное время звонка</label></td>
		 <td>
		 С: <input id="callback_convenient_hour_from" type="text" name="form[callback_convenient_hour_from]" value="{FORM_CALLBACK_CONVENIENT_HOUR_FROM}" maxlength="255" class="input-text"/>
По: <input id="callback_convenient_hour_to" type="text" name="form[callback_convenient_hour_to]" value="{FORM_CALLBACK_CONVENIENT_HOUR_TO}" maxlength="255" class="input-text"/>
		 </td>
	 </tr>
			 </table>
	 <div class="buttons">
	 <div class="left">
		 <p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p>
	 </div>
	 <div class="right">
		 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
	 </div>
	 </div>
</form>
</div>
</div>
изменить на
<div class="box">
<div class="content">
{% IF FORM_NOTICE %}
	 <div class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}warning{% ENDIF %}">{FORM_NOTICE | nl2br}</div>
{% ENDIF %}
<h1>Заказ обратного звонка</h1>
	 <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>
		 <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="{FORM_CALLBACK_PERSON}" 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>
					 <tr>
		 <td><label for="callback_convenient_hour_from">Удобное время звонка</label></td>
		 <td>
		 С: <input id="callback_convenient_hour_from" type="text" name="form[callback_convenient_hour_from]" value="{FORM_CALLBACK_CONVENIENT_HOUR_FROM}" maxlength="255" class="input-text"/>
		 <br> По: </br><input id="callback_convenient_hour_to" type="text" name="form[callback_convenient_hour_to]" value="{FORM_CALLBACK_CONVENIENT_HOUR_TO}" maxlength="255" class="input-text"/>
		 </td>
	 </tr>
			 </table>
	 <div class="buttons">
	 <div class="left">
		 <p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p>
	 </div>
	 <div class="right">
		 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
	 </div>
	 </div>
</form>
</div>
</div>

3)
Добавьте в main.css
p.back-link {
text-align: center;
}


#17 janjak

janjak

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

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

Отправлено 20 Август 2014 - 10:02

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

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

  • 12.png


#18 Castiel

Castiel

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

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

Отправлено 20 Август 2014 - 10:20

Просмотр сообщенияjanjak (20 Август 2014 - 10:02) писал:

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

Обновите шаблон Обратный звонок
Скрытый текст


#19 janjak

janjak

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

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

Отправлено 20 Август 2014 - 10:48

Супер! Спасибо!

#20 Samron

Samron

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

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

Отправлено 11 Ноябрь 2014 - 12:19

У меня вопрос. Скажите пожалуйста как сделать с этого скрипта вот такое:

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

  • 21.png






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

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

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