Дополнение - Указатель для сайта

+10
2.14K
На страницах блогов нашел модуль Указатель 1.10.Х (http://instantcms.ru/blogs/leothemes-ru/modul-ukazatel-1-10-h.html)
Даже написал создателю, чтобы он объяснил как подключить модуль к версии движка 1.9. Но ответа так и не последовало как видно из переписки. Поэтому пришлось как всегда разбираться самому.

Суть доработки, если кто не знает следующая. На сайте вы определяется место к которому нужно привлечь внимание, появляется стрелка (нужного цвета) которая постоянно указывает на это место (пример работы: nasosu.com.ua/catalog/item10100.html ).
Решил применить данную опцию в каталоге и сделать ссылку в разделе каталог на "Подшипники аналоги на сайте"
Согласно статистике посещения, пользователи попадая на страницу подшипника, которого нет с наличии просто уходят. Данная опция позволит привлечь внимание к автоматизированному поиску подшипников.

Для работы этой опции нужно:
1. Добавить 3 файла скриптов в папку /templates/shop_atw/js
2. Добавить файл стиля в папку /templates/shop_atw/css — liTarget.css
3. Дописать подключение файла стиля liTarget.css в head файла template.php
  1. <link rel="stylesheet" href="/templates/shop_atw/css/liTarget.css">
4. Внести правку в файл отображения позиции Универсального каталога com_catalog_item.tpl. Мне необходимо было сделать в два места, когда цена больше 0 и когда равна нулю.
В правке видны наименования трех файлов javascript, а также функция запуска $(function(){$('.target-vip').liTarget();}).
Цвет стрелки нужно править в файле liTarget.css
Для определения места куда указывает стрелка, нужно присвоить ссылке (тексту, рисунку и т.д) — class="target-vip"

Пример моих правок файла com_catalog_item.tpl
Больше нуля
  1.  
  2. {if $item.price > 0}
  3. {* ==== Стрелка указатель - начало ==== *}
  4. {literal}
  5. <script type="text/javascript" src="/templates/shop_atw/js/jquery09.js"></script>
  6. <script type="text/javascript" src="/templates/shop_atw/js/jQueryRotate.js"></script>
  7. <script type="text/javascript" src="/templates/shop_atw/js/jquery.liTarget.js"></script>
  8. <script>
  9. $(function(){
  10. $('.target-vip').liTarget();
  11. })
  12. </script>
  13. <div class="target-vip" style="margin-left: 204px; margin-top: -22px; color: #3f3f3f; font-size: 10px; width: 5px;">.</a></div>
  14. {/literal}
  15. {* ==== Стрелка указатель - конец ==== *}
  16.  
  17. <table cellspacing="0" >

Равна нулю
  1. {if $item.price == 0}
  2. {* ==== Стрелка указатель - начало ==== *}
  3. {literal}
  4. <script type="text/javascript" src="/templates/shop_atw/js/jquery09.js"></script>
  5. <script type="text/javascript" src="/templates/shop_atw/js/jQueryRotate.js"></script>
  6. <script type="text/javascript" src="/templates/shop_atw/js/jquery.liTarget.js"></script>
  7. <script>
  8. $(function(){
  9. $('.target-vip').liTarget();
  10. })
  11. </script>
  12. <div class="target-vip" style="margin-left: 204px; margin-top: -22px; color: #3f3f3f; font-size: 10px; width: 5px;">.</a></div>
  13. {/literal}
  14. {* ==== Стрелка указатель - конец ==== *}
Варианту работы можно посмотреть на сайте — nasosu.com.ua/catalog/item377.html.
Кому это нужно, вот требуемые файлы — instantcms.ru/users/files/download5592.html

Если есть вопросы, обращайтесь.
Жду ваших дополнений,
Спасибо за внимание.
+3
vikont vikont 6 лет назад #
Первая моя реакция как посетителя, отмахнуться от стрелки, чтобы не бегала за курсором! Даже не стал долго разбираться и сбежал со страницы! :)
Думаю более действенным был бы указатель, который стоит на месте (пульсирует или мерцает) и показывает куда надо обратить внимание. Может быть даже высвечивать некое слово над стрелкой. В данном случае уместно слово "Аналоги"
Это мое личное мнение.
0
Yossarian Yossarian 6 лет назад #
Большое спасибо за комментарий.
Наверное я немного повременю с решением, дождусь реакцию посетителей. Если я с помощью этого указателя увеличу обращение посетителей к автоматизированному поиску, то это будет означать что цель достигнута.
Если этого не произойдет, то нужно будет что-то менять.
0
Dorimen Dorimen 6 лет назад #
Как пользователь, я так и не понял ее назначение... Простите за комментарий. Возможно, статистика именно Ваших пользователей покажет важность данного решения.
+1
WebMan WebMan 6 лет назад #
Сильная загрузка процессора при движении мышкой по открытой странице. На слабых компах это будет напрягать пользователей. Вариант, который предложил vikont , будет проще, нагляднее и надёжнее.
0
ivanish ivanish 6 лет назад #
Насосу :)
+1
Владимир Савенко ✝️ Владимир Савенко ✝️ 6 лет назад #
Со стороны разработчика мне реализация понравилась - стрелочка, меняет свое направление и все время указывает на важную информацию (хотя сама стрелка нарисована не ахти)
Как пользователя напрягла - мельтешит, не дает сосредоточится на информации. Как по мне так есть проверенные способы привлечения внимания (цвет, шрифт, заливка фона)
Больше вижу реализацию данной разработки. как фишка на сайт к первому апреля (можно место стрелки муху показывать или божью коровку) :)
0
Майкл Майкл 6 лет назад #
+++Давно не было ничего для первой версии

Еще от автора

Доработка InstantShop
В предыдущем своем посте я описал процедуру внедрения курса доллара в Универсальный каталог.
Доработка Универсального каталога
На моем сайте Насосы и насосные станции (www.nasosu.com.ua) установлен InstantShop для раздела Насосы и насосные станции.
Как создать файл YML для Яндекс.Маркет
Я как и многие, кто будет читать данный раздел являюсь пользователем замечательной системы InstantCMS.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.