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



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

#1 Дима Шумский

Дима Шумский

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

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

Отправлено 06 Май 2015 - 16:12

Доброе время суток!

Аккаунт SL-335085. Помогите пожалуйста, реализовать такую идею:

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

1.Установить кнопку "обратный звонок", как указано на картине. Причём, чтобы при наведении на иконку, она меняла цвет и надпись на "мы перезвоним!". Примерно так:

обратный звонок1.png

2.Далее при нажатии на иконку идёт некое затемнение экрана вылезает следующая форма:

обратный звонок3.png

3. В этой форме необходимо заполнить поля "Представьтесь, пожалуйста" и "Введите номер телефона"

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

4. При наведении на кнопку отправить тот же фокус, что и в 1 пункте

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

5. Далее всё так же, как при стандартной заявке на обратный звонок.

Спасибо!

#2 MikDark

MikDark

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

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

Отправлено 06 Май 2015 - 18:07

 Дима Шумский (06 Май 2015 - 16:12) писал:

Доброе время суток!

Аккаунт SL-335085. Помогите пожалуйста, реализовать такую идею:

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

1.Установить кнопку "обратный звонок", как указано на картине. Причём, чтобы при наведении на иконку, она меняла цвет и надпись на "мы перезвоним!". Примерно так:

обратный звонок1.png

2.Далее при нажатии на иконку идёт некое затемнение экрана вылезает следующая форма:

обратный звонок3.png

3. В этой форме необходимо заполнить поля "Представьтесь, пожалуйста" и "Введите номер телефона"

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

4. При наведении на кнопку отправить тот же фокус, что и в 1 пункте

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

5. Далее всё так же, как при стандартной заявке на обратный звонок.

Спасибо!

Здравствуйте.
1) Вам нужно загрузить файл из приложенного архива в раздел Сайт - Редактор шаблонов
2) В шаблон HTML перед тегом </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>

3) В шаблоне HTML найдите код:
				  </div>
				  <!-- /END Выпадающая корзина-->
				</div>
				<!-- /END Корзина -->

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

После этого если все будет работать, то поможем Вам стилизовать кнопку.

#3 Дима Шумский

Дима Шумский

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

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

Отправлено 06 Май 2015 - 18:25

Хорошо. Не вижу архива. На данный момент получилось так:

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

И при нажатии соответственно вот:

обратный звонок6.png

Как дальше?

#4 MikDark

MikDark

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

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

Отправлено 06 Май 2015 - 18:54

 Дима Шумский (06 Май 2015 - 18:25) писал:

Хорошо. Не вижу архива. На данный момент получилось так:

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

И при нажатии соответственно вот:

обратный звонок6.png

Как дальше?

Архив приложил.

Далее в шаблон main.css Добавьте код:
a.callback {
display: block;
clear: both;
padding: 15px 18px 15px 50px;
background: #A53232;
color: #fff;
}

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

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


#5 Дима Шумский

Дима Шумский

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

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

Отправлено 06 Май 2015 - 19:13

Отлично. Теперь вот как:

обратный звонок7.png
обратный звонок8.png

Кнопка "отправить" пока что не работает. Что дальше делать? :)

Спасибо!

#6 MikDark

MikDark

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

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

Отправлено 06 Май 2015 - 19:25

 Дима Шумский (06 Май 2015 - 19:13) писал:

Отлично. Теперь вот как:

обратный звонок7.png
обратный звонок8.png

Кнопка "отправить" пока что не работает. Что дальше делать? :)

Спасибо!

Если форму заполнить - она отправится.
Далее в main.css находим:
.spotlight-wrap .spotlight3 .callbackForm input {border: 1px solid #8d8d8d;height: 45px;width: 100%;float: left;padding: 0 0 0 10px;margin-bottom:15px;}
.spotlight-wrap .spotlight3 .callbackForm button {width: 100%;height: 45px;background-repeat: no-repeat;background-color: #8d8d8d;color:#fff;cursor:pointer;font-size: 140%;font-family: 'Open Sans Condensed', sans-serif;font-weight: 300;}
.spotlight-wrap .spotlight3 .callbackForm button:hover {background-color: #228b22;}

и меняем на:

.callbackForm input {border: 1px solid #8d8d8d;height: 45px;width: 100%;float: left;padding: 0 0 0 10px;margin-bottom:15px;}
.callbackForm button {width: 100%;height: 45px;background-repeat: no-repeat;background-color: #8d8d8d;color:#fff;cursor:pointer;font-size: 140%;font-family: 'Open Sans Condensed', sans-serif;font-weight: 300;}
.callbackForm button:hover {background-color: #228b22;}

ниже добавляем:
a.callback:hover {background:#000000;}

где значение background поменяйте на нужный цвет при наведении кнопки. Что касается смены надписи, это более сложный код, если он не критически необходим, советуем обойтись без него.

#7 Дима Шумский

Дима Шумский

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

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

Отправлено 07 Май 2015 - 16:38

Вышло очень даже неплохо. Только осталось несколько нюансов:

1. Как сделать между корзиной и обратным вызовом белый промежуток и как поменять размер шрифта надписи "Обратный звонок"
обратный звонок11.png

2.Как изменить надпись "Заказать обратный звонок", и где находятся настройки этой формы? Скажем, поменять цвета шрифтов, увеличить уменьшить и всячески поэкспериментировать.
обратный звонок12.png

3.По поводу смены надписи заинтриговали. Этот более сложный код может пагубно повлиять на работу сайта?

#8 Firefly

Firefly

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

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

Отправлено 07 Май 2015 - 17:15

 Дима Шумский (07 Май 2015 - 16:38) писал:

Вышло очень даже неплохо. Только осталось несколько нюансов:

1. Как сделать между корзиной и обратным вызовом белый промежуток и как поменять размер шрифта надписи "Обратный звонок"
обратный звонок11.png

2.Как изменить надпись "Заказать обратный звонок", и где находятся настройки этой формы? Скажем, поменять цвета шрифтов, увеличить уменьшить и всячески поэкспериментировать.
обратный звонок12.png

1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
a.callback {display: block;clear: both;padding: 18px 18px 15px 50px;background: #A53232;color: #fff;}

Замените на:
a.callback {display: block;clear: both;padding: 18px 18px 15px 35px;background: #A53232;color: #fff;margin-top: 55px;margin-left: 1px; margin-top: 54px;font-size: 16px;}

2. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Обратный звонок и найдите код:
<h1>Заказ обратного звонка</h1>

Замените на:
<h1 style="font-size: 40px;padding-bottom: 30px;color:#000;">Заказ обратного звонка</h1>
Здесь Вы можете изменить саму надпись, поменять размер шрифта(изменив значение 40px), изменить отступ от текста до формы, изменить цвет(меняя значение #000).

#9 Дима Шумский

Дима Шумский

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

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

Отправлено 28 Май 2015 - 19:28

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

sl-335085

Подскажите пожалуйста, как перетащить кнопку обратного звонка в указанное на картинке место
01.png

Спасибо!

#10 Firefly

Firefly

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

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

Отправлено 28 Май 2015 - 20:11

 Дима Шумский (28 Май 2015 - 19:28) писал:

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

sl-335085

Подскажите пожалуйста, как перетащить кнопку обратного звонка в указанное на картинке место
01.png

Спасибо!

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
a.callback {display: block;clear: both;padding: 8px 12px 6px 35px;background: #3C1B64;color: #fff;margin-top: 100px;margin-left: 0px; margin-top: 65px;font-size: 16px;}

Замените на:
a.callback {display: block;padding: 8px 12px 6px 12px;background: #3C1B64;color: #fff;margin-top: 15px;margin-left: 100px; font-size: 16px;float: right;}

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите и удалите код:
<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Обратный звонок</a>

Найдите код:
<ul class="top-navbar-links">
					  {% FOR menu %}
						{% FOR header %}
						  {% FOR links %}
							<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
						  {% ENDFOR %}
						{% ENDFOR %}
					  {% ENDFOR %}
					</ul>

Замените на:
<ul class="top-navbar-links">
					  {% FOR menu %}
						{% FOR header %}
						  {% FOR links %}
							<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
						  {% ENDFOR %}
						{% ENDFOR %}
					  {% ENDFOR %}
					</ul>
					<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Обратный звонок</a>


#11 Damba

Damba

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

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

Отправлено 26 Апрель 2018 - 20:07

не работает обратный звонок...пишет The requested content cannot be loaded.
Please try again later.

#12 Firefly

Firefly

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

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

Отправлено 29 Апрель 2018 - 15:46

 Damba (26 Апрель 2018 - 20:07) писал:

не работает обратный звонок...пишет The requested content cannot be loaded.
Please try again later.

Здравствуйте.
Поправил.





Темы с аналогичным тегами звонок, телефон, Обратный звонок, шапка, главная, контакты, обратная связь, помогите, дизайн, дополнительные функции

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

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