Повзунок діапазону у фільтрі WooCommerce: атрибути та метаполя

Розмір, потужність, довжина, діагональ екрана, рік, пробіг: числові дані товарів потребують повзунка діапазону, а не довгого списку прапорців. Повзунок діапазону для атрибутів у фільтрі WooCommerce легко ввімкнути в HUSKY, але так само легко отримати повзунок, який показує 100000 раніше за 9000, розбиває 1,9 на два значення або завжди йде від 0 до 100. Причина майже завжди одна: повзунки бувають двох видів, і числа вони обробляють по-різному. У цьому посібнику пояснено обидва, налаштування кожного та виправлення неправильного порядку, десяткових дробів і порожніх діапазонів.

Два повзунки діапазону: значення атрибута або числове метаполе

HUSKY може намалювати повзунок діапазону за даними двох видів, і від вибору залежить, що повзунок уміє.

Ключова відмінність: терміни атрибута — це текст. WordPress зберігає 9000 і 100000 як назви, а не числа, тому повзунок атрибута може лише рухатися списком термінів у заданому порядку. Він нічого не обчислює. Повзунок метаполя порівнює числа в базі даних, тож обробляє будь-яке значення в діапазоні, зокрема таке, якого немає в жодного іншого товару.

Власні атрибути товару, введені прямо на вкладці «Атрибути» товару без глобального атрибута, таксономіями не є, і жоден тип фільтра не може їх використати. Спершу створіть глобальний атрибут у розділі Товари → Атрибути (див. керування таксономіями товарів у документації WooCommerce).

Налаштування повзунка діапазону для атрибутів

1. Створіть глобальний атрибут, наприклад Потужність (Power), і додайте його значення як терміни: 5, 7.5, 10, 15. Призначте їх товарам як зазвичай.
2. Відкрийте WooCommerce → Налаштування → Products Filter → Структура й задайте цьому атрибуту тип Слайдер (Slider). Цей тип додає розширення Slider.
3. Натисніть кнопку додаткові опції (additional options) (шестірня) поруч з атрибутом і задайте опції повзунка:
   • Тип (Type): подвійний (double) для діапазону «від-до»; одинарний (single) для одного маркера, який вибирає все від першого значення до маркера («до 10 кВт»).
   • Крок сітки (Grid step): які підписи під повзунком видно. 1 показує всі, 2 — кожен другий, -1 ховає підписи між кінцями. Корисно, коли довгі значення накладаються.
   • Увімкнути динамічний перерахунок (Enable dynamic recount): прибирає значення без товарів у поточних результатах (див. нижче).
   • Тема слайдера (Slider skin): дизайн цього повзунка.
4. Залиште Логіка фільтрації (Logic of filtering) на OR. Повзунок надсилає кожен термін вибраної ділянки, наприклад pa_power=5,7-5,10, і товару потрібен лише один із них. З AND товару були б потрібні всі, і нічого б не знаходилося.

Оскільки діапазон — це «терміни між маркерами», порядок термінів і є всією логікою повзунка. Якщо в списку 6.5 стоїть після 8.2, діапазон від 6 до 7 його пропустить. Наступний розділ пояснює, як виправити порядок.

Значення повзунка атрибута в неправильному порядку

Типові симптоми: 100000 іде перед 9000, 10 і 11 — перед 2, від’ємні значення йдуть як -1, -2, -3, 0, 1, або маркери стрибають туди й сюди під час перетягування. Усе це текстове сортування. Виправлення — задати термінам числовий порядок.

Найкраще: нехай WooCommerce сортує атрибут як числа

Перейдіть до Товари → Атрибути, відредагуйте атрибут і встановіть Порядок сортування за замовчуванням (Default sort order) у Назва (числова) (Name (numeric)). Тоді WooCommerce впорядковує терміни за числовим значенням їхніх назв, що охоплює десяткові дроби з крапкою, від’ємні числа й назви, які починаються з числа, наприклад 10 cm. У додаткових опціях повзунка залиште Сортувати терміни (Sort terms) на За замовчуванням (Default), щоб HUSKY зберіг цей порядок. Якщо ввімкнено Кешувати терміни (Cache terms) (Додатково → Опції), після цього натисніть очистити кеш термінів (clear terms cache).

Для текстової шкали виберіть натомість Власне впорядкування (Custom ordering) і перетягніть терміни на місця на екрані Налаштувати терміни (Configure terms) атрибута: м’який, середній, середньо-твердий, твердий. Те саме перетягування працює для будь-якого числового списку, порядок якого ви хочете задати вручну.

Власні опції HUSKY для сортування термінів

Опція Сортувати терміни (Sort terms) у додаткових опціях повзунка перевизначає порядок за замовчуванням:

• Назва (Title) використовує природне сортування назв: правильне для цілих додатних чисел (2 перед 10) і для назв на кшталт 10 cm, але не для десяткових і від’ємних чисел.
• Числове (Numeric.) порівнює ціле значення слага терміна. Воно працює лише для цілих додатних чисел: слаг для 6.5 — це 6-5, що рахується як 6, а WordPress прибирає початковий мінус під час створення слага, тож -3 сортується як 3.

Код: числовий порядок для повзунка будь-якої таксономії

Для власної таксономії, де Назва (числова) (Name (numeric)) від WooCommerce недоступна, відсортуйте значення повзунка в коді. Фільтр woof_sort_terms_before_out отримує терміни кожного фільтра та тип фільтра:

/**
 * HUSKY: order the values of every taxonomy range slider by their number
 * (decimals with a dot and negative numbers included).
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_sort_terms_before_out', function ( $terms, $type ) {
    if ( 'slider' === $type && is_array( $terms ) ) {
        uasort( $terms, function ( $a, $b ) {
            return (float) $a['name'] <=> (float) $b['name'];
        } );
    }
    return $terms;
}, 20, 2 );

Терміни без початкового числа (текстова шкала) тут усі рахуються як 0 і зберігають наявний порядок, тож сніпет не порушує такі повзунки.

Десяткові дроби, коми та нерівні кроки в повзунках атрибутів

• Записуйте десяткові дроби з крапкою. Повзунок отримує свої підписи одним списком через кому, тож термін з назвою 1,9 стає двома підписами, 1 і 9, і кожне наступне положення вказує не на той термін. Перейменуйте такі терміни на 1.9. Це не пов’язано з налаштуванням десяткового роздільника магазину: назви термінів — це звичайний текст.
• Положення розташовані рівномірно за термінами, а не за значеннями. Терміни 1, 2, 5 і 50 отримують чотири рівні кроки. Якщо повзунок має виглядати пропорційним, додайте відсутні проміжні значення як терміни.
• Повзунку потрібно щонайменше два значення. Якщо термінів лише два, маркери можуть стояти тільки на двох кінцях. Якщо після динамічного перерахунку лишається менше двох значень, повзунок не показується взагалі.
• Вибрати можна лише наявні терміни. Товар зі значенням 6.5 буде знайдено лише тоді, коли термін 6.5 існує й лежить між маркерами.

Повзунок діапазону для метаполів: розміри, роки й інші числа

Коли значення — це справжній вимір, повзунок метаполя зазвичай кращий інструмент: він порівнює числа, приймає поля введення «від/до» й лишається швидким за тисяч різних значень. Налаштування через розширення Meta Fields:

1. Відкрийте вкладку Метадані (Meta Data) налаштувань фільтра. Введіть ключ у Додати власний ключ вручну (Add Custom key by hands) або скористайтеся Отримати ключі будь-якого товару за його ID (Get keys from any product by its ID), щоб побачити, які ключі має товар.
2. Задайте полю тип число (number) і вигляд Слайдер (Slider). Для текстових полів і полів дати повзунок не пропонується. Збережіть.
3. Відкрийте додаткові опції поля й заповніть Діапазон (Range) як min^max, наприклад 10^250. Задайте Крок (Step) (0.5 підходить), а за потреби Префікс (Prefix), Постфікс (Postfix) (cm), Показувати поля введення (Show inputs) для числових полів «від/до» та Використовувати форматування (Use prettify) для роздільника тисяч.
4. Розмістіть новий елемент фільтра на вкладці «Структура», як і будь-який інший.

Корисні ключі: WooCommerce зберігає габарити для доставки й вагу товару як _length, _width, _height і _weight. Числове поле ACF зберігається під назвою свого поля. Докладніше про ключі метаданих — у документації з метаданих.

Що варто знати про повзунки метаполів:

• Діапазон ніколи не обчислюється. Повзунок показує саме той Діапазон (Range), який ви ввели; порожнє поле означає 0–100. Щоб знайти справжні мінімум і максимум, довелося б зчитувати кожен товар під час кожного перегляду сторінки. Динамічний перерахунок визначає, які фільтри та значення показувати, а не де повзунок починається й закінчується. Оновлюйте діапазон, коли нові товари виходять за його межі.
• Зберігайте звичайні числа з крапкою як десятковим роздільником і без роздільника тисяч: 1250.5. База даних зчитує лише число на початку значення, тож 1,250.5 порівнюється як 1, а 1250,5 — як 1250.
• Роки: діапазон на кшталт 1990^2026, крок 1 і Використовувати форматування (Use prettify) зі значенням Ні (No), інакше 2026 показується як 2 026.
• Варіації: шукаються метадані самого товару. Якщо значення є лише у варіацій, збережіть його також у батьківському товарі або скористайтеся атрибутом.

Десяткові значення: woof_slider_meta_query_type

За замовчуванням повзунок метаполя порівнює значення як NUMERIC, що MySQL трактує як цілі числа. Тоді товар зі значенням 10.11 знаходиться в діапазоні 1–10, а 4.2, 4.4 і 4.6 усі рахуються як 4. Щоб порівнювати десяткові дроби, змініть тип фільтром woof_slider_meta_query_type:

/**
 * HUSKY: compare these meta sliders as decimal numbers.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_slider_meta_query_type', function ( $type, $meta_key ) {
    if ( in_array( $meta_key, array( '_length', '_width', '_height', 'screen_size' ), true ) ) {
        return 'DECIMAL(10,2)'; // up to 99999999.99
    }
    return $type;
}, 10, 2 );

У DECIMAL(M,D) параметр M — це загальна кількість цифр, а D — цифри після крапки. Підберіть їх під своє найбільше значення: з DECIMAL(5,3) максимум становить 99.999, а кожне більше значення трактується як 99.999.

Приховування повзунків, які не стосуються поточної категорії

• Повзунок атрибута: у його додаткових опціях встановіть Увімкнути динамічний перерахунок (Enable dynamic recount) у Так (Yes). Значення без товарів у поточній категорії та за поточного вибору фільтра зникають, а коли лишається менше двох значень, повзунок прибирається. Кожне значення коштує одного додаткового запиту підрахунку, тож для атрибутів із сотнями термінів стежте за швидкістю сторінки або скористайтеся повзунком метаполя.
• Повзунок метаполя: якщо на вкладці Options задати Приховувати порожні терміни (Hide empty terms) у Так (Yes), повзунок метаполя, для якого в поточних результатах немає товарів у його діапазоні, не показується.

Повзунок атрибута без значень прибирається скриптом плагіна після завантаження сторінки, тому його заголовок може на мить блимнути. Цей CSS ховає його від самого початку (Вигляд → Налаштувати → Додатковий CSS або таблиця стилів вашої дочірньої теми):

/* HUSKY: hide empty taxonomy sliders before the script removes them */
.woof_container_slider:has(.woof_hide_slider) {
    display: none;
}

Коли сам товар має діапазон

Повзунок знаходить товари за одним значенням на товар. Якщо товар охоплює діапазон (підходить для зросту 150–190 см, для 3–10 гравців), вбудованого пошуку «діапазони перетинаються» немає. Є дві робочі моделі:

• Два метаполя, наприклад players_min і players_max, кожне з власним повзунком. Відвідувач, який шукає гру для 4 гравців, ставить перший повзунок на 1–4, а другий на 4–10.
• Атрибут з одним терміном на значення (150, 151 ... 190), де товару призначено всі відповідні терміни, а сам атрибут показано повзунком. Призначайте терміни масово, а не вручну.

Контрольний список

• Повзунок атрибута: глобальний атрибут, десяткові дроби з крапкою, Порядок сортування за замовчуванням (Default sort order) зі значенням Назва (числова) (Name (numeric)) або терміни, перетягнуті в потрібний порядок, Логіка фільтрації (Logic of filtering) на OR.
• Повзунок метаполя: тип поля число (number), звичайні числові значення, Діапазон (Range) заповнено як min^max, десятковий тип для дробових значень.
• Багато різних значень або справжні виміри: повзунок метаполя замість атрибута із сотнями термінів.
• Повзунки не в тих категоріях: Увімкнути динамічний перерахунок (Enable dynamic recount) для повзунків атрибутів, Приховувати порожні терміни (Hide empty terms) для повзунків метаполів.

Якщо після цих кроків повзунок усе ще показує неправильні значення, запитайте на форумі підтримки HUSKY, додавши атрибут або ключ метаданих, кілька прикладів значень і посилання на сторінку.