Всплывающие подсказки

[oldmanager]

Некоторое время назад вопрос всплывающих подсказок уже поднимался мной в другой теме. Там я задавал вопросы по установке и на ресурс, работающий на Viart 3.6 и использующий tooltips. К сожалению, тогда (да и сейчас тоже) моих познаний в JS не хватило на то, чтобы самому встроить в движок этот скрипт, а заданные вопросы остались без ответа (кстати, после того поста я встречал несколько магазинов на Виарте с такими подсказками). Но теперь они кажутся мне не совсем удобным, т. к. показывают информацию, написанную тут же, в теге "title". И я решил найти нечто подобное тому, как сделано на Яндекс.Маркет, Т. е. чтобы текст для подсказки забирался из отдельного файла, в который можно вставить текст, картинку и ссылку на саму страницу файла или на сторонний ресурс. Возможно такой плагин уже есть, но поиском по сайту и форуму я ничего не нашёл. Поэтому я поискал в интернетах и выбрал три вида всплывающих подсказок, которые удовлетворяют моему условию. Это
qTip2 ()
jTip ()
clueTip ()
Моё субъективное мнение по каждому:
qTip2 - самый популярный из трёх и новейший, но самый для меня непонятный, т.к. скачивается два js и два css файла... и шо с ними делать?
jTip - менее популярный из трёх и самый старый, плюс не совсем подходит под описанные ниже условия. Зато можно скачать готовую демку, которую переделает под себя даже такой чайник, как я (наверное )
clueTip - золотая середина между предыдущими, плюс огромное количество вариантов в демо (только какой выбрать и как потом настроить?)

У каждого из них есть свои плюсы и минусы, и все они (насколько я понимаю) работают на Ajax. В связи с тем, что я полный дуб в PHP, JS, Ajax (и иже...) и не смог разобраться сам, как и куда вставлять скрипты и что и где дописывать, предлагаю сообща выбрать оптимальный для Виарта плагин, составить пошаговые инструкции его встраивания в движок и сохранить всё это в базе знаний. Или встроить в следующую сборку/релиз (правда боюсь, что тогда мне ни одного совета не достанется )

Для начала можно рассмотреть следующее условие:

• всплывающие подсказки используются на детальной странице товара;
• объясняют термины в спецификации, блоке "Внимание" и в описании товара;
• текст (с картинкой или без) подгружается из файла, ссылка на который тоже присутствует в подсказке (не обязательно);
• активация подсказки происходит по клику (можно и по наведению, но на Я.Маркете именно по клику) на подчёркнутый термин или вопросик рядом (не знаю, как лучше);
• закрытие подсказки - по крестику или надписи "закрыть" (тоже не знаю, как лучше);
• поле с текстом может всплывать с любой стороны от места нажатия, т.е. если термин находится внизу экрана - подсказка всплывает сверху, если у правого края экрана - всплывает слева и т.д..

А дальше я не понимаю, какой скрипт из трёх подойдёт лучше и какой код куда вставлять.
tooltip-example.jpg
Ко всему, выделенному на примере красным, можно (нужно?) сделать всплывающие подсказки.
И ссылка на страницу примера, т.к. картинка по традиции ничтожно мала.

P.S. Почему я упоминаю Я.М.?
Надеюсь, никто не будет спорить, что они пытаются задавать стандарты цивилизованной торговли, а сам сервис очень популярен в России. По запросу "ноутбук" в Яндексе на первом месте ссылка на Я.Маркет. Представим пользователя, который набрал в строке поиска "ноутбук". Первая ссылка это 50%-70% переходов. А дальше ваш потенциальный покупатель ползает по Маркету и изучает, выбирает, привыкает к настройкам, уходит. Затем каким-то образом он попадает на страницы вашего интернет-магазина и помня Яндекс он непроизвольно пытается действовать так же.
Так не будем ему мешать

P.P.S. Прошу вас помочь мне и себе.

[exBitrix]

По запросу "ноутбук" в Яндексе на первом месте ссылка на Я.Маркет.

У Я.Маркет наверно очень хорошие специалисты по SEO

С тултипами идея хорошая.

[oldmanager]

У Я.Маркет наверно очень хорошие специалисты по SEO ...

С тултипами идея хорошая.

В том или ином виде они присутствуют во всех крупнейших интернет-магазинах мира. И странно, почему их нет в Виарте.

[dav300]

Приветствую,

...В связи с тем, что я полный дуб в PHP, JS, Ajax (и иже...)

Сложновато будет разбираться да и помочь вам тоже будет не просто.

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

Есть реализация на основе clueTip
Подойдет ли она всем сложно сказать.

Суть реализации :
Создается отдельная таблица в которой перечисляются параметры и их описание.
Вывод подсказки осущестляется путем вставки соответствующего кода в template's

Немного позже попробую написать инструкцию.

[oldmanager]

Сложновато будет разбираться да и помочь вам тоже будет не просто...

Ничего, я смышлёный. Умею анализировать и проводить аналогии

Есть реализация на основе clueTip
Подойдет ли она всем сложно сказать...

Мне он больше других понравился. А точнее примеры №8 и №9 из группы Default Style. Только меня смущает, что по клику на №9 осуществляется переход на другую страницу. Думаю, эту настройку можно изменить.

...Вывод подсказки осущестляется путем вставки соответствующего кода в template's...

Вот в этом-то и затык.

[dav300]

Приветствую,

Мне он больше других понравился. А точнее примеры №8 и №9 из группы Default Style. Только меня смущает, что по клику на №9 осуществляется переход на другую страницу. Думаю, эту настройку можно изменить.

Это не настройка. Для загрузки локального контента есть пример №6 из той же группы.

В целом есть два варианта возможной реализации :
1. Статический. т.е. когда подсказка загружается из самого документа (все приведенные примеры статичны)
2. Динамический. т.е. когда подсказка грузиться из БД.

Если подсказок много то вариант со статикой не удобен потому как каждый раз надо лезть в код и править текст. Если еще и сам текст подсказки, например, получаем через импорт / экспорт то в таком случае вообще будет беда.

Общие настройки для того и другого способа :
1. Подключение jquery
2. Подключение файла css (внешний вид подсказки)
3. Подключение файла библиотеки clueTip js (в самом файле есть описание всех возможных настраиваемых параметров)

На статике останавливаться не будем. В моем варианте реализации динамики присутствует отдельная база данных в которой перечисляются поля требующие пояснений и соответствующий текст подсказки. Таблица приметивная. Всего четыре поля :
1. id (autoincrement)
2. group_name
3. param_name
4. tip_text

group_name присутствует потому что могут дублироваться param_name. Как пример параметр Размер может быть указан как для верхней одежды так и для обуви.

Теперь куда вставлять. Например есть таже спецификация которая состоит из перечня параметров. Задача сводиться к тому чтобы найти этой файл (block_product_details.html) и добавить / изменить следующий код (это для группы. Для конкретного параметра тоже самое только с включением {feature_name})

<script type="text/javascript">
$(document).ready(function () {
  $('a.title_group_name').cluetip({sticky: true, closePosition: 'title', arrows: true, closeText: '<img src="images/external/tip/cross.png" alt="" />',height: 'auto', width: '550px'});
});
</script>

<a class="title_group_name" rel="dev/info_base/info_base_tip.php?group_name={group_name}"  title="Информация о параметре {group_name}">{group_name}</a>

По умолчанию выводиться только {group_name} (старого файла у меня нет)
Можно еще добавить что-то вроде style="text-decoration:none;" для того чтобы оформить саму ссылку.

info_base_tip.php - простой php скрипт задача которого есть получение данных из БД по переданным параметрам {group_name} и {feature_name}. Возврат полученных данных через обычный echo.

Вот собственно и все. Все остальное есть тонкая настройка по тем или иным параметрам того же cluetip.

[brand]

Добрый вечер.
Подскажите, а возможно ли такую подсказку внедрить в фильтр?
К примеру, как рисунке:
filtr-podskazka.jpg
При наведении на знак вопроса появляется подсказка!?

Код фильтра:

<div><b>{property_name}</b></div><!-- begin filter_values -->
<a href="{filter_url}">{value_title}</a> <span class="min">({value_total})</span><br /><!-- end filter_values -->

Самы удобный вариант что-бы на странице код был такого вида (статика):

<div><b>Система амортизации:</b></div>
<a href="detskie-kolyaski.html?filter=%26fd48%3D148">пружинного типа</a>
<span class="min">(5)</span><a href="http://kinder.ua/podskazki/pruginnogo-tipa.html"><img src="http://kinder.ua/images/h_04.png" alt="знак вопроса"></a><br>

[dav300]

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

Добрый вечер.

Подскажите, а возможно ли такую подсказку внедрить в фильтр?

Да, вполне возможно.


Как пример :

<script type="text/javascript">
$(document).ready(function () {
  $('a.filter').cluetip({sticky: true, closePosition: 'title', arrows: true, closeText: '<img src="images/external/tip/cross.png" alt="" />',height: 'auto', width: '550px'});
});
</script>

<div><b>Система амортизации:</b></div>
<a href="detskie-kolyaski.html?filter=%26fd48%3D148">пружинного типа</a>
<span class="min">(5)</span><a class="filter" title="Тут будет текст вашей подсказки"><img src="http://kinder.ua/images/h_04.png" alt="знак вопроса"></a><br>

Это есть статика.

Для работы с БД алгоритм описан в предыдущем моем письме. Как вариант уникального поля по которому отслеживать подсказку в рамках БД думаю что имеет смысл брать {value_title} совместно с group_name из приведенного примера таблицы.