# Orderly Example Shop

This is a private vanilla HTML storefront with strongly typed TypeScript navigation data. It demonstrates how to configure the default shop provided by `@orderlyshop/web-components`.

It is included as source code in the `@orderlyshop/web-components` npm package under `examples/shop` so developers and coding agents can inspect how to override navigation and content without rebuilding the default page wiring. The example uses shared global `layout` templates to move the built-in navigation into `primary-nav` and render it in horizontal mode.

## Run

From the npm workspace root:

```sh
npm run dev --workspace @orderlyshop/example-shop
```

Open the shop from `http://localhost:61677` during normal development, or `https://localhost:61677` if a local TLS proxy terminates HTTPS in front of the dev server. Keep the origin on `localhost:61677`, because the backend CORS development policy expects that local origin.

Dev mode uses package SSR by default for product and category routes. Open View Source on `http://localhost:61677/categories/sko/` or a `/products/.../` URL to inspect semantic server-rendered HTML before the web components hydrate. Use `ORDERLY_DEV_SSR=0` or `npm run dev -- --no-ssr` when you need to debug pure client-side rendering.

Build the static app with generated and hydrated category pages plus Apache/PHP SSR renderers:

```sh
npm run build --workspace @orderlyshop/example-shop
```

Generate real category URL pages from `src/navigation.ts`:

```sh
npm run generate:categories --workspace @orderlyshop/example-shop
```

That creates simple generated source pages such as `src/categories/toej-og-mode/dame/index.html`. Each page only wraps the reusable `orderly-category-page` element and builds to `dist/categories/...`:

```html
<orderly-category-page slug="toej-og-mode/dame"></orderly-category-page>
```

Run the explicit category-page build directly:

```sh
npm run build:category-pages --workspace @orderlyshop/example-shop
```

The default build and the explicit category-page build both hydrate `dist/index.html` and the generated `dist/categories/**/index.html` files with initial category/home markup, then generate `dist/product.php`, `dist/category.php`, `dist/.htaccess`, and `dist/orderly-ssr-manifest.json` for production product/category SSR.

Clean generated category pages:

```sh
npm run clean:categories --workspace @orderlyshop/example-shop
```

These scripts call the generic CLI tools installed by `@orderlyshop/web-components`: `orderly-generate-category-pages`, `orderly-build-category-pages`, `orderly-hydrate-static-pages`, and `orderly-generate-server-renderers`. The example shop does not own category generation or SSR logic.

The default backend is `https://service.orderly.shop`. Override it for local development:

```sh
VITE_ORDERLY_BASE_URL=https://your-service.example npm run dev --workspace @orderlyshop/example-shop
```

Stored images use the default image base URL from `@orderlyshop/web-components`. Override it only when the shop needs a different image CDN:

```sh
VITE_ORDERLY_IMAGE_BASE_URL=https://images.example/ npm run dev --workspace @orderlyshop/example-shop
```

## Structure

- `src/index.html` is a standalone homepage that uses `orderly-home-page` to render one horizontal product rail for every top-level category.
- `src/category.html` is the reusable category page template. Production builds generate real pages under `dist/categories/**/index.html`, and dev mode serves `/categories/.../` through the same template.
- `src/product.html` wraps `orderly-product-detail-page`. Dev SSR and generated PHP renderers use it for `/products/.../`; hash URLs still work as a client fallback.
- `src/checkout.html` wraps the reusable `orderly-checkout-page` element and only adds example utility-strip content.
- `src/forretningsbetingelser.html` is a static terms page linked from checkout through `checkoutTermsHref`.
- `src/navigation.ts` owns strongly typed recursive `NavigationDefinition` data with stable slugs, hero images, and plain `SearchQueryInput` objects.
- `src/includes/head.html` imports `@orderlyshop/web-components`, registers the elements, and configures backend, navigation, checkout links, responsive settings, and image URLs.
- `src/includes/body-start.html` is the shared body-start include for snippets such as analytics fallbacks and imports the shared global page-layout templates plus the shop-specific footer template.
- `src/templates/page-layouts.html` owns the shared global `layout` overrides for the built-in page components so the example shop uses horizontal primary navigation across home, category, product, and checkout pages.
- `src/templates/shop-footer.html` owns the declarative footer content while still using the package footer component and default footer classes.
