Создание Подсказок
#1
Отправлено 31 Август 2011 - 21:19
#2
Отправлено 31 Август 2011 - 21:33
#3
Отправлено 31 Август 2011 - 21:58
Vaccina (31 Август 2011 - 21:33) писал:
Не совсем то в этой теме. Смысл в том, чтобы на странице товара можно было разместить подсказки-напоминалки о способах оплаты и некоторых условиях, потому как многие только со страницы товара начинают искать по сайту эту информацию, что неудобно. Текст в них будет свой, т.е. не шаблонный, но одинаковый для всех товаров.
#4
Отправлено 01 Сентябрь 2011 - 22:53
http://www.1stwebdes...gins-webdesign/
или тут http://www.linkexcha...su/2008/31.html
и тут http://habrahabr.ru/...s/webdev/42997/
Для их установки вам понадобиться изменить необходимый шаблон - в данном случае "Товар". Шаблоны находятся в разделе редактора тем, так же файлы стилей main.css и javascript файл main.js
#5
Отправлено 02 Сентябрь 2011 - 07:37
#6
Отправлено 03 Сентябрь 2011 - 00:29
<td class="short"><img src="/img/icon/i.gif" alt="Что это" title="Что это?" onclick="help(this,'/help/settings/general_store_phone');"></td>
далее используется обычные стили
#help_div { background-color: #F1F9FF; border: 1px solid #5394C2; height: auto; left: 10px; padding: 5px; position: absolute; top: 10px; width: auto; z-index: 999; }
и div блок.
Логика работы такая же как и в предложенных ссылках выше. Думаю вам нужно установить один любой подобный тоолтип по ссылке выше, который открывается по надатию на ссылку или блок. А далее уже можно будет изменить стиль оформления на такой же как и странице администрирования.
#7
Отправлено 15 Март 2014 - 18:02
#8
Отправлено 15 Март 2014 - 18:04
dimabart (15 Март 2014 - 18:02) писал:
Надо смотреть конкретно применительно к шаблону. Пришлите SL номер аккаунта.
#10
Отправлено 15 Март 2014 - 18:48
dimabart (15 Март 2014 - 18:15) писал:
Создайте бэкап и попробуйте следующие изменения:
Шаблон HTML, дописываем между тегами <head></head>
<script> $( document ).ready(function() { $('#how').click(function(){ $( "#popup" ).show(); $('#how').click(function(){ $( "#popup" ).hide(); }); }); }); </script>
Шаблон Товар. Меняем это:
<!-- Если это первый элемент в списке ************************************************************************************************ --> <h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;"> <a title="перейти на страницу примерочной" href="http://artishka.ru/page/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80" target="_self">Как определить нужный размер</a> </h3>
на это
<!-- Если это первый элемент в списке ************************************************************************************************ --> <h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;"> <a title="перейти на страницу примерочной" href="http://artishka.ru/page/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80" target="_self">Как определить нужный размер</a> <br><div id="how">Как сделать заказ<div id="popup">Здесь описание, инструкция</div></div> </h3>
И в main.css дописываем:
#popup { display:none; border: 2px solid #000; min-width: 200px; padding: 5px; position: absolute; background: #ffffff; } #how { color:#0099CC; text-decoration: underline; }
Теперь на странице товара должна появиться строчка: Как сделать заказ. Если на нее кликнуть открывается небольшое окно, если кликнуть второй раз оно закрывается.
Осталось только продумать дизайн окна, ссылки, текст в окне. Набросайте макет как должно выглядеть, мы постараемся помочь.
#11
Отправлено 15 Март 2014 - 19:18
MikDark (15 Март 2014 - 18:48) писал:
Шаблон HTML, дописываем между тегами <head></head>
<script> $( document ).ready(function() { $('#how').click(function(){ $( "#popup" ).show(); $('#how').click(function(){ $( "#popup" ).hide(); }); }); }); </script>
Шаблон Товар. Меняем это:
<!-- Если это первый элемент в списке ************************************************************************************************ --> <h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;"> <a title="перейти на страницу примерочной" href="http://artishka.ru/page/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80" target="_self">Как определить нужный размер</a> </h3>
на это
<!-- Если это первый элемент в списке ************************************************************************************************ --> <h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;"> <a title="перейти на страницу примерочной" href="http://artishka.ru/page/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80" target="_self">Как определить нужный размер</a> <br><div id="how">Как сделать заказ<div id="popup">Здесь описание, инструкция</div></div> </h3>
И в main.css дописываем:
#popup { display:none; border: 2px solid #000; min-width: 200px; padding: 5px; position: absolute; background: #ffffff; } #how { color:#0099CC; text-decoration: underline; }
Теперь на странице товара должна появиться строчка: Как сделать заказ. Если на нее кликнуть открывается небольшое окно, если кликнуть второй раз оно закрывается.
Осталось только продумать дизайн окна, ссылки, текст в окне. Набросайте макет как должно выглядеть, мы постараемся помочь.
Срабатывает только 1 раз, т е открыл/закрыл и больше не работает.
При наведении на эту ссылку курсор не меняется на руку с пальцем, как на других ссылках. Это не очень удобно, скорее даже не понятно.
Закрываться всплывающее окно должно при кликании в любое место сайта, а то непонятно, что для закрытия надо опять на ссылку кликнуть.
И как сделать так, чтоб текст для этого окна брать с той или иной страницы моего сайта. Тогда я мог бы создать новую страницу и написать там текст, а не писать его прямо в шаблоне.
И можно ли сделать так чтоб окно появлялось при наведении на ссылку без кликания на нее? (ну как вариант)
#12
Отправлено 15 Март 2014 - 19:21
dimabart (15 Март 2014 - 19:18) писал:
Срабатывает только 1 раз, т е открыл/закрыл и больше не работает.
При наведении на эту ссылку курсор не меняется на руку с пальцем, как на других ссылках. Это не очень удобно, скорее даже не понятно.
Закрываться всплывающее окно должно при кликании в любое место сайта, а то непонятно, что для закрытия надо опять на ссылку кликнуть.
И как сделать так, чтоб текст для этого окна брать с той или иной страницы моего сайта. Тогда я мог бы создать новую страницу и написать там текст, а не писать его прямо в шаблоне.
И можно ли сделать так чтоб окно появлялось при наведении на ссылку без кликания на нее? (ну как вариант)
Ну я написал демо-код, что и как можно сделать. Так на чем остановимся, на клике или наведении?
#13
Отправлено 15 Март 2014 - 19:23
сайт artishka.ru
как прописать условие на странице товара: если стоимость товара больше 500 руб. то пишем "доставка бесплатная", а если меньше то другой текст??
MikDark (15 Март 2014 - 19:21) писал:
#14
Отправлено 15 Март 2014 - 20:00
dimabart (15 Март 2014 - 19:23) писал:
сайт artishka.ru
как прописать условие на странице товара: если стоимость товара больше 500 руб. то пишем "доставка бесплатная", а если меньше то другой текст??
да, это примерно то что я хотел, давайте остановимся пока на клике.
Чуть подправил. Закрытие при клике вне окна, выглядит как ссылка.
Советую восстановить из бэкапа и заменить следующие вещи:
Шаблон HTMLдописываем между тегами <head></head>
<script> $(document).ready(function(){ $('#toggle-link').click(function(e) { var $message = $('#message'); if ($message.css('display') != 'block') { $message.show(); var firstClick = true; $(document).bind('click.myEvent', function(e) { if (!firstClick && $(e.target).closest('#message').length == 0) { $message.hide(); $(document).unbind('click.myEvent'); } firstClick = false; }); } e.preventDefault(); }); }); </script>
Шаблон Товар. Меняем это:
<!-- Если это первый элемент в списке ************************************************************************************************ --> <h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;"> <a title="перейти на страницу примерочной" href="http://artishka.ru/page/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80" target="_self">Как определить нужный размер</a> </h3>
на это
<!-- Если это первый элемент в списке ************************************************************************************************ --> <h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;"> <a title="перейти на страницу примерочной" href="http://artishka.ru/page/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80" target="_self">Как определить нужный размер</a> <br><a href="#" id="toggle-link">Как сделать заказ</a> <div id="message"> <p>Здесь описание, инструкция</p> </div> </h3>
И в main.css дописываем:
#message { display:none; border: 2px solid #000; min-width: 200px; padding: 5px; position: absolute; background: #ffffff; } #toggle-link { color:#0099CC; text-decoration: underline; }
Из других страниц информацию брать не получится, к сожалению. Только прописывать ее в шаблоне. По окну еще есть пожелания?
#15
Отправлено 16 Март 2014 - 08:31
сайт artishka.ru
как прописать условие на странице товара: если стоимость товара больше 500 руб. то пишем "доставка бесплатная", а если меньше то другой текст?? Куда прописать я найду, я синтаксис не знаю.
И еще, можно вопрос по другой теме, на мой взгляд он простой (извините за наглую самоуверенность в своих знаниях)
как прописать условие на странице товара: если стоимость товара больше 500 руб. то пишем "доставка бесплатная", а если меньше то другой текст?? Куда прописать я найду, я синтаксис не знаю.
Сообщение отредактировал dimabart: 16 Март 2014 - 08:29
#16
Отправлено 16 Март 2014 - 08:36
MikDark (15 Март 2014 - 20:00) писал:
Советую восстановить из бэкапа и заменить следующие вещи:
Шаблон HTMLдописываем между тегами <head></head>
<script> $(document).ready(function(){ $('#toggle-link').click(function(e) { var $message = $('#message'); if ($message.css('display') != 'block') { $message.show(); var firstClick = true; $(document).bind('click.myEvent', function(e) { if (!firstClick && $(e.target).closest('#message').length == 0) { $message.hide(); $(document).unbind('click.myEvent'); } firstClick = false; }); } e.preventDefault(); }); }); </script>
Шаблон Товар. Меняем это:
<!-- Если это первый элемент в списке ************************************************************************************************ --> <h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;"> <a title="перейти на страницу примерочной" href="http://artishka.ru/page/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80" target="_self">Как определить нужный размер</a> </h3>
на это
<!-- Если это первый элемент в списке ************************************************************************************************ --> <h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;"> <a title="перейти на страницу примерочной" href="http://artishka.ru/page/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80" target="_self">Как определить нужный размер</a> <br><a href="#" id="toggle-link">Как сделать заказ</a> <div id="message"> <p>Здесь описание, инструкция</p> </div> </h3>
И в main.css дописываем:
#message { display:none; border: 2px solid #000; min-width: 200px; padding: 5px; position: absolute; background: #ffffff; } #toggle-link { color:#0099CC; text-decoration: underline; }
Из других страниц информацию брать не получится, к сожалению. Только прописывать ее в шаблоне. По окну еще есть пожелания?
Можно ли поставить крестик в правом верхнем углу окна типа для его закрытия, вроде мелочь, но выглядит солиднее.
Хотел еще попробовать чтоб при появлении окна сайт немного затемнялся, можно ли так сделать?
И хотелось бы чтоб окно как то разворачивалось плавно, ну какие-нибудь элементы анимации, если это не слишком сложно.
#17
Отправлено 16 Март 2014 - 08:57
dimabart (16 Март 2014 - 08:36) писал:
Можно ли поставить крестик в правом верхнем углу окна типа для его закрытия, вроде мелочь, но выглядит солиднее.
Хотел еще попробовать чтоб при появлении окна сайт немного затемнялся, можно ли так сделать?
И хотелось бы чтоб окно как то разворачивалось плавно, ну какие-нибудь элементы анимации, если это не слишком сложно.
Столкнулся со странно проблемой. Этот блок работает только в том месте сайта, в которой он щас стоит. Куда бы я его не ставил, он не работает. Хотел этот блок размещать в разных местах сайта, чтобы подсказки разные делать. Блок кода такой:
<a href="#" id="toggle-link">Как сделать заказ</a>
<div id="message">
<p>текст подсказки</p>
</div>
ну или так:
<h3 style="text-align: justify;line-height: 16px;font-size: 12px;font-family: Helvetica, 'Trebuchet MS', Arial, sans-serif;width: 255px;margin-top: 0;margin-bottom: 7px;">
<a href="#" id="toggle-link">Как сделать заказ</a>
<div id="message">
<p>текст подсказки</p>
</div>
</h3>
Помогите, в чем причина?
#18
Отправлено 17 Март 2014 - 14:04
#20
Отправлено 17 Март 2014 - 17:13
MikDark (17 Март 2014 - 14:27) писал:
Почему Вам сложно сказать? Вы так быстро написали код, и тут такая мелочь, посмотрите пожалуйста.
И по остальным вопросам ответьте пожалуйста.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных