woof_slideout
woof_slideout
El [woof_slideout] shortcode crea un panel de filtro deslizante que aparece desde el borde de la pantalla. Esta es una solución que ahorra espacio y mantiene 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 de la pantalla es 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 [woof] shortcode interno.
Atributos
| Atributo | Valor predeterminado | Descripción |
|---|---|---|
image | Icono predeterminado del plugin | URL de la imagen del activador. Establece en null para usar un botón de texto en su lugar. |
image_h | 50 | Altura de la imagen del activador en píxeles |
image_w | 50 | Ancho de la imagen del activador en píxeles |
action | click | Acción del activador: 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 izquierda (para ubicación superior/inferior). Admite px, %, em, etc. |
onloadslideout | true | Si el panel debe estar abierto cuando la página carga (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 se establece en null. También se usa como etiqueta del manejador. |
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 300ms y un ancho de panel de 400px.
Botón de Texto en Lugar de Imagen
[woof_slideout image="null" text="Filter Products"]
Usa un botón de texto ("Filter Products") en lugar de una imagen como manejador del activador.
Filtro Solo para Móviles
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
El deslizante aparece solo en dispositivos móviles, desde la parte inferior, ocupando el 80% de la altura de la pantalla. Perfecto para diseños mobile-first.
Apertura Automática al Cargar con Activador Hover
[woof_slideout onloadslideout="true" action="hover" speed="200"]
El panel está abierto por defecto y responde al `hover` (no al `click`). Se anima en 200ms.
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 deslizante. En este ejemplo, un [woof] shortcode específico con filtrado de taxonomía de categoría se coloca dentro del deslizante.
Pasar Atributos al Shortcode [woof] Interno
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
Los atributos que no forman parte del deslizante en sí (taxonomies, sid, by_text, etc.) se reenvían automáticamente al [woof] shortcode interno. Esto significa que cualquier atributo de [woof] funciona de forma transparente.
Solo para 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 200px desde la parte superior, 320px de ancho.
Ejemplo PHP: Sobrescribir la Plantilla del Deslizante
Puedes sobrescribir la plantilla del deslizante colocando un archivo en:
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
O filtrar programáticamente el comportamiento del deslizante:
add_filter('woof_slideout_options', function($options) {
if (is_product_category()) {
$options['width'] = '100%';
$options['location'] = 'bottom';
}
return $options;
});
Notas
- La extensión deslizante debe estar habilitada en la configuración del plugin HUSKY para que el shortcode funcione.
- Cuando se utiliza una imagen como activador, el tamaño recomendado es de alrededor de 50×50 píxeles.
- El atributo
redirect, cuando se establece, 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.