Как я настроил Swiper Slider для работы с вариациями товаров в WooCommerce: Подробный гайд
Иногда стандартный функционал WooCommerce может быть чуть-чуть скучноват. Вот, например, слайдер изображений на страницах товаров. Стандартные настройки — это, конечно, хорошо, но когда хочется чего-то по-настоящему стильного и функционального, на сцену выходит Swiper Slider.
В этой статье я расскажу, как мне удалось интегрировать Swiper Slider с WooCommerce, чтобы он не только красиво отображал картинки, но и переключался при выборе вариаций товаров. Спойлер: результат получился просто огонь!
Почему Swiper, а не стандартный слайдер WooCommerce?
Скажу честно, стандартный слайдер WooCommerce вполне себе ничего, но Swiper — это просто космос. Это не только гибкий и мощный инструмент, но и невероятно удобный для кастомизации. Здесь тебе и поддержка навигации через кнопки, и мышью можно листать, и клавиатурой — настоящий подарок для разработчика. Плюс, он адаптируется под любой экран, а это значит, что на мобильных устройствах он выглядит так же круто, как и на десктопе.
Что мы хотим добиться?
- Настроить Swiper так, чтобы он отображал изображения товаров.
- Добавить зум при наведении на картинки (да-да, как в интернет-магазинах больших брендов).
- Реализовать переключение между слайдами в зависимости от выбора вариаций товаров (например, цвет или размер).
Шаг 1: Инициализация Swiper
Итак, первым делом мы интегрируем Swiper на страницу. Здесь нет ничего сложного: немного JavaScript, и слайдер готов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
jQuery(document).ready(function($) { var productswiper = new Swiper('.productswiper', { loop: true, lazy: { loadOnTransitionStart: true, loadPrevNext: true, }, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, mousewheel: { sensitivity: 1, eventsTarget: ".productswiper", }, keyboard: { enabled: true, onlyInViewport: true, }, slidesPerView: 1, spaceBetween: 10, autoHeight: true, }); }); |
Здесь мы включили поддержку навигации (стрелки вперед-назад), колесо мыши, возможность листать слайды через клавиатуру и, конечно же, режим “ленивой загрузки”, чтобы картинки подгружались только по мере необходимости.
Шаг 2: Убираем ненужные ссылки
Обычно изображения продуктов обернуты в ссылки, и при клике по ним тебя перекидывает на страницу с картинкой. Но нам это не нужно, так что мы просто убираем атрибут href у всех ссылок в слайдере. Это делается буквально за пару строк:
|
1 2 3 4 5 6 7 8 9 |
jQuery(document).ready(function($) { console.log("Отключаем переходы по ссылкам в слайдере"); $('.woocommerce-product-gallery__image a').each(function() { $(this).removeAttr('href'); }); console.log("Переходы по ссылкам отключены"); }); |
Теперь, когда пользователь кликает по изображению, ничего не происходит — именно то, что нам и нужно!
Шаг 3: Добавляем зум для изображения
Мы все видели это в крупных магазинах: наводишь курсор на картинку, и она сразу увеличивается, позволяя рассмотреть все детали. Крутой эффект, и его довольно легко реализовать. Вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
document.querySelectorAll('.swiper-slide img').forEach(function(image) { image.addEventListener('mouseenter', function(event) { let zoomContainer = document.createElement('div'); zoomContainer.classList.add('zoom-container'); let originalImage = new Image(); originalImage.src = image.src; // Оригинальное изображение zoomContainer.appendChild(originalImage); document.body.appendChild(zoomContainer); zoomContainer.style.display = 'block'; image.addEventListener('mousemove', function(event) { let rect = image.getBoundingClientRect(); let xPos = event.clientX - rect.left; let yPos = event.clientY - rect.top; let xPercent = xPos / rect.width * 100; let yPercent = yPos / rect.height * 100; originalImage.style.transform = `translate(-${xPercent}%, -${yPercent}%)`; zoomContainer.style.left = `${event.pageX - zoomContainer.offsetWidth / 2}px`; zoomContainer.style.top = `${event.pageY - zoomContainer.offsetHeight / 2}px`; }); image.addEventListener('mouseleave', function() { zoomContainer.remove(); }); }); }); |
Теперь при наведении на изображение появляется круглый контейнер с увеличенной копией картинки, который двигается вслед за курсором. Выглядит это потрясающе!
Шаг 4: Переключение изображений при выборе вариаций товара
Один из самых интересных моментов — это заставить слайдер прокручиваться к нужному изображению при выборе вариаций (например, когда ты выбираешь другой цвет товара). И вот здесь начинается настоящая магия.
WooCommerce сам обновляет изображение товара при выборе вариации, но нам нужно, чтобы наш Swiper делал то же самое. Для этого мы следим за изменением атрибута current-image, который появляется после выбора вариации. В итоге, наш код выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
jQuery(document).ready(function($) { function switchToSlideByImageId(imageId) { var imageFound = false; $('.swiper-slide').each(function(index) { let slideImageId = $(this).find('img').attr('data-image-id'); console.log('Проверяем слайд', index, 'с ID изображения', slideImageId); if (slideImageId === imageId) { console.log('Найдено совпадение для изображения на слайде', index); productswiper.slideTo(index); imageFound = true; return false; // Прерываем цикл, как только нашли совпадение } }); if (!imageFound) { console.log('Изображение с ID ' + imageId + ' не найдено среди слайдов'); } } const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'attributes' && mutation.attributeName === 'current-image') { let imageId = $(mutation.target).attr('current-image'); console.log('Атрибут current-image изменен на', imageId); if (imageId) { switchToSlideByImageId(imageId); } } }); }); const targetNode = $('form.variations_form')[0]; if (targetNode) { observer.observe(targetNode, { attributes: true, attributeFilter: ['current-image'] }); } $('form.variations_form').on('found_variation', function(event, variation) { console.log('Событие "found_variation" сработало'); let currentImageElement = $(this).find('[current-image]'); let imageId = currentImageElement.attr('current-image'); console.log('Текущий ID изображения вариации:', imageId); if (imageId) { switchToSlideByImageId(imageId); } }); }); |
Здесь мы используем MutationObserver, чтобы следить за изменениями атрибута current-image. Как только он обновляется, мы вызываем функцию, которая прокручивает слайдер к нужному изображению.
Итог
Настройка Swiper Slider под WooCommerce — это отличное решение для улучшения пользовательского интерфейса и повышения интерактивности сайта. Теперь слайдер автоматически переключается на нужное изображение при выборе вариации товара, а зум при наведении добавляет визуальной привлекательности.
Так что, если вы хотите сделать свой интернет-магазин не просто функциональным, но и стильным — Swiper вам точно поможет. Удачной разработки!
