[woof_slideout]

Le shortcode [woof_slideout] crée un panneau de filtre coulissant qui apparaît depuis le bord de l'écran. C'est une solution gain de place qui garde le filtre caché jusqu'à ce que l'utilisateur en ait besoin — idéal pour les appareils mobiles, les pages d'archive de produits ou toute mise en page où l'espace écran est limité.

Le panneau coulissant prend en charge à la fois les déclencheurs par image et par texte, une animation configurable, un comportement spécifique aux mobiles, et transmet tous les attributs inconnus au shortcode interne [woof].

Attributs

Attribut	Par défaut	Description
`image`	Icône par défaut du plugin	URL de l'image du déclencheur. Définissez sur `null` pour utiliser un bouton texte à la place.
`image_h`	`50`	Hauteur de l'image du déclencheur en pixels
`image_w`	`50`	Largeur de l'image du déclencheur en pixels
`action`	`click`	Action du déclencheur : `click` ou `hover`
`location`	`right`	Position du coulissement : `left`, `right`, `top` ou `bottom`
`speed`	`100`	Vitesse d'animation en millisecondes
`offset`	`100px`	Décalage par rapport au haut (pour position gauche/droite) ou à gauche (pour position haut/bas). Prend en charge px, %, em, etc.
`onloadslideout`	`true`	Indique si le panneau doit être ouvert au chargement de la page (`true` ou `false`)
`mobile_behavior`	`0`	Contrôle de visibilité : `0` = afficher sur tous les appareils, `1` = afficher uniquement sur mobile, `2` = afficher uniquement sur desktop
`width`	`auto`	Largeur du panneau (ex. : `350px`, `30%`, `auto`)
`height`	`auto`	Hauteur du panneau (ex. : `500px`, `auto`)
`text`	`Filter`	Texte du bouton affiché lorsque `image` est défini sur `null`. Également utilisé comme étiquette de la poignée.
`class`	`''`	Classe CSS supplémentaire pour le conteneur coulissant
`redirect`	`''`	URL de redirection après application du filtre

Utilisation de base


[woof_slideout]

Affiche un panneau de filtre coulissant depuis le côté droit avec les paramètres par défaut. Le panneau contient le filtre standard [woof].

Coulissement depuis la gauche


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

Coulisse depuis le côté gauche avec une animation de 300 ms et une largeur de panneau de 400 px.

Bouton texte au lieu d'une image


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

Utilise un bouton texte (« Filtrer les produits ») au lieu d'une image comme poignée de déclencheur.

Filtre mobile uniquement


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

Le panneau coulissant apparaît uniquement sur les appareils mobiles, depuis le bas, en prenant 80 % de la hauteur de l'écran. Parfait pour les designs mobile-first.

Ouverture automatique au chargement avec déclencheur au survol


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

Le panneau est ouvert par défaut et répond au survol (pas au clic). Animation en 200 ms.

Avancé : contenu personnalisé à l'intérieur


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

Tout contenu placé entre les balises d'ouverture et de fermeture est utilisé comme contenu du panneau coulissant. Dans cet exemple, un shortcode [woof] spécifique avec un filtrage par taxonomie de catégorie est placé à l'intérieur du panneau coulissant.

Transmission d'attributs au shortcode [woof] interne


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

Les attributs qui ne font pas partie du panneau coulissant lui-même (taxonomies, sid, by_text, etc.) sont automatiquement transmis au shortcode interne [woof]. Cela signifie que tout attribut [woof] fonctionne de manière transparente.

Desktop uniquement avec décalage


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

Visible uniquement sur desktop, positionné à droite avec un décalage de 200 px depuis le haut, 320 px de large.

Exemple PHP : remplacer le modèle du panneau coulissant

Vous pouvez remplacer le modèle du panneau coulissant en plaçant un fichier à :


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

Ou filtrer programmatiquement le comportement du panneau coulissant :


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

Remarques

L'extension du panneau coulissant doit être activée dans les paramètres du plugin HUSKY pour que le shortcode fonctionne.
Lors de l'utilisation d'une image comme déclencheur, la taille recommandée est d'environ 50×50 pixels.
L'attribut redirect, lorsqu'il est défini, redirige la page vers l'URL spécifiée après la sélection des valeurs de filtre.
Plusieurs instances de panneaux coulissants sur la même page sont prises en charge — chacune obtient une clé unique.