[woof_slideout]

El shortcode [woof_slideout] crea un panel de filtro deslizante que aparece desde el borde de la pantalla. Es una solución que ahorra espacio al mantener el filtro oculto hasta que el usuario lo necesita, ideal para dispositivos móviles, páginas de archivo de productos o cualquier diseño donde el espacio en pantalla sea limitado.

El panel deslizante admite activadores de imagen y texto, animación configurable, comportamiento específico para móviles y pasa todos los atributos desconocidos al shortcode interno [woof].

Atributos

Atributo	Predeterminado	Descripción
`image`	Icono predeterminado del plugin	URL de la imagen de activación. Establécelo a `null` para usar un botón de texto en su lugar.
`image_h`	`50`	Altura de la imagen de activación en píxeles
`image_w`	`50`	Ancho de la imagen de activación en píxeles
`action`	`click`	Acción de activación: `click` o `hover`
`location`	`right`	Posición de deslizamiento: `left`, `right`, `top` o `bottom`
`speed`	`100`	Velocidad de animación en milisegundos
`offset`	`100px`	Desplazamiento desde la parte superior (para ubicación izquierda/derecha) o desde la izquierda (para ubicación superior/inferior). Compatible con px, %, em, etc.
`onloadslideout`	`true`	Si el panel debe estar abierto al cargar la página (`true` o `false`)
`mobile_behavior`	`0`	Control de visibilidad: `0` = mostrar en todos los dispositivos, `1` = mostrar solo en móviles, `2` = mostrar solo en escritorio
`width`	`auto`	Ancho del panel (ej., `350px`, `30%`, `auto`)
`height`	`auto`	Altura del panel (ej., `500px`, `auto`)
`text`	`Filter`	Texto del botón que se muestra cuando `image` está configurado en `null`. También se usa como etiqueta del control.
`class`	`''`	Clase CSS adicional para el contenedor deslizante
`redirect`	`''`	URL de redirección después de aplicar el filtro

Uso básico


[woof_slideout]

Renderiza un panel de filtro deslizante desde el lado derecho con la configuración predeterminada. El panel contiene el filtro [woof] estándar.

Deslizamiento desde la izquierda


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

Se desliza desde el lado izquierdo con una animación de 300 ms y un ancho de panel de 400 px.

Botón de texto en lugar de imagen


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

Usa un botón de texto («Filtrar productos») en lugar de una imagen como control de activación.

Filtro solo para móviles


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

El deslizamiento aparece solo en dispositivos móviles, desde abajo, ocupando el 80% de la altura de la pantalla. Perfecto para diseños mobile-first.

Apertura automática al cargar con activación por hover


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

El panel está abierto por defecto y responde al hover (no al clic). Anima en 200 ms.

Avanzado: Contenido personalizado dentro


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

Cualquier contenido colocado entre las etiquetas de apertura y cierre se utiliza como contenido del deslizamiento. En este ejemplo, se coloca un shortcode [woof] específico con filtrado de taxonomía de categoría dentro del deslizamiento.

Pasando atributos al shortcode interno [woof]


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

Los atributos que no forman parte del deslizamiento en sí (taxonomies, sid, by_text, etc.) se reenvían automáticamente al shortcode interno [woof]. Esto significa que cualquier atributo de [woof] funciona de manera transparente.

Solo escritorio con desplazamiento


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

Visible solo en escritorio, posicionado a la derecha con un desplazamiento de 200 px desde la parte superior, con 320 px de ancho.

Ejemplo en PHP: Sobrescribir la plantilla del deslizamiento

Puedes sobrescribir la plantilla del deslizamiento colocando un archivo en:


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

O filtrar programáticamente el comportamiento del deslizamiento:


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

Notas

La extensión de deslizamiento debe estar habilitada en la configuración del plugin HUSKY para que el shortcode funcione.
Cuando se usa una imagen como activador, el tamaño recomendado es de aproximadamente 50×50 píxeles.
El atributo redirect, cuando se configura, redirigirá la página a la URL especificada después de seleccionar los valores del filtro.
Se admiten múltiples instancias de deslizamiento en la misma página; cada una obtiene una clave única.