Verwendung von Größentabellen

Diese Anleitung führt dich von einer leeren Installation zu einer funktionierenden Größentabelle, erklärt dann das Storefront-Verhalten und den einen Entwickler-Filter, den Sizer bereitstellt.

1. Tabelle einmal erstellen

Öffne WooCommerce → Größentabellen → Größentabellen und füge eine Tabelle hinzu. Leg sie als beschriftete Tabelle an, Größen an der Seite, Maße oben drüber. Die erste Zelle jeder Zeile ist das Größenetikett und rendert als Zeilenheader. Weil Tabellen wiederverwendbar sind, erstelle eine Tabelle pro Messsystem, das du verkaufst (z.B. Erwachsene Oberteile und Erwachsene Unterteile) anstatt einer pro Produkt.

2. Zuweisen zu Produkten

Bearbeite jedes Produkt, öffne Produktdaten → Größentabelle und wähle die Tabelle aus. Die gleiche Tabelle kann zu einer beliebigen Anzahl von Produkten zugewiesen werden. Um einen Guide von einem Produkt zu entfernen, setze das Dropdown wieder auf - Keine Tabelle -; das löscht das Meta _sizer_chart_id und der Button hört auf, dort zu erscheinen.

3. Wortwahl festlegen (optional)

Auf dem Einstellungen-Tab, setze die Linkwortwahl (Button-Text) und die Pop-up-Überschrift (Dialog-Titel). Lass die Überschrift leer und sie verwendet wieder den Button-Text. Siehe Konfiguration.

Wie es auf der Storefront funktioniert

Auf einem Produkt mit zugewiesener Tabelle erscheint der Größentabelle-Button unter dem Add-to-Cart-Button. Klicken darauf öffnet ein natives <dialog> mit der Tabelle als barrierefreie Tabelle:

• Der Dialog öffnet sich mit showModal(), was ihn modal macht und den Fokus darin hält. Bei Öffnen bewegt sich der Fokus zum Schließen (×)-Button.
• Escape schließt den Dialog (natives <dialog>-Verhalten); genauso Klick auf den Hintergrund außerhalb des Dialogfelds oder den ×-Button.
• Bei Schließen kehrt der Fokus zum Größentabelle-Button zurück, der ihn geöffnet hat, auch wenn er mit Escape geschlossen wurde.
• Wo der Browser <dialog> nicht unterstützt, fällt das Script zurück auf das Umschalten der Sichtbarkeit des Elements, sodass die Tabelle trotzdem öffnet und schließt.

Innerhalb der Tabelle ist die erste Spalte das Größenetikett als <th scope="row"> und Header sind <th scope="col">, sodass Bildschirmleser jede Zelle mit ihrer Zeile und Spalte ankündigen. Jede Zeile ist fokussierbar (tabindex="0"); Hovern oder Tastaturfokus auf eine Zeile schiebt ein bernsteinfarbenes “Maßband”-Maßband entlang seines Größenetikett, sodass die Zeile, auf der du gelandet bist, unmissverständlich ist. Diese Hervorhebung wird unter prefers-reduced-motion unterdrückt.

Wenn eine Tabelle irgendwie keine Spalten oder keine Zeilen hat, zeigt der Dialog “Noch keine Größeninformationen verfügbar.” statt einer leeren Tabelle an.

Leistung und Barrierefreiheit

Das Stylesheet und das Script werden auf jeder Produktseite registriert, aber nur enqueued, wenn eine Tabelle tatsächlich zutrifft, sodass nicht zugewiesene Produkte nichts Extra herunterladen. Das Script ist abhängigkeitsfrei (kein jQuery), geladen defer im Footer. Die Ausgabe reserviert ihren Platz und fügt kein Layout-Shift hinzu, passt sich über prefers-color-scheme an den Dunkelmodus an und respektiert prefers-reduced-motion. Sizer macht keine externen Anfragen und fügt kein Tracking hinzu.

Erweitern der aufgelösten Tabelle (Entwickler)

Sizer registriert keine Shortcodes, der Button erscheint automatisch nach dem Add-to-Cart-Button. Der einzige Händler/Entwickler-fokussierte Hook ist ein Filter, der entscheidet, welche Tabellen-ID für ein Produkt gilt. Er feuert für jedes Produkt, auch wenn keins zugewiesen ist (die ID ist dann ein leerer String), sodass ein Add-on eine Fallback-Tabelle bereitstellen oder die zugewiesene überschreiben kann:

add_filter( 'sizer/resolved_chart_id', function ( string $chart_id, WC_Product $product ): string {
    // Shop-weiten Standard nur bereitstellen, wenn nichts zugewiesen ist.
    if ( '' === $chart_id ) {
        return 'adult-tops'; // eine vorhandene Tabellen-ID
    }

    return $chart_id;
}, 10, 2 );

Gib einen leeren String zurück, um keinen Guide zu rendern. Die ID, die du zurückgibst, muss mit einer vorhandenen Tabelle übereinstimmen, eine unbekannte ID löst auf nichts auf. Das ist genau der Hook, den Sizer Pro verwendet, um seine Shop-weite Standardtabelle hinzuzufügen, sodass er sauber mit deinen eigenen Filtern nach Priorität komponiert.