@salifbiaye/create-boutique 0.3.0 → 0.3.1

package/cli/dist/generate.js

@@ -231,9 +231,12 @@ const day = (d, add = 0, end = false) => {
 };
 /** Événement d'un thème : « black-friday-2 » → « black-friday ». */
 const baseTheme = (theme) => theme.replace(/-\d+$/, "");
-/** Visuel du hero dans seed/images : hero-<slug>.*, sinon hero-<thème>.*, sinon hero.* (importé par le seed). */
-function heroImage(images, slug, theme) {
-    for (const name of [`hero-${slug}`, `hero-${theme}`, "hero"]) {
+/**
+ * Visuel de campagne dans seed/images (importé par le seed) : <prefix>-<slug>.*, sinon <prefix>-<thème>.*, sinon <prefix>.*
+ * prefix = "hero" (bannière du haut) ou "promo" (bandeau promo).
+ */
+function heroImage(images, slug, theme, prefix = "hero") {
+    for (const name of [`${prefix}-${slug}`, `${prefix}-${theme}`, prefix]) {
         const found = images.find((f) => /\.(png|jpe?g|webp)$/i.test(f) && f.replace(/\.[^.]+$/, "").toLowerCase() === name);
         if (found)
             return found;
@@ -295,6 +298,9 @@ export function writeCampaignFiles(dir, p, language) {
         const hero = heroImage(images, b.slug, b.theme);
         if (hero)
             Object.assign(campaign, { hero: { image: hero } });
+        const promo = heroImage(images, b.slug, b.theme, "promo");
+        if (promo)
+            Object.assign(campaign, { promo: { image: promo } });
         fs.writeFileSync(file, JSON.stringify(campaign, null, 2) + "\n");
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Usine à Boutiques : génère un projet complet (backend Medusa + une boutique Next.js par campagne) prêt pour docker compose",
   "type": "module",
   "repository": { "type": "git", "url": "git+https://github.com/salifbiaye/create-boutique.git" },

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

@@ -77,6 +77,20 @@ async function HarvestProducts({ campaign }: { campaign: Campaign }) {
   )
 }
 
+/** Bandeau promo avec, à défaut d'image de campagne, la photo du produit le plus remisé. */
+async function Promo({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  const off = (p: (typeof products)[number]) =>
+    Math.max(0, ...(p.variants ?? []).map((v) => {
+      const c = v.calculated_price
+      return c?.original_amount && c.calculated_amount != null ? 1 - c.calculated_amount / c.original_amount : 0
+    }))
+  const best = [...products].filter((p) => p.thumbnail).sort((a, b) => off(b) - off(a))[0]
+  return <PromoBanner campaign={campaign} fallbackImage={best?.thumbnail ?? undefined} />
+}
+
 function GridFallback() {
   return <div className="ub-section" aria-busy="true" style={{ minHeight: 320 }} />
 }
@@ -114,7 +128,9 @@ export default async function Home() {
       <Suspense fallback={<GridFallback />}>
         <Showcase part="spotlight" eyebrow={campaign.hero.eyebrow} />
       </Suspense>
-      <PromoBanner campaign={campaign} />
+      <Suspense fallback={<GridFallback />}>
+        <Promo campaign={campaign} />
+      </Suspense>
       <Suspense fallback={<GridFallback />}>
         <Products title={campaign.sections?.products ?? t("section.products")} />
       </Suspense>

package/templates/storefront/src/modules/ub/campaign-blocks.tsx

@@ -145,9 +145,10 @@ export function TrustBar({ freeShipping }: { freeShipping?: string }) {
   )
 }
 
-export function PromoBanner({ campaign }: { campaign: Campaign }) {
+/** Bandeau promo. Image : celle de la campagne (admin → Campagnes), sinon `fallbackImage` (photo d'un produit remisé). */
+export function PromoBanner({ campaign, fallbackImage }: { campaign: Campaign; fallbackImage?: string }) {
   const { promo } = campaign
-  const promoImage = promo.image && /^https?:\/\//.test(promo.image) ? promo.image : undefined
+  const promoImage = (promo.image && /^https?:\/\//.test(promo.image) ? promo.image : undefined) ?? fallbackImage
 
   return (
     <section className="ub-section" style={{ paddingTop: 0 }}>