Dokumentation für HUSKY Plugin Shortcode woof_slideout - technische Referenz für das ausziehbare Filterpanel ---

woof_slideout

Der [woof_slideout] Shortcode erstellt ein ausziehbares Filterpanel, das vom Bildschirmrand erscheint. Dies ist eine platzsparende Lösung, die den Filter verborgen hält, bis der Benutzer ihn benötigt – ideal für mobile Geräte, Produktarchivseiten oder jedes Layout, bei dem der Bildschirmplatz begrenzt ist.

Das ausziehbare Panel unterstützt sowohl Bild- als auch Text-Trigger, konfigurierbare Animationen, mobilspezifisches Verhalten und leitet alle unbekannten Attribute an den inneren [woof] Shortcode weiter.

Attribute

Attribut	Standard	Beschreibung
image	Standard-Plugin-Symbol	URL zum Trigger-Bild. Auf null setzen, um stattdessen einen Text-Button zu verwenden.
image_h	50	Höhe des Trigger-Bildes in Pixeln
image_w	50	Breite des Trigger-Bildes in Pixeln
action	click	Trigger-Aktion: click oder hover
location	right	Ausziehposition: left, right, top oder bottom
speed	100	Animationsgeschwindigkeit in Millisekunden
offset	100px	Versatz von oben (für linke/rechte Position) oder links (für obere/untere Position). Unterstützt px, %, em, etc.
onloadslideout	true	Ob das Panel beim Laden der Seite geöffnet sein soll (true oder false)
mobile_behavior	0	Sichtbarkeitskontrolle: 0 = auf allen Geräten anzeigen, 1 = nur auf Mobilgeräten anzeigen, 2 = nur auf Desktops anzeigen
width	auto	Panel-Breite (z. B. 350px, 30%, auto)
height	auto	Panel-Höhe (z. B. 500px, auto)
text	Filter	Button-Text, der angezeigt wird, wenn image auf null gesetzt ist. Wird auch als Handle-Beschriftung verwendet.
class	''	Zusätzliche CSS-Klasse für den Slideout-Container
redirect	''	Weiterleitungs-URL nach Anwendung des Filters

Grundlegende Verwendung

[woof_slideout]

Rendert ein ausziehbares Filterpanel von der rechten Seite mit Standardeinstellungen. Das Panel enthält den Standard-[woof] Filter.

Ausziehen von links

[woof_slideout location="left" speed="300" width="400px"]

Zieht von der linken Seite mit einer 300ms Animation und 400px Panel-Breite aus.

Text-Button statt Bild

[woof_slideout image="null" text="Filter Products"]

Verwendet einen Text-Button ("Filter Products") anstelle eines Bildes als Trigger-Handle.

Nur-Mobil-Filter

[woof_slideout mobile_behavior="1" location="bottom" height="80%"]

Das Slideout erscheint nur auf mobilen Geräten, von unten, und nimmt 80% der Bildschirmhöhe ein. Perfekt für Mobile-First-Designs.

Automatisches Öffnen beim Laden mit Hover-Trigger

[woof_slideout onloadslideout="true" action="hover" speed="200"]

Das Panel ist standardmäßig geöffnet und reagiert auf Hover (nicht auf Klick). Animiert in 200ms.

Erweitert: Benutzerdefinierter Inhalt innen

[woof_slideout location="right" width="350px"]
  [woof taxonomies="product_cat" sid="slideout-cat"]
[/woof_slideout]

Jeder Inhalt, der zwischen den öffnenden und schließenden Tags platziert wird, wird als Slideout-Inhalt verwendet. In diesem Beispiel wird ein spezifischer [woof] Shortcode mit Kategorie-Taxonomie-Filterung innerhalb des Slideouts platziert.

Attribute an den inneren [woof] Shortcode übergeben

[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]

Attribute, die nicht Teil des Slideouts selbst sind (taxonomies, sid, by_text, etc.), werden automatisch an den inneren [woof] Shortcode weitergeleitet. Das bedeutet, jedes [woof] Attribut funktioniert transparent.

Nur Desktop mit Versatz

[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]

Nur auf dem Desktop sichtbar, rechts positioniert mit 200px Versatz von oben, 320px breit.

PHP Beispiel: Slideout-Template überschreiben

Sie können das Slideout-Template überschreiben, indem Sie eine Datei unter folgendem Pfad platzieren:

wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php

Oder das Slideout-Verhalten programmatisch filtern:

add_filter('woof_slideout_options', function($options) {
    if (is_product_category()) {
        $options['width'] = '100%';
        $options['location'] = 'bottom';
    }
    return $options;
});

Hinweise

• Die Slideout-Erweiterung muss in den HUSKY Plugin-Einstellungen aktiviert sein, damit der Shortcode funktioniert.
• Bei Verwendung eines Bildes als Trigger wird eine Größe von etwa 50×50 Pixeln empfohlen.
• Das Attribut redirect leitet, wenn es gesetzt ist, die Seite nach Auswahl der Filterwerte zur angegebenen URL weiter.
• Mehrere Slideout-Instanzen auf derselben Seite werden unterstützt – jede erhält einen eindeutigen Schlüssel.