Выводим описание спецификации в боксе фильтров в виде всплывающей подсказки (vamshop)

У спецификации есть поле “описание”, которое не показывается в фильтре товаров, но было бы неплохо вывести его в виде подсказки. Делаем это следующим образом:

1. В папке шаблона открываем файл кода бокса фильтра templates/ваш шаблон/source/boxes/products_filter.php
   Добавляем в sql-запрос $specs_query_raw в двух местах  sd.specification_description
   Меняем вывод названия спецификации

   if (isset ($_GET[$var]) &amp;&amp; $_GET[$var] != '') { $box_text .= '<b>' . $specs_array['specification_name'] . '</b> <a href="'.vam_href_link (FILENAME_PRODUCTS_FILTERS, vam_get_all_get_params (array ('f' . $specs_array['specifications_id']) ) ).'"><span class="close-box">[X]</span></a> '; } else { $box_text .= '<b>' . $specs_array['specification_name'] . '</b>   '; }

   if (isset ($_GET[$var]) &amp;&amp; $_GET[$var] != '') { $box_text .= '<b>' . $specs_array['specification_name'] . '</b> <a href="'.vam_href_link (FILENAME_PRODUCTS_FILTERS, vam_get_all_get_params (array ('f' . $specs_array['specifications_id']) ) ).'"><span class="close-box">[X]</span></a> '; } else { $box_text .= '<b>' . $specs_array['specification_name'] . '</b> '; }

   на

   if (isset ($_GET[$var]) && $_GET[$var] != '') { $box_text .= '<div class="ProductFilterGroup">' . $specs_array['specification_name'] . ' <a href="'.vam_href_link (FILENAME_PRODUCTS_FILTERS, vam_get_all_get_params (array ('f' . $specs_array['specifications_id']) ) ).'"><span class="close-box">[X]</span></a><span class="right"><span class="jQtooltip" title="' . $specs_array['specification_description'] . '"><i class="fa fa-question-circle"></i></span></span></div>'; } else { $box_text .= '<div class="ProductFilterGroup">' . $specs_array['specification_name'] . '<span class="right"><span class="jQtooltip" title="' . $specs_array['specification_description'] . '"><i class="fa fa-question-circle"></i></span></span></div>'; }

   if (isset ($_GET[$var]) && $_GET[$var] != '') { $box_text .= '<div class="ProductFilterGroup">' . $specs_array['specification_name'] . ' <a href="'.vam_href_link (FILENAME_PRODUCTS_FILTERS, vam_get_all_get_params (array ('f' . $specs_array['specifications_id']) ) ).'"><span class="close-box">[X]</span></a><span class="right"><span class="jQtooltip" title="' . $specs_array['specification_description'] . '"><i class="fa fa-question-circle"></i></span></span></div>'; } else { $box_text .= '<div class="ProductFilterGroup">' . $specs_array['specification_name'] . '<span class="right"><span class="jQtooltip" title="' . $specs_array['specification_description'] . '"><i class="fa fa-question-circle"></i></span></span></div>'; }

2. Теперь добавим скрипт вывода описания во всплывающую подсказку по наведению на вопросик рядом со спецификацией. Открываем templates/ваш шаблон/javascript/vamshop.js. Добавляем вниз

   // подсказки для фильтра (function($){ $(function() {   $('span.jQtooltip').each(function() { var el = $(this); var title = el.attr('title'); if (title && title != '') { el.attr('title', '').append('<div>' + title + '</div>'); var width = el.find('div').width(); var height = el.find('div').height(); el.hover( function() { el.find('div') .clearQueue() .delay(200) .animate({width: width + 20, height: height + 20}, 200).show(200) .animate({width: width, height: height}, 200); }, function() { el.find('div') .animate({width: width + 20, height: height + 20}, 150) .animate({width: 'hide', height: 'hide'}, 150); } ).mouseleave(function() { if (el.children().is(':hidden')) el.find('div').clearQueue(); }); } })   }) })(jQuery)

   // подсказки для фильтра (function($){ $(function() { $('span.jQtooltip').each(function() { var el = $(this); var title = el.attr('title'); if (title && title != '') { el.attr('title', '').append('<div>' + title + '</div>'); var width = el.find('div').width(); var height = el.find('div').height(); el.hover( function() { el.find('div') .clearQueue() .delay(200) .animate({width: width + 20, height: height + 20}, 200).show(200) .animate({width: width, height: height}, 200); }, function() { el.find('div') .animate({width: width + 20, height: height + 20}, 150) .animate({width: 'hide', height: 'hide'}, 150); } ).mouseleave(function() { if (el.children().is(':hidden')) el.find('div').clearQueue(); }); } }) }) })(jQuery)

3. Добавляем стили для попапа с подсказкой в файл стилей шаблона templates/ваш шаблон/stylesheet.css

   .jQtooltip {position: relative;cursor: help;} .jQtooltip i { font-size:18px;} .jQtooltip div {display: none;position: absolute;bottom:20px;right: -1px;z-index: 1000;width: 190px;padding: 8px;text-align: left;font-size: 12px;line-height: 16px;color: #fff; background:#333;border-radius:4px;}

   .jQtooltip {position: relative;cursor: help;} .jQtooltip i { font-size:18px;} .jQtooltip div {display: none;position: absolute;bottom:20px;right: -1px;z-index: 1000;width: 190px;padding: 8px;text-align: left;font-size: 12px;line-height: 16px;color: #fff; background:#333;border-radius:4px;}

В итоге в фильтре у названия спецификации мы увидим иконку – знак вопроса в кружке. Наведя на него курсор мышки, увидим всплывающее описание этой спецификации.
Примерно так же можно сделать подсказки и в карточке товара, внеся правки в includes/modules/products_filter.php.