Affichage

Intégration Twig

Le formulaire de recherche avancée est un élément central de l'expérience utilisateur permettant une interaction directe avec les fonctionnalités de recherche du site. Ce formulaire est placé dans un fichier partial Twig, nommé _formRechercheAvancee.twig, au sein du dossier /Partials/global/ de notre thème personnalisé.

Pour assurer une disponibilité omniprésente à travers le site, le fichier _formRechercheAvancee.twig est inclus dans le header de navigation via la commande Twig include. Ceci permet au formulaire d'être accessible depuis toutes les pages du site, offrant une entrée constante vers les fonctionnalités de recherche.

/Partials/global/_formRechercheAvancee.twig

{% include '/Partials/global/_formRechercheAvancee.twig' ignore missing with { 
    'search'	 : search|default(null),
    'resultPage' : false,
    'noncefield_form_avance' : noncefield_form_avance|raw
} only %}

Ce code Twig fait partie de la syntaxe d'inclusion de Twig, utilisée ici pour intégrer un formulaire de recherche avancée dans une page ou un composant de votre thème WordPress. Voici une explication détaillée de chaque partie de cette ligne de code :

• {% include '/Partials/global/_formRechercheAvancee.twig' %} : Cette commande Twig include est utilisée pour insérer le contenu d'un fichier Twig, ici _formRechercheAvancee.twig. Cela permet de réutiliser des morceaux de code à travers différentes parties du site, rendant le développement plus modulaire et évitant la répétition du code.
• ignore missing : Ce fragment spécifie que si le fichier _formRechercheAvancee.twig n'existe pas ou ne peut pas être trouvé, Twig ignorera cette inclusion sans générer d'erreur. C'est une manière de rendre votre thème plus robuste, en évitant des plantages inattendus dus à des fichiers manquants.
• with { ... } : Cette partie permet de passer des variables au fichier inclus. Les variables définies dans le bloc with seront disponibles uniquement dans le scope du fichier inclus. Cela permet de personnaliser le comportement ou l'apparence du formulaire inclus basé sur le contexte dans lequel il est utilisé.
  • 'search' : search|default(null) : Passe la variable search au fichier inclus. Si search n'est pas définie dans le contexte actuel, elle sera remplacée par null. Cette variable pourrait être utilisée pour préremplir le champ de recherche avec une valeur précédente ou avec une requête de recherche existante.
  • 'resultPage' : false : Passe une variable booléenne resultPage définie sur false au fichier inclus. Cela est utilisé pour conditionner l'affichage de certains éléments du formulaire ou pour ajuster son comportement selon qu'il est utilisé sur une page de résultats de recherche ou non (menu header).
  • 'noncefield_form_avance' : noncefield_form_avance|raw : Passe une variable noncefield_form_avance au fichier inclus, en utilisant le filtre raw pour s'assurer qu'elle ne soit pas échappée automatiquement par Twig. Cette variable pourrait contenir un champ de sécurité nonce spécifique à WordPress, nécessaire pour valider le formulaire côté serveur et prévenir les attaques CSRF.
• only : Ce mot-clé à la fin assure que seules les variables explicitement passées avec with seront disponibles dans le fichier inclus, isolant ainsi son environnement et évitant les interférences avec d'autres variables définies dans le contexte global.

info

Sur la page des résultats de recherche, le formulaire est inclus une seconde fois, mais cette fois-ci dans la sidebar de filtres. Cela permet aux utilisateurs d'affiner leurs recherches sans quitter la page des résultats. L'inclusion dans la sidebar est réalisée avec une syntaxe Twig similaire, adaptée au contexte de la sidebar de filtres.

Style SCSS

Le formulaire de recherche est stylisé via différents fichiers SCSS.

Nottament /assets/styles/_form.scss, qui contient les styles par défaut des élements de formulaire.

Ainsi que /assets/styles/_search.scss, qui va venir personnaliser quelques aspect de ce partial.