Обратный Звонок
#1
Отправлено 22 Июль 2015 - 19:38
Подскажите, как сделать кнопку "Заказать обратный звонок" для темы Нефрит. Все топики форума, которые могли бы помочь относятся к разным темам (Весна, сияние, пластик и т.д.). После попытки применить описываемые там приёмы к теме Нефрит не получил никакого результата: либо нет нужного кода, либо получается жуткая ересь. Так всё-же, есть ли нормальная инструкция (без сторонних сайтов, капчи или перенаправления на связь с администрацией) по установке кнопки в теме Нефрит? Заранее спасибо за ответ.
#2
Отправлено 23 Июль 2015 - 03:33
http://forum.storela...-шаблона-весна/
Только в шаблоне 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
Отправлено 23 Июль 2015 - 04:42
#4
Отправлено 23 Июль 2015 - 05:15
<img src="ссылка на картинку" alt="" />
#5
Отправлено 23 Июль 2015 - 15:18
#6
Отправлено 24 Июль 2015 - 02:25
#7
Отправлено 24 Июль 2015 - 04:07
#8
Отправлено 24 Июль 2015 - 05:59
<!-- Иконка поиска --> <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
Отправлено 24 Июль 2015 - 16:54
#10
Отправлено 25 Июль 2015 - 02:04
.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
Отправлено 27 Июль 2015 - 04:45
#12
Отправлено 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
Отправлено 27 Июль 2015 - 18:03
Я так понял, что кнопка обратного звонка действует только для пк, а для мобильной/планшетной версии её не будет?
#14
Отправлено 27 Июль 2015 - 19:00
vencedor (27 Июль 2015 - 18:03) писал:
Я так понял, что кнопка обратного звонка действует только для пк, а для мобильной/планшетной версии её не будет?
Здравствуйте, данная кнопка отображается и работает корректно при разрешении устройства более 600 пикселей по ширине(проверено на платформе Android).
#15
Отправлено 28 Июль 2015 - 04:32
#16
Отправлено 01 Август 2015 - 08:57
/* Телефон и Поиск */? или другом?
#17
Отправлено 03 Август 2015 - 18:39
#18
Отправлено 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
Отправлено 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
Отправлено 04 Август 2016 - 16:19
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных