Étape 5 - Navigation & Blocs

⏱️ Durée estimée : 3h

🎯 Objectifs de cette étape

À la fin de cette étape, vous serez capable de :

✅ Créer et gérer les menus de navigation
✅ Comprendre le système de régions
✅ Placer et configurer les blocs
✅ Créer des blocs personnalisés
✅ Gérer les rôles et permissions
✅ Configurer la structure de TailStore

📋 Prérequis

Étape 4 terminée (vues créées)
Contenu de démonstration existant

🔗 URLs et alias (SEO & UX)

Pourquoi des belles URLs ?

Les URLs parlantes sont essentielles pour le SEO et l’expérience utilisateur :

SEO : Les moteurs de recherche favorisent les URLs descriptives
UX : Les visiteurs comprennent où ils vont avant de cliquer
Partage : URLs faciles à lire et mémoriser
Analytics : URLs claires facilitent l’analyse du trafic

Configuration des alias d’URL

Activer le module Path
Fenêtre de terminal
```
drush en path -y
```
Créer des alias automatiques
- Aller dans /admin/config/search/path/patterns
- Configurer les patterns par type de contenu :
  - Articles : [node:title]
  - Produits : produits/[node:title]
  - Blog : blog/[node:title]
Alias manuels
- Lors de l’édition d’un contenu : onglet “Alias d’URL”
- Ou via /admin/config/search/path/add

Bonnes pratiques pour les alias

Type de contenu	Pattern recommandé	Exemple
Page statique	`/[nom-page]`	`/a-propos`
Produit	`/produits/[titre]`	`/produits/t-shirt-coton-bio`
Catégorie	`/categories/[nom]`	`/categories/vetements`
Article blog	`/blog/[titre]`	`/blog/tendances-mode-2024`

📚 Sommaire

1. Menus

Créer et organiser les menus de navigation. Voir →

2. Régions & Blocs

Comprendre les régions et placer les blocs. Voir →

3. Blocs personnalisés

Créer des blocs de contenu réutilisables. Voir →

4. Rôles & Permissions

Gérer les droits d’accès des utilisateurs. Voir →

Menus

Menu	Contenu	Emplacement
Main navigation	Accueil, Boutique, Blog, Contact	Header
Footer	Mentions légales, CGV, Politique confidentialité	Footer
Account	Mon compte, Mes commandes, Déconnexion	Header (connecté)
Categories	Catégories de produits	Sidebar boutique

Régions du thème

┌─────────────────────────────────────────────────────────────┐
│                       HEADER                                │
│  Logo | Main Navigation | Search | Cart | Account           │
├─────────────────────────────────────────────────────────────┤
│                    HERO / SLIDER                            │
├───────────────────────────────────┬─────────────────────────┤
│                                   │                         │
│            CONTENT                │      SIDEBAR            │
│                                   │                         │
│    Catalogue produits             │   Catégories           │
│    Page produit                   │   Filtres              │
│    Articles blog                  │   Produits récents     │
│                                   │                         │
├───────────────────────────────────┴─────────────────────────┤
│                       FOOTER                                │
│  Marques | Liens utiles | Newsletter | Social | Copyright   │
└─────────────────────────────────────────────────────────────┘

Blocs personnalisés

Bloc	Type	Contenu
Hero Homepage	Custom Block	Slider/Banner promotionnel
Newsletter	Custom Block	Formulaire d’inscription
Réseaux sociaux	Custom Block	Liens Facebook, Instagram, etc.
Informations contact	Custom Block	Adresse, téléphone, email
Bandeau promo	Custom Block	Message promotionnel

🔧 Concepts clés

Menus vs Blocs

Concept	Description	Gestion
Menu	Structure de liens hiérarchiques	Structure → Menus
Menu Block	Affichage d’un menu dans une région	Structure → Block layout
Custom Block	Bloc de contenu personnalisé	Structure → Block layout → Custom

Visibilité des blocs

Les blocs peuvent être conditionnés par :

Pages : URL spécifiques ou patterns
Type de contenu : Seulement sur les pages produit
Rôle utilisateur : Admin, Éditeur, Visiteur
Langue : Site multilingue

📊 Workflow de cette étape

1. Créer les menus
   └── Main, Footer, Account, Categories

2. Configurer les régions du thème
   └── Vérifier le .info.yml du thème

3. Placer les blocs système
   └── Logo, Menu, Breadcrumb

4. Créer les blocs personnalisés
   └── Hero, Newsletter, Contact

5. Configurer les permissions
   └── Rôles : Anonymous, Authenticated, Editor, Admin

6. Exporter la configuration

🚀 C’est parti !

Commencez par créer les Menus.