Exercices Étape 6

🎯 Objectifs

À la fin de ces exercices, vous aurez :

• Créé le thème TailStore avec Tailwind CSS v4
• Configuré Vite pour le développement avec DDEV
• Implémenté les templates Twig
• Ajouté les interactions Alpine.js et Swiper

---

Exercice 1 : Création du thème TailStore

Durée estimée : 25 minutes

Créer la structure complète du thème personnalisé.

Objectif

Créer le thème tailstore avec toutes les configurations nécessaires.

Instructions

1. Créer la structure du thème

   Dans le dossier web/themes/custom/, créez la structure suivante :

   mkdir -p tailstore/{assets/images,dist,templates}

2. Créer le fichier tailstore.info.yml

   name: TailStore
   type: theme
   description: 'Thème e-commerce moderne avec Tailwind CSS et Alpine.js'
   core_version_requirement: ^10 || ^11
   base theme: false
   
   regions:
     header: 'Header'
     primary_menu: 'Main Menu'
     secondary_menu: 'Secondary Menu'
     highlighted: 'Highlighted'
     breadcrumb: 'Breadcrumb'
     help: 'Help'
     content: 'Main Content'
     sidebar: 'Sidebar'
     before_content: 'Before Content'
     footer_top: 'Footer Top'
     footer_bottom: 'Footer Bottom'
   
   libraries:
     - tailstore/global

3. Créer tailstore.libraries.yml

   global:
     version: 1.0.0
     css:
       theme:
         dist/assets/main.css: { minified: true }
     js:
       dist/assets/main.js: { defer: true }
     dependencies:
       - core/drupal
       - core/once

Validation ✓

• Dossier tailstore créé dans themes/custom
• Fichier .info.yml avec les régions correctes
• Fichier .libraries.yml pointant vers dist/assets

---

Exercice 2 : Configuration de l’environnement de build

Durée estimée : 30 minutes

Configurer Vite, Tailwind CSS v4 et l’intégration DDEV.

Objectif

Mettre en place l’outillage frontend moderne.

Instructions

1. Initialiser le projet Node.js

   cd web/themes/custom/tailstore
   npm init -y

2. Installer les dépendances

   npm install -D vite tailwindcss @tailwindcss/vite @tailwindcss/forms vite-plugin-live-reload alpinejs
   npm install swiper

3. Configurer package.json

   Modifiez le fichier package.json pour ajouter type: "module" et les scripts :

   {
     "name": "tailstore-theme",
     "version": "1.0.0",
     "type": "module",
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "preview": "vite preview"
     },
     // ... dépendances ...
   }

4. Créer vite.config.js

   Ce fichier configure Vite pour fonctionner avec DDEV (SSL, HMR) et Tailwind.

   import { defineConfig } from 'vite'
   import tailwindcss from '@tailwindcss/vite'
   import liveReload from 'vite-plugin-live-reload'
   import fs from 'fs'
   
   export default defineConfig({
     plugins: [
       tailwindcss(),
       liveReload([
         'templates/**/*.twig',
         'assets/**/*.css',
         'assets/**/*.js',
         '*.theme',
         'config/**/*.yml',
       ]),
     ],
     server: {
       host: '0.0.0.0',
       port: 5173,
       strictPort: true,
       // Adaptez l'URL si votre projet DDEV a un nom différent
       origin: 'https://tailstore.ddev.site:5173',
       cors: true,
       https: {
         key: fs.readFileSync('/etc/ssl/certs/master.key'),
         cert: fs.readFileSync('/etc/ssl/certs/master.crt'),
       },
       hmr: {
         protocol: 'wss',
         host: 'tailstore.ddev.site',
         clientPort: 5173,
       },
     },
     build: {
       outDir: 'dist',
       rollupOptions: {
         input: {
           main: 'assets/main.js',
         },
         output: {
           entryFileNames: 'assets/[name].js',
           chunkFileNames: 'assets/[name].js',
           assetFileNames: 'assets/[name].[ext]',
         },
       },
     },
   })

   Astuce

   Assurez-vous que le host dans hmr correspond à l’URL de votre projet DDEV (ddev describe).

Validation ✓

• node_modules installé
• vite.config.js créé avec la configuration SSL DDEV
• Scripts dev et build présents dans package.json

---

Exercice 3 : Styles et JavaScript

Durée estimée : 25 minutes

Mettre en place Tailwind CSS et les points d’entrée JS.

Objectif

Créer les fichiers sources CSS et JS.

Instructions

1. Créer assets/style.css

   Configuration de Tailwind v4 avec le thème personnalisé.

   @import "tailwindcss";
   @plugin "@tailwindcss/forms";
   
   @theme {
     --color-primary: #ff0042;
     --color-white: #ffffff;
     --color-black: #010717;
     --color-gray-lighter: #FAF7F3;
     --color-gray-light: #323232;
     --color-gray-dark: #010717;
     --color-gray-txt: #4c4d56;
     --color-gray-line: #E5E5E5;
   
     --font-display: "Manrope", sans-serif;
   
     --breakpoint-sm: 640px;
     --breakpoint-md: 768px;
     --breakpoint-lg: 1024px;
     --breakpoint-xl: 1280px;
   
     --container-padding: 1rem;
   }

2. Créer assets/main.js

   Point d’entrée principal qui importe le CSS, Alpine.js et Swiper. Nous utilisons une IIFE et les comportements Drupal pour une intégration propre.

   import './style.css'
   import Alpine from 'alpinejs'
   import Swiper from 'swiper';
   import { Navigation, Autoplay } from 'swiper/modules';
   import 'swiper/css';
   import 'swiper/css/navigation';
   
   // Initialisation d'Alpine
   window.Alpine = Alpine
   Alpine.start()
   
   (function (Drupal, once) {
     Drupal.behaviors.tailstore = {
       attach: function (context, settings) {
         // Initialisation du Slider (Swiper) avec 'once' pour éviter les doublons
         const sliders = once('tailstore-slider', '.main-slider', context);
   
         sliders.forEach((element) => {
           new Swiper(element, {
             modules: [Navigation, Autoplay],
             loop: true,
             autoplay: {
               delay: 5000,
             },
             navigation: {
               nextEl: '.swiper-button-next',
               prevEl: '.swiper-button-prev',
             },
           });
         });
       }
     };
   })(Drupal, once);

3. Lancer le serveur de développement

   npm run dev

   Vérifiez que le serveur démarre sans erreur sur le port 5173.

Validation ✓

• assets/style.css contient la config @theme
• assets/main.js importe les librairies
• npm run dev fonctionne

---

Exercice 4 : Template de page

Durée estimée : 40 minutes

Intégrer le template HTML dans Drupal.

Objectif

Créer le fichier page.html.twig avec la structure Tailwind.

Instructions

1. Activer le thème

   ddev drush theme:enable tailstore
   ddev drush config-set system.theme default tailstore -y
   ddev drush cr

2. Créer templates/page.html.twig

   Voici la structure de base à adapter :

   {# templates/page.html.twig #}
   <header class="bg-gray-dark sticky top-0 z-50">
       <div class="container mx-auto flex justify-between items-center py-4">
           <!-- Logo -->
           <a href="{{ path('<front>') }}" class="flex items-center">
               <img src="{{ base_path ~ directory }}/assets/images/template-white-logo.png" alt="Logo" class="h-14 w-auto mr-4">
           </a>
   
           <!-- Menu Desktop -->
           <nav class="hidden lg:flex md:grow justify-center">
               {% if page.primary_menu %}
                   {{ page.primary_menu }}
               {% else %}
                   <!-- Menu statique pour le développement -->
                   <ul class="flex justify-center space-x-4 text-white">
                       <li><a href="{{ path('<front>') }}" class="hover:text-primary font-semibold">Home</a></li>
                       <!-- Dropdown Alpine.js -->
                       <li class="relative group" x-data="{ open: false }">
                           <a href="#" @mouseover="open = true" @mouseleave="open = false" class="hover:text-primary font-semibold flex items-center">
                               Men <i :class="open ? 'fas fa-chevron-up ml-1 text-xs' : 'fas fa-chevron-down ml-1 text-xs'"></i>
                           </a>
                           <ul x-show="open" class="absolute left-0 bg-white text-black space-y-2 mt-1 p-2 rounded shadow-lg" x-cloak>
                               <li><a href="#" class="block px-4 py-2 hover:bg-primary hover:text-white rounded">T-Shirts</a></li>
                           </ul>
                       </li>
                   </ul>
               {% endif %}
           </nav>
   
           <!-- Actions (Cart, Search, User) -->
           <div class="hidden lg:flex items-center space-x-4">
               <!-- Cart Icon -->
               <div class="relative group">
                   <a href="/cart">
                       <img src="{{ base_path ~ directory }}/assets/images/cart-shopping.svg" alt="Cart" class="h-6 w-6">
                   </a>
               </div>
           </div>
       </div>
   </header>
   
   <main>
       {% if page.highlighted %}
           <div class="highlighted-region">
               {{ page.highlighted }}
           </div>
       {% endif %}
   
       <div id="content" class="container mx-auto py-8">
           {{ page.content }}
       </div>
   </main>
   
   <footer class="border-t border-gray-line py-10">
       <div class="container mx-auto px-4">
           {{ page.footer_top }}
           <div class="text-center mt-8">
               <p>&copy; {{ "now"|date("Y") }} TailStore. All rights reserved.</p>
           </div>
       </div>
   </footer>

3. Ajouter les images

   Téléchargez l’archive des images depuis tailstore-images.zip et extrayez-la dans le dossier assets/images/.

   # Dans le dossier du thème
   unzip ~/Downloads/tailstore-images.zip -d assets/

   Astuce

   L’archive contient tous les logos, icônes et images nécessaires pour le thème TailStore.

4. Vider le cache

   ddev drush cr

Validation ✓

• Le header s’affiche avec le logo
• Le menu déroulant fonctionne (Alpine.js)
• Le footer est présent

---

Exercice 5 : Build Production

Durée estimée : 10 minutes

Générer les assets finaux.

Objectif

Préparer le thème pour la production.

Instructions

1. Lancer le build

   npm run build

   Cela va générer les fichiers minifiés dans dist/assets/.

2. Vérifier le fonctionnement

   Arrêtez le serveur de développement (Ctrl+C) et rechargez la page Drupal. Le site doit fonctionner correctement en utilisant les fichiers de dist/.

Validation ✓

• Dossier dist contient main.css et main.js
• Le site s’affiche correctement sans npm run dev

---

🏆 Récapitulatif Étape 6

Thème créé

Structure standard Drupal

Vite & Tailwind

Environnement de dev moderne

Interactions

Alpine.js et Swiper intégrés