# Spécifications de la barre de recherche personnalisable

## Options essentielles pour une barre de recherche

### Structure de base

- Position du bouton
- - Intégré
- - Extérieur à droite
- Affichage du texte du bouton ou icône seule
- Largeur (fixe, pourcentage, responsive)
- - Pas en P1, on peut l'avoir à 100% et laisser gutenberg gérer ça (ex: la mettre dans un groupe qui lui limite sa largeur)

### Stylisation du champ

- Couleur de fond
- Couleur du texte
- Couleur et style du placeholder
- Bordure (couleur, épaisseur, style)
- Border-radius
- Padding interne
- Ombre (box-shadow)

### Stylisation du bouton

- Couleur de fond
- Couleur du texte/icône
- États au survol (hover)
- Border-radius spécifique
- Icône personnalisable

### Liste de résultats

- Position (attachée ou détachée)
- Style visuel (fond, bordures, ombres)
- Animation d'apparition
- - Pas en P1 (juste une animation par défaut)
- Mise en surbrillance des termes recherchés
- - Pas en P1 (activé par défaut)
- Style des survols d'éléments

### Options fonctionnelles

- Recherche instantanée (live search)
- Nombre de résultats à afficher dans la live search
- - Pas en P1, hardcode 5
- Types de contenu à inclure

## Approche d'intégration avec Gutenberg

**NON ACCEPTÉE**

## Approche par CPT et interface React

### Architecture technique

- Création d'un Custom Post Type "Barres de recherche"
- Interface d'administration React pour la configuration
- Stockage des configurations en JSON dans les post_meta
- Bloc Gutenberg simple qui référence une configuration par son ID

### Workflow utilisateur

1. L'utilisateur crée une nouvelle barre de recherche via le CPT dédié
2. Il accède à une interface React complète pour la configuration
3. À la sauvegarde, la configuration JSON est stockée
4. Dans l'éditeur Gutenberg, l'utilisateur insère le bloc "Barre de recherche"
5. Le bloc affiche un sélecteur des configurations disponibles dans la sidebar
6. Le rendu final utilise render.php qui récupère et interprète la configuration

### Avantages de cette approche

- Interface dédiée sans contraintes d'espace
- Séparation claire entre création et utilisation
- Réutilisation des configurations sur plusieurs pages
- Mise à jour centralisée (modifier une configuration l'applique partout)

### Bloc Gutenberg simplifié

- Affichage d'un logo distinctif
- Message "Barre de recherche: {nom de la configuration}" dans le bloc
- Aucun aperçu visuel dans le bloc lui-même
- Dans la sidebar: select simple pour choisir le CPT de barre de recherche
- Options minimales additionnelles (alignement, largeur)
- Pas de duplication des options de style dans Gutenberg

## Bénéfices

1. **Expérience utilisateur ciblée**

   - Interface dédiée pour les administrateurs
   - Utilisation simplifiée pour les rédacteurs

2. **Maintenance simplifiée**

   - Un seul moteur de rendu pour toutes les configurations
   - Pas de duplication de code entre les variations
   - Facile à étendre avec de nouvelles options

3. **Performance**
   - Configurations légères stockées en JSON
   - Génération dynamique efficace
   - Pas de surcharge dans l'éditeur Gutenberg

## Implémentation technique de la recherche

### Traitement des requêtes

- **AJAX pour recherche en direct**: Utilisation de `admin-ajax.php` ou REST API pour les résultats instantanés
- Mise en cache optionnelle des résultats fréquents pour améliorer les performances (a definir par la suite pas important pour le moment)

### Options avancées de recherche

- Filtrage par types de contenu (posts, pages, produits, médias, etc.)
  - Sélection multiple de post types dans l'interface de configuration
  - Possibilité de pondérer différemment chaque type de contenu
- Recherche dans des champs personnalisés spécifiques (ex: ajout d'un champ ACF "search_keywords" dans un post type)
- Pondération des résultats (titre plus important que contenu)
- - Pas en P1
- Exclusion de certains contenus (par ID, taxonomie, etc.)
- - Pas en P1

### Affichage des résultats - live search

- Affichage des résultats sans rechargement dans une dropdown sous la barre (pour live search)
- Options de mise en forme des résultats dans le dropdown (avec/sans image, extrait, date, etc.) ??????????
- - Ne pas faire en P1


### Affichage des résultats - page de résultats

- Quand on click sur search ou sur enter, on est redirigé à une page de résultats de recherche
- Par défaut, on redirige à ?s= qui est la search par défaut de Wordpress
- - En faisant ça, on perd certains paramètres. Par exemple, la recherche par défaut de WP va afficher tous les post type et ne regardera pas de champs personnalisés spécifiques
- On peut spécifier un url custom de redirection. Celui-ci aura toute la configuration passée en paramètres
- - Pour l'instant, dans chaque projet client, on pourra donc faire un bloc custom "résultats recherche" qui lit ces paramètres et affiche les résultats selon le style et le comportement désiré


### JavaScript et interactions

- Déclenchement de la recherche:
  - À chaque frappe avec délai
- Gestion des états de chargement (indicateur visuel)
- Navigation clavier dans les résultats

### Architecture des données

- Configuration stockée en JSON dans le CPT avec structure:
  ```json
  {
  	"search_config": {
  		"post_types": ["post", "page", "product", "document_cpt"],
  		"taxonomies": ["category", "post_tag"],
  		"custom_fields": ["_price", "custom_field_1"],
  		"weights": {
  			"title": 10,
  			"content": 5,
  			"excerpt": 7
  		}
  	},
  	"display_config": {
  		"result_layout": "grid",
  		"show_featured_image": true,
  		"show_excerpt": true,
  		"results_per_page": 10
  	},
  	"style_config": {
  		"input_bg": "#ffffff",
  		"button_color": "#2271b1",
  		"border_radius": 4
  	}
  }
  ```
