Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Как сделать всплывающую карточку характеристики товаров?

Тема в разделе "Вопросы, советы и доработки.", создана пользователем Kitanaell, 9 сен 2015.

Метки:
  1. Kitanaell

    Kitanaell

    Сообщения:
    37
    Симпатии:
    1
    Баллы:
    8
    Как сделать чтобы при наведении на картинку товара в категории/подкатегории всплывала инфа в блоке с размерами товара, примерно как здесь http://shkafon-mebel.ru/catalog/wall/ ?
     
  2. Kitanaell

    Kitanaell

    Сообщения:
    37
    Симпатии:
    1
    Баллы:
    8
    вообще никаких идей?:( я понимаю, что такого готового решения нет, придется пилить, может кто подскажет какой плагин лучше переделать? Я смотрела несколько в духе Quick View, может есть что-то более удачное?
     
  3. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    http://wpcommerce.ru/threads/dobavit-dopolnitelnoe-opisanie-malenkoe-v-katalog.2345/
    Вставьте поле для вывода характеристик. В css сделайте его невидимым, а через a:hover.cf_short_description видимым/
    А на странице, что у вас в качестве примера, скрипт используется, так как окно привязано к курсору
     
    Последнее редактирование: 20 сен 2015
    • Информативно Информативно x 1
  4. Kitanaell

    Kitanaell

    Сообщения:
    37
    Симпатии:
    1
    Баллы:
    8
    Спасибо, что откликнулись! Я поняла вашу мысль, но хочется создать свой таб с полями и его уже цеплять и выводить через модальное окно нативным джава скриптом активирующимся при ховере.
     
  5. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Последнее редактирование: 26 сен 2015
    • Нравится Нравится x 1
  6. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    553
    Баллы:
    113
  7. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Да код то вроде тоже "родной" по отношению к jquery , раз её использует.:)
    Но мне трудно судить по поводу целесообразности использования плагина, поскольку плохо знаю js.
    Нашёл ещё проще вариант. Чётче закрывает тултип. http://htmlforum.ru/index.php?s=999be76213b8a89b74d0786533700bfd&showtopic=25671#entry191945
    Первый вариант медленно закрывал.
    И с исчезновением выпадающего меню в админ баре решилось. Надо было последнюю версию jquery загружать. С ней тоже прекрасно работает.
    В связи с этим сделал соответствующие исправления в статье.
     
    Последнее редактирование: 26 сен 2015
    • Нравится Нравится x 1
  8. Kitanaell

    Kitanaell

    Сообщения:
    37
    Симпатии:
    1
    Баллы:
    8
  9. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    У меня ссылка открывается.
    Цитирую пост по ссылке:

    "... Окей, хороший пример, но прошу, помогите разобраться полностью, ибо я в js вообще не понимаю ничего.
    Вот код с этой страницы:
    Код:
    $(document).ready(function() {
        $('li').mousemove(function(event) { // li - элемент при наведении на который показывается большая картинка
        /* Расчет координат курсора */
        var pos = $(this).offset();
        var pageX = event.pageX;
        var pageY = event.pageY;
        var x = pageX - pos.left + 10;
        var y = pageY - pos.top + 10;
    
        $(this).children('.big').css({ // .big - класс больших картинок
            'display' : 'block',
            'left' : x + 'px',
            'top' : y + 'px'});
        });
    
        $('li').mouseout(function() {
            $(this).children('.big').hide();
        });
    });
    Так, строка $('li').mousemove(function(event) нужна для определения элемента, при котором будет показываться картинка, следующая за курсором.
    Далее, расчет координат курсора, это вроде бы понятно...
    Потом, $(this).children('.big').css({ // .big - не пойму ничего тут.
    И потом, mouseout, который мне, по сути, не нужен, т.к. я хочу постоянное следование div-блока за курсором. ...."
     
    Последнее редактирование: 19 окт 2015
    • Нравится Нравится x 1
  10. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Заметил что при установке всплывающего описания перестал нормально работать accodion в плагине Collapsing Categories. Жмёшь на стрелки, а списки не разворачиваются и не свёртываются.
    Оказалось что виновен код, который я вставил в functions.php темы:
    PHP:
    add_action'init''true_jquery_register' );

    function 
    true_jquery_register() {
        if ( !
    is_admin() ) {
            
    wp_deregister_script'jquery' );
            
    wp_register_script'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' ), falsenulltrue );
            
    wp_enqueue_script'jquery' );
        }
    };
    Код отменяет штатную загрузку библиотеки jquery, входящую в состав Wordpress, и загружает последнюю версию jquery.min.js из Интернета.
    Без этого кода всплывающие описания почему то не появлялись.
    Убрал этот код и Collapsing Categories нормально заработал, зато всплывающие описания исчезли.
    Что делать?
    Тогда вставил в в форму футера плагина "Insert Headers and Footers". перед перед js кодом всплывающего описания, строку:
    Код:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    После этого нормально заработали и всплывающие описания и аккордеон плагина Collapsing Categories внизу в сайдбаре: http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/
    Однако теперь получается что двойная загрузка библиотеки происходит в хедере и в футере, что не есть хорошо.
     
    Последнее редактирование: 20 ноя 2015
    • Нравится Нравится x 1
  11. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Выяснил. Оказывается, та что в Wordpress библиотека, загружается в режиме «no-confict». В режиме «no-confict» ярлык $ недоступен, вместо него используется слово jQuery.
    Внёс в код соответствующие изменение. Всплывающее описание заработало с бибиотекой загружаемой из Wordpress.
    Соответственно отпала необходимость в загрузке библиотеки с ajax.googleapis.com.
    В связи с этим сделал исправления и пояснение в статье.
     
    • Нравится Нравится x 1