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

[Kitanaell]

Как сделать чтобы при наведении на картинку товара в категории/подкатегории всплывала инфа в блоке с размерами товара, примерно как здесь http://shkafon-mebel.ru/catalog/wall/ ?

 

[Kitanaell]

вообще никаких идей? я понимаю, что такого готового решения нет, придется пилить, может кто подскажет какой плагин лучше переделать? Я смотрела несколько в духе Quick View, может есть что-то более удачное?

 

[rikitiki]

https://wpcommerce.ru/threads/dobavit-dopolnitelnoe-opisanie-malenkoe-v-katalog.2345/
Вставьте поле для вывода характеристик. В css сделайте его невидимым, а через a:hover.cf_short_description видимым/
А на странице, что у вас в качестве примера, скрипт используется, так как окно привязано к курсору

 

[Kitanaell]

https://wpcommerce.ru/threads/dobavit-dopolnitelnoe-opisanie-malenkoe-v-katalog.2345/
Вставьте поле для вывода характеристик. В css сделайте его невидимым, а через a:hover.cf_short_description видимым/
А на странице, что у вас в качестве примера, скрипт используется, так как окно привязано к курсору

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

 

[rikitiki]

http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/

 

[searchingman]

http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/

Почему не задействовать родной плагин Tooltip от jQuery ?

 

[rikitiki]

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

 

[Kitanaell]

http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/

простите пожалуйста, а вы не могли бы вернуть эту ссылку, у меня пишет ошибку, нужно глянуть кое-что

 

[rikitiki]

простите пожалуйста, а вы не могли бы вернуть эту ссылку, у меня пишет ошибку, нужно глянуть кое-что

У меня ссылка открывается.
Цитирую пост по ссылке:
"... Окей, хороший пример, но прошу, помогите разобраться полностью, ибо я в 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-блока за курсором. ...."

 

[rikitiki]

Заметил что при установке всплывающего описания перестал нормально работать accodion в плагине Collapsing Categories. Жмёшь на стрелки, а списки не разворачиваются и не свёртываются.
Оказалось что виновен код, который я вставил в functions.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' ), false, null, true );
        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/
Однако теперь получается что двойная загрузка библиотеки происходит в хедере и в футере, что не есть хорошо.

 

[rikitiki]

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