Principal/WordPress Fullstack/Blueprints/WooCommerce/Selector de variaciones personalizado (Swatches) y omisión del umbral AJAX para más de 50 variaciones
Volver a tarjetas «WooCommerce»
WooCommerce(ТЗ 39 из 54)
Especificación: Selector de variaciones personalizado (Swatches) y omisión del umbral AJAX para más de 50 variaciones
WooCommerce5 шагов • +25 XP

Especificación: Selector de variaciones personalizado (Swatches) y omisión del umbral AJAX para más de 50 variaciones

Desarrollo de selectores visuales de variaciones: reemplazo de desplegables por muestras de color, imagen y botones, omisión del límite AJAX con woocommerce_ajax_variation_threshold, precarga en cliente y gestión visual de stock.

~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)

ТЗ заказчика (исходный бриф):

En nuestra tienda de moda tenemos productos con más de 60 variaciones (colores, tallas, tejidos). Los desplegables habituales son incómodos y WooCommerce deja de precargar datos a partir de 30 variaciones, generando retrasos molestos al seleccionar.
Ключевые требования:
  • •Botones visuales (círculos de color, imágenes de muestra, botones de talla) en lugar de desplegables
  • •Campos de metadatos en taxonomías de atributos para códigos HEX y fotos
  • •Ajuste del filtro woocommerce_ajax_variation_threshold para permitir precarga fluida en el cliente
  • •Indicación gráfica clara de combinaciones agotadas o no disponibles
  • •Accesibilidad por teclado conforme al estándar WCAG 2.1 AA (roles ARIA de radiogroup)
Ограничения проекта:
  • •Sin plugins pesados de terceros que añadan CSS o JS sobrecargado
  • •Conservar los eventos nativos de variación de WooCommerce (found_variation, reset_data)
  • •Carga optimizada de JSON para no sobrecargar el renderizado inicial
Критерии приёмки (KPI):
  • Cambio de variación inmediato en < 50ms sin retrasos perceptibles
  • Aumento de la conversión de productos variables en al menos un 15%
  • Puntuación perfecta de accesibilidad en Lighthouse para la ficha de producto

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

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

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

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

1
Этап 1 из 5

Paso 1: Campos personalizados en atributos para color e imagen

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

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

En functions.php, añada selectores de color e imagen a los términos de atributos (pa_color, pa_size). Guarde los datos con update_term_meta().

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

Sanee los códigos hexadecimales con sanitize_hex_color() antes de almacenarlos.

Совет эксперта (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

Paso 2: Aumento del umbral AJAX con woocommerce_ajax_variation_threshold

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

Paso 3: Maquetación accesible de muestras y roles ARIA

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

Paso 4: Script en cliente y gestión de productos sin stock

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

Paso 5: Optimización táctil y verificación de accesibilidad

~30 минЛегкий

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

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

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

Интеграция