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

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

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

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

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 темы:
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/
Однако теперь получается что двойная загрузка библиотеки происходит в хедере и в футере, что не есть хорошо.
 
Последнее редактирование:
  • Like
Реакции: D&B

rikitiki

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