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


Создание Подсказок


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

#1 vadim_3383

vadim_3383

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

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

Отправлено 31 Август 2011 - 21:19

Помогите пожалуйста сделать всплывающее окно с пояснениями (подсказками), также как в админке "Настройки" -> "Основные". Заранее благодарен.

#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 31 Август 2011 - 21:33

Не совсем понятно что должно отображаться в подсказках, и где они должны располагаться. Но возможно вам поможет следующая тема http://forum.storela...ch__1#entry6484

#3 vadim_3383

vadim_3383

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

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

Отправлено 31 Август 2011 - 21:58

Просмотр сообщенияVaccina (31 Август 2011 - 21:33) писал:

Не совсем понятно что должно отображаться в подсказках, и где они должны располагаться. Но возможно вам поможет следующая тема http://forum.storela...ch__1#entry6484

Не совсем то в этой теме. Смысл в том, чтобы на странице товара можно было разместить подсказки-напоминалки о способах оплаты и некоторых условиях, потому как многие только со страницы товара начинают искать по сайту эту информацию, что неудобно. Текст в них будет свой, т.е. не шаблонный, но одинаковый для всех товаров.

#4 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 01 Сентябрь 2011 - 22:53

Так называемые всплывающие подсказки можно реализовать с уже прикрученной библиотекой jquery. Вариантов подсказок много про них можно почитать тут

http://www.1stwebdes...gins-webdesign/

или тут http://www.linkexcha...su/2008/31.html
и тут http://habrahabr.ru/...s/webdev/42997/

Для их установки вам понадобиться изменить необходимый шаблон - в данном случае "Товар". Шаблоны находятся в разделе редактора тем, так же файлы стилей main.css и javascript файл main.js

#5 vadim_3383

vadim_3383

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

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

Отправлено 02 Сентябрь 2011 - 07:37

Спасибо за полезные ссылки :) Но я просил подсказать, как сделаны подсказки именно как в админке, когда кликаешь по знаку вопроса и появляется окно с информацией.

#6 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 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 dimabart

dimabart

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

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

Отправлено 15 Март 2014 - 18:02

Доброго времени! Прочитал несколько тем по всплывающим подсказкам, но так и не нашел для себя ответа. Как сделать чтобы всплывающие подсказки появлялись при кликании по определенной ссылке или кнопке. Например есть ссылка на странице товара "как сделать заказ",  клиент клиакет по ней и не переходит на страницу с описанием как сделать заказ, а видит краткое описание процедуры в компактном всплывающем окне.

#8 MikDark

MikDark

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

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

Отправлено 15 Март 2014 - 18:04

Просмотр сообщенияdimabart (15 Март 2014 - 18:02) писал:

Доброго времени! Прочитал несколько тем по всплывающим подсказкам, но так и не нашел для себя ответа. Как сделать чтобы всплывающие подсказки появлялись при кликании по определенной ссылке или кнопке. Например есть ссылка на странице товара "как сделать заказ",  клиент клиакет по ней и не переходит на страницу с описанием как сделать заказ, а видит краткое описание процедуры в компактном всплывающем окне.

Надо смотреть конкретно применительно к шаблону. Пришлите SL номер аккаунта.

#9 dimabart

dimabart

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

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

Отправлено 15 Март 2014 - 18:15

Просмотр сообщенияMikDark (15 Март 2014 - 18:04) писал:

Надо смотреть конкретно применительно к шаблону. Пришлите SL номер аккаунта.
Ой забыл, извините.  сайт Artishka.ru

#10 MikDark

MikDark

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

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

Отправлено 15 Март 2014 - 18:48

Просмотр сообщенияdimabart (15 Март 2014 - 18:15) писал:

Ой забыл, извините.  сайт Artishka.ru

Создайте бэкап и попробуйте следующие изменения:
Шаблон 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 dimabart

dimabart

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

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

Отправлено 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 MikDark

MikDark

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

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

Отправлено 15 Март 2014 - 19:21

Просмотр сообщенияdimabart (15 Март 2014 - 19:18) писал:

Спасибо, что то вырисовывается. НО...
Срабатывает только 1 раз, т е открыл/закрыл и больше не работает.
При наведении на эту ссылку курсор не меняется на руку с пальцем, как на других ссылках. Это не очень удобно, скорее даже не понятно.
Закрываться всплывающее окно должно при кликании в любое место сайта, а то непонятно, что для закрытия надо опять на ссылку кликнуть.
И как сделать так, чтоб текст для этого окна брать с той или иной страницы моего сайта. Тогда я мог бы создать новую страницу и написать там текст, а не писать его прямо в шаблоне.
И можно ли сделать так чтоб окно появлялось при наведении на ссылку без кликания на нее? (ну как вариант)

Ну я написал демо-код, что и как можно сделать. Так на чем остановимся, на клике или наведении?

#13 dimabart

dimabart

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

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

Отправлено 15 Март 2014 - 19:23

И можно еще вопрос немного по другой теме....
сайт artishka.ru
как прописать условие на странице товара:  если стоимость товара больше 500 руб.  то пишем "доставка бесплатная", а если меньше то другой текст??

Просмотр сообщенияMikDark (15 Март 2014 - 19:21) писал:

Ну я написал демо-код, что и как можно сделать. Так на чем остановимся, на клике или наведении?
да, это примерно то что я хотел, давайте остановимся пока на клике.

#14 MikDark

MikDark

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

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

Отправлено 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 dimabart

dimabart

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

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

Отправлено 16 Март 2014 - 08:31

И еще, можно вопрос по другой теме, на мой взгляд он простой  :)    (извините за наглую самоуверенность в своих знаниях)
сайт artishka.ru
как прописать условие на странице товара:  если стоимость товара больше 500 руб.  то пишем "доставка бесплатная", а если меньше то другой текст?? Куда прописать я найду, я синтаксис не знаю.

И еще, можно вопрос по другой теме, на мой взгляд он простой  :)    (извините за наглую самоуверенность в своих знаниях)

как прописать условие на странице товара:  если стоимость товара больше 500 руб.  то пишем "доставка бесплатная", а если меньше то другой текст?? Куда прописать я найду, я синтаксис не знаю.

Сообщение отредактировал dimabart: 16 Март 2014 - 08:29


#16 dimabart

dimabart

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

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

Отправлено 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;
}

Из других страниц информацию брать не получится, к сожалению. Только прописывать ее в шаблоне. По окну еще есть пожелания?
Спасибо большое!!!!   Именно то, что я хотел.  Щас навожу красоту.  Скажите как сделать чтоб скругление бордера и тени работали в браузере IE.
Можно ли поставить крестик в правом верхнем углу окна типа для его закрытия, вроде мелочь, но выглядит солиднее.
Хотел еще попробовать чтоб при появлении окна сайт немного затемнялся, можно ли так сделать?
И хотелось бы чтоб окно как то разворачивалось плавно, ну какие-нибудь элементы анимации, если это не слишком сложно.

#17 dimabart

dimabart

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

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

Отправлено 16 Март 2014 - 08:57

Просмотр сообщенияdimabart (16 Март 2014 - 08:36) писал:

Спасибо большое!!!!   Именно то, что я хотел.  Щас навожу красоту.  Скажите как сделать чтоб скругление бордера и тени работали в браузере IE.
Можно ли поставить крестик в правом верхнем углу окна типа для его закрытия, вроде мелочь, но выглядит солиднее.
Хотел еще попробовать чтоб при появлении окна сайт немного затемнялся, можно ли так сделать?
И хотелось бы чтоб окно как то разворачивалось плавно, ну какие-нибудь элементы анимации, если это не слишком сложно.

Столкнулся со странно  проблемой. Этот блок работает только в том месте сайта, в которой он щас стоит.  Куда бы я его не ставил, он не работает.  Хотел этот блок размещать в разных местах сайта, чтобы подсказки разные делать.  Блок кода такой:

<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 dimabart

dimabart

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

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

Отправлено 17 Март 2014 - 14:04

Пожалуйста, подскажите по моим вопросам.

#19 MikDark

MikDark

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

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

Отправлено 17 Март 2014 - 14:27

Просмотр сообщенияdimabart (17 Март 2014 - 14:04) писал:

Пожалуйста, подскажите по моим вопросам.

По поводу размещения на разных страницах, сложно сказать. Попробуйте вставить еще код скрипта перед кодом подсказки.

#20 dimabart

dimabart

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

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

Отправлено 17 Март 2014 - 17:13

Просмотр сообщенияMikDark (17 Март 2014 - 14:27) писал:

По поводу размещения на разных страницах, сложно сказать. Попробуйте вставить еще код скрипта перед кодом подсказки.
Да на этой же странице ставлю, просто в другое место и уже не работает, т е все отображается но при кликании на ссылку просто ничего не происходит.
Почему Вам сложно сказать?  Вы так быстро написали код, и тут такая мелочь, посмотрите пожалуйста.

И по остальным вопросам ответьте пожалуйста.




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

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