[woof_slideout]

O shortcode [woof_slideout] cria um painel de filtro deslizante que aparece a partir da borda da tela. Esta é uma solução que economiza espaço, mantendo o filtro oculto até que o usuário precise dele — ideal para dispositivos móveis, páginas de arquivo de produtos ou qualquer layout onde o espaço na tela seja limitado.

O painel deslizante suporta gatilhos de imagem e texto, animação configurável, comportamento específico para dispositivos móveis e passa todos os atributos desconhecidos para o shortcode interno [woof].

Atributos

Atributo	Padrão	Descrição
`image`	Ícone padrão do plugin	URL da imagem do gatilho. Defina como `null` para usar um botão de texto.
`image_h`	`50`	Altura da imagem do gatilho em pixels
`image_w`	`50`	Largura da imagem do gatilho em pixels
`action`	`click`	Ação do gatilho: `click` ou `hover`
`location`	`right`	Posição deslizante: `left`, `right`, `top` ou `bottom`
`speed`	`100`	Velocidade da animação em milissegundos
`offset`	`100px`	Deslocamento do topo (para posição esquerda/direita) ou esquerda (para posição superior/inferior). Suporta px, %, em, etc.
`onloadslideout`	`true`	Se o painel deve estar aberto quando a página carregar (`true` ou `false`)
`mobile_behavior`	`0`	Controle de visibilidade: `0` = mostrar em todos os dispositivos, `1` = mostrar apenas em dispositivos móveis, `2` = mostrar apenas em desktop
`width`	`auto`	Largura do painel (ex.: `350px`, `30%`, `auto`)
`height`	`auto`	Altura do painel (ex.: `500px`, `auto`)
`text`	`Filter`	Texto do botão exibido quando `image` está definido como `null`. Também usado como rótulo da alça.
`class`	`''`	Classe CSS adicional para o contêiner do slideout
`redirect`	`''`	URL de redirecionamento após aplicação do filtro

Uso Básico


[woof_slideout]

Renderiza um painel de filtro deslizante a partir do lado direito com as configurações padrão. O painel contém o filtro padrão [woof].

Deslizante pela Esquerda


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

Desliza a partir do lado esquerdo com uma animação de 300ms e largura de painel de 400px.

Botão de Texto em vez de Imagem


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

Usa um botão de texto ("Filtrar Produtos") em vez de uma imagem como alça de gatilho.

Filtro Apenas para Dispositivos Móveis


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

O slideout aparece apenas em dispositivos móveis, a partir da parte inferior, ocupando 80% da altura da tela. Perfeito para designs mobile-first.

Abrir Automaticamente no Carregamento com Gatilho de Hover


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

O painel fica aberto por padrão e responde ao hover (não ao clique). Anima em 200ms.

Avançado: Conteúdo Personalizado Interno


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

Qualquer conteúdo colocado entre as tags de abertura e fechamento é usado como conteúdo do slideout. Neste exemplo, um shortcode específico [woof] com filtragem de taxonomia de categoria é colocado dentro do slideout.

Passando Atributos para o Shortcode [woof] Interno


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

Atributos que não fazem parte do próprio slideout (taxonomies, sid, by_text, etc.) são automaticamente encaminhados para o shortcode interno [woof]. Isso significa que qualquer atributo [woof] funciona transparentemente.

Apenas para Desktop com Deslocamento


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

Visível apenas em desktop, posicionado à direita com deslocamento de 200px do topo, 320px de largura.

Exemplo em PHP: Sobrescrever o Template do Slideout

Você pode sobrescrever o template do slideout colocando um arquivo em:


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

Ou filtrar programaticamente o comportamento do slideout:


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

Notas

A extensão slideout deve estar ativada nas configurações do plugin HUSKY para que o shortcode funcione.
Ao usar uma imagem como gatilho, o tamanho recomendado é de aproximadamente 50×50 pixels.
O atributo redirect, quando definido, redirecionará a página para a URL especificada após os valores do filtro serem selecionados.
Múltiplas instâncias de slideout na mesma página são suportadas — cada uma recebe uma chave única.