@salifbiaye/create-boutique 0.6.0 → 0.7.0

package/templates/storefront/src/app/(main)/template.tsx

@@ -1,4 +1,19 @@
-/** Remonté à chaque navigation : sert de point d'accroche à la transition entre pages (styles/ub/motion.css, desktop). */
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { pageName } from "@lib/boutique/page-name"
+
+/**
+ * Remonté à chaque navigation : point d'accroche de la transition entre pages (styles/ub/motion.css, desktop)
+ * et nom de la page (data-page) pour la cibler dans styles/custom.css. Calculé depuis l'adresse courante (côté client) :
+ * juste au premier affichage comme après chaque clic dans le site.
+ */
 export default function Template({ children }: { children: React.ReactNode }) {
-  return <div className="ub-page">{children}</div>
+  const path = usePathname()
+  const search = useSearchParams().toString()
+  return (
+    <div className="ub-page" data-page={pageName(path, search ? `?${search}` : "")}>
+      {children}
+    </div>
+  )
 }

package/templates/storefront/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { themeFontClasses } from "@lib/boutique/fonts"
 import { messages } from "@lib/boutique/i18n"
 import { I18nProvider } from "@lib/boutique/i18n-client"
 import Motion from "@modules/ub/motion"
+import CookieBanner from "@modules/ub/cookie-banner"
 import { Metadata } from "next"
 import "styles/globals.css"
 import "styles/ub/tokens.css"
@@ -20,12 +21,22 @@ import "styles/ub/cinema.css"
 import "styles/ub/album.css"
 import "styles/ub/tech.css"
 import "styles/ub/grimoire.css"
+import "styles/ub/riviera.css"
+import "styles/ub/sunset.css"
+import "styles/ub/locker.css"
+import "styles/ub/training.css"
+import "styles/ub/arena.css"
+import "styles/ub/mosaic.css"
+import "styles/ub/lantern.css"
+import "styles/ub/souk.css"
+import "styles/ub/reviews.css"
 import "styles/ub/motion.css"
 import "styles/ub/media.css"
 import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"
 import "styles/ub/medusa-ui.css"
 import "styles/ub/overrides.css"
+import "styles/custom.css" // retouches du projet, conservées par update (toujours en dernier)
 
 // Tout dépend de la boutique de l'instance (lue à l'exécution) : rien n'est pré-rendu au build.
 export const dynamic = "force-dynamic"
@@ -63,11 +74,12 @@ export default function RootLayout(props: { children: React.ReactNode }) {
   const b = getBoutique()
 
   return (
-    <html lang={b.locale} data-theme={b.theme.layout ?? b.theme.id} data-variant={b.theme.layout ? b.theme.id : undefined} data-event={b.theme.id.replace(/-2$/, "")} data-mode="light" className={themeFontClasses(b.theme)}>
+    <html lang={b.locale} data-theme={b.theme.layout ?? b.theme.id} data-variant={b.theme.layout ? b.theme.id : undefined} data-event={b.theme.id.replace(/-2$/, "")} data-boutique={b.slug} data-mode="light" className={themeFontClasses(b.theme)}>
       <body className="ub">
         <I18nProvider messages={messages("")} locale={b.locale}>
           <main className="relative">{props.children}</main>
           <Motion event={b.theme.id.replace(/-2$/, "")} />
+          <CookieBanner />
         </I18nProvider>
       </body>
     </html>

package/templates/storefront/src/lib/boutique/campaign.ts

@@ -20,6 +20,8 @@ export type Campaign = CampaignTexts & {
   seo?: { title?: string; description?: string; image?: string }
   /** Compte à rebours : undefined = selon le thème (CSS), true = toujours, false = jamais */
   showCountdown?: boolean
+  /** Site ouvert (défaut) ou fermé dans l'admin. Les dates de campagne ne ferment jamais le site. */
+  online: boolean
 }
 
 function readJsonIfExists(file: string): unknown | undefined {
@@ -105,8 +107,10 @@ export const getCampaign = cache(async (): Promise<Campaign> => {
     nextCampaignUrl: own.nextCampaign ? b.siblings[own.nextCampaign] : undefined,
     freeShipping: own.vars?.freeShipping,
     logo: own.logo,
-    showCountdown: own.showCountdown,
+    // Campagne terminée : le site reste une boutique normale, seul le compte à rebours disparaît
+    showCountdown: campaignStatus(own) === "ended" ? false : own.showCountdown,
     seo: own.seo,
+    online: own.online !== false,
   }
 })
 

package/templates/storefront/src/lib/boutique/page-name.ts

@@ -0,0 +1,25 @@
+/**
+ * Nom de la page courante, posé en data-page sur .ub-page (app/(main)/template.tsx) et sur le checkout :
+ * sert à cibler une page dans styles/custom.css, ex. [data-page="product"] .ub-… ou :root:has([data-page="home"]) .ub-nav
+ */
+export type PageName =
+  | "home" | "store" | "search" | "product" | "category" | "collection" | "cart" | "checkout"
+  | "account" | "order" | "track" | "contact" | "shipping" | "returns" | "privacy" | "terms" | "review" | "other"
+
+export function pageName(path: string, search = ""): PageName {
+  const p = path.replace(/\/+$/, "") || "/"
+  if (p === "/") return "home"
+  if (p === "/store") return /(^|[?&])q=/.test(search) ? "search" : "store"
+  if (p.startsWith("/products/")) return "product"
+  if (p.startsWith("/categories/")) return "category"
+  if (p.startsWith("/collections/")) return "collection"
+  if (p === "/cart") return "cart"
+  if (p.startsWith("/checkout")) return "checkout"
+  if (p.startsWith("/account")) return "account"
+  if (p === "/review") return "review"
+  if (p === "/order/track") return "track"
+  if (p.startsWith("/order/")) return "order"
+  const legal = p.match(/^\/legal\/(contact|shipping|returns|privacy|terms)$/)
+  if (legal) return legal[1] as PageName
+  return "other"
+}

package/templates/storefront/src/lib/boutique/schema.ts

@@ -74,7 +74,7 @@ export const themeSchema = z.object({
   /** Variante : reprend la mise en page (règles CSS) de ce thème, avec la palette de styles/ub/variants.css. */
   layout: z.string().regex(SLUG).optional(),
   /** Page d'accueil : « default » (sections standard) ou « harvest » (accueil éditorial des thèmes Thanksgiving) */
-  home: z.enum(["default", "harvest", "gala", "cinema", "album", "tech", "grimoire"]).optional(),
+  home: z.enum(["default", "harvest", "gala", "cinema", "album", "tech", "grimoire", "riviera", "sunset", "locker", "training", "arena", "mosaic", "lantern", "souk"]).optional(),
   fonts: z.object({
     head: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
     body: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
@@ -134,6 +134,8 @@ export const campaignFileSchema = z
     logo: z.url().max(500).optional(),
     /** undefined = selon le thème */
     showCountdown: z.boolean().optional(),
+    /** Site ouvert (défaut) ou fermé, décidé dans admin → Campagnes (mode multi) ; indépendant des dates */
+    online: z.boolean().optional(),
   })
   .refine((c) => new Date(c.startsAt) < new Date(c.endsAt), "startsAt doit précéder endsAt")
 

package/templates/storefront/src/lib/constants.tsx

@@ -35,6 +35,19 @@ export const paymentInfoMap: Record<
     title: <T k="checkout.manualPayment" />,
     icon: <CreditCard />,
   },
+  // Agrégateurs d'Afrique de l'Ouest : le client paie sur leur page (Wave, Orange Money, carte…), puis revient
+  pp_paytech_paytech: {
+    title: <T k="checkout.payPaytech" />,
+    icon: <CreditCard />,
+  },
+  pp_paydunya_paydunya: {
+    title: <T k="checkout.payPaydunya" />,
+    icon: <CreditCard />,
+  },
+  pp_naboopay_naboopay: {
+    title: <T k="checkout.payNaboopay" />,
+    icon: <CreditCard />,
+  },
   // Add more payment providers here
 }
 
@@ -48,6 +61,10 @@ export const isStripeLike = (providerId?: string) => {
 export const isPaypal = (providerId?: string) => {
   return providerId?.startsWith("pp_paypal")
 }
+/** Paiement sur la page de l'agrégateur (PayTech, PayDunya, NabooPay), puis retour sur la boutique */
+export const isRedirectPay = (providerId?: string) =>
+  !!providerId && /^pp_(paytech|paydunya|naboopay)_/.test(providerId)
+
 export const isManual = (providerId?: string) => {
   return providerId?.startsWith("pp_system_default")
 }

package/templates/storefront/src/lib/data/review-actions.ts

@@ -0,0 +1,28 @@
+"use server"
+
+import { sdk } from "@lib/config"
+
+export type ReviewFormState = { ok?: boolean; error?: "invalid" | "duplicate" | "expired" | "tooMany" | "failed" }
+
+/** Envoi d'un avis depuis la page « Laisser un avis » : le backend vérifie le jeton, la commande et le produit. */
+export async function submitReview(_prev: ReviewFormState, form: FormData): Promise<ReviewFormState> {
+  const rating = Number(form.get("rating"))
+  const body = {
+    token: String(form.get("token") ?? ""),
+    product_id: String(form.get("product_id") ?? ""),
+    rating,
+    title: String(form.get("title") ?? "").trim() || undefined,
+    comment: String(form.get("comment") ?? "").trim(),
+    author_name: String(form.get("author_name") ?? "").trim(),
+  }
+  if (!(rating >= 1 && rating <= 5) || body.comment.length < 10 || !body.author_name || /[<>]/.test(body.comment + body.author_name + (body.title ?? ""))) {
+    return { error: "invalid" }
+  }
+  try {
+    await sdk.client.fetch("/store/reviews", { method: "POST", body, cache: "no-store" })
+    return { ok: true }
+  } catch (e) {
+    const status = (e as { status?: number }).status
+    return { error: status === 429 ? "tooMany" : status === 409 || status === 422 ? "duplicate" : status === 400 || status === 401 || status === 403 || status === 404 ? "expired" : "failed" }
+  }
+}

package/templates/storefront/src/lib/data/reviews.ts

@@ -0,0 +1,64 @@
+import "server-only"
+
+import { cache } from "react"
+import { sdk } from "@lib/config"
+
+/**
+ * Avis clients (backend : module productReview). Lecture en cache 1 min : un avis validé dans l'admin
+ * apparaît sur le site en une minute. Toute erreur = « pas d'avis » (jamais une page cassée).
+ */
+export type Review = { id: string; product_id: string; author_name: string; rating: number; title: string | null; comment: string; created_at: string }
+export type ReviewSummary = { average: number; count: number; distribution: [number, number, number, number, number] }
+export type LatestReview = Review & { product: { title: string; handle: string; thumbnail: string | null } }
+export type ReviewOrder = {
+  number: number
+  first_name: string
+  products: { product_id: string; title: string; handle?: string; thumbnail?: string; reviewed: boolean }[]
+}
+
+const CACHED = { method: "GET" as const, next: { revalidate: 60 }, cache: "force-cache" as const }
+const EMPTY: ReviewSummary = { average: 0, count: 0, distribution: [0, 0, 0, 0, 0] }
+
+export const getProductReviews = cache(async (productId: string, limit = 6) => {
+  try {
+    return await sdk.client.fetch<{ reviews: Review[]; count: number; summary: ReviewSummary }>(
+      `/store/reviews?product_id=${encodeURIComponent(productId)}&limit=${limit}`,
+      CACHED
+    )
+  } catch {
+    return { reviews: [] as Review[], count: 0, summary: EMPTY }
+  }
+})
+
+/** Note moyenne et nombre d'avis par produit (cartes produits) */
+export async function getReviewSummaries(productIds: string[]): Promise<Record<string, { average: number; count: number }>> {
+  const ids = [...new Set(productIds)].filter(Boolean).sort()
+  if (!ids.length) return {}
+  try {
+    const { summaries } = await sdk.client.fetch<{ summaries: Record<string, { average: number; count: number }> }>(
+      `/store/reviews/summary?product_ids=${ids.map(encodeURIComponent).join(",")}`,
+      CACHED
+    )
+    return summaries
+  } catch {
+    return {}
+  }
+}
+
+export const getLatestReviews = cache(async (limit = 6): Promise<LatestReview[]> => {
+  try {
+    const { reviews } = await sdk.client.fetch<{ reviews: LatestReview[] }>(`/store/reviews/latest?limit=${limit}`, CACHED)
+    return reviews
+  } catch {
+    return []
+  }
+})
+
+/** Page « Laisser un avis » : produits de la commande du lien (jamais en cache : dépend du jeton) */
+export async function getReviewOrder(token: string): Promise<ReviewOrder | null> {
+  try {
+    return await sdk.client.fetch<ReviewOrder>(`/store/reviews/order?token=${encodeURIComponent(token)}`, { method: "GET", cache: "no-store" })
+  } catch {
+    return null
+  }
+}

package/templates/storefront/src/modules/checkout/components/payment/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 
-import { T } from "@lib/boutique/i18n-client"
+import { T, useT } from "@lib/boutique/i18n-client"
 import { RadioGroup } from "@headlessui/react"
-import { isStripeLike, paymentInfoMap } from "@lib/constants"
+import { isRedirectPay, isStripeLike, paymentInfoMap } from "@lib/constants"
 import { initiatePaymentSession } from "@lib/data/cart"
 import { CheckCircleSolid, CreditCard } from "@medusajs/icons"
 import { Button, Container, Heading, Text, clx } from "@medusajs/ui"
@@ -43,6 +43,25 @@ const Payment = ({
   const pathname = usePathname()
 
   const isOpen = searchParams.get("step") === "payment"
+  const t = useT()
+
+  /**
+   * Paiement sur la page d'un agrégateur (PayTech, PayDunya, NabooPay) : adresse de retour sur cette boutique
+   * (vérifiée par le backend) et client (NabooPay l'exige). Le montant, lui, est toujours calculé par Medusa.
+   */
+  const redirectData = () => {
+    const a = cart.shipping_address ?? cart.billing_address
+    const base = `${window.location.origin}/checkout?step=review`
+    return {
+      return_url: `${base}&pay_return=1`,
+      cancel_url: `${base}&pay_return=cancel`,
+      label: t("checkout.orderLabel"),
+      first_name: a?.first_name ?? undefined,
+      last_name: a?.last_name ?? undefined,
+      phone: a?.phone ?? undefined,
+      email: cart.email ?? undefined,
+    }
+  }
 
   const setPaymentMethod = async (method: string) => {
     setError(null)
@@ -85,9 +104,11 @@ const Payment = ({
       const checkActiveSession =
         activeSession?.provider_id === selectedPaymentMethod
 
-      if (!checkActiveSession) {
+      // Agrégateur : toujours un paiement neuf (montant et client à jour)
+      if (!checkActiveSession || isRedirectPay(selectedPaymentMethod)) {
         await initiatePaymentSession(cart, {
           provider_id: selectedPaymentMethod,
+          ...(isRedirectPay(selectedPaymentMethod) ? { data: redirectData() } : {}),
         })
       }
 
@@ -100,7 +121,8 @@ const Payment = ({
         )
       }
     } catch (err: any) {
-      setError(err.message)
+      // Agrégateur (clés, montant, service indisponible) : message clair, le détail est dans les logs du backend
+      setError(isRedirectPay(selectedPaymentMethod) ? t("checkout.payInitError") : err.message)
     } finally {
       setIsLoading(false)
     }

package/templates/storefront/src/modules/checkout/components/payment-button/index.tsx

@@ -2,7 +2,7 @@
 
 
 import { T } from "@lib/boutique/i18n-client"
-import { isManual, isStripeLike } from "@lib/constants"
+import { isManual, isRedirectPay, isStripeLike } from "@lib/constants"
 import { placeOrder } from "@lib/data/cart"
 import { HttpTypes } from "@medusajs/types"
 import { Button } from "@medusajs/ui"
@@ -28,7 +28,9 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
     (cart.shipping_methods?.length ?? 0) < 1
 
   const paymentSession = cart.payment_collection?.payment_sessions?.[0]
-  const redirectStatus = useSearchParams().get("redirect_status")
+  const params = useSearchParams()
+  const redirectStatus = params.get("redirect_status")
+  const payReturn = params.get("pay_return")
 
   switch (true) {
     case isStripeLike(paymentSession?.provider_id) && !!redirectStatus:
@@ -45,6 +47,15 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
           data-testid={dataTestId}
         />
       )
+    case isRedirectPay(paymentSession?.provider_id):
+      return (
+        <RedirectPayButton
+          notReady={notReady}
+          redirectUrl={typeof paymentSession?.data?.redirect_url === "string" ? paymentSession.data.redirect_url : undefined}
+          payReturn={payReturn}
+          data-testid={dataTestId}
+        />
+      )
     case isManual(paymentSession?.provider_id):
       return (
         <ManualTestPaymentButton notReady={notReady} data-testid={dataTestId} />
@@ -54,6 +65,78 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
   }
 }
 
+/**
+ * Agrégateur (PayTech, PayDunya, NabooPay) : « Payer maintenant » envoie le client sur la page de paiement.
+ * Au retour (?pay_return=1), la commande est validée : le backend demande le statut à l'agrégateur (on ne croit jamais
+ * l'URL de retour). Paiement encore en cours (Wave peut prendre un moment) : message + « Vérifier à nouveau » ;
+ * de toute façon la notification de l'agrégateur validera la commande côté serveur.
+ */
+const RedirectPayButton = ({
+  notReady,
+  redirectUrl,
+  payReturn,
+  "data-testid": dataTestId,
+}: {
+  notReady: boolean
+  redirectUrl?: string
+  payReturn: string | null
+  "data-testid"?: string
+}) => {
+  const [busy, setBusy] = useState(payReturn === "1")
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const started = useRef(false)
+
+  const confirm = () => {
+    setBusy(true)
+    setErrorMessage(null)
+    placeOrder()
+      .catch((err) => setErrorMessage(err.message))
+      .finally(() => setBusy(false))
+  }
+
+  useEffect(() => {
+    if (payReturn !== "1" || started.current) return
+    started.current = true
+    confirm()
+  }, [payReturn])
+
+  if (payReturn === "1") {
+    return (
+      <>
+        <Button size="large" isLoading={busy} disabled={busy} onClick={confirm} data-testid={dataTestId}>
+          <T k={busy ? "checkout.payChecking" : "checkout.payRetry"} />
+        </Button>
+        {errorMessage && (
+          <p className="text-small-regular text-ui-fg-subtle mt-2" role="status">
+            <T k="checkout.paymentPending" />
+          </p>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Button
+        size="large"
+        disabled={notReady || !redirectUrl}
+        isLoading={busy}
+        onClick={() => {
+          if (!redirectUrl) return
+          setBusy(true)
+          window.location.assign(redirectUrl)
+        }}
+        data-testid={dataTestId}
+      >
+        <T k="checkout.payRedirect" />
+      </Button>
+      <p className="text-small-regular text-ui-fg-subtle mt-2" role="status">
+        <T k={payReturn === "cancel" ? "checkout.payCancelled" : "checkout.payRedirectHint"} />
+      </p>
+    </>
+  )
+}
+
 /** Retour d'un moyen de paiement à redirection (Klarna, banque…) : Stripe renvoie sur /checkout?step=review&redirect_status=… */
 const StripeRedirectReturn = ({ status, children }: { status: string; children: React.ReactNode }) => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null)

package/templates/storefront/src/modules/products/templates/index.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react"
+import { ProductReviews } from "@modules/ub/reviews"
 import { notFound } from "next/navigation"
 import { HttpTypes } from "@medusajs/types"
 
@@ -110,6 +111,10 @@ export default function ProductTemplate({ product, region, images }: ProductTemp
         </div>
       </section>
 
+      <Suspense fallback={null}>
+        <ProductReviews productId={product.id} />
+      </Suspense>
+
       <Suspense fallback={null}>
         <Related product={product} />
       </Suspense>

package/templates/storefront/src/modules/store/components/shop-search.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useRef, useState, useTransition } from "react"
+
+/**
+ * Recherche de la page « Boutique » : résultats pendant la frappe (pause de 350 ms), en gardant catégorie et tri.
+ * Formulaire GET classique : fonctionne aussi sans JavaScript (Entrée). Focus automatique si l'URL finit par #recherche
+ * (icône loupe de l'en-tête sur mobile).
+ */
+export default function ShopSearch({ placeholder, clearLabel }: { placeholder: string; clearLabel: string }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const params = useSearchParams()
+  const [value, setValue] = useState(params.get("q") ?? "")
+  const [pending, start] = useTransition()
+  const input = useRef<HTMLInputElement>(null)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  useEffect(() => {
+    if (window.location.hash === "#recherche") input.current?.focus()
+  }, [])
+
+  const go = (q: string) => {
+    const next = new URLSearchParams(params)
+    if (q.trim()) next.set("q", q.trim())
+    else next.delete("q")
+    next.delete("page")
+    const s = next.toString()
+    start(() => router.replace(s ? `${pathname}?${s}` : pathname, { scroll: false }))
+  }
+
+  return (
+    <form
+      className="ub-shopsearch"
+      role="search"
+      action="/store"
+      aria-busy={pending}
+      onSubmit={(e) => {
+        e.preventDefault()
+        clearTimeout(timer.current)
+        go(value)
+      }}
+    >
+      <svg viewBox="0 0 24 24" aria-hidden>
+        <circle cx="11" cy="11" r="6.5" />
+        <path d="M20 20l-4.2-4.2" />
+      </svg>
+      <input
+        ref={input}
+        id="recherche"
+        type="search"
+        name="q"
+        value={value}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        autoComplete="off"
+        onChange={(e) => {
+          const q = e.target.value
+          setValue(q)
+          clearTimeout(timer.current)
+          timer.current = setTimeout(() => go(q), 350)
+        }}
+      />
+      {/* Filtres gardés quand le formulaire est envoyé sans JavaScript */}
+      {params.get("sortBy") && <input type="hidden" name="sortBy" value={params.get("sortBy") ?? ""} />}
+      {params.get("category") && <input type="hidden" name="category" value={params.get("category") ?? ""} />}
+      {value && (
+        <button
+          type="button"
+          className="ub-shopsearch__clear"
+          aria-label={clearLabel}
+          onClick={() => {
+            setValue("")
+            clearTimeout(timer.current)
+            go("")
+            input.current?.focus()
+          }}
+        >
+          ×
+        </button>
+      )}
+    </form>
+  )
+}

package/templates/storefront/src/modules/store/templates/index.tsx

@@ -8,6 +8,8 @@ import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-g
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
 import { CampaignCountdown } from "@modules/ub/campaign-blocks"
 
+import ShopSearch from "@modules/store/components/shop-search"
+
 import PaginatedProducts from "./paginated-products"
 
 const SORTS: [SortOptions, string][] = [
@@ -17,21 +19,24 @@ const SORTS: [SortOptions, string][] = [
 ]
 
 /** Lien de la page boutique en gardant les autres filtres (serveur, sans JavaScript). */
-const shopHref = (q: { sortBy?: string; category?: string }) => {
+const shopHref = (q: { sortBy?: string; category?: string; q?: string }) => {
   const params = new URLSearchParams(Object.entries(q).filter(([, v]) => v) as [string, string][])
   const s = params.toString()
   return s ? `/store?${s}` : "/store"
 }
 
-/** Page « Boutique » : bandeau de campagne, catégories en pastilles, tri en boutons, grille. */
+/** Page « Boutique » : bandeau de campagne, catégories en pastilles, recherche, tri en boutons, grille. */
 const StoreTemplate = async ({
   sortBy,
   page,
   category,
+  q,
 }: {
   sortBy?: SortOptions
   page?: string
   category?: string
+  /** Recherche (titre, description… : recherche plein texte de Medusa, limitée au canal de vente de la boutique) */
+  q?: string
 }) => {
   const pageNumber = page ? parseInt(page) : 1
   const sort = sortBy || "created_at"
@@ -52,7 +57,7 @@ const StoreTemplate = async ({
               </span>
             )}
             <h1 className="ub-head ub-shophero__title" data-testid="store-page-title">
-              {active?.name ?? campaign.sections?.products ?? t("footer.all")}
+              {q ? t("shop.results", { q }) : (active?.name ?? campaign.sections?.products ?? t("footer.all"))}
             </h1>
             {campaign.promo?.text && <p className="ub-shophero__sub">{campaign.promo.text}</p>}
           </div>
@@ -68,13 +73,13 @@ const StoreTemplate = async ({
       <div className="ub-wrap ub-shop" data-testid="category-container">
         <div className="ub-shop__bar">
           <nav className="ub-chips" aria-label={t("section.categories")}>
-            <Link href={shopHref({ sortBy })} className="ub-chip" aria-current={!active ? "page" : undefined}>
+            <Link href={shopHref({ sortBy, q })} className="ub-chip" aria-current={!active ? "page" : undefined}>
               {t("shop.all")}
             </Link>
             {topLevel.map((c) => (
               <Link
                 key={c.id}
-                href={shopHref({ sortBy, category: c.handle })}
+                href={shopHref({ sortBy, category: c.handle, q })}
                 className="ub-chip"
                 aria-current={active?.id === c.id ? "page" : undefined}
               >
@@ -82,11 +87,14 @@ const StoreTemplate = async ({
               </Link>
             ))}
           </nav>
+          <Suspense fallback={<div className="ub-shopsearch" />}>
+            <ShopSearch placeholder={t("nav.search")} clearLabel={t("shop.clear")} />
+          </Suspense>
           <nav className="ub-sort" aria-label={t("store.sortBy")}>
             {SORTS.map(([value, key]) => (
               <Link
                 key={value}
-                href={shopHref({ sortBy: value === "created_at" ? undefined : value, category })}
+                href={shopHref({ sortBy: value === "created_at" ? undefined : value, category, q })}
                 className="ub-sort__opt"
                 aria-current={sort === value ? "true" : undefined}
                 scroll={false}
@@ -96,8 +104,8 @@ const StoreTemplate = async ({
             ))}
           </nav>
         </div>
-        <Suspense key={`${sort}-${category}-${pageNumber}`} fallback={<SkeletonProductGrid />}>
-          <PaginatedProducts sortBy={sort} page={pageNumber} categoryId={active?.id} showCount />
+        <Suspense key={`${sort}-${category}-${pageNumber}-${q}`} fallback={<SkeletonProductGrid />}>
+          <PaginatedProducts sortBy={sort} page={pageNumber} categoryId={active?.id} q={q} showCount />
         </Suspense>
       </div>
     </>