[woof_slideout]

Shortcode [woof_slideout] tworzy wysuwany panel filtrowania, który pojawia się z krawędzi ekranu. To rozwiązanie oszczędzające miejsce – filtr pozostaje ukryty, dopóki użytkownik go nie potrzebuje – idealne na urządzenia mobilne, strony archiwum produktów lub dowolny układ, w którym przestrzeń ekranu jest ograniczona.

Wysuwany panel obsługuje zarówno wyzwalacze obrazkowe, jak i tekstowe, konfigurowalną animację, zachowanie specyficzne dla urządzeń mobilnych oraz przekazuje wszystkie nieznane atrybuty do wewnętrznego shortcode'a [woof].

Atrybuty

Atrybut	Wartość domyślna	Opis
`image`	Domyślna ikona wtyczki	Adres URL obrazka wyzwalacza. Ustaw `null`, aby zamiast niego użyć przycisku tekstowego.
`image_h`	`50`	Wysokość obrazka wyzwalacza w pikselach
`image_w`	`50`	Szerokość obrazka wyzwalacza w pikselach
`action`	`click`	Akcja wyzwalacza: `click` lub `hover`
`location`	`right`	Pozycja wysuwania: `left`, `right`, `top` lub `bottom`
`speed`	`100`	Szybkość animacji w milisekundach
`offset`	`100px`	Odstęp od góry (dla lokalizacji lewa/prawa) lub od lewej (dla lokalizacji góra/dół). Obsługuje px, %, em itp.
`onloadslideout`	`true`	Czy panel powinien być otwarty po załadowaniu strony (`true` lub `false`)
`mobile_behavior`	`0`	Kontrola widoczności: `0` = pokazuj na wszystkich urządzeniach, `1` = pokazuj tylko na urządzeniach mobilnych, `2` = pokazuj tylko na komputerach
`width`	`auto`	Szerokość panelu (np. `350px`, `30%`, `auto`)
`height`	`auto`	Wysokość panelu (np. `500px`, `auto`)
`text`	`Filter`	Tekst przycisku wyświetlany, gdy `image` jest ustawione na `null`. Używany również jako etykieta uchwytu.
`class`	`''`	Dodatkowa klasa CSS dla kontenera wysuwanego panelu
`redirect`	`''`	Adres URL przekierowania po zastosowaniu filtra

Podstawowe użycie


[woof_slideout]

Renderuje wysuwany panel filtrowania z prawej strony z domyślnymi ustawieniami. Panel zawiera standardowy filtr [woof].

Wysuwanie z lewej strony


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

Wysuwa się z lewej strony z animacją 300 ms i szerokością panelu 400 px.

Przycisk tekstowy zamiast obrazka


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

Używa przycisku tekstowego ("Filtruj produkty") zamiast obrazka jako uchwytu wyzwalacza.

Filtr tylko dla urządzeń mobilnych


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

Wysuwany panel pojawia się tylko na urządzeniach mobilnych, od dołu, zajmując 80% wysokości ekranu. Idealne do projektów typu mobile-first.

Auto-otwieranie przy ładowaniu z wyzwalaczem najechania


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

Panel jest domyślnie otwarty i reaguje na najechanie myszką (nie na kliknięcie). Animacja trwa 200 ms.

Zaawansowane: niestandardowa zawartość wewnątrz


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

Dowolna treść umieszczona pomiędzy znacznikami otwierającym i zamykającym jest używana jako zawartość wysuwanego panelu. W tym przykładzie wewnątrz panelu umieszczono konkretny shortcode [woof] z filtrowaniem po taksonomii kategorii.

Przekazywanie atrybutów do wewnętrznego shortcode'a [woof]


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

Atrybuty, które nie są częścią samego wysuwanego panelu (taxonomies, sid, by_text itd.), są automatycznie przekazywane do wewnętrznego shortcode'a [woof]. Oznacza to, że każdy atrybut [woof] działa w przezroczysty sposób.

Tylko na komputerach z odstępem


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

Widoczny tylko na komputerach, umieszczony po prawej stronie z odstępem 200 px od góry, szerokość 320 px.

Przykład PHP: nadpisywanie szablonu wysuwanego panelu

Możesz nadpisać szablon wysuwanego panelu, umieszczając plik w:


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

Lub programowo filtrować zachowanie wysuwanego panelu:


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

Uwagi

Rozszerzenie wysuwanego panelu musi być włączone w ustawieniach wtyczki HUSKY, aby shortcode działał.
W przypadku używania obrazka jako wyzwalacza zalecany rozmiar to około 50×50 pikseli.
Atrybut redirect, gdy jest ustawiony, przekieruje stronę pod podany adres URL po wybraniu wartości filtrów.
Obsługiwane jest wiele instancji wysuwanego panelu na tej samej stronie – każda otrzymuje unikalny klucz.