woof_slideout
woof_slideout
O [woof_slideout] shortcode cria um painel de filtro deslizante que aparece da borda da tela. Esta é uma solução que economiza espaço e mantém 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 da 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 para a imagem do gatilho. Defina como null para usar um botão de texto em vez disso. |
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 do deslizamento: left, right, top, ou bottom |
speed | 100 | Velocidade da animação em milissegundos |
offset | 100px | Deslocamento do topo (para localização esquerda/direita) ou da esquerda (para localização superior/inferior). Suporta px, %, em, etc. |
onloadslideout | true | Se o painel deve estar aberto quando a página carrega (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 desktops |
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 é definido como null. Também usado como rótulo do manipulador. |
class | '' | Classe CSS adicional para o contêiner deslizante |
redirect | '' | URL de redirecionamento após a aplicação do filtro |
Uso Básico
[woof_slideout]
Renderiza um painel de filtro deslizante do lado direito com configurações padrão. O painel contém o filtro padrão [woof].
Deslizamento da Esquerda
[woof_slideout location="left" speed="300" width="400px"]
Desliza para fora 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 ("Filter Products") em vez de uma imagem como o manipulador do gatilho.
Filtro Apenas para Dispositivos Móveis
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
O deslizamento aparece apenas em dispositivos móveis, da parte inferior, ocupando 80% da altura da tela. Perfeito para designs mobile-first.
Abertura Automática ao Carregar com Gatilho de Hover
[woof_slideout onloadslideout="true" action="hover" speed="200"]
O painel está aberto por padrão e responde ao passar o mouse (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 o conteúdo deslizante. Neste exemplo, um shortcode [woof] específico com filtragem de taxonomia de categoria é colocado dentro do deslizamento.
Passando Atributos para o Shortcode Interno [woof]
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
Atributos que não fazem parte do próprio deslizamento (taxonomies, sid, by_text, etc.) são automaticamente encaminhados para o shortcode interno [woof]. Isso significa que qualquer atributo [woof] funciona de forma transparente.
Apenas para Desktop com Deslocamento
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
Visível apenas em desktop, posicionado à direita com 200px de deslocamento do topo, 320px de largura.
Exemplo PHP: Sobrescrever o Modelo do Slideout
Você pode sobrescrever o modelo do deslizamento colocando um arquivo em:
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
Ou filtrar programaticamente o comportamento do deslizamento:
add_filter('woof_slideout_options', function($options) {
if (is_product_category()) {
$options['width'] = '100%';
$options['location'] = 'bottom';
}
return $options;
});
Notas
- A extensão de deslizamento deve estar ativada nas configurações do plugin HUSKY para que o shortcode funcione.
- Ao usar uma imagem como gatilho, o tamanho recomendado é de cerca de 50×50 pixels.
- O atributo
redirect, quando definido, redirecionará a página para o URL especificado após a seleção dos valores do filtro. - Múltiplas instâncias de deslizamento na mesma página são suportadas — cada uma recebe uma chave única.