Быстрый просмотр ведет себя по разному на страницах сайта, как исправить?

Ссылка скопирована
1 ответ

Добрый день, есть главная страница сайта https://xn----7sbb4acwee0d.xn--p1ai/ и страница подкатегорий https://xn----7sbb4acwee0d.xn--p1ai/product-catego... На главной странице при наведении на товар появляется быстрый просмотр, а на странице подкатегорий она появлется на всех товарах сразу, хотя наводишь только на один. Как сделать, чтобы работало, как на главной, пробовала display none и hover display block, но все равно затрагивает все товары одновременно, хотелось бы чтобы действовала только на один. В чем может причина?

Дополнительно:

Ответы:

в классе product в первом диве на странице:

<div data-elementor-type="product-archive" data-elementor-id="16478" class="elementor elementor-16478 elementor-location-archive product" data-elementor-post-type="elementor_library">

<div data-elementor-type="product-archive" data-elementor-id="16478" class="elementor elementor-16478 elementor-location-archive product" data-elementor-post-type="elementor_library">

  • Спасибо добрый человек, помогает, но удаляю, начинает работать, как надо, но почему то все становится на полную ширину экрана, или его не нужно удалять, а что то в нем исправить?
  • OlgaBasova, определение класса менять не нужно, нужно его просто удалить из списка классов для указанного дива
    у меня по крайней мере ничего по ширине расползается, если код из ответа сделать таким: 
    <div data-elementor-type="product-archive" data-elementor-id="16478" class="elementor elementor-16478 elementor-location-archive" data-elementor-post-type="elementor_library">

    <div data-elementor-type="product-archive" data-elementor-id="16478" class="elementor elementor-16478 elementor-location-archive" data-elementor-post-type="elementor_library">

    ДОБАВКА: в коде к этому product через :hover привязано появление визуализации, поэтому его наличие в считай корневом элементе и приводи к активации визуализации на всех настоящих карточках

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Роман IT Ответ

Судя по описанию, проблема не в самом hover, а в области, на которую повешен CSS или JavaScript быстрого просмотра. На странице архива Elementor у Вас класс product оказался на общем контейнере архива, а не только на карточке товара. Поэтому селектор вида .product:hover .quick-view начинает срабатывать для всех внутренних товаров сразу.

Удалять класс product у внешнего контейнера вручную можно только как временную проверку. Если после удаления ломается ширина, значит Elementor/WooCommerce использует этот класс ещё и для сетки. Надёжнее сузить селекторы до карточки товара, а внешний контейнер не трогать.

Проверьте разметку и найдите реальный контейнер одной карточки. Обычно это li.product или элемент WooCommerce loop. CSS должен быть примерно таким:

.woocommerce ul.products li.product .quick-view {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
 
.woocommerce ul.products li.product:hover .quick-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.woocommerce ul.products li.product .quick-view { opacity: 0; visibility: hidden; pointer-events: none; } .woocommerce ul.products li.product:hover .quick-view { opacity: 1; visibility: visible; pointer-events: auto; }

Если у Вас кнопка внутри Elementor-виджета, используйте класс именно карточки, например:

.elementor-widget-wc-archive-products li.product:hover .quick-view-button {
  opacity: 1;
}

.elementor-widget-wc-archive-products li.product:hover .quick-view-button { opacity: 1; }

Вторая частая причина — JS ищет элементы глобально:

document.querySelectorAll('.quick-view').forEach(...)

document.querySelectorAll('.quick-view').forEach(...)

А нужно работать от текущей карточки:

cards.forEach((card) => {
  const button = card.querySelector('.quick-view');
  card.addEventListener('mouseenter', () => button.classList.add('is-visible'));
  card.addEventListener('mouseleave', () => button.classList.remove('is-visible'));
});

cards.forEach((card) => { const button = card.querySelector('.quick-view'); card.addEventListener('mouseenter', () => button.classList.add('is-visible')); card.addEventListener('mouseleave', () => button.classList.remove('is-visible')); });

Правильное исправление: не удалять системные классы WooCommerce, а уточнить CSS/JS-селекторы, чтобы они работали только внутри одной карточки товара. После правки проверьте архив категории, главную и мобильную версию, потому что быстрый просмотр на тач-устройствах часто требует отдельной логики.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

woocommerce Как отображать при фильтрации товары со значением search параметра visibility: HUSKY — Products Filter for WooCommerce? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов Safari Почему снова флагнули домен в safari? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов