@orderlyshop/web-components 0.1.0-build.7045

package/docs/components/product-grid.md

@@ -0,0 +1,182 @@
+# `orderly-product-grid`
+
+`orderly-product-grid` owns product search state. It accepts a `SearchQuery`, calls `SearchService.Search`, renders products, supports sorting, and uses continuation tokens for manual or automatic paging.
+
+`orderly-product-rail` and `orderly-collection-page` delegate product fetching to this component.
+
+## Basic Markup
+
+```html
+<orderly-product-grid
+  base-url="https://service.orderly.shop"
+  paging="dynamic"
+  keywords="sneakers"
+  tags="sko,sport"
+  order-by="CreatedTime desc">
+</orderly-product-grid>
+```
+
+## Typed Query
+
+```ts
+import { create } from "@bufbuild/protobuf";
+import { SearchQuerySchema } from "@orderlyshop/core-client";
+
+grid.query = create(SearchQuerySchema, {
+  Query: "sneakers",
+  OrderBy: ["CreatedTime desc"]
+});
+```
+
+## Default Query Scope
+
+Use `defaultQuery` for shop-wide or component-local constraints:
+
+```ts
+grid.defaultQuery = defaultQuery;
+```
+
+Global default query:
+
+```ts
+configureShop({ defaultShop: { defaultQuery } });
+```
+
+The final request is:
+
+1. Global default query.
+2. Component `defaultQuery`, when supplied.
+3. Grid `query` or declarative query markup.
+4. Continuation token, when loading the next page.
+
+## Attributes
+
+- `base-url`: Backend URL used when no `client` property is assigned.
+- `paging`: `button`, `manual`, `dynamic`, or `infinite`.
+- `sort-label`: Sort control label.
+- `clear-search-label`: Clear-search button label for custom context templates.
+- `error-label`: Error text.
+- `loading-label`: Loading text.
+- `results-label`: Result count suffix for custom context templates.
+- `searching-label`: Active query prefix for custom context templates.
+- `keywords`: Maps to `SearchQuery.Query`.
+- `tags`: Comma-separated values mapped to `SearchQuery.Tags`.
+- `hidden-query`: Maps to `SearchQuery.HiddenQuery`.
+- `order-by`: Comma-separated values mapped to `SearchQuery.OrderBy`.
+- `store-id`: Maps to `SearchQuery.StoreId`.
+- `featured`: Boolean mapped to `SearchQuery.Featured`.
+
+## Properties
+
+- `client: OrderlyClient | undefined`: Explicit client instance.
+- `query: SearchQuery | undefined`: Explicit search query. Takes precedence over declarative query markup.
+- `defaultQuery: SearchQuery | undefined`: Component-level default query.
+- `shopQuery: SearchQuery | undefined`: Backward-compatible alias for `defaultQuery`.
+- `sortOptions: SortOption[]`: Sort options rendered by the grid.
+- `basketController: BasketController | undefined`: Shared basket state.
+- `paging: "manual" | "button" | "infinite" | "dynamic"`: Paging behavior.
+- `products: SearchObject[]`: Current products.
+- `continuationToken: ContinuationToken | undefined`: Current continuation token.
+- `hasMore: boolean`: Whether more results can be loaded.
+- `state: ProductGridState`: Loading/error/result snapshot.
+- `productTileTagName: string`: Product tile tag name for custom prefixes.
+
+## Methods
+
+- `refresh(): Promise<void>`: Clears current products and loads the first page.
+- `loadNextPage(): Promise<void>`: Loads the next page when a continuation token is available.
+- `setSort(orderBy: string[]): Promise<void>`: Applies sort and refreshes.
+- `clearSearch(): Promise<void>`: Clears `SearchQuery.Query` and refreshes. The default layout does not render a clear-search button; custom context templates can call this with `data-orderly-action="clear-search"`.
+
+## Paging
+
+- `paging="dynamic"` and `paging="infinite"` use an intersection observer sentinel and do not render a load-more button.
+- `paging="button"` renders a load-more control when a continuation token exists.
+- `paging="manual"` never renders a button; call `loadNextPage()` yourself.
+
+## Sort Options
+
+```ts
+grid.sortOptions = [
+  { label: "Nyeste", orderBy: ["CreatedTime desc"] },
+  { label: "Pris: lav til høj", orderBy: ["Price asc"] },
+  { label: "Pris: høj til lav", orderBy: ["Price desc"] }
+];
+```
+
+## Templates
+
+### `layout`
+
+Replaces the grid structure. Include:
+
+- `data-orderly-slot="context"`
+- `data-orderly-slot="sort"`
+- `data-orderly-bind="status"`
+- `data-orderly-slot="items"`
+- `data-orderly-action="load-more"` if button paging is used.
+- `data-orderly-sentinel` if dynamic paging is used.
+
+```html
+<template data-orderly-template="layout">
+  <section class="catalog">
+    <div data-orderly-slot="context"></div>
+    <div data-orderly-slot="sort"></div>
+    <p data-orderly-bind="status"></p>
+    <ol data-orderly-slot="items"></ol>
+    <button type="button" data-orderly-action="load-more">Flere varer</button>
+    <span data-orderly-sentinel></span>
+  </section>
+</template>
+```
+
+### `product`
+
+Replaces each product item. The grid binds the `SearchObject` into an inner `orderly-product-tile` when present.
+
+```html
+<template data-orderly-template="product">
+  <li class="catalog-item">
+    <orderly-product-tile></orderly-product-tile>
+  </li>
+</template>
+```
+
+### Other Templates
+
+- `context`
+- `sort`
+- `loading`
+- `empty`
+
+## Events
+
+- `orderly-results`: Fired after successful search. Detail is `ProductGridState`.
+- `orderly-error`: Fired when search fails.
+- Product tile events bubble through the grid:
+  - `orderly-product-selected`
+  - `orderly-add-to-basket`
+  - `orderly-remove-from-basket`
+
+## Styling
+
+Default class names:
+
+- `orderly-product-grid`
+- `orderly-product-grid__toolbar`
+- `orderly-product-grid__context`
+- `orderly-product-grid__sort`
+- `orderly-product-grid__status`
+- `orderly-product-grid__items`
+- `orderly-product-grid__item`
+- `orderly-product-grid__load-more`
+- `orderly-product-grid__sentinel`
+- `orderly-product-grid__loading-item`
+
+Useful CSS variables:
+
+- `--orderly-product-grid-gap`
+- `--orderly-product-grid-item-min-width`
+- `--orderly-product-grid-item-max-width`
+
+The default grid uses responsive full-width `auto-fit` tracks, spaces cards with `--orderly-product-grid-gap`, and caps product tiles at `--orderly-product-grid-item-max-width` inside each column, so desktop layouts keep using the full row width without stretching each tile indefinitely. Host applications can override the variables, style the default classes directly, or replace templates entirely.

package/docs/components/product-rail.md

@@ -0,0 +1,174 @@
+# `orderly-product-rail`
+
+`orderly-product-rail` renders a `SearchQuery` as a horizontal product list with a heading and optional CTA link. It composes `orderly-product-grid`, so search execution, product rendering, loading state, basket wiring, and default query merging follow the same behavior as the grid.
+
+Use it for homepage rows, category highlights, editorial collections, and "more like this" rails.
+
+## Basic Markup
+
+```html
+<orderly-product-rail
+  title="Sko"
+  cta-label="Se alle"
+  cta-href="/categories/?category=sko"
+  keywords="H&M"
+  tags="børnetøj,bluser"
+  order-by="CreatedTime desc">
+</orderly-product-rail>
+```
+
+## Child Query Markup
+
+```html
+<orderly-product-rail
+  title="Sko"
+  cta-label="Se alle"
+  cta-href="/categories/?category=sko">
+  <query>
+    <tags>børnetøj,bluser</tags>
+    <keywords>H&M</keywords>
+    <order-by>CreatedTime desc</order-by>
+  </query>
+</orderly-product-rail>
+```
+
+The child `<query>` element is hidden by the component and is only used as configuration.
+
+## Typed Query
+
+Use the typed `query` property for the full Core contract:
+
+```ts
+import { create } from "@bufbuild/protobuf";
+import { SearchQuerySchema, TagSchema } from "@orderlyshop/core-client";
+
+productRail.query = create(SearchQuerySchema, {
+  Query: "H&M",
+  Tags: [
+    create(TagSchema, { Value: "børnetøj" }),
+    create(TagSchema, { Value: "bluser" })
+  ],
+  OrderBy: ["CreatedTime desc"]
+});
+```
+
+## Default Query Scope
+
+`defaultQuery` is merged with the rail query before the backend search call. This is useful for tenant scope, published-only filters, store scope, or other shop-wide constraints.
+
+```ts
+productRail.defaultQuery = defaultQuery;
+```
+
+Global default query:
+
+```ts
+configureShop({ defaultShop: { defaultQuery } });
+```
+
+When both are present, the per-rail `defaultQuery` is merged with the global default query and then the rail's own query is applied.
+
+## Attributes
+
+- `base-url`: Backend URL used when no `client` property is assigned.
+- `title`: Heading text.
+- `cta-label`: CTA link label. Hidden when empty.
+- `cta-href`: CTA link URL.
+- `empty-label`: Empty result copy.
+- `loading-label`: Loading copy forwarded to the internal grid.
+- `error-label`: Error copy forwarded to the internal grid.
+- `keywords`: Maps to `SearchQuery.Query`.
+- `tags`: Comma-separated values mapped to `SearchQuery.Tags`.
+- `hidden-query`: Maps to `SearchQuery.HiddenQuery`.
+- `order-by`: Comma-separated values mapped to `SearchQuery.OrderBy`.
+- `store-id`: Maps to `SearchQuery.StoreId`.
+- `featured`: Boolean mapped to `SearchQuery.Featured`.
+
+## Properties
+
+- `client: OrderlyClient | undefined`: Explicit client instance.
+- `query: SearchQuery | undefined`: Explicit search query. Takes precedence over declarative query markup.
+- `defaultQuery: SearchQuery | undefined`: Per-rail default query merged before `query`.
+- `shopQuery: SearchQuery | undefined`: Backward-compatible alias for `defaultQuery`.
+- `basketController: BasketController | undefined`: Shared basket state.
+
+## Templates
+
+### `layout`
+
+Replaces the outer rail structure. Include a `data-orderly-slot="grid"` target.
+
+```html
+<template data-orderly-template="layout">
+  <section class="my-rail">
+    <header>
+      <h2 data-orderly-bind="title"></h2>
+      <a data-orderly-bind="ctaHref">
+        <span data-orderly-bind="ctaLabel"></span>
+      </a>
+    </header>
+    <div data-orderly-slot="grid"></div>
+  </section>
+</template>
+```
+
+### `grid`
+
+Replaces the internal grid layout. Include:
+
+- `data-orderly-bind="status"` for loading/error text.
+- `data-orderly-slot="items"` for product items.
+
+```html
+<template data-orderly-template="grid">
+  <section class="my-horizontal-list">
+    <p data-orderly-bind="status"></p>
+    <div data-orderly-slot="items"></div>
+  </section>
+</template>
+```
+
+### Product State Templates
+
+These are forwarded to the internal `orderly-product-grid`:
+
+- `product`
+- `loading`
+- `empty`
+
+## Events
+
+Product events bubble from child product tiles:
+
+- `orderly-product-selected`
+- `orderly-add-to-basket`
+- `orderly-remove-from-basket`
+- `orderly-results`
+- `orderly-error`
+
+## Styling
+
+The default rail uses light DOM and stable class names:
+
+- `orderly-product-rail`
+- `orderly-product-rail__header`
+- `orderly-product-rail__title`
+- `orderly-product-rail__cta`
+- `orderly-product-rail__items`
+- `orderly-product-rail__status`
+- `orderly-product-rail__empty`
+
+CSS custom properties:
+
+- `--orderly-product-rail-item-width`
+- `--orderly-product-rail-gap`
+- `--orderly-product-rail-padding`
+
+Example:
+
+```css
+orderly-product-rail {
+  --orderly-product-rail-item-width: minmax(220px, 260px);
+  --orderly-product-rail-gap: 18px;
+}
+```

package/examples/shop/README.md

@@ -0,0 +1,72 @@
+# 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
+```
+
+Build the static app with generated and hydrated category pages:
+
+```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. The hydration step reads `VITE_ORDERLY_BASE_URL` and otherwise uses the default `https://service.orderly.shop` backend for product snapshots.
+
+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`, and `orderly-hydrate-static-pages`. The example shop does not own category generation or hydration 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` and resolves products from `#url=<encoded-share-url>`.
+- `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.

package/examples/shop/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@orderlyshop/example-shop",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Example storefront built with Orderly web components.",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "generate:categories": "node ../../bin/orderly-generate-category-pages.mjs --template src/category.html --categories-dir src/categories --site-title \"Orderly Example Shop\"",
+    "clean:categories": "node ../../bin/orderly-generate-category-pages.mjs --template src/category.html --categories-dir src/categories --clean",
+    "build:category-pages": "node ../../bin/orderly-build-category-pages.mjs --template src/category.html --categories-dir src/categories --site-title \"Orderly Example Shop\" --build-command \"npm run typecheck && vite build\"",
+    "typecheck": "tsc --noEmit",
+    "build": "node ../../bin/orderly-build-category-pages.mjs --template src/category.html --categories-dir src/categories --site-title \"Orderly Example Shop\" --build-command \"npm run typecheck && vite build\"",
+    "preview": "vite preview",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@bufbuild/protobuf": "^2.11.0",
+    "@orderlyshop/core-client": "^0.1.0",
+    "@orderlyshop/web-components": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.2",
+    "vitest": "^3.2.4"
+  }
+}

package/examples/shop/src/category.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="da">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kategori | Orderly Example Shop</title>
+    <!-- orderly-head-includes -->
+  </head>
+  <body>
+    <!-- orderly-body-start-includes -->
+    <orderly-category-page>
+      <div slot="utility" class="shop-utility-strip" aria-label="Kundefordele">
+        <span>Gratis levering over 499 kr.</span>
+        <span>30 dages returret</span>
+        <span>Sikker betaling</span>
+      </div>
+    </orderly-category-page>
+    <!-- orderly-body-end-includes -->
+  </body>
+</html>

package/examples/shop/src/checkout.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="da">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Betaling | Orderly Example Shop</title>
+    <!-- orderly-head-includes -->
+  </head>
+  <body>
+    <!-- orderly-body-start-includes -->
+    <orderly-checkout-page>
+      <div slot="utility" class="shop-utility-strip" aria-label="Kundefordele">
+        <span>Gratis levering over 499 kr.</span>
+        <span>30 dages returret</span>
+        <span>Sikker betaling</span>
+      </div>
+    </orderly-checkout-page>
+
+    <!-- orderly-body-end-includes -->
+  </body>
+</html>

package/examples/shop/src/forretningsbetingelser.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="da">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Forretningsbetingelser | Orderly Example Shop</title>
+    <!-- orderly-head-includes -->
+  </head>
+  <body>
+    <!-- orderly-body-start-includes -->
+    <orderly-page-layout>
+      <div slot="utility" class="shop-utility-strip" aria-label="Kundefordele">
+        <span>Gratis levering over 499 kr.</span>
+        <span>30 dages returret</span>
+        <span>Sikker betaling</span>
+      </div>
+      <a slot="header" class="orderly-checkout-page__brand" href="/">
+        <span>Orderly Example Shop</span>
+      </a>
+      <orderly-navigation slot="primary-nav" layout="horizontal" aria-label="Hovednavigation"></orderly-navigation>
+      <section slot="content" class="orderly-content-page">
+        <header class="orderly-content-page__header">
+          <h1>Forretningsbetingelser</h1>
+          <p>Her finder du betingelser for køb, levering, betaling, retur og reklamation.</p>
+        </header>
+        <article class="orderly-content-page__card orderly-content-page__body" aria-labelledby="termsTitle">
+          <h2 id="termsTitle">Køb hos Orderly Example Shop</h2>
+          <p>
+            Disse forretningsbetingelser gælder for køb foretaget i Orderly Example Shop. Teksten er eksempelindhold og skal tilpasses den konkrete butik, før den bruges juridisk.
+          </p>
+
+          <h2>Virksomhedsoplysninger</h2>
+          <p>
+            Orderly Example Shop ApS<br>
+            Demo Allé 12<br>
+            8000 Aarhus C<br>
+            Danmark<br>
+            Email: hello@example.orderly.shop
+          </p>
+
+          <h2>Bestilling</h2>
+          <p>
+            Når du gennemfører en ordre, modtager du en ordrebekræftelse på den emailadresse, du har angivet. Aftalen er indgået, når ordren er bekræftet.
+          </p>
+
+          <h2>Priser og betaling</h2>
+          <p>
+            Alle priser vises i danske kroner inklusive moms. Betaling gennemføres med de betalingsmetoder, der vises i checkout.
+          </p>
+
+          <h2>Levering</h2>
+          <p>
+            Leveringspris og tilgængelige leveringsmetoder beregnes ud fra kurvens indhold og den leveringsadresse, du indtaster i checkout. Hvis du vælger pakkeshop, skal du vælge et udleveringssted, før ordren gennemføres.
+          </p>
+
+          <h2>Fortrydelsesret og retur</h2>
+          <p>
+            Du har 30 dages returret fra den dag, du modtager varen. Varen skal returneres i væsentligt samme stand, som den blev modtaget.
+          </p>
+
+          <h2>Reklamation</h2>
+          <p>
+            Købelovens reklamationsregler gælder. Kontakt kundeservice hurtigst muligt, hvis en vare har fejl eller mangler.
+          </p>
+
+          <h2>Persondata</h2>
+          <p>
+            Vi behandler de oplysninger, der er nødvendige for at gennemføre din ordre, levere varen og håndtere kundeservice. Oplysninger deles kun med relevante betalings- og leveringspartnere.
+          </p>
+
+          <h2>Kontakt</h2>
+          <p>
+            Har du spørgsmål til din ordre eller disse betingelser, kan du kontakte os på hello@example.orderly.shop.
+          </p>
+        </article>
+      </section>
+      <orderly-shop-footer slot="footer"></orderly-shop-footer>
+    </orderly-page-layout>
+    <!-- orderly-body-end-includes -->
+  </body>
+</html>

package/examples/shop/src/includes/body-end.html

@@ -0,0 +1 @@
+<!-- Add shared body-end snippets here, for example storefront-wide scripts. -->

package/examples/shop/src/includes/body-start.html

@@ -0,0 +1,3 @@
+<!-- Add shared body-start snippets here, for example Google Tag Manager noscript fallback. -->
+<!-- orderly-include-template: ../templates/page-layouts.html -->
+<!-- orderly-include-template: ../templates/shop-footer.html -->

package/examples/shop/src/includes/head.html

@@ -0,0 +1,32 @@
+<!-- Add shared head snippets here, for example analytics, consent, or preconnect tags. -->
+<link rel="icon" href="https://orderly.shop/home/App_Icon.svg" type="image/svg+xml">
+<script type="module">
+  import { configureShop } from "@orderlyshop/web-components";
+  import { navigationDefinitions } from "/src/navigation.ts";
+
+  const configuredCategoryUrlMode =
+    globalThis.ORDERLY_CATEGORY_URL_MODE === "path" || globalThis.ORDERLY_CATEGORY_URL_MODE === "hash"
+      ? globalThis.ORDERLY_CATEGORY_URL_MODE
+      : import.meta.env.VITE_ORDERLY_CATEGORY_URL_MODE === "path" || import.meta.env.VITE_ORDERLY_CATEGORY_URL_MODE === "hash"
+        ? import.meta.env.VITE_ORDERLY_CATEGORY_URL_MODE
+        : undefined;
+  const categoryUrlMode = configuredCategoryUrlMode ?? "path";
+
+  configureShop({
+    uiLanguage: "DA",
+    defaultShop: {      
+      brandLabel: "Orderly Example Shop",
+      homeHref: "/",
+      productHref: "/product.html",
+      checkoutHref: "/checkout.html",
+      checkoutTermsHref: "/forretningsbetingelser.html",
+      navigationDefinitions,
+      categoryPageRoot: categoryUrlMode === "hash" ? "/category.html" : "/categories/",
+      categoryUrlMode
+    },
+    pageLayout: {
+      logoSrc: "https://orderly.shop/home/App_Icon.svg",
+      logoAlt: "Orderly Example Shop",      
+    }    
+  });
+</script>

package/examples/shop/src/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="da">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Orderly Example Shop</title>
+    <!-- orderly-head-includes -->
+  </head>
+  <body>
+    <!-- orderly-body-start-includes -->
+    <orderly-home-page
+      eyebrow="Nye fund i alle afdelinger"
+      title="Find næste favorit"
+      rail-cta-label="Se alle"
+      empty-label="Der blev ikke fundet varer."
+      checkout-label="Gå til betaling">
+      <div slot="utility" class="shop-utility-strip" aria-label="Kundefordele">
+        <span>Gratis levering over 499 kr.</span>
+        <span>30 dages returret</span>
+        <span>Sikker betaling</span>
+      </div>
+    </orderly-home-page>
+    <!-- orderly-body-end-includes -->
+  </body>
+</html>