Главная/WordPress Fullstack/Блупринты/WooCommerce/Разработка кастомного переключателя вариаций (Swatches) и обход AJAX-порога для 50+ вариаций
К карточкам раздела «WooCommerce»WooCommerce(ТЗ 39 из 54)
ТЗ: Разработка кастомного переключателя вариаций (Swatches) и обход AJAX-порога для 50+ вариацийТрудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)
ТЗ заказчика (исходный бриф):
«У нас магазин одежды. Стандартные серые выпадающие списки выбора цвета и размера выглядят ужасно. Нужны круглые кружки с цветами и квадратные кнопки размеров. А для обуви, где больше 35 вариаций, плагины Swatches ломаются: при клике на цвет страница подвисает, а кнопка "В корзину" блокируется. Сделайте быстро и без тяжелых плагинов!»
Ключевые требования:
- •Кастомная разметка кнопок выбора атрибутов: Color (кружки с hex-цветом) и Size (кнопки размеров)
- •Управление атрибутами через таксономии WooCommerce с добавлением поля выбора цвета (Color Picker) в админке
- •Корректная обработка товаров с числом вариаций > 30 (преодоление лимита woocommerce_ajax_variation_threshold)
- •Динамическое отключение недоступных комбинаций (неактивный вид кнопки и tooltip "Нет в наличии")
- •Мгновенная замена главной фотографии товара и галереи при выборе конкретного цвета
Ограничения проекта:
- •Запрет на использование тяжелых коммерческих плагинов с ежегодной подпиской
- •0 jQuery-зависимостей: чистый легковесный Vanilla JS (< 8 Кб)
- •Сохранение полной доступности (ARIA-атрибуты и управление с клавиатуры стрелками)
Критерии приёмки (KPI):
- Время переключения вариации < 16 мс (60 FPS)
- Вес клиентского скрипта < 8 Кб (вместо 120 Кб у сторонних плагинов)
- Идеальная работа на товарах со 100+ вариациями
Пошаговое практическое руководство по ТЗ
Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу: