Exercices Étape 7

🎯 Objectifs

À la fin de ces exercices, vous aurez :

• 📦 Installé et configuré tous les modules essentiels pour un site e-commerce professionnel
• 🔗 Configuré des URLs automatiques SEO-friendly pour tous les contenus
• 📊 Optimisé le référencement avec les métadonnées sociales
• 📝 Créé des formulaires fonctionnels avec protection anti-spam
• 🚀 Mis en place les outils pour un site maintenable et performant

Approche pédagogique

Ces exercices suivent un workflow professionnel :

1. Installation et activation via Composer/Drush
2. Configuration adaptée au projet TailStore
3. Test pour valider le fonctionnement
4. Export de la configuration pour versionnement

C’est la méthode utilisée en entreprise.

Temps de réalisation

• Exercice 1 : 20 min (Installation modules)
• Exercice 2 : 25 min (Pathauto)
• Exercice 3 : 30 min (Metatag)
• Exercice 4 : 35 min (Webform contact)
• Exercice 5 : 30 min (Webform devis)
• Exercice 6 : 15 min (Sitemap)
• Exercice 7 : 15 min (Sécurité)

Total : ~2h50

---

Exercice 1 : Installation des modules

Durée estimée : 20 minutes

Installer et activer tous les modules contributifs nécessaires.

Objectif

Préparer l’environnement TailStore avec tous les modules.

Instructions

1. Installer les modules avec Composer

   ddev composer require \
     drupal/pathauto \
     drupal/token \
     drupal/metatag \
     drupal/webform \
     drupal/redirect \
     drupal/simple_sitemap \
     drupal/admin_toolbar \
     drupal/gin \
     drupal/honeypot

2. Activer les modules

   ddev drush en \
     pathauto token \
     metatag metatag_open_graph metatag_twitter_cards \
     webform webform_ui \
     redirect simple_sitemap \
     admin_toolbar admin_toolbar_tools \
     honeypot -y

3. Configurer Gin comme thème admin

   ddev drush theme:enable gin -y
   ddev drush config-set system.theme admin gin -y

4. Vérifier l’installation

   ddev drush pm:list --status=enabled --format=table

Validation ✓

• Tous les modules installés sans erreur (vérifier dans composer.json)
• Modules activés (vérifier avec drush pm:list --status=enabled)
• Gin visible et fonctionnel dans l’administration
• Admin Toolbar avec menus déroulants opérationnels
• Aucune erreur dans les logs (drush ws pour watchdog)
• Configuration exportée (ddev drush cex -y)
• Fichiers committés (composer.json, composer.lock, config/)

Erreurs courantes

Erreur : Your requirements could not be resolved...

Solution : Conflit de versions. Vérifier la compatibilité Drupal 11

ddev composer why-not drupal/module_name

Erreur : Class not found...

Solution : Régénérer l’autoloader

ddev composer dump-autoload
ddev drush cr

Erreur : Module already enabled

Solution : Normal, le module était déjà activé. Continuer.

Points d’attention

💡 Commit après installation :

git add composer.json composer.lock config/
git commit -m "feat(modules): install contrib modules (pathauto, metatag, webform, admin_toolbar, gin, honeypot)"

💡 Déploiement sur autre environnement :

# Sur staging/production
composer install
drush cim -y
drush cr

---

Exercice 2 : Configuration Pathauto

Durée estimée : 25 minutes

Configurer les URLs automatiques pour tous les contenus.

Objectif

Créer des modèles d’URL propres pour chaque type.

Instructions

1. Accéder à Pathauto

   /admin/config/search/path/patterns

2. Créer le modèle Produits

   • Type : Contenu → Produit
   • Libellé : Produits
   • Modèle : boutique/[node:field_category:entity:name]/[node:title]

3. Créer le modèle Articles

   • Type : Contenu → Article Blog
   • Libellé : Articles Blog
   • Modèle : blog/[node:created:custom:Y-m]/[node:title]

4. Créer le modèle Catégories

   • Type : Terme de taxonomie → Catégorie
   • Libellé : Catégories
   • Modèle : categories/[term:name]

5. Créer le modèle Marques

   • Type : Terme de taxonomie → Marque
   • Libellé : Marques
   • Modèle : marques/[term:name]

6. Configurer les paramètres généraux

   /admin/config/search/path/settings

   Séparateur: "-"
   Casse: Minuscules
   Longueur max: 100

7. Générer les alias existants

   ddev drush pathauto:aliases-generate all

Test

Créez un produit “Pantalon Cargo” dans la catégorie “Pantalons”.

URL attendue : /boutique/pantalons/pantalon-cargo

Créez un article de blog “Tendances mode hiver 2026” publié le 14 janvier 2026.

URL attendue : /blog/2026-01/tendances-mode-hiver-2026

Tester la translittération

Créez un produit avec caractères accentués : “T-Shirt été à fleurs”

URL attendue : /boutique/t-shirts/t-shirt-ete-a-fleurs

Les accents doivent être automatiquement transformés.

Validation ✓

• Modèle Produits créé et fonctionnel
• Modèle Articles créé avec date dans l’URL
• Modèle Catégories créé
• Modèle Marques créé
• URLs générées correctement (vérifier 3-5 contenus)
• Translittération fonctionnelle (é → e, à → a, etc.)
• Séparateur - appliqué
• Longueur max respectée (< 100 caractères)
• Alias existants régénérés
• Configuration exportée

Vérification technique

# Lister les alias générés
ddev drush sqlq "SELECT alias, path FROM path_alias LIMIT 10"

# Vérifier un alias spécifique
ddev drush path:alias /node/42

# Compter les alias par type
ddev drush sqlq "SELECT COUNT(*) FROM path_alias WHERE path LIKE '/node/%'"

Problème : Alias non généré

Vérifier :

1. Le modèle existe pour ce type de contenu
2. La case “Générer automatiquement” est cochée dans le formulaire
3. Le cache est vidé

Forcer la génération :

ddev drush cr
ddev drush pathauto:aliases-generate all

---

Exercice 3 : Configuration SEO

Durée estimée : 30 minutes

Optimiser les métadonnées pour le référencement.

Objectif

Configurer Metatag pour les produits et le partage social.

Instructions

1. Configuration globale

   /admin/config/search/metatag

   Modifier Global :

   Titre: "[current-page:title] | TailStore"
   Description: "TailStore - Votre boutique de mode en ligne"

2. Configuration Produit

   Ajouter un modèle pour Contenu: Produit :

   Basique :

   Titre: "[node:title] - [node:field_price:value]€ | TailStore"
   Description: "[node:field_description:summary]"

   Open Graph :

   og:type: "product"
   og:title: "[node:title]"
   og:description: "[node:field_description:summary]"
   og:image: "[node:field_images:entity:url]"
   og:site_name: "TailStore"

   Twitter Cards :

   twitter:card: "summary_large_image"
   twitter:title: "[node:title]"
   twitter:description: "[node:field_description:summary]"
   twitter:image: "[node:field_images:entity:url]"

3. Configuration Article Blog

   Ajouter un modèle pour Contenu: Article Blog :

   og:type: "article"
   article:published_time: "[node:created:html_datetime]"
   article:author: "[node:author:display-name]"

4. Créer un style d’image Open Graph

   /admin/config/media/image-styles/add

   • Nom : opengraph
   • Effet : Scale and crop (1200×630)

Test

1. Visitez un produit
2. Affichez le code source
3. Vérifiez les balises <meta property="og:..."

Validation ✓

• Métadonnées globales configurées
• Open Graph pour les produits avec tous les champs
• Twitter Cards configurées
• Style d’image OG créé (1200×630px)
• Test avec Facebook Debugger
• Test avec Twitter Card Validator
• Balises présentes dans le code source HTML
• Images correctement affichées dans les validateurs
• Configuration exportée

Vérification dans le code source

1. Visitez une page produit
2. Clic droit → Afficher le code source
3. Cherchez <meta property="og: (Ctrl+F)

Attendu :

<meta property="og:type" content="product" />
<meta property="og:title" content="T-Shirt Blanc - 29.99€ | TailStore" />
<meta property="og:description" content="T-shirt en coton bio..." />
<meta property="og:image" content="https://tailstore.ddev.site/sites/default/files/2026-01/tshirt.jpg" />
<meta property="og:site_name" content="TailStore" />
<meta property="og:url" content="https://tailstore.ddev.site/boutique/t-shirts/t-shirt-blanc" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="T-Shirt Blanc - 29.99€ | TailStore" />
<meta name="twitter:description" content="T-shirt en coton bio..." />
<meta name="twitter:image" content="https://tailstore.ddev.site/sites/default/files/2026-01/tshirt.jpg" />

Erreurs courantes

Image non affichée :

• Vérifier que l’image existe et est accessible publiquement
• Vérifier le style d’image (doit être 1200×630)
• URL absolue requise (pas de chemin relatif)

Titre trop long :

• Facebook tronque à 60 caractères
• Adapter le modèle si nécessaire

Description vide :

• Vérifier que le token pointe vers le bon champ
• Vérifier que le contenu a bien une description

Test partage social

Facebook :

1. Allez sur Facebook Debugger
2. Entrez l’URL de votre produit
3. Cliquez Déboguer
4. Vérifiez l’aperçu

Twitter :

1. Allez sur Card Validator
2. Entrez l’URL
3. Vérifiez la Card Preview

---

Exercice 4 : Formulaire de contact

Durée estimée : 35 minutes

Créer un formulaire de contact complet avec notifications.

Objectif

Créer le formulaire de contact TailStore avec emails automatiques.

Instructions

1. Créer le webform

   /admin/structure/webform/add

   • Titre : Formulaire de contact
   • ID : contact

2. Ajouter les éléments

   Ordre	Type	Clé	Libellé	Requis
   1	Fieldset	personal_info	Vos informations	-
   2	Text	name	Nom complet	✅
   3	Email	email	Email	✅
   4	Tel	phone	Téléphone	❌
   5	Fieldset	message_info	Votre message	-
   6	Select	subject	Sujet	✅
   7	Textarea	message	Message	✅

   Options du sujet :

   general|Question générale
   order|Suivi de commande
   return|Retour produit
   partnership|Partenariat
   other|Autre

3. Configurer l’email admin

   /admin/structure/webform/manage/contact/handlers

   Ajouter un Email handler :

   Titre: Notification équipe
   Destinataire: contact@tailstore.com
   Sujet: "[TailStore] [webform_submission:values:subject] - [webform_submission:values:name]"
   Corps: |
     Un nouveau message a été reçu sur TailStore.
   
     === Expéditeur ===
     Nom: [webform_submission:values:name]
     Email: [webform_submission:values:email]
     Téléphone: [webform_submission:values:phone]
   
     === Message ===
     Sujet: [webform_submission:values:subject]
   
     [webform_submission:values:message]
   
     ---
     Répondre directement à cet email pour contacter le client.
   
   Répondre à: [webform_submission:values:email]

4. Configurer l’email confirmation

   Ajouter un second Email handler :

   Titre: Confirmation client
   Destinataire: [webform_submission:values:email]
   Sujet: "Votre message a bien été reçu - TailStore"
   Corps: |
     Bonjour [webform_submission:values:name],
   
     Nous avons bien reçu votre message concernant "[webform_submission:values:subject]".
   
     Notre équipe vous répondra dans les 48 heures ouvrées.
   
     Cordialement,
     L'équipe TailStore
   
     ---
     Ceci est un message automatique, merci de ne pas y répondre.

5. Configurer le message de confirmation

   /admin/structure/webform/manage/contact/settings/confirmation

   Type: Page
   Titre: Merci pour votre message !
   Message: |
     Votre message a été envoyé avec succès.
     Nous vous répondrons dans les plus brefs délais.

6. Ajouter le formulaire à une page

   Créez une page “Contact” et intégrez le bloc Webform.

Validation ✓

• Formulaire créé avec tous les champs obligatoires
• Email admin configuré avec bon format
• Email confirmation client configuré
• Message de confirmation affiché après soumission
• Formulaire accessible sur /form/contact
• Formulaire intégré dans une page ou un bloc
• Test d’envoi fonctionnel (vérifier réception email)
• Soumission enregistrée dans Résultats
• Champs requis validés (erreur si vide)
• Format email validé automatiquement
• Configuration exportée

Test complet

1. Accéder au formulaire

   /form/contact

2. Test validation

   • Soumettez le formulaire vide → Erreurs affichées ?
   • Email invalide : test → Erreur format ?

3. Test soumission valide

   Remplissez tous les champs et soumettez

4. Vérifier l’email admin

   # Voir les emails capturés par DDEV (mailpit)
   ddev launch -m

   Ou accédez à : https://tailstore.ddev.site:8026

5. Vérifier la soumission

   /admin/structure/webform/manage/contact/results/submissions

Déboguer les emails

Email non reçu ?

1. Vérifier Mailpit (interface DDEV) : ddev launch -m
2. Vérifier les logs Webform : Rapports → Journaux récents
3. Vérifier la configuration email : Configuration → Système → Configuration de base du site

Tester l’envoi :

# Envoyer un email de test
ddev drush php-eval "mail('test@example.com', 'Test', 'Corps du message');"

Personnalisation avancée

Ajoutez des classes CSS TailStore :

# Sur chaque champ
wrapper_attributes:
  class: 'mb-4'

attributes:
  class: 'w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'

# Sur le bouton submit
attributes:
  class: 'btn btn-primary w-full md:w-auto'

---

Exercice 5 : Formulaire demande de devis

Durée estimée : 30 minutes

Créer un formulaire multi-étapes pour les demandes de devis.

Objectif

Créer un formulaire plus complexe avec wizard et champs conditionnels.

Instructions

1. Créer le webform

   • Titre : Demande de devis
   • ID : quote_request

2. Page 1 : Informations

   wizard_page_1:
     type: wizard_page
     title: "Vos informations"
   
   name:
     type: textfield
     title: "Nom complet"
     required: true
   
   email:
     type: email
     title: "Email"
     required: true
   
   company:
     type: textfield
     title: "Entreprise"
   
   phone:
     type: tel
     title: "Téléphone"
     required: true

3. Page 2 : Produits

   wizard_page_2:
     type: wizard_page
     title: "Produits souhaités"
   
   products:
     type: checkboxes
     title: "Catégories de produits"
     options:
       clothing: "Vêtements"
       shoes: "Chaussures"
       accessories: "Accessoires"
   
   quantity:
     type: select
     title: "Quantité estimée"
     options:
       10_50: "10 à 50 pièces"
       50_100: "50 à 100 pièces"
       100_500: "100 à 500 pièces"
       500_plus: "Plus de 500 pièces"
   
   details:
     type: textarea
     title: "Description des besoins"

4. Page 3 : Budget et délai

   wizard_page_3:
     type: wizard_page
     title: "Budget et planning"
   
   budget:
     type: radios
     title: "Budget estimé"
     options:
       small: "Moins de 1 000€"
       medium: "1 000€ - 5 000€"
       large: "5 000€ - 20 000€"
       enterprise: "Plus de 20 000€"
   
   deadline:
     type: date
     title: "Date souhaitée de livraison"
   
   urgency:
     type: radios
     title: "Niveau d'urgence"
     options:
       low: "Faible - Plusieurs mois"
       medium: "Moyen - 1 à 2 mois"
       high: "Élevé - Moins d'un mois"

5. Configurer la progression

   • Afficher la barre de progression
   • Permettre le retour arrière

6. Configurer les emails

   Créer des emails personnalisés avec toutes les infos.

Validation ✓

• Wizard à 3 étapes créé
• Navigation avant/arrière fonctionnelle
• Barre de progression affichée
• Tous les champs fonctionnels et bien labelés
• Email récapitulatif complet avec toutes les infos
• Test du parcours complet sans erreur
• Données correctement enregistrées dans les résultats
• Email reçu avec mise en forme lisible
• Configuration exportée

Bonnes pratiques UX pour les wizards

Progression visible :

• ✅ Afficher l’étape actuelle : “Etape 1/3”
• ✅ Nommer clairement chaque étape
• ✅ Permettre le retour arrière sans perte de données

Navigation :

• ✅ Bouton “Précédent” toujours visible (sauf étape 1)
• ✅ Bouton “Suivant” avec texte clair
• ✅ Dernière étape : “Envoyer ma demande de devis”

Validation :

• ✅ Valider chaque étape avant de passer à la suivante
• ✅ Afficher les erreurs clairement
• ✅ Ne pas perdre les données en cas d’erreur

Email récapitulatif complet

Exemple de configuration email :

Titre: Demande de devis
Destinataire: devis@tailstore.com
Sujet: "[TailStore] Nouvelle demande de devis - [webform_submission:values:company]"
Corps: |
  === NOUVELLE DEMANDE DE DEVIS ===

  Date: [webform_submission:created:custom:d/m/Y à H:i]

  --- Informations client ---
  Nom: [webform_submission:values:name]
  Email: [webform_submission:values:email]
  Téléphone: [webform_submission:values:phone]
  Entreprise: [webform_submission:values:company]

  --- Produits demandés ---
  Catégories: [webform_submission:values:products]
  Quantité: [webform_submission:values:quantity]
  Détails: [webform_submission:values:details]

  --- Budget et planning ---
  Budget estimé: [webform_submission:values:budget]
  Date souhaitée: [webform_submission:values:deadline:custom:d/m/Y]
  Urgence: [webform_submission:values:urgency]

  ---
  Voir la soumission complète :
  [webform_submission:url]

Test du workflow complet

1. Étape 1 : Remplir les infos personnelles → Suivant
2. Étape 2 : Sélectionner produits et quantités → Suivant
3. Étape 3 : Budget et délai → Envoyer
4. Vérifier : Page de confirmation + email reçu

---

Exercice 6 : Sitemap XML

Durée estimée : 15 minutes

Générer un sitemap pour les moteurs de recherche.

Objectif

Configurer Simple Sitemap pour indexer tous les contenus.

Instructions

1. Configuration du sitemap

   /admin/config/search/simplesitemap

2. Activer les types de contenu

   Pour chaque entité, configurer :

   Type	Indexer	Priorité
   Produit	✅	0.8
   Article Blog	✅	0.6
   Page	✅	0.5
   Catégorie	✅	0.7
   Marque	✅	0.6

3. Générer le sitemap

   ddev drush simple-sitemap:generate

4. Vérifier

   Accédez à /sitemap.xml

5. Soumettre à Google

   Dans Google Search Console, soumettez l’URL du sitemap.

Validation ✓

• Tous les types configurés dans Simple Sitemap
• Priorités définies selon l’importance
• Sitemap accessible à /sitemap.xml
• URLs propres (Pathauto) dans le sitemap
• Contenu test présent dans le sitemap
• Fichier XML valide (pas d’erreur de syntaxe)
• Sitemaps soumis à Google Search Console (optionnel)
• Configuration exportée

Vérification du sitemap

# Générer le sitemap
ddev drush simple-sitemap:generate

# Voir le contenu
curl https://tailstore.ddev.site/sitemap.xml

# Ou dans le navigateur

Exemple de sortie attendue :

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://tailstore.ddev.site/</loc>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://tailstore.ddev.site/boutique/t-shirts/t-shirt-blanc</loc>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://tailstore.ddev.site/blog/2026-01/tendances-mode-hiver</loc>
    <priority>0.6</priority>
  </url>
</urlset>

Bonnes pratiques Sitemap

Priorités recommandées :

• Page d’accueil : 1.0
• Pages produits : 0.8-0.9 (contenu principal e-commerce)
• Catégories : 0.7
• Articles blog : 0.5-0.6
• Pages statiques : 0.5

Fréquence de mise à jour :

• Automatique lors de création/modification de contenu
• Ou via cron : drush simple-sitemap:generate

Soumettre à Google :

1. Google Search Console → Sitemaps
2. Ajouter URL : https://tailstore.com/sitemap.xml
3. Vérifier l’indexation après quelques jours

Configuration avancée

Exclure certains contenus :

# Configuration → Simple Sitemap → Entités
# Pour chaque type, définir :
Inclure: Oui/Non
Priorité: 0.1 - 1.0
Changefreq: daily, weekly, monthly, yearly

Multi-sitemap (pour gros sites) : Simple Sitemap génère automatiquement plusieurs sitemaps si > 50 000 URLs

---

Exercice 7 : Sécurité anti-spam

Durée estimée : 15 minutes

Protéger les formulaires contre le spam.

Objectif

Configurer Honeypot et limiter les soumissions.

Instructions

1. Vérifier Honeypot

   /admin/config/content/honeypot

   Protéger tous les formulaires: Oui
   Délai minimum: 5 secondes

2. Limiter les soumissions Webform

   Pour chaque formulaire :

   /admin/structure/webform/manage/[id]/settings/submissions

   Limite par utilisateur: 3 par jour
   Limite totale: 50 par jour
   Message: "Vous avez atteint la limite..."

3. Tester

   Essayez de soumettre trop rapidement (< 5 secondes).

Validation ✓

• Honeypot activé sur tous les formulaires
• Délai minimum configuré (5 secondes)
• Limites de soumission définies par formulaire
• Message d’erreur clair pour l’utilisateur
• Test : soumission trop rapide bloquée
• Test : limite de soumissions respectée
• Configuration exportée

Test Honeypot

1. Accéder au formulaire : /form/contact

2. Ouvrir les outils développeur (F12)

3. Inspecter le formulaire

   Chercher un champ caché (probablement <input name="url" type="text" style="display:none">)

4. Tester la soumission rapide

   Remplir et soumettre en < 5 secondes → Refus attendu

5. Tester après délai

   Attendre > 5 secondes puis soumettre → Succès attendu

Test limites de soumissions

# Simuler plusieurs soumissions
ddev drush webform:test contact --num=4

# La 4ème devrait être refusée si limite = 3

Ou testez manuellement en soumettant le formulaire 4 fois.

Stratégie anti-spam complète

Niveau 1 : Honeypot (recommandé pour tous)

• Invisible pour l’utilisateur
• Bloque 90% des bots
• Sans impact sur l’UX

Niveau 2 : Limites de soumission

• Empêche les abus
• Légère contrainte pour utilisateurs légitimes

Niveau 3 : CAPTCHA (seulement si nécessaire)

• Réduire le taux de conversion de 10-30%
• À utiliser uniquement en cas de spam massif
• Préférer reCAPTCHA v3 (invisible)

Niveau 4 : Validation email

• Email de confirmation avec lien à cliquer
• Pour les inscriptions/créations de compte

Monitoring

Surveiller les tentatives de spam :

# Voir les soumissions récentes
ddev drush sqlq "SELECT * FROM webform_submission ORDER BY created DESC LIMIT 10"

# Logs Honeypot
# Rapports → Journaux récents → Filtrer "honeypot"

Ajuster les paramètres si nécessaire :

• Augmenter le délai minimum (10-15 secondes)
• Réduire les limites de soumission
• Ajouter CAPTCHA en cas de spam persistant

---

🏆 Récapitulatif Étape 7

Modules installés

✅ 9 modules contributifs ✅ Configuration complète ✅ Tests validés

URLs propres

✅ Pathauto configuré ✅ Modèles pour tous types ✅ Translittération active

SEO optimisé

✅ Metatag complet ✅ Open Graph + Twitter ✅ Sitemap XML généré

Formulaires

✅ Contact fonctionnel ✅ Devis multi-étapes ✅ Anti-spam actif

📋 Checklist finale complète

Infrastructure

• Tous les modules installés via Composer
• Modules activés via Drush
• Gin theme admin activé
• Admin Toolbar opérationnel

URLs et Navigation

• Pathauto : modèles créés pour tous les types
• Token installé et fonctionnel
• Redirect installé pour les anciennes URLs
• Alias générés pour contenus existants

SEO et Métadonnées

• Metatag : configuration globale
• Metatag : configuration par type de contenu
• Open Graph configuré (Facebook, LinkedIn)
• Twitter Cards configuré
• Images OG au bon format (1200×630)
• Testé avec validateurs sociaux
• Simple Sitemap généré (/sitemap.xml)

Formulaires

• Webform installé et activé
• Formulaire contact créé et testé
• Formulaire devis (wizard) créé
• Emails admin configurés
• Emails confirmation client configurés
• Honeypot activé
• Limites de soumission définies

Sécurité et Protection

• Honeypot sur tous les formulaires
• Délai anti-spam configuré (5+ secondes)
• Limites de soumission par utilisateur
• Messages d’erreur clairs

Versionnement et Déploiement

• Configuration exportée (drush cex -y)
• composer.json et composer.lock à jour
• Fichiers de config dans config/sync/
• Tout committé dans Git

📦 Export final

# Exporter toute la configuration
ddev drush cex -y

# Vérifier les fichiers exportés
ls -la config/sync/ | grep -E "(pathauto|metatag|webform)"

# Commit
git add composer.json composer.lock config/
git commit -m "feat(step7): configure contrib modules (pathauto, metatag, webform, sitemap, security)

- URLs automatiques avec Pathauto pour tous les types de contenu
- SEO optimisé avec Metatag, Open Graph, Twitter Cards
- Formulaires contact et devis avec Webform
- Sitemap XML pour moteurs de recherche
- Sécurité anti-spam avec Honeypot
- Interface admin améliorée avec Gin et Admin Toolbar"

git push origin main

Déploiement sur staging/production

Pour déployer sur un autre environnement :

# Tirer les dernières modifications
git pull origin main

# Installer les dépendances
composer install

# Importer la configuration
drush cim -y

# Vider le cache
drush cr

# Générer le sitemap
drush simple-sitemap:generate

Cette procédure garantit que tous les environnements sont identiques.

📊 Impact sur TailStore

Améliorations SEO

• URLs lisibles : /boutique/t-shirts/t-shirt-blanc au lieu de /node/42
• Partage social optimisé : Beaux aperçus sur Facebook, Twitter, LinkedIn
• Indexation améliorée : Sitemap XML pour Google
• Redirections : Pas de liens cassés

Expérience utilisateur

• Formulaires professionnels : Contact, devis, newsletter
• Interface admin moderne : Gin + Admin Toolbar = gain de productivité
• Performance : Configuration optimisée

Professionnalisation

• Maintenabilité : Configuration versionnée
• Sécurité : Protection anti-spam
• Scalabilité : Modules éprouvés par la communauté

🔜 Prochaine étape

Les modules sont configurés ! Dans l’Étape 8, nous développerons nos propres modules custom pour les fonctionnalités spécifiques à TailStore.