Template Pages

Understand the existing pages in the ecommerce boilerplate. You may adjust UI only—no new pages or core wiring changes.

Scope: You cannot add new pages or change routing/core logic. Update UI only (markup, styles, states, copy) inside existing page files.

Page list (App Router)

  • Home: app/page.tsx (build/local) and app/page.client.tsx (builder). Renders sections from data/pages/index.json or CMS, using renderSections.
  • About: app/about/page.tsx – uses usePage with pageName query to render CMS sections.
  • Contact: app/contact/page.tsx – same pattern as About.
  • Products: app/products/page.tsx – product listing; app/products/[id]/ – product detail.
  • Blog: app/blog/page.tsx – blog list; app/blog/[id]/ – blog detail.
  • Checkout: app/checkout/page.tsx.
  • Payment: app/payment/page.tsx.
  • Profile: app/profile/page.tsx plus profile tabs/components in app/profile/_components/.
  • Auth: app/auth/login/ and app/auth/register/.
  • Inquiry: app/inquiry/page.tsx.
  • Custom: app/custom/page.tsx.
  • Legal: app/legal/page.tsx.
  • Other routes: app/about, app/contact, and similar routes rely on CMS content via usePage.

Globals:

  • Layout: app/layout.tsx wraps all pages with ApolloWrapper and ClientLayout.
  • Shared sections: Most pages pull sections from CMS or data/pages/*.json; section components live in app/_components/sections/.

UI-only change guidelines

  • Keep routing, usePage, and renderSections intact. Do not alter section.type mapping or add/remove pages.
  • Make UI changes inside existing page components or their child components (e.g., profile tabs, page-level wrappers).
  • Preserve data flow, query variables, and headers (e.g., client-portal-id) when adjusting markup.
  • Verify changes with existing mocks (BUILD_MODE off) and with builder/CMS (BUILD_MODE=true) to ensure data-aware pages still render.