Главная/WordPress Fullstack/Блупринты/WooCommerce/Разработка кастомного переключателя вариаций (Swatches) и обход AJAX-порога для 50+ вариаций
К карточкам раздела «WooCommerce»
WooCommerce(ТЗ 39 из 54)
ТЗ: Разработка кастомного переключателя вариаций (Swatches) и обход AJAX-порога для 50+ вариаций
WooCommerce5 шагов • +25 XP

ТЗ: Разработка кастомного переключателя вариаций (Swatches) и обход AJAX-порога для 50+ вариаций

Создание быстрого UI выбора вариаций (плитки цветов, размеров, изображений) вместо select-элементов. Обход зависаний страницы при 30+ вариациях через хук woocommerce_ajax_variation_threshold и асинхронную REST-подгрузку данных вариаций.

~10 ч работыУровень: MiddleCustom Variation Swatcheswoocommerce_ajax_variation_thresholdVanilla JavaScriptWooCommerce REST/AJAX EndpointsCSS Flexbox/GridGallery Image Sync
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~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+ вариациями

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Добавление поля выбора цвета в таксономию атрибутов

~40 минСредний

Практическое руководство:

Добавьте кастомное мета-поле цвета к элементам таксономии атрибутов (pa_color) с использованием нативного WordPress Color Picker (wp-color-picker).

План и контрольные точки реализации:
1Подключить хуки pa_color_add_form_fields и pa_color_edit_form_fields
2Подключить скрипт wp-color-picker в админке
3Сохранять мета-поле hex_color через update_term_meta
Важные технические нюансы и подводные камни:

Убедитесь, что поле цвета сохраняется при создании и редактировании термина таксономии.

Совет эксперта (Best Practice):

Использование sanitize_hex_color(): Всегда применяйте sanitize_hex_color() вместо общего sanitize_text_field(), чтобы исключить сохранение некорректных значений цвета в базу. (Важно: Если цвет не задан, используйте заглушку #e2e8f0, чтобы кнопка не отображалась прозрачной.)

Ожидаемый артефакт этапа:

Удобная настройка цветов для каждого оттенка прямо в панели атрибутов WooCommerce.

PHP
<?php
declare(strict_types=1);

add_action('pa_color_add_form_fields', function () {
    ?>
    <div class="form-field">
        <label for="term_color"><?php esc_html_e('Цвет плашки (HEX)', 'agenticlab'); ?></label>
        <input type="text" name="term_color" id="term_color" class="agenticlab-color-picker" value="#ffffff" />
    </div>
    <?php
});

add_action('pa_color_edit_form_fields', function ($term) {
    $color = get_term_meta($term->term_id, 'term_color', true) ?: '#ffffff';
    ?>
    <tr class="form-field">
        <th scope="row"><label for="term_color"><?php esc_html_e('Цвет плашки (HEX)', 'agenticlab'); ?></label></th>
        <td>
            <input type="text" name="term_color" id="term_color" class="agenticlab-color-picker" value="<?php echo esc_attr($color); ?>" />
        </td>
    </tr>
    <?php
});

add_action('admin_enqueue_scripts', function ($hook) {
    if (in_array($hook, ['edit-tags.php', 'term.php'], true)) {
        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script('wp-color-picker');
        wp_add_inline_script('wp-color-picker', 'jQuery(document).ready(function($){ $(".agenticlab-color-picker").wpColorPicker(); });');
    }
});

add_action('saved_pa_color', function ($term_id) {
    if (isset($_POST['term_color'])) {
        update_term_meta($term_id, 'term_color', sanitize_hex_color($_POST['term_color']));
    }
});
2
Этап 2 из 5

Переопределение разметки селекторов в шаблоне товара

~45 минСредний
3
Этап 3 из 5

Vanilla JS контроллер и синхронизация со скрытым селектом

~45 минСредний
4
Этап 4 из 5

Обход порога AJAX-вариаций (50+ вариаций без лагов)

~50 минСложный
5
Этап 5 из 5

Проверка недоступных комбинаций и переключения галереи

~30 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция