@thorprovider/storefront 0.4.0-mvp.0 → 0.4.0-mvp.2

package/assets/templates/views/category/index.tsx

@@ -24,13 +24,13 @@ import {
   mapCatalogResultsToFilterProps,
 } from '@thorprovider/runtime/commerce'
 import { getDataSource, getStoreContext, isRealMode } from '../../store-context'
-import { mountedFeatures, mountedFeatureConfigs } from '../../composition'
+import { mountedFeatureConfigs, mountedFeatureNames, mountedFeatures } from '../../composition'
 import { pageRoot } from '../../spec/page-root'
 import type { StorefrontElement } from '../../spec/types'
 import type { ViewModule } from '../types'
 import { registry } from './registry'
-import { categoryFilterProps } from './props'
-import { categoryFilterPropsSchema } from './schema'
+import { categoryBreadcrumbProps, categoryFilterProps } from './props'
+import { breadcrumbPropsSchema, categoryFilterPropsSchema } from './schema'
 
 // The single controlled `CategoryFilter2` base listing. The search/filter
 // controls are shown only when the matching feature is installed; the base
@@ -38,6 +38,10 @@ import { categoryFilterPropsSchema } from './schema'
 // and pagination.
 const hasSearch = mountedFeatures.includes('catalog-search')
 const hasFilters = mountedFeatures.includes('category-filters')
+// The navigability feature contributes the entity-derived breadcrumb trail. When
+// it is not installed the trail is empty and the Breadcrumb block renders
+// nothing, so removal leaves no dangling navigation aid.
+const hasNavigability = mountedFeatureNames.includes('navigability')
 const searchConfig = (mountedFeatureConfigs['catalog-search'] ?? {}) as { placeholder?: string }
 const filtersConfig = (mountedFeatureConfigs['category-filters'] ?? {}) as {
   filterSet?: string[]
@@ -53,6 +57,13 @@ const SORT_LABELS: Record<string, string> = {
 }
 
 const elements: Record<string, StorefrontElement> = {
+  'category.breadcrumb': {
+    type: 'Breadcrumb',
+    props: {
+      ...categoryBreadcrumbProps,
+      items: { $state: '/breadcrumbItems' },
+    },
+  },
   'category.filter': {
     type: 'CategoryFilter2',
     props: {
@@ -90,6 +101,10 @@ const elements: Record<string, StorefrontElement> = {
 }
 
 const catalog = {
+  Breadcrumb: {
+    props: breadcrumbPropsSchema,
+    description: 'Migas de pan derivadas de la jerarquía real de categorías.',
+  },
   CategoryFilter2: {
     props: categoryFilterPropsSchema,
     description:
@@ -112,22 +127,74 @@ const emptyFilterState = () => ({
   categoryFilterCategories: [],
   categoryFilterCollections: [],
   categoryFilterPriceRange: undefined,
+  breadcrumbItems: [] as { label: string; href?: string }[],
 })
 
+/**
+ * The real category entity for the current route scope, resolved from the
+ * backend catalog. Entity SEO reads this; an unknown/absent scope yields no
+ * entity (no metadata or structured data is fabricated).
+ */
+function resolveCategoryEntity(
+  slug: string | undefined,
+  catalog: Awaited<ReturnType<typeof getCatalog>>,
+): { handle: string; name: string; description?: string } | undefined {
+  if (!slug) return undefined
+  const match = catalog.categoriesRaw.find((entry) => entry.handle === slug)
+  if (!match) return undefined
+  const description =
+    typeof match.description === 'string' && match.description.trim() !== ''
+      ? match.description
+      : undefined
+  return {
+    handle: match.handle,
+    name: match.name,
+    ...(description !== undefined ? { description } : {}),
+  }
+}
+
+/**
+ * Entity-derived breadcrumb trail for the current category scope: Home, the
+ * real ancestor chain (root -> leaf), and the current category. Derived from
+ * the backend category hierarchy (`parentCategoryId`); no level is fabricated,
+ * a cycle cannot loop forever, and no trail is produced when the navigability
+ * feature is not installed or the scope is unknown.
+ */
+function resolveBreadcrumbItems(
+  slug: string | undefined,
+  catalog: Awaited<ReturnType<typeof getCatalog>>,
+): { label: string; href?: string }[] {
+  if (!hasNavigability || !slug) return []
+  const byHandle = new Map(catalog.categoriesRaw.map((entry) => [entry.handle, entry]))
+  const byId = new Map(catalog.categoriesRaw.map((entry) => [entry.id, entry]))
+  const chain: { label: string; href: string }[] = []
+  const visited = new Set<string>()
+  let current = byHandle.get(slug)
+  while (current && !visited.has(current.handle)) {
+    visited.add(current.handle)
+    chain.unshift({ label: current.name, href: `/categories/${current.handle}` })
+    current = current.parentCategoryId ? byId.get(current.parentCategoryId) : undefined
+  }
+  if (chain.length === 0) return []
+  const leaf = chain[chain.length - 1]
+  // The current (leaf) item is not a link; only ancestors are navigable.
+  return [{ label: 'Inicio', href: '/' }, ...chain.slice(0, -1), { label: leaf.label }]
+}
+
 export const category: ViewModule = {
   name: 'category',
   elements,
   catalog,
   registry,
   route: {
-    path: '/categorias/[[...slug]]',
+    path: '/categories/[[...slug]]',
     loaderName: 'category',
     layout: 'default',
     metadata: {
       title: 'Categoría',
       description: 'Explora los productos de esta categoría en __SITE_NAME__.',
     },
-    entry: pageRoot('category', ['category.filter'], elements),
+    entry: pageRoot('category', ['category.breadcrumb', 'category.filter'], elements),
   },
   loader: {
     category: async (params, searchParams) => {
@@ -181,13 +248,13 @@ export const category: ViewModule = {
         const presentation = mapCatalogResultsToFilterProps({
           query: listing.query,
           results: listing.results,
-          // A scoped listing (`/categorias/<handle>`) must not offer the
+          // A scoped listing (`/categories/<handle>`) must not offer the
           // category facet: the scope already fixes the category. The root
           // catalog passes no scope and keeps it.
           ...(slug ? { categoryScope: slug } : {}),
           // Product links point at the product-detail route. The runtime stays
           // route-agnostic, so this view supplies the href builder.
-          productHref: (handle: string) => `/productos/${handle}`,
+          productHref: (handle: string) => `/products/${handle}`,
           ...(categories ? { categories } : {}),
           ...(collections ? { collections } : {}),
           sortOptions,
@@ -199,6 +266,8 @@ export const category: ViewModule = {
 
         return {
           storeCategories: catalog.categories,
+          categoryEntity: resolveCategoryEntity(slug, catalog),
+          breadcrumbItems: resolveBreadcrumbItems(slug, catalog),
           dataSource: catalog.source,
           dataError: null,
           categoryFilterProducts: presentation.products,

package/assets/templates/views/category/props.ts

@@ -14,3 +14,10 @@ import { filterContent } from './content'
 export const categoryFilterProps = {
   ...filterContent,
 }
+
+// Presentational defaults for the breadcrumb; the trail itself is bound to
+// `$state` from the loader (entity-derived, never invented).
+export const categoryBreadcrumbProps = {
+  ariaLabel: 'Migas de pan',
+  backLabel: 'Volver',
+}

package/assets/templates/views/category/registry.tsx

@@ -15,6 +15,7 @@ import {
   type CategoryFilter2Filters,
   type CategoryFilter2Props,
 } from '@thorprovider/blocks'
+import { Breadcrumb as BreadcrumbBlock } from '@thorprovider/blocks'
 import { buildCategoryQueryHref, catalogHistoryMode, type CategoryQueryChange } from '@thorprovider/runtime/commerce'
 import type { CatalogFeatureName } from '@thorprovider/runtime/contracts'
 import { useStateStore } from '@json-render/react'
@@ -29,6 +30,24 @@ type CategoryFilter2RegistryProps = CategoryFilter2Props & {
 }
 
 export const registry: ViewRegistry = {
+  Breadcrumb: ({ props }) => {
+    const p = props as {
+      items: { label: string; href?: string }[]
+      maxItems?: number
+      ariaLabel?: string
+      backLabel?: string
+      className?: string
+    }
+    return (
+      <BreadcrumbBlock
+        items={p.items}
+        maxItems={p.maxItems}
+        ariaLabel={p.ariaLabel}
+        backLabel={p.backLabel}
+        className={p.className}
+      />
+    )
+  },
   CategoryFilter2: ({ props, emit }) => {
     const router = useRouter()
     const pathname = usePathname()

package/assets/templates/views/category/schema.ts

@@ -75,4 +75,17 @@ export const categoryFilterPropsSchema = z
   })
   .catchall(z.unknown())
 
+export const breadcrumbItemSchema = z.object({
+  label: z.string(),
+  href: z.string().optional(),
+})
+
+export const breadcrumbPropsSchema = z.object({
+  items: z.array(breadcrumbItemSchema),
+  maxItems: z.number().int().min(2).optional(),
+  ariaLabel: z.string().optional(),
+  backLabel: z.string().optional(),
+  className: z.string().optional(),
+})
+
 export type CategoryFilterProps = z.infer<typeof categoryFilterPropsSchema>

package/assets/templates/views/home/assembly/assembly.json

@@ -19,6 +19,15 @@
       "registryExport": "ctaRegistry",
       "propsModule": "./content",
       "defaultProps": "{}"
+    },
+    "products": {
+      "elementType": "Products",
+      "registryModule": "../sections/products.client",
+      "registryExport": "productsRegistry",
+      "propsModule": "./content",
+      "defaultProps": "{}",
+      "dataBound": true,
+      "defaultVariant": "ProductCard1"
     }
   }
 }

package/assets/templates/views/home/assembly/index.skeleton.tsx

@@ -5,14 +5,15 @@
 // on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "home".
 
 import { getCatalog } from '@thorprovider/runtime/commerce'
-import { getDataSource } from '../../store-context'
+import { getDataSource, getStoreContext } from '../../store-context'
 import { pageRoot } from '../../spec/page-root'
 import type { StorefrontElement } from '../../spec/types'
 import type { ViewModule } from '../types'
 import { registry } from './registry'
 import { benefitsProps, categoriesProps, heroProps } from './props'
-import { selectHeroProducts, toNavCategories } from './data'
+import * as homeData from './data'
 import { toCategoryCard, toFeaturedProduct } from '../../mappers'
+import { resolveSectionSources, resolveSectionViewStates } from '../../section-sources'
 import {
   categoryCardsPropsSchema,
   featurePropsSchema,
@@ -46,14 +47,30 @@ export const home: ViewModule = {
   },
   loader: {
     home: async () => {
+      // Data-bound sections resolve independently through the canonical catalog
+      // bridge; equal queries share request-local work and differing contexts
+      // stay isolated. A section failure never erases its siblings, and it is
+      // resolved separately so a catalog failure still yields truthful
+      // per-section state instead of a missing one.
+      let sections: Record<string, unknown> = {}
+      try {
+        sections = await resolveSectionViewStates(
+          @@SECTION_LOADERS@@,
+          resolveSectionSources(homeData),
+          getStoreContext(),
+        )
+      } catch {
+        sections = {}
+      }
       try {
         const { products, categories, source } = await getCatalog()
         return {
-          heroProducts: selectHeroProducts(products).map(toFeaturedProduct),
+          heroProducts: homeData.selectHeroProducts(products).map(toFeaturedProduct),
           categories: categories.map(toCategoryCard),
-          navCategories: toNavCategories(categories),
+          navCategories: homeData.toNavCategories(categories),
           dataSource: source,
           dataError: null,
+          sections,
         }
       } catch (error) {
         // A real-mode failure is surfaced as a visible error, never as fictional
@@ -65,6 +82,7 @@ export const home: ViewModule = {
           dataSource: getDataSource(),
           dataError:
             error instanceof Error ? error.message : 'No se pudo cargar el catálogo.',
+          sections,
         }
       }
     },

package/assets/templates/views/home/assembly/slots/hero/StorefrontHero1/element.part

@@ -1,5 +1,5 @@
   'home.hero': {
     type: 'StorefrontHero',
     props: heroProps,
-    on: { addToCart: { action: 'addToCart' }, openProduct: { action: 'openProduct' } },
+    on: { addClickedToCart: { action: 'addClickedToCart' }, openProduct: { action: 'openProduct' } },
   },

package/assets/templates/views/home/assembly/slots/hero/StorefrontHero1/registry.part

@@ -12,9 +12,9 @@
         secondaryCta={hero.secondaryCta}
         heroImage={hero.heroImage}
         onAddToCart={(product) => {
-          // No first-variant shortcut: open the detail so a variant is chosen.
+          // Product-card shortcut: add the first purchasable variant.
           set('/lastClicked', product)
-          emit('openProduct')
+          emit('addClickedToCart')
         }}
         onBuyNow={(product) => {
           set('/lastClicked', product)

package/assets/templates/views/home/data.ts

@@ -13,3 +13,12 @@ export function toNavCategories(
 ): { label: string; href: string }[] {
   return categories.map((category) => ({ label: category.label, href: category.href }))
 }
+
+// Per-instance selection for data-bound sections (for example `products`), keyed
+// by the section's stable id from the composition manifest. Each value is a
+// canonical catalog selection (category/collection/search/ordering) that the
+// generated host loader resolves through the runtime catalog bridge. Left empty
+// by default: a data-bound section with no entry renders an `unconfigured`
+// state. Entries whose id is no longer referenced by the composition are kept
+// but never queried, so re-adding the section with the same id restores them.
+export const sectionSources: Record<string, unknown> = {}

package/assets/templates/views/home/index.tsx

@@ -5,14 +5,15 @@
 // on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "home".
 
 import { getCatalog } from '@thorprovider/runtime/commerce'
-import { getDataSource } from '../../store-context'
+import { getDataSource, getStoreContext } from '../../store-context'
 import { pageRoot } from '../../spec/page-root'
 import type { StorefrontElement } from '../../spec/types'
 import type { ViewModule } from '../types'
 import { registry } from './registry'
 import { benefitsProps, categoriesProps, heroProps } from './props'
-import { selectHeroProducts, toNavCategories } from './data'
+import * as homeData from './data'
 import { toCategoryCard, toFeaturedProduct } from '../../mappers'
+import { resolveSectionSources, resolveSectionViewStates } from '../../section-sources'
 import {
   categoryCardsPropsSchema,
   featurePropsSchema,
@@ -25,7 +26,7 @@ const elements: Record<string, StorefrontElement> = {
   'home.hero': {
     type: 'StorefrontHero',
     props: heroProps,
-    on: { addToCart: { action: 'addToCart' }, openProduct: { action: 'openProduct' } },
+    on: { addClickedToCart: { action: 'addClickedToCart' }, openProduct: { action: 'openProduct' } },
   },
   'home.benefits': {
     type: 'Feature',
@@ -70,14 +71,30 @@ export const home: ViewModule = {
   },
   loader: {
     home: async () => {
+      // Data-bound sections resolve independently through the canonical catalog
+      // bridge; equal queries share request-local work and differing contexts
+      // stay isolated. A section failure never erases its siblings, and it is
+      // resolved separately so a catalog failure still yields truthful
+      // per-section state instead of a missing one.
+      let sections: Record<string, unknown> = {}
+      try {
+        sections = await resolveSectionViewStates(
+          [],
+          resolveSectionSources(homeData),
+          getStoreContext(),
+        )
+      } catch {
+        sections = {}
+      }
       try {
         const { products, categories, source } = await getCatalog()
         return {
-          heroProducts: selectHeroProducts(products).map(toFeaturedProduct),
+          heroProducts: homeData.selectHeroProducts(products).map(toFeaturedProduct),
           categories: categories.map(toCategoryCard),
-          navCategories: toNavCategories(categories),
+          navCategories: homeData.toNavCategories(categories),
           dataSource: source,
           dataError: null,
+          sections,
         }
       } catch (error) {
         // A real-mode failure is surfaced as a visible error, never as fictional
@@ -89,6 +106,7 @@ export const home: ViewModule = {
           dataSource: getDataSource(),
           dataError:
             error instanceof Error ? error.message : 'No se pudo cargar el catálogo.',
+          sections,
         }
       }
     },

package/assets/templates/views/home/registry.tsx

@@ -39,9 +39,9 @@ export const registry: ViewRegistry = {
         secondaryCta={hero.secondaryCta}
         heroImage={hero.heroImage}
         onAddToCart={(product) => {
-          // No first-variant shortcut: open the detail so a variant is chosen.
+          // Product-card shortcut: add the first purchasable variant.
           set('/lastClicked', product)
-          emit('openProduct')
+          emit('addClickedToCart')
         }}
         onBuyNow={(product) => {
           set('/lastClicked', product)

package/assets/templates/views/product/data.ts

@@ -40,8 +40,10 @@ export function buildSelectedProduct(
 }
 
 /**
- * No first-variant shortcut: nothing is selected until the shopper explicitly
- * chooses a variant, so `onAddToCart` can never silently add the first one.
+ * No first-variant shortcut on the product detail surface: nothing is selected
+ * until the shopper explicitly chooses a variant, so the detail's `onAddToCart`
+ * can never silently add the first one. Listing cards use the separate
+ * first-purchasable-variant shortcut instead.
  */
 export function initialSelectedVariantId(): string | null {
   return null

package/assets/templates/views/product/index.tsx

@@ -7,17 +7,29 @@
 import { notFound } from 'next/navigation'
 import { loadProductDetail } from '../../commerce'
 import { getDataSource } from '../../store-context'
+import { mountedFeatureNames } from '../../composition'
 import { pageRoot } from '../../spec/page-root'
 import type { StorefrontElement } from '../../spec/types'
 import type { ViewModule } from '../types'
 import { registry } from './registry'
-import { productOverviewProps, productReviewsProps } from './props'
+import { productBreadcrumbProps, productOverviewProps, productReviewsProps } from './props'
 import { buildSelectedProduct, initialSelectedVariantId } from './data'
-import { productOverviewPropsSchema, reviewsPropsSchema } from './schema'
+import { breadcrumbPropsSchema, productOverviewPropsSchema, reviewsPropsSchema } from './schema'
 
 // The element tree is derived wiring; the rendered props come from the
 // user-owned ./props.ts module so they survive sync and unit removal.
 const elements: Record<string, StorefrontElement> = {
+  // The navigability feature contributes the entity-derived breadcrumb trail.
+  // The element is always wired; the loader returns an empty trail when the
+  // feature is not installed or the backend supplies no category, so the block
+  // renders nothing and removal leaves no dangling navigation aid.
+  'product.breadcrumb': {
+    type: 'Breadcrumb',
+    props: {
+      ...productBreadcrumbProps,
+      items: { $state: '/breadcrumbItems' },
+    },
+  },
   'product.overview': {
     type: 'ProductOverview',
     visible: { $state: '/selectedProduct' },
@@ -38,6 +50,10 @@ const elements: Record<string, StorefrontElement> = {
 }
 
 const catalog = {
+  Breadcrumb: {
+    props: breadcrumbPropsSchema,
+    description: 'Migas de pan derivadas de la jerarquía real de categorías del producto.',
+  },
   ProductOverview: {
     props: productOverviewPropsSchema,
     description: 'Detalle de producto: galería, precio, variantes y añadir al carrito.',
@@ -48,20 +64,42 @@ const catalog = {
   },
 }
 
+const hasNavigability = mountedFeatureNames.includes('navigability')
+
+// Entity-derived trail only: the product's real ancestor categories. When the
+// feature is absent or the backend supplies no category, the trail is empty and
+// the Breadcrumb block renders nothing (no level is ever invented).
+function resolveProductBreadcrumbItems(
+  title: string,
+  categoryPath: { handle: string; name: string }[] | undefined,
+): { label: string; href?: string }[] {
+  if (!hasNavigability || !categoryPath || categoryPath.length === 0) return []
+  const chain = categoryPath.map((entry) => ({
+    label: entry.name,
+    href: `/categories/${entry.handle}`,
+  }))
+  // Home > ancestor categories (links) > the product itself (current page).
+  return [{ label: 'Inicio', href: '/' }, ...chain, { label: title }]
+}
+
 export const product: ViewModule = {
   name: 'product',
   elements,
   catalog,
   registry,
   route: {
-    path: '/productos/[id]',
+    path: '/products/[id]',
     loaderName: 'product',
     layout: 'default',
     metadata: {
       title: 'Producto',
       description: 'Detalles del producto seleccionado.',
     },
-    entry: pageRoot('product', ['product.overview', 'product.reviews'], elements),
+    entry: pageRoot(
+      'product',
+      ['product.breadcrumb', 'product.overview', 'product.reviews'],
+      elements,
+    ),
   },
   loader: {
     product: async (params) => {
@@ -79,6 +117,7 @@ export const product: ViewModule = {
           productQuantity: 1,
           productReviews: [],
           hasProductReviews: false,
+          breadcrumbItems: [],
           dataSource,
           dataError:
             error instanceof Error ? error.message : 'No se pudo cargar el producto.',
@@ -91,11 +130,16 @@ export const product: ViewModule = {
 
       return {
         selectedProduct: buildSelectedProduct(result.detail),
-        // No first-variant shortcut: the shopper must select explicitly.
+        // No first-variant shortcut on the detail surface: the shopper must
+        // select explicitly (listing cards use the card shortcut instead).
         selectedVariantId: initialSelectedVariantId(),
         productQuantity: 1,
         productReviews: [],
         hasProductReviews: false,
+        breadcrumbItems: resolveProductBreadcrumbItems(
+          result.detail.title,
+          result.detail.categoryPath,
+        ),
         dataSource: result.source,
         dataError: null,
       }

package/assets/templates/views/product/props.ts

@@ -18,3 +18,10 @@ export const productReviewsProps = {
   ...reviewsCopy,
   reviews: { $state: '/productReviews' },
 }
+
+// Presentational defaults only; the entity-derived trail is bound to
+// `$state: '/productBreadcrumbItems'` in the element tree, never invented here.
+export const productBreadcrumbProps = {
+  ariaLabel: 'Migas de pan',
+  backLabel: 'Volver',
+}

package/assets/templates/views/product/registry.tsx

@@ -7,18 +7,43 @@
 // spec (elements/catalog/route/loader) stays a pure Server Component module.
 
 import {
+  Breadcrumb as BreadcrumbBlock,
   ProductOverview1 as ProductOverviewBlock,
   ReviewRating1 as ReviewsBlock,
 } from '@thorprovider/blocks'
 import { isAvailableMoney } from '@thorprovider/blocks/contracts'
 import { useStateStore } from '@json-render/react'
+import { useProductVisitObservation } from '../../section-observation'
 import type { ViewRegistry } from '../types'
 import { productOverviewPropsSchema, reviewsPropsSchema } from './schema'
 
 export const registry: ViewRegistry = {
+  Breadcrumb: ({ props }) => {
+    const p = props as {
+      items: { label: string; href?: string }[]
+      maxItems?: number
+      ariaLabel?: string
+      backLabel?: string
+      className?: string
+    }
+    return (
+      <BreadcrumbBlock
+        items={p.items}
+        maxItems={p.maxItems}
+        ariaLabel={p.ariaLabel}
+        backLabel={p.backLabel}
+        className={p.className}
+      />
+    )
+  },
   ProductOverview: ({ props, emit }) => {
     const { set } = useStateStore()
     const parsed = productOverviewPropsSchema.parse(props)
+    // A successfully rendered product destination: recorded only when it matches
+    // the section origin (disabled by default; never attributes a guess). The
+    // stable public identity is the handle, which is what section clicks record.
+    const productHandle = parsed.product.handle ?? parsed.product.id
+    useProductVisitObservation(productHandle, `/products/${productHandle}`)
     return (
       <ProductOverviewBlock
         product={parsed.product}

package/assets/templates/views/product/schema.ts

@@ -101,6 +101,19 @@ export const reviewsPropsSchema = z.object({
   reviewsPerPage: z.number().optional(),
 })
 
+export const breadcrumbItemSchema = z.object({
+  label: z.string(),
+  href: z.string().optional(),
+})
+
+export const breadcrumbPropsSchema = z.object({
+  items: z.array(breadcrumbItemSchema),
+  maxItems: z.number().int().min(2).optional(),
+  ariaLabel: z.string().optional(),
+  backLabel: z.string().optional(),
+  className: z.string().optional(),
+})
+
 export type ProductDetailProductSpec = z.infer<typeof productDetailProductSchema>
 export type ProductOverviewProps = z.infer<typeof productOverviewPropsSchema>
 export type Review = z.infer<typeof reviewSchema>

package/assets/templates/views/static/content.ts

@@ -13,7 +13,7 @@ import type { StaticPageContent } from './schema'
 
 export const staticPagesContent: StaticPageContent[] = [
   {
-    path: '/contacto',
+    path: '/contact',
     title: 'Contacto',
     description: 'Cómo comunicarte con la tienda.',
     sections: [
@@ -33,7 +33,7 @@ export const staticPagesContent: StaticPageContent[] = [
     ],
   },
   {
-    path: '/terminos',
+    path: '/terms',
     title: 'Términos y condiciones',
     description: 'Condiciones de uso de la tienda en línea.',
     sections: [
@@ -57,7 +57,7 @@ export const staticPagesContent: StaticPageContent[] = [
     ],
   },
   {
-    path: '/privacidad',
+    path: '/privacy',
     title: 'Política de privacidad',
     description: 'Cómo se tratan los datos en la tienda en línea.',
     sections: [
@@ -81,7 +81,7 @@ export const staticPagesContent: StaticPageContent[] = [
     ],
   },
   {
-    path: '/sobre-nosotros',
+    path: '/about',
     title: 'Sobre nosotros',
     description: 'Información sobre la tienda.',
     sections: [

package/assets/templates/views/static/index.tsx

@@ -33,7 +33,7 @@ const catalog = {
   },
 }
 
-// A stable, unique root id per page: `/contacto` -> `static-contacto`,
+// A stable, unique root id per page: `/contact` -> `static-contact`,
 // `/` -> `static-index`.
 const pageRootId = (path: string): string =>
   `static-${path.replace(/^\//, '').replace(/\//g, '-') || 'index'}`