Webshop

Layout pour le webshop public MC (grand catalogue) et les webshops privés B2B. Navbar avec recherche intégrée + sidebar filtres + grille produits + drawer panier.

Démo complète

Structure HTML complète

<!-- Nav avec recherche + compte + panier -->
<nav class="navbar bg-mc-navy text-white sticky top-0 z-30 shadow-sm">
  <div class="navbar-start pl-4">
    <img src="/logo.svg" alt="Maisons Clothes" class="h-6 w-auto" />
  </div>
  <div class="navbar-center flex-1 max-w-md px-4">
    <div class="relative w-full">
      <input type="text" placeholder="Rechercher un produit..."
             class="input input-sm w-full pl-8 bg-white/10 text-white placeholder-white/40 border-white/20">
      <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40"
           fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
      </svg>
    </div>
  </div>
  <div class="navbar-end gap-2 pr-4">
    <button class="btn btn-ghost btn-sm text-white/70 hover:text-white">Mon compte</button>
    <button class="btn btn-ghost btn-sm text-white/70 hover:text-white relative">
      Panier
      <span class="badge badge-error badge-xs absolute -top-1 -right-1">3</span>
    </button>
  </div>
</nav>

<!-- Layout: filter sidebar + product grid -->
<div class="max-w-screen-xl mx-auto px-6 py-6 flex gap-6">
  <!-- Filter sidebar -->
  <aside class="w-64 flex-shrink-0">
    <!-- See filter groups below -->
  </aside>

  <!-- Product grid -->
  <main class="flex-1">
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      <!-- product cards -->
    </div>
    <!-- Pagination -->
    <div class="flex justify-center gap-2 mt-8">
      <a class="btn btn-ghost btn-sm">← Précédent</a>
      <span class="btn btn-ghost btn-sm pointer-events-none">Page 1 / 12</span>
      <a class="btn btn-ghost btn-sm">Suivant →</a>
    </div>
  </main>
</div>

<!-- Panier drawer (right, overlay) -->
<div class="fixed inset-0 z-40 hidden" id="cart-drawer">
  <div class="absolute inset-0 bg-black/40" onclick="closeCart()"></div>
  <div class="absolute right-0 top-0 h-full w-80 bg-base-100 shadow-xl p-6 overflow-y-auto">
    <div class="flex items-center justify-between mb-4">
      <h2 class="font-accent font-bold text-lg text-mc-navy">Votre panier (3)</h2>
      <button class="btn btn-ghost btn-sm" onclick="closeCart()">✕</button>
    </div>
    <!-- Cart items here -->
    <div class="border-t border-base-200 pt-4 mt-4">
      <button class="btn btn-primary w-full">Valider le panier</button>
    </div>
  </div>
</div>

Drawer panier

Le panier s'affiche en drawer fixe à droite avec overlay backdrop. Toujours z-40 minimum pour passer au-dessus du contenu.

Règles