woof_slideout
woof_slideout
Lo shortcode [woof_slideout] crea un pannello filtro a scorrimento che appare dal bordo dello schermo. Questa è una soluzione salvaspazio che mantiene il filtro nascosto finché l'utente non ne ha bisogno — ideale per dispositivi mobili, pagine di archivio prodotti o qualsiasi layout in cui lo spazio sullo schermo è limitato.
Il pannello a scorrimento supporta sia trigger di immagine che di testo, animazione configurabile, comportamento specifico per dispositivi mobili e passa tutti gli attributi sconosciuti allo shortcode interno [woof].
Attributi
| Attributo | Predefinito | Descrizione |
|---|---|---|
image | Icona predefinita del plugin | URL dell'immagine del trigger. Impostare su null per usare un pulsante di testo invece. |
image_h | 50 | Altezza dell'immagine del trigger in pixel |
image_w | 50 | Larghezza dell'immagine del trigger in pixel |
action | click | Azione del trigger: click o hover |
location | right | Posizione di scorrimento: left, right, top o bottom |
speed | 100 | Velocità dell'animazione in millisecondi |
offset | 100px | Offset dall'alto (per posizione sinistra/destra) o da sinistra (per posizione alto/basso). Supporta px, %, em, ecc. |
onloadslideout | true | Indica se il pannello deve essere aperto al caricamento della pagina (true o false) |
mobile_behavior | 0 | Controllo visibilità: 0 = mostra su tutti i dispositivi, 1 = mostra solo su mobile, 2 = mostra solo su desktop |
width | auto | Larghezza del pannello (es. 350px, 30%, auto) |
height | auto | Altezza del pannello (es. 500px, auto) |
text | Filter | Testo del pulsante visualizzato quando image è impostato su null. Usato anche come etichetta del handle. |
class | '' | Classe CSS aggiuntiva per il contenitore a scorrimento |
redirect | '' | URL di reindirizzamento dopo l'applicazione del filtro |
Utilizzo Base
[woof_slideout]
Renderizza un pannello filtro a scorrimento dal lato destro con le impostazioni predefinite. Il pannello contiene il filtro [woof] standard.
Pannello a scorrimento da Sinistra
[woof_slideout location="left" speed="300" width="400px"]
Scorre fuori dal lato sinistro con un'animazione di 300ms e una larghezza del pannello di 400px.
Pulsante di Testo Invece di Immagine
[woof_slideout image="null" text="Filter Products"]
Usa un pulsante di testo ("Filter Products") invece di un'immagine come handle del trigger.
Filtro Solo per Mobile
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
Il pannello a scorrimento appare solo su dispositivi mobili, dal basso, occupando l'80% dell'altezza dello schermo. Perfetto per design mobile-first.
Apertura Automatica al Caricamento con Trigger Hover
[woof_slideout onloadslideout="true" action="hover" speed="200"]
Il pannello è aperto di default e risponde all'hover (non al click). Si anima in 200ms.
Avanzato: Contenuto Personalizzato all'Interno
[woof_slideout location="right" width="350px"] [woof taxonomies="product_cat" sid="slideout-cat"] [/woof_slideout]
Qualsiasi contenuto posizionato tra i tag di apertura e chiusura viene utilizzato come contenuto del pannello a scorrimento. In questo esempio, uno shortcode [woof] specifico con filtro per tassonomia di categoria è posizionato all'interno del pannello a scorrimento.
Passaggio di Attributi allo Shortcode [woof] Interno
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
Gli attributi che non fanno parte del pannello a scorrimento stesso (taxonomies, sid, by_text, ecc.) vengono automaticamente inoltrati allo shortcode [woof] interno. Ciò significa che qualsiasi attributo [woof] funziona in modo trasparente.
Solo Desktop con Offset
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
Visibile solo su desktop, posizionato a destra con un offset di 200px dall'alto, largo 320px.
Esempio PHP: Sovrascrivere il Template del Pannello a Scorrimento
Puoi sovrascrivere il template del pannello a scorrimento posizionando un file in:
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
Oppure filtrare programmaticamente il comportamento del pannello a scorrimento:
add_filter('woof_slideout_options', function($options) {
if (is_product_category()) {
$options['width'] = '100%';
$options['location'] = 'bottom';
}
return $options;
});
Note
- L'estensione slideout deve essere abilitata nelle impostazioni del plugin HUSKY affinché lo shortcode funzioni.
- Quando si utilizza un'immagine come trigger, la dimensione consigliata è di circa 50×50 pixel.
- L'attributo
redirect, quando impostato, reindirizzerà la pagina all'URL specificato dopo che i valori del filtro sono stati selezionati. - Sono supportate più istanze di pannelli a scorrimento sulla stessa pagina — ognuna ottiene una chiave unica.