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

03.02.2016 | Написал

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

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

    if (isset ($_GET[$var]) && $_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>';
            }
  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)
  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;}

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

Метки: , ,
3 комментария читателей статьи "Выводим описание спецификации в боксе фильтров в виде всплывающей подсказки (vamshop)"
  • Эрнетс пишет:

    Как добавить sql запрос?

    • Эрнест пишет:

      Все вроде заработало. Но при том, что заполнена подсказка или нет, знак вопросика все равно появляется. Как бы сделать такое условие, что если заполнена подсказка, то выводить вопросик а если нет, то не выводить?

      • eugenem пишет:

        Надо добавлять условие, я не делал. Если у меня возникнет необходиость, то сделаю и добавлю сюда код. А пока сами пробуйте.

Добавить комментарий

Ваш e-mail не будет опубликован.