Графік історії цін

Графік історії цін візуалізує зміни цін товару у формі компактного SVG-графіка sparkline. Клієнти бачать, як ціна змінювалася за обраний період (30, 90 або 180 днів), що формує прозорість та довіру до акцій.

Увімкнення модуля

Перейдіть до WooCommerce > Polski > Магазинні модулі та увімкніть Графік історії цін. Графік з’явиться автоматично на сторінках товарів, які мають збережену історію цін.

Функції

Графік sparkline, відрендерений як SVG (без залежностей від JS-бібліотек)
Налаштовувані періоди: 30, 90 або 180 днів
Відображення мінімальної та максимальної ціни за період
Градієнт заповнення під лінією графіка
Точка, що вказує поточну ціну
Кольори графіка, що налаштовуються в опціях
Автоматичне отримання даних із репозиторію Omnibus

Налаштування

Налаштування у WooCommerce > Polski > Магазинні модулі > Графік історії цін.

Налаштування	За замовчуванням	Опис
`days`	`30`	Період графіка у днях: `30`, `90` або `180`
`show_min_max`	`true`	Відображати мінімальну та максимальну ціну під графіком
`color`	`#2563eb`	Колір лінії графіка та градієнта

Опція в базі даних: polski_price_history.

Вигляд графіка

Графік складається з таких елементів:

Лінія, перебіг ціни в часі (stroke SVG)
Градієнт, напівпрозоре заповнення від лінії до низу графіка
Точка, поточна ціна товару (остання точка на графіку)
Min/Max, етикетки з мінімальною та максимальною ціною (опціонально)

Розмір графіка підлаштовується під контейнер. Типова висота, це 60px.

Технічні деталі

Джерело даних

Графік отримує дані з класу OmnibusPriceRepository, який зберігає історію змін цін, потрібну для директиви Omnibus. Кожна точка даних містить дату та ціну товару.

Для варіативних товарів графік генерується для поточно обраного варіанта (оновлення через JavaScript після зміни варіанта).

Рендеринг SVG

Графік рендериться на стороні сервера як inline SVG, без зовнішніх бібліотек, без HTTP-запитів, без JavaScript для малювання. Завдяки цьому графік:

Відображається миттєво (без flash of unstyled content)
Доступний для програм читання з екрана (aria-label)
Не впливає на Core Web Vitals

Хуки

// Динамічно змінити період графіка
add_filter('polski/price_history/days', function (int $days, int $product_id): int {
    // Довший період для сезонних товарів
    if (has_term('sezonowe', 'product_cat', $product_id)) {
        return 180;
    }
    return $days;
}, 10, 2);

// Змінити позицію графіка на сторінці товару
add_filter('polski/price_history/hook', function (): string {
    return 'woocommerce_single_product_summary'; // за замовчуванням: woocommerce_product_meta_start
});

// Змінити пріоритет хука
add_filter('polski/price_history/hook_priority', function (): int {
    return 25;
});

// Фільтрувати дані графіка
add_filter('polski/price_history/data', function (array $prices, int $product_id): array {
    return $prices;
}, 10, 2);

CSS-класи

.polski-price-history, головний контейнер
.polski-price-history__chart, елемент SVG
.polski-price-history__label, етикетки min/max
.polski-price-history__min, мінімальна ціна
.polski-price-history__max, максимальна ціна

.polski-price-history {
    margin: 1rem 0;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;
}

ID модуля

price_history_chart

Усунення проблем

Графік не відображається, перевірте, чи модуль Omnibus увімкнено та чи товар має збережену історію цін. Нові товари не матимуть графіка до першої зміни ціни.

Графік порожній/плоский, якщо ціна не змінювалася за обраний період, графік показує плоску лінію. Це правильна поведінка.

Кольори графіка не пасують до теми, змініть колір у налаштуваннях модуля або перевизначте в CSS: .polski-price-history__chart path { stroke: #your-color; }.

Повідомлення про проблеми: github.com/wppoland/polski/issues

Ця сторінка має виключно інформаційний характер і не є юридичною консультацією. Перед впровадженням проконсультуйтеся з юристом. Polski for WooCommerce, це програмне забезпечення з відкритим кодом (GPLv2), що надається без гарантій.