npm - create-cartbase - Versions diffs - 0.1.13 → 0.1.15 - Mend

create-cartbase 0.1.13 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +4 -0
package/dist/enclosing-project.js +82 -0
package/dist/index.js +5 -1
package/package.json +1 -1
package/template/app/docs/BUILD-A-STOREFRONT.md +8 -4
package/template/app/docs/collections.md +167 -167
package/template/app/docs/components.md +1290 -1211
package/template/app/docs/consent.md +18 -8
package/template/app/docs/customers.md +6 -8
package/template/app/docs/integrations.md +4 -2
package/template/app/docs/products.md +316 -306
package/template/app/package.json +1 -1
package/template/app/src/app/layout.tsx +11 -7
package/template/app/src/app/order/[id]/confirmed/page.tsx +4 -0
package/template/app/src/app/page.tsx +4 -1
package/template/app/src/app/products/[handle]/page.tsx +15 -2
package/template/app/src/app/providers.tsx +37 -27
package/template/app/src/app/search/page.tsx +4 -1
package/template/app/src/lib/config.ts +11 -0

package/template/app/package.json CHANGED Viewed

@@ -9,7 +9,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@cartbase/storefront": "^0.14.0",
+    "@cartbase/storefront": "^0.16.0",
     "next": "16.2.4",
     "react": "19.2.4",
     "react-dom": "19.2.4"

package/template/app/src/app/layout.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import { StorefrontTags } from "@cartbase/storefront/tracking/storefront-tags"
 import { TrackInit } from "@cartbase/storefront/tracking/track-init"
 import { CartButtonClient } from "@cartbase/storefront/common/cart-button-client"
 import { createStorefrontMetadata, PlatformInit } from "@cartbase/storefront/platform"
-import { BARTER_CLIENT_ID, readCartCookie } from "@/lib/config"
+import { BARTER_CLIENT_ID, readCartCookie, STORE_LOCALE } from "@/lib/config"
 import { getServerClient } from "@/lib/server-client"
 import { Providers } from "./providers"
 import "./globals.css"
@@ -126,14 +126,18 @@ export default async function RootLayout({
   ])
   return (
-    <html lang="en">
+    <html lang={STORE_LOCALE.code}>
       <body>
-        <ConsentInit />
+        {/* The store's own consent switch decides the default: a store
+            that collects consent starts every visitor denied until they
+            choose, a store with the banner off starts them granted. The
+            prop is required, so a layout cannot leave it out. */}
+        <ConsentInit required={consentRes.consent.enabled} />
         {/* Every marketing tag the store configured in the admin, mounted
-            from its own config: Meta, TikTok, Google (GA4 + Ads on one
-            tag), GTM. Nothing to wire per vendor — saving the ids in
-            Settings → Integrations is the whole merchant-side act. Order
-            matters: ConsentInit sets the Consent Mode defaults
+            from its own config: Meta, TikTok, ChatGPT, Google (GA4 + Ads
+            on one tag), GTM. Nothing to wire per vendor — saving the ids
+            in Settings → Integrations is the whole merchant-side act.
+            Order matters: ConsentInit sets the Consent Mode defaults
             synchronously ABOVE this, so every tag below inherits the
             gate. */}
         <StorefrontTags client={client} />

package/template/app/src/app/order/[id]/confirmed/page.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ import {
 import { TrackOrderPurchase } from "@cartbase/storefront/tracking/track-order-purchase"
 import { useTrackingConfig } from "@cartbase/storefront/tracking/use-tracking-config"
 import { browserClient } from "@/lib/browser-client"
+import { STORE_LOCALE } from "@/lib/config"
 import { LAST_ORDER_STORAGE_KEY } from "../../../checkout/checkout-page-client"
 /**
@@ -86,6 +87,9 @@ export default function OrderConfirmedPage() {
       // the order.
       paymentMethodName={"Cash on delivery"}
       storeHref="/"
+      // The order pack, as a prop: this template reads its copy from props,
+      // not from the locale provider, and the prop is required.
+      labels={STORE_LOCALE.order}
       />
     </>
   )

package/template/app/src/app/page.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { StoreTemplate } from "@cartbase/storefront/store/store-template"
 import type { SortOptions } from "@cartbase/storefront/lib/sort-products"
-import { PRICING_CONTEXT } from "@/lib/config"
+import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
 import { getServerClient } from "@/lib/server-client"
 /**
@@ -20,6 +20,9 @@ export default async function HomePage({
       sortBy={sortBy as SortOptions | undefined}
       page={page}
       pricingContext={PRICING_CONTEXT}
+      // Server-rendered: the locale provider cannot reach it, so the pack
+      // comes as a prop, and the prop is required.
+      labels={STORE_LOCALE.store}
     />
   )
 }

package/template/app/src/app/products/[handle]/page.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { retrieveProduct } from "@cartbase/storefront/api/products"
 import { StoreApiError } from "@cartbase/storefront/api/types"
 import { ProductTemplate } from "@cartbase/storefront/products/product-template"
 import { addToCartAction } from "@/lib/cart-actions"
-import { PRICING_CONTEXT } from "@/lib/config"
+import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
 import { getServerClient } from "@/lib/server-client"
 /**
@@ -13,10 +13,12 @@ import { getServerClient } from "@/lib/server-client"
  */
 export default async function ProductPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ handle: string }>
+  searchParams: Promise<{ variant?: string }>
 }) {
-  const { handle } = await params
+  const [{ handle }, { variant }] = await Promise.all([params, searchParams])
   const client = await getServerClient()
   let product
@@ -34,6 +36,12 @@ export default async function ProductPage({
       product={product}
       pricingContext={PRICING_CONTEXT}
       addToCart={addToCartAction}
+      // The product page contract: the address names the variant
+      // (`?variant=<digits>`, Shopify's parameter), and the page hands it to
+      // the template so the FIRST paint is that variant's price, code and
+      // stock. Switching a variant rewrites the address in the browser
+      // without asking the server.
+      initialVariantId={variant}
       // NO `promises` here, deliberately. Until 0.13.0 the library carried
       // delivery, exchange and return promises as label DEFAULTS, so every
       // store scaffolded from this file told shoppers "your package will
@@ -50,6 +58,11 @@ export default async function ProductPage({
       // default for a store that has not decided yet. The physical-facts
       // section appears on its own for products that HAVE facts, and is
       // skipped for those that do not.
+      //
+      // The pack has to be handed over here, not just mounted at the root:
+      // the related-products strip is a server component and cannot read
+      // the locale provider, so its heading would stay English. Required.
+      labels={STORE_LOCALE.products}
     />
   )
 }

package/template/app/src/app/providers.tsx CHANGED Viewed

@@ -9,14 +9,20 @@ import {
   shouldRenderBanner,
   type ConsentSettings,
 } from "@cartbase/storefront/tracking/consent"
-import { CART_COOKIE, CART_COOKIE_MAX_AGE } from "@/lib/config"
+import { StorefrontLocaleProvider } from "@cartbase/storefront/locales"
+import { CART_COOKIE, CART_COOKIE_MAX_AGE, STORE_LOCALE } from "@/lib/config"
 import { browserClient } from "@/lib/browser-client"
 /**
- * Client-side shell: ONE CartDrawerProvider per app (cart-drawer family
- * mount rule) + the consent banner (consent.md: render the builtin banner
- * only when `enabled && mode === "builtin"`; ConsentInit stays in the
- * server layout as the first child of <body>).
+ * Client-side shell: the store's language, ONE CartDrawerProvider per app
+ * (cart-drawer family mount rule) + the consent banner (consent.md: render
+ * the builtin banner only when `enabled && mode === "builtin"`; ConsentInit
+ * stays in the server layout as the first child of <body>).
+ *
+ * The language is mounted once, here. Every client component inside reads
+ * it, the cart drawer included, so nothing is handed over below. The
+ * server-rendered templates cannot read it, so each page hands them their
+ * area (`labels={STORE_LOCALE.store}`), and those props are required.
  */
 export function Providers({
   cart,
@@ -27,28 +33,32 @@ export function Providers({
   consent: ConsentSettings
   children: React.ReactNode
 }) {
-  const copy = pickConsentCopy(consent.copy, "en")
+  // The store's own consent copy, in the store's language where it has it;
+  // pickConsentCopy falls back to English and then to whatever exists.
+  const copy = pickConsentCopy(consent.copy, STORE_LOCALE.code)
   return (
-    <CartDrawerProvider
-      cart={cart}
-      client={browserClient}
-      onCartChange={(next) => {
-        // Persist the cart id (carts.md: the app owns the cart cookie).
-        document.cookie = `${CART_COOKIE}=${encodeURIComponent(
-          next.id
-        )};path=/;max-age=${CART_COOKIE_MAX_AGE};samesite=lax`
-      }}
-    >
-      {children}
-      <CartDrawerTemplate />
-      {shouldRenderBanner(consent) && copy && (
-        <ConsentBanner
-          copy={copy}
-          layout={consent.layout}
-          privacyHref={consent.privacy_href}
-          rejectOnFirstLayer={consent.reject_on_first_layer}
-        />
-      )}
-    </CartDrawerProvider>
+    <StorefrontLocaleProvider locale={STORE_LOCALE}>
+      <CartDrawerProvider
+        cart={cart}
+        client={browserClient}
+        onCartChange={(next) => {
+          // Persist the cart id (carts.md: the app owns the cart cookie).
+          document.cookie = `${CART_COOKIE}=${encodeURIComponent(
+            next.id
+          )};path=/;max-age=${CART_COOKIE_MAX_AGE};samesite=lax`
+        }}
+      >
+        {children}
+        <CartDrawerTemplate />
+        {shouldRenderBanner(consent) && copy && (
+          <ConsentBanner
+            copy={copy}
+            layout={consent.layout}
+            privacyHref={consent.privacy_href}
+            rejectOnFirstLayer={consent.reject_on_first_layer}
+          />
+        )}
+      </CartDrawerProvider>
+    </StorefrontLocaleProvider>
   )
 }

package/template/app/src/app/search/page.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { SearchTemplate } from "@cartbase/storefront/store/search-template"
-import { PRICING_CONTEXT } from "@/lib/config"
+import { PRICING_CONTEXT, STORE_LOCALE } from "@/lib/config"
 import { getServerClient } from "@/lib/server-client"
 /** Search page (runbook step 5) — fully URL-state driven search-template. */
@@ -15,6 +15,9 @@ export default async function SearchPage({
       client={client}
       searchParams={params}
       pricingContext={PRICING_CONTEXT}
+      // Server-rendered: the locale provider cannot reach it, so the pack
+      // comes as a prop, and the prop is required.
+      labels={STORE_LOCALE.store}
     />
   )
 }

package/template/app/src/lib/config.ts CHANGED Viewed

@@ -26,5 +26,16 @@ export const CART_COOKIE_MAX_AGE = 60 * 60 * 24 * 30 // 30 days
 /** Locale cookie read by the clients' `getLocale`. */
 export const LOCALE_COOKIE = "_barter_locale"
+/**
+ * THE STORE'S LANGUAGE, declared once. The library speaks international
+ * English and knows no other language; a language is a typed pack the store
+ * imports. Swap `en` for `bg` or `es` here (`@cartbase/storefront/locales/bg`)
+ * and every screen follows: providers.tsx mounts it for the client
+ * components, and each page hands the server-rendered templates their area
+ * from it (`labels={STORE_LOCALE.store}`), because a server component cannot
+ * read a client context. Those props are required, so a page cannot forget.
+ */
+export { en as STORE_LOCALE } from "@cartbase/storefront/locales/en"
 /** Pricing context for every catalog surface (runbook step 5). EUR only. */
 export const PRICING_CONTEXT = { currency_code: "eur" } as const