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

[Дима Шумский]

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

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



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



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



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



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



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

Спасибо!

[MikDark]

Дима Шумский (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>

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

[Дима Шумский]

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



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



Как дальше?

[MikDark]

Дима Шумский (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К   216 Количество загрузок:

[Дима Шумский]

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




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

Спасибо!

[MikDark]

Дима Шумский (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 поменяйте на нужный цвет при наведении кнопки. Что касается смены надписи, это более сложный код, если он не критически необходим, советуем обойтись без него.

[Дима Шумский]

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

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


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


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

[Firefly]

Дима Шумский (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).

[Дима Шумский]

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

sl-335085

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


Спасибо!

[Firefly]

Дима Шумский (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>

[Damba]

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

[Firefly]

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

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

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