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


Заказать Обратный Звонок В Шапке Как В Лазури

Автор Дмитрий Шумский, 12 июня 2016 14:42

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

#1 Дмитрий Шумский

Дмитрий Шумский

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

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

Отправлено 12 Июнь 2016 - 14:42

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

Подскажите пожалуйста, как реализовать следующее.

Поставить ссылку под контактной информацией в шапке сайта, как на картинке

4.jpg

При нажатии на неё, чтобы выскакивало окошко, как в шаблоне Лазурь

5.jpg

А далее при заполнении приходило письмо с заявкой на обратный звонок.

Спасибо!

#2 MikDark

MikDark

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

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

Отправлено 12 Июнь 2016 - 14:59

Просмотр сообщенияДмитрий Шумский (12 Июнь 2016 - 14:42) писал:

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

Подскажите пожалуйста, как реализовать следующее.

Поставить ссылку под контактной информацией в шапке сайта, как на картинке

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

При нажатии на неё, чтобы выскакивало окошко, как в шаблоне Лазурь

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

А далее при заполнении приходило письмо с заявкой на обратный звонок.

Спасибо!

Здравствуйте. Уточните, для какого аккаунта нужны изменения?

#3 Дмитрий Шумский

Дмитрий Шумский

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

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

Отправлено 13 Июнь 2016 - 15:58

Просмотр сообщенияMikDark (12 Июнь 2016 - 14:59) писал:

Здравствуйте. Уточните, для какого аккаунта нужны изменения?

Аккаунт SL-357668

_____________________________________________________________________________________________________

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

Аккаунт SL-357668

Подскажите пожалуйста, как реализовать следующее.

Поставить ссылку под контактной информацией в шапке сайта, как на картинке

Изображение

При нажатии на неё, чтобы выскакивало окошко, как в шаблоне Лазурь

Изображение

А далее при заполнении приходило письмо с заявкой на обратный звонок.

Спасибо!

#4 MikDark

MikDark

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

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

Отправлено 13 Июнь 2016 - 17:25

Просмотр сообщенияДмитрий Шумский (13 Июнь 2016 - 15:58) писал:

Аккаунт SL-357668

_____________________________________________________________________________________________________

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

Аккаунт SL-357668

Подскажите пожалуйста, как реализовать следующее.

Поставить ссылку под контактной информацией в шапке сайта, как на картинке

Изображение

При нажатии на неё, чтобы выскакивало окошко, как в шаблоне Лазурь

Изображение

А далее при заполнении приходило письмо с заявкой на обратный звонок.

Спасибо!

Для начала нам необходимо загрузить шаблон "Обратный звонок" (callme.zip)

Из архива файл callback.html загружаем в раздел Сайт - Редактор шаблонов

1) В шаблоне HTML находим код:
<script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom.version2.min.js"></script>

и заменяем его на:
<link rel="stylesheet" href="{FORALL_STYLES_PATH}fancybox/jquery.fancybox-1.3.4.min.css" type="text/css" />
<script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom_fancybox-1.3.4.version2.min.js"></script>

Далее в этом же шаблоне добавляем перед </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>

Далее в шаблоне HTML найдите код:
<!-- Время работы магазина -->
			 {% IF SETTINGS_STORE_WORK_TIME %}
				 <tr>
				 <td class="contentTableHeadMainWorkTime">
					 {SETTINGS_STORE_WORK_TIME}
				 </td>
				 </tr>
			 {% ENDIF %}



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

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

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

#5 Gerti

Gerti

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

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

Отправлено 26 Июль 2016 - 08:58

Установила обратный звонок, но не очень почему то получилось красивым всплывающее окошко, посмотрите может я не туда установила вот это и из за этого все криво...
<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>

#6 Stasya

Stasya

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

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

Отправлено 26 Июль 2016 - 13:06

Просмотр сообщенияGerti (26 Июль 2016 - 08:58) писал:

Установила обратный звонок, но не очень почему то получилось красивым всплывающее окошко, посмотрите может я не туда установила вот это и из за этого все криво...
<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>

Скажите, пожалуйста, для какого аккаунта Вы производили эти изменения?

#7 Gerti

Gerti

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

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

Отправлено 26 Июль 2016 - 13:07

Просмотр сообщенияStasya (26 Июль 2016 - 13:06) писал:

Скажите, пожалуйста, для какого аккаунта Вы производили эти изменения?
Аккаунт SL-390809

#8 Danil

Danil

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

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

Отправлено 26 Июль 2016 - 18:44

Просмотр сообщенияGerti (26 Июль 2016 - 13:07) писал:

Аккаунт SL-390809
Здравствуйте.
Стили в всплывающем окне, настраиваются вручную.
Чтобы сделать отступы между полями в конец main.css добавьте 
div#fancybox-content table.form td {
	padding: 5px;
	font-size: 15px;
	vertical-align: middle;
}
Пришлите скриншот, с обозначенными изменениями.

#9 Gerti

Gerti

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

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

Отправлено 26 Июль 2016 - 18:49

Изображение
Хотелось бы подобную табличку

#10 Danil

Danil

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

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

Отправлено 26 Июль 2016 - 19:25

Просмотр сообщенияGerti (26 Июль 2016 - 18:49) писал:

Изображение
Хотелось бы подобную табличку
Весь код шаблона Обратный звонок замените на
<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><input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required" placeholder="Представьтесь пожалуйста"/></td>
</tr>
<tr>
<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"placeholder="Введите номер телефона"/></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>
</div>
В main.css найдите
div#fancybox-content table.form td {
	 padding: 5px;
	 font-size: 15px;
	 vertical-align: middle;
}
и замените на
div#fancybox-wrap {
width: 300px !important;
right: 0 !Important;
left: 0 !important;
margin: 0 auto;
}
div#fancybox-wrap #fancybox-content {
width: 280px !important;
}
div#fancybox-wrap .right {
float: none !important;
display: block !important;
text-align: center !important;
}
div#fancybox-wrap input {
width: 200px;
padding: 0px 15px;
font-size: 12px;
margin: 0 0 10px 0;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
border: 1px solid #e9e9e9;
background: #FFF;
height: 30px;
}
div#fancybox-wrap h1 {
line-height: 30px;
text-transform: none;
font-size: 21px;
text-align: center;
}
div#fancybox-wrap table.form {
text-align: center;
width: 100%;
}
div#fancybox-wrap .right button.button {
font-size: 16px;
text-transform: none;
padding: 6px 20px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
color: #666666;
border: 1px solid #e9e9e9;
background: #FFF;
cursor: pointer;
}

#11 Gerti

Gerti

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

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

Отправлено 26 Июль 2016 - 19:56

Просмотр сообщенияDanil (26 Июль 2016 - 19:25) писал:

Весь код шаблона Обратный звонок замените на
<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><input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required" placeholder="Представьтесь пожалуйста"/></td>
</tr>
<tr>
<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"placeholder="Введите номер телефона"/></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>
</div>
В main.css найдите
div#fancybox-content table.form td {
	 padding: 5px;
	 font-size: 15px;
	 vertical-align: middle;
}
и замените на
div#fancybox-wrap {
width: 300px !important;
right: 0 !Important;
left: 0 !important;
margin: 0 auto;
}
div#fancybox-wrap #fancybox-content {
width: 280px !important;
}
div#fancybox-wrap .right {
float: none !important;
display: block !important;
text-align: center !important;
}
div#fancybox-wrap input {
width: 200px;
padding: 0px 15px;
font-size: 12px;
margin: 0 0 10px 0;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
border: 1px solid #e9e9e9;
background: #FFF;
height: 30px;
}
div#fancybox-wrap h1 {
line-height: 30px;
text-transform: none;
font-size: 21px;
text-align: center;
}
div#fancybox-wrap table.form {
text-align: center;
width: 100%;
}
div#fancybox-wrap .right button.button {
font-size: 16px;
text-transform: none;
padding: 6px 20px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
color: #666666;
border: 1px solid #e9e9e9;
background: #FFF;
cursor: pointer;
}
Спасибо большое)) :)
Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Сияние
  5. → Изменение общей стилистики
  6. Privacy Policy