Price history chart

Das Preisverlaufsdiagramm visualisiert die Preisänderungen eines Produkts als kompaktes SVG-Sparkline-Diagramm. Kunden können sehen, wie sich der Preis über einen gewählten Zeitraum (30, 90 oder 180 Tage) verändert hat, was Transparenz und Vertrauen in Aktionen schafft.

Modul aktivieren

Gehen Sie zu WooCommerce > Polski > Shop-Module und aktivieren Sie Price history chart. Das Diagramm erscheint automatisch auf Produktseiten, für die ein Preisverlauf gespeichert ist.

Voraussetzung

Das Modul erfordert, dass das Modul Omnibus (Omnibus-Richtlinie) aktiviert ist, da dieses den Preisverlauf in der Datenbank speichert. Ohne es hat das Diagramm keine Daten zum Anzeigen.

Funktionen

• Sparkline-Diagramm als SVG gerendert (keine Abhängigkeit von JS-Bibliotheken)
• Konfigurierbare Zeiträume: 30, 90 oder 180 Tage
• Anzeige des Minimal- und Maximalpreises im Zeitraum
• Verlaufsfüllung unter der Diagrammlinie
• Punkt, der den aktuellen Preis anzeigt
• Diagrammfarben in den Einstellungen konfigurierbar
• Automatischer Datenabruf aus dem Omnibus-Repository

Einstellungen

Konfiguration unter WooCommerce > Polski > Shop-Module > Price history chart.

Einstellung	Standard	Beschreibung
days	30	Diagrammzeitraum in Tagen: 30, 90 oder 180
show_min_max	true	Minimal- und Maximalpreis unter dem Diagramm anzeigen
color	#2563eb	Farbe der Diagrammlinie und des Verlaufs

Datenbankoption: polski_price_history.

Erscheinungsbild des Diagramms

Das Diagramm besteht aus den folgenden Elementen:

• Linie - der Preisverlauf über die Zeit (SVG-Stroke)
• Verlauf - halbtransparente Füllung von der Linie bis zum unteren Rand des Diagramms
• Punkt - der aktuelle Preis des Produkts (der letzte Punkt im Diagramm)
• Min/Max - Beschriftungen mit dem Minimal- und Maximalpreis (optional)

Die Größe des Diagramms passt sich seinem Container an. Die Standardhöhe beträgt 60px.

Technische Details

Datenquelle

Das Diagramm ruft die Daten aus der Klasse OmnibusPriceRepository ab, die den von der Omnibus-Richtlinie geforderten Verlauf der Preisänderungen speichert. Jeder Datenpunkt enthält ein Datum und einen Produktpreis.

Bei variablen Produkten wird das Diagramm für die aktuell ausgewählte Variante generiert (Aktualisierung per JavaScript nach einem Variantenwechsel).

SVG-Rendering

Das Diagramm wird serverseitig als Inline-SVG gerendert - keine externen Bibliotheken, keine HTTP-Anfragen, kein JavaScript zum Zeichnen. Dadurch erreicht das Diagramm:

• Sofortige Anzeige (kein Flash of unstyled content)
• Zugänglichkeit für Screenreader (aria-label)
• Keine Auswirkung auf die Core Web Vitals

Hooks

// Change the chart period dynamically
add_filter('polski/price_history/days', function (int $days, int $product_id): int {
    // Longer period for seasonal products
    if (has_term('seasonal', 'product_cat', $product_id)) {
        return 180;
    }
    return $days;
}, 10, 2);

// Change the chart position on the product page
add_filter('polski/price_history/hook', function (): string {
    return 'woocommerce_single_product_summary'; // default: woocommerce_product_meta_start
});

// Change the hook priority
add_filter('polski/price_history/hook_priority', function (): int {
    return 25;
});

// Filter the chart data
add_filter('polski/price_history/data', function (array $prices, int $product_id): array {
    return $prices;
}, 10, 2);

CSS-Klassen

• .polski-price-history - Hauptcontainer
• .polski-price-history__chart - SVG-Element
• .polski-price-history__label - Min/Max-Beschriftungen
• .polski-price-history__min - Minimalpreis
• .polski-price-history__max - Maximalpreis

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

Modul-ID

price_history_chart

Fehlerbehebung

Das Diagramm wird nicht angezeigt - prüfen Sie, ob das Omnibus-Modul aktiviert ist und ob das Produkt einen gespeicherten Preisverlauf hat. Neue Produkte haben kein Diagramm, bis zu ihrer ersten Preisänderung.

Das Diagramm ist leer/flach - wenn sich der Preis im gewählten Zeitraum nicht geändert hat, zeigt das Diagramm eine flache Linie. Das ist korrektes Verhalten.

Die Diagrammfarben passen nicht zum Theme - ändern Sie die Farbe in den Moduleinstellungen oder überschreiben Sie sie per CSS: .polski-price-history__chart path { stroke: #your-color; }.

Probleme melden: github.com/wppoland/polski/issues

Diese Seite dient ausschließlich zu Informationszwecken und stellt keine Rechtsberatung dar. Konsultieren Sie vor der Umsetzung einen Anwalt. Polski for WooCommerce ist Open-Source-Software (GPLv2), die ohne Gewährleistung bereitgestellt wird.