How njbsaab/astro-njx-store works
njx-store is a static Astro storefront theme: shoppers browse products and collections, select variants, save favorites, and build a persistent cart before checkout is handed to Shopify. Pages use a provider-neutral commerce interface that selects either the bundled mock catalog or Shopify Storefront API. The README documents search, theme switching, and informational/account pages; their wiring is not fully represented in sampled source, so links to those page-level features are limited to documented capability rather than inferred calls.
Main entry points: Layout.astro Store shell · index.ts Provider selector · index.astro Home page · [handle].astro Collection pages
Components 17
Storefront experience
- Home page
src/pages/index.astro - Collection pages
src/pages/collections/[handle].astro - Product pages
src/pages/products/[handle].astro - Store shell
src/layouts/Layout.astro - Product cards
src/components/ProductCard.astro - Info and account pages
src/pages - Instant search
src/layouts/Layout.astro
Commerce data
- Provider selector
src/lib/commerce/index.ts - Commerce contract
src/lib/commerce/types.ts - Mock provider
src/lib/commerce/mock.ts - Demo catalog
src/data/mock-catalog.json
Shopper state
- Persistent cart
src/lib/cart.ts - Persistent favorites
src/lib/favorites.ts - Browser localStorage
External commerce
- Shopify provider
src/lib/commerce/shopify.ts - Shopify Storefront API
Other components
- Shopper
Connections 25
- Shopper → Home page: browses
- Shopper → Collection pages: browses
- Shopper → Product pages: opens
- Shopper → Info and account pages: visits
- Home page → Provider selector: loads catalog
- Collection pages → Provider selector: loads collection
- Product pages → Provider selector: loads product
- Home page → Store shell: uses shell
- Collection pages → Store shell: uses shell
- Product pages → Store shell: uses shell
- Collection pages → Product cards: renders products
- Home page → Product cards: renders products
- Provider selector → Mock provider: selects provider
- Provider selector → Shopify provider: selects provider
- Mock provider → Demo catalog: reads catalog
- Shopify provider → Shopify Storefront API: queries and mutates
- Product cards → Persistent cart: adds line
- Store shell → Persistent cart: reads and updates
- Product cards → Persistent favorites: toggles favorite
- Store shell → Persistent favorites: reads favorites
- Persistent cart → Browser localStorage: persists
- Persistent favorites → Browser localStorage: persists
- Store shell → Provider selector: requests checkout URL
- Store shell → Instant search: provides search
- Shopper → Instant search: searches