@orderlyshop/web-components 0.1.0-build.7066 → 0.1.0-build.7067

package/bin/orderly-hydrate-static-pages.mjs

@@ -197,14 +197,14 @@ function renderCategoryFallback(category, products) {
       <section slot="content-before" class="orderly-ssr-category" data-orderly-ssr-fallback data-orderly-category="${escapeAttribute(category.id)}">
         ${renderBreadcrumb(category)}
         <header class="orderly-ssr-category__hero">
-          ${category.metadata.heroImage ? `<img src="${escapeAttribute(category.metadata.heroImage)}" alt="" loading="eager">` : ""}
+          ${category.metadata.heroImage ? `<img src="${escapeAttribute(category.metadata.heroImage)}" alt="" loading="eager" fetchpriority="high" decoding="async">` : ""}
           <div class="orderly-ssr-category__text">
             <p class="orderly-ssr-category__eyebrow">${escapeHtml(categoryLabelPath(category).join(" / "))}</p>
             <h1 data-orderly-field="title">${escapeHtml(category.label)}</h1>
             <p data-orderly-field="description">${escapeHtml(category.metadata.description)}</p>
           </div>
         </header>
-        ${renderProducts(products, "orderly-ssr-product-grid")}
+        ${renderProducts(products, "orderly-ssr-product-grid", { priorityFirst: !category.metadata.heroImage })}
       </section>
 `;
 }
@@ -231,20 +231,20 @@ function categoryLabelPath(category) {
   });
 }
 
-function renderProducts(products, className) {
+function renderProducts(products, className, options = {}) {
   if (products.length === 0) {
     return "";
   }
   return `
             <div class="${className}" data-orderly-products>
-              ${products.map(renderProduct).join("\n")}
+              ${products.map((product, index) => renderProduct(product, { priority: Boolean(options.priorityFirst) && index === 0 })).join("\n")}
             </div>`;
 }
 
-function renderProduct(product) {
+function renderProduct(product, options = {}) {
   const title = product.Title || "Produkt";
   const brand = normalizedBrand(product.Brand);
-  const image = firstImageUrl(product);
+  const image = firstImageUrl(product, { width: 500, height: 500 });
   const href = productHref(product);
   const description = product.Description?.trim();
   const sku = product.SKU?.Value?.trim();
@@ -256,7 +256,7 @@ function renderProduct(product) {
                 ${sku ? `<meta itemprop="sku" content="${escapeAttribute(sku)}">` : ""}
                 ${href ? `<a class="orderly-ssr-product__link" href="${escapeAttribute(href)}">` : ""}
                   <div class="orderly-ssr-product__image">
-                    ${image ? `<img src="${escapeAttribute(image)}" alt="${escapeAttribute(title)}" loading="lazy">` : ""}
+                    ${image ? `<img src="${escapeAttribute(image)}" alt="${escapeAttribute(title)}" ${ssrImageAttributes(options.priority)}>` : ""}
                   </div>
                   <div class="orderly-ssr-product__text">
                     <h3 data-orderly-field="title" itemprop="name">${escapeHtml(title)}</h3>
@@ -267,6 +267,12 @@ function renderProduct(product) {
               </article>`;
 }
 
+function ssrImageAttributes(priority) {
+  return priority
+    ? `loading="eager" fetchpriority="high" decoding="async"`
+    : `loading="lazy" decoding="async"`;
+}
+
 function renderOffer(product, href) {
   const price = schemaPrice(product.Price);
   const currency = schemaCurrency(product.Price);
@@ -301,11 +307,11 @@ function compactProductShareUrl(url) {
   return url.replace(/^https:\/\/orderly\.shop\//i, "");
 }
 
-function firstImageUrl(product) {
-  return storedImageUrl(product.Images?.[0]);
+function firstImageUrl(product, options = {}) {
+  return storedImageUrl(product.Images?.[0], options);
 }
 
-function storedImageUrl(image) {
+function storedImageUrl(image, options = {}) {
   if (!image) {
     return "";
   }
@@ -313,14 +319,14 @@ function storedImageUrl(image) {
   for (const key of ["URL", "Url", "url", "ThumbnailUrl", "thumbnailUrl"]) {
     const value = candidate[key];
     if (typeof value === "string" && value.length > 0) {
-      return value;
+      return withImageSizeParams(value, options);
     }
   }
   if (image.ImageDataBase64) {
     return `data:image/jpeg;base64,${image.ImageDataBase64}`;
   }
   if (/^https?:\/\//i.test(image.Name) || image.Name.startsWith("/")) {
-    return image.Name;
+    return withImageSizeParams(image.Name, options);
   }
   if (!image.Name) {
     return "";
@@ -329,7 +335,35 @@ function storedImageUrl(image) {
   const path = image.IsAsset || imageName.includes("cms") || imageName.startsWith("images")
     ? "objects"
     : "thumbnails";
-  return joinUrl(imageBaseUrl, path, image.Name);
+  return withImageSizeParams(joinUrl(imageBaseUrl, path, image.Name), options);
+}
+
+function withImageSizeParams(url, options = {}) {
+  if (/^data:/i.test(url)) {
+    return url;
+  }
+  const width = imageUrlDimension(options.width);
+  const height = imageUrlDimension(options.height);
+  if (!width && !height) {
+    return url;
+  }
+  const hashIndex = url.indexOf("#");
+  const hash = hashIndex >= 0 ? url.slice(hashIndex) : "";
+  const withoutHash = hashIndex >= 0 ? url.slice(0, hashIndex) : url;
+  const queryIndex = withoutHash.indexOf("?");
+  const path = queryIndex >= 0 ? withoutHash.slice(0, queryIndex) : withoutHash;
+  const search = new URLSearchParams(queryIndex >= 0 ? withoutHash.slice(queryIndex + 1) : "");
+  if (width) {
+    search.set("width", String(width));
+  }
+  if (height) {
+    search.set("height", String(height));
+  }
+  return `${path}?${search.toString()}${hash}`;
+}
+
+function imageUrlDimension(value) {
+  return value !== undefined && Number.isFinite(value) && value > 0 ? Math.ceil(value) : undefined;
 }
 
 function formatCredit(credit) {

package/bin/orderly-init-shop.mjs

@@ -419,6 +419,7 @@ function headIncludeSource(options) {
 
   const categoryUrlMode = import.meta.env.VITE_ORDERLY_CATEGORY_URL_MODE === "hash" ? "hash" : "path";
   const productUrlMode = import.meta.env.VITE_ORDERLY_PRODUCT_URL_MODE === "hash" ? "hash" : "path";
+  const googleTagManagerId = import.meta.env.VITE_ORDERLY_GOOGLE_TAG_MANAGER_ID?.trim();
   const productHref = productUrlMode === "hash" ? "/product.html" : "/products/";
 
   configureShop({
@@ -440,14 +441,46 @@ function headIncludeSource(options) {
       logoSrc: "https://orderly.shop/home/App_Icon.svg",
       logoAlt: ${JSON.stringify(options.shopName)},
       logoHref: "/"
-    }
+    },
+    consent: googleTagManagerId ? {
+      enabled: true,
+      policyHref: "/information/cookies/",
+      managedCookies: [
+        {
+          name: "_ga",
+          category: "statistics",
+          provider: "Google Analytics",
+          purpose: "Skelner mellem besøgende i statistikmåling.",
+          duration: "Typisk op til 2 år"
+        },
+        {
+          name: "_ga_*",
+          category: "statistics",
+          provider: "Google Analytics",
+          purpose: "Bevarer sessionsstatus for statistikmåling.",
+          duration: "Typisk op til 2 år"
+        },
+        {
+          name: "_gcl_au",
+          category: "marketing",
+          provider: "Google",
+          purpose: "Måler annonce- og konverteringseffekt.",
+          duration: "Typisk op til 90 dage"
+        }
+      ]
+    } : undefined,
+    analytics: googleTagManagerId ? {
+      googleTagManagerId,
+      defaultCurrency: "DKK",
+      affiliation: ${JSON.stringify(options.shopName)}
+    } : undefined
   });
 </script>
 `;
 }
 
 function bodyStartSource() {
-  return `<!-- Add shared body-start snippets here, for example Google Tag Manager noscript fallback. -->
+  return `<!-- Add shared body-start snippets here, for example consent markup or a manually pasted Google Tag Manager noscript fallback. -->
 <!-- orderly-include-template: ../templates/shop-footer.html -->
 <!-- orderly-include-template: ../templates/product-tile.html -->
 <!-- orderly-include-template: ../templates/product-page.html -->
@@ -715,17 +748,27 @@ function shopFooterTemplateSource(options) {
 
 function productTileTemplateSource() {
   return `<template data-orderly-template="product" data-orderly-for="product-tile">
-  <article class="orderly-product-tile">
-    <orderly-stored-image class="orderly-product-tile__image" data-orderly-bind="image" fit="contain"></orderly-stored-image>
+  <article class="orderly-product-tile" data-orderly-product>
+    <orderly-stored-image class="orderly-product-tile__image" data-orderly-bind="image" fit="contain" image-role="product-tile"></orderly-stored-image>
+    <link data-orderly-bind="schema-url" data-orderly-schema-prop="url">
+    <link data-orderly-bind="schema-image" data-orderly-schema-prop="image">
+    <meta data-orderly-bind="schema-description" data-orderly-schema-prop="description">
+    <meta data-orderly-bind="schema-sku" data-orderly-schema-prop="sku">
     <div class="orderly-product-tile__body">
       <h3 class="orderly-product-tile__title">
         <a class="orderly-product-tile__link" href="/product.html" data-orderly-bind="share-url">
           <span data-orderly-bind="title"></span>
         </a>
       </h3>
-      <p class="orderly-product-tile__brand" data-orderly-bind="brand"></p>
+      <p class="orderly-product-tile__brand" data-orderly-schema-brand><span data-orderly-bind="brand"></span></p>
       <div class="orderly-product-tile__footer">
-        <p class="orderly-product-tile__price" data-orderly-bind="price"></p>
+        <div class="orderly-product-tile__offer" data-orderly-schema-offer>
+          <link data-orderly-bind="schema-url" data-orderly-schema-prop="url">
+          <meta data-orderly-bind="schema-price-currency" data-orderly-schema-prop="priceCurrency">
+          <meta data-orderly-bind="schema-price" data-orderly-schema-prop="price">
+          <link data-orderly-bind="schema-availability" data-orderly-schema-prop="availability">
+          <p class="orderly-product-tile__price" data-orderly-bind="price"></p>
+        </div>
         <button class="orderly-product-tile__add" type="button" data-orderly-action="add-to-basket">
           <span class="orderly-product-tile__add-icon" data-orderly-bind="basket-action-icon" aria-hidden="true"></span>
         </button>
@@ -740,7 +783,7 @@ function productPageTemplateSource() {
   return `<template data-orderly-template="product" data-orderly-for="product-page">
   <section class="orderly-product-page">
     <div class="orderly-product-page__media" style="display: grid; gap: 12px; align-content: start; justify-self: center; width: 100%; max-width: 520px; min-width: 0;">
-      <orderly-stored-image class="orderly-product-page__image" data-orderly-bind="image" fit="contain" variant="object" style="display: block; width: 100%; max-width: 520px; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden;"></orderly-stored-image>
+      <orderly-stored-image class="orderly-product-page__image" data-orderly-bind="image" fit="contain" variant="object" image-role="product-detail" style="display: block; width: 100%; max-width: 520px; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden;"></orderly-stored-image>
       <div class="orderly-product-page__thumbnails" data-orderly-slot="thumbnails"></div>
     </div>
     <div class="orderly-product-page__details" style="min-width: 0;">

package/custom-elements.json

@@ -56,7 +56,8 @@
             { "name": "checkout-href", "description": "Checkout page URL used by the basket." },
             { "name": "checkout-label", "description": "Checkout link label." },
             { "name": "search-placeholder", "description": "Search box placeholder." },
-            { "name": "empty-label", "description": "Empty result text." }
+            { "name": "empty-label", "description": "Empty result text." },
+            { "name": "basket-mode", "description": "Basket display mode. Use inline-desktop to show a package-owned right rail on desktop when the basket has lines." }
           ],
           "members": [
             { "kind": "field", "name": "client", "type": { "text": "OrderlyClient | undefined" } },
@@ -83,7 +84,8 @@
             { "name": "empty-label", "description": "Empty result text used by category rails." },
             { "name": "product-href", "description": "Product detail page URL used by the popup expand link." },
             { "name": "checkout-href", "description": "Checkout page URL used by the basket." },
-            { "name": "checkout-label", "description": "Checkout link label." }
+            { "name": "checkout-label", "description": "Checkout link label." },
+            { "name": "basket-mode", "description": "Basket display mode. Use inline-desktop to show a package-owned right rail on desktop when the basket has lines." }
           ],
           "members": [
             { "kind": "field", "name": "client", "type": { "text": "OrderlyClient | undefined" } },
@@ -150,6 +152,9 @@
             { "name": "reference-label", "description": "Order reference label." },
             { "name": "order-title", "description": "Order summary heading." },
             { "name": "empty-label", "description": "Text shown when the order is not found locally." }
+          ],
+          "events": [
+            { "name": "orderly-payment-success", "type": { "text": "CustomEvent<{ order: Order }>" } }
           ]
         },
         {
@@ -167,6 +172,9 @@
             { "name": "order-title", "description": "Order summary heading." },
             { "name": "empty-label", "description": "Text shown when the order is not found locally." },
             { "name": "retry-label", "description": "Retry payment link label." }
+          ],
+          "events": [
+            { "name": "orderly-payment-failure", "type": { "text": "CustomEvent<{ order: Order }>" } }
           ]
         },
         {
@@ -263,6 +271,8 @@
             { "name": "title", "description": "Collection heading." },
             { "name": "description", "description": "Collection description." },
             { "name": "hero-image", "description": "Hero image URL." },
+            { "name": "hero-layout", "description": "Hero layout variant: image, split, or covers." },
+            { "name": "hero-cover-count", "description": "Number of product cover images shown in split/covers hero layouts." },
             { "name": "cta-label", "description": "CTA link label." },
             { "name": "cta-href", "description": "CTA link URL." },
             { "name": "keywords", "description": "Declarative query text mapped to SearchQuery.Query." },
@@ -295,7 +305,8 @@
             { "name": "add-label", "description": "Add-to-basket button label." },
             { "name": "loading-label", "description": "Product loading text." },
             { "name": "not-found-label", "description": "Product not found text." },
-            { "name": "error-label", "description": "Product loading error text." }
+            { "name": "error-label", "description": "Product loading error text." },
+            { "name": "basket-mode", "description": "Basket display mode. Use inline-desktop to show a package-owned right rail on desktop when the basket has lines." }
           ],
           "members": [
             { "kind": "field", "name": "client", "type": { "text": "OrderlyClient | undefined" } },
@@ -362,6 +373,7 @@
           ],
           "events": [
             { "name": "orderly-add-to-basket", "type": { "text": "CustomEvent<ProductEventDetail>" } },
+            { "name": "orderly-product-viewed", "type": { "text": "CustomEvent<ProductEventDetail>" } },
             { "name": "orderly-product-image-selected", "type": { "text": "CustomEvent<{ product?: SearchObject; image?: StoredImage; index: number }>" } }
           ]
         },
@@ -370,11 +382,15 @@
           "name": "OrderlyStoredImageElement",
           "tagName": "orderly-stored-image",
           "customElement": true,
-          "description": "Renders StoredImage with configured URL resolution, rotation, crop, and fit behavior. Borderless by default, with an opt-in border attribute.",
+          "description": "Renders StoredImage with configured URL resolution, role-based CDN sizing, rotation, crop, and fit behavior. Borderless by default, with an opt-in border attribute.",
           "attributes": [
             { "name": "fit", "description": "Image fit, normally contain or cover." },
             { "name": "variant", "description": "Image URL variant, such as thumbnail or object." },
+            { "name": "image-role", "description": "Configured image sizing role, such as product-tile, product-detail, thumbnail, basket-line, checkout-line, or fullsize." },
             { "name": "alt", "description": "Image alt text." },
+            { "name": "loading", "description": "Native image loading hint forwarded to the inner img. Defaults to lazy." },
+            { "name": "decoding", "description": "Native image decoding hint forwarded to the inner img. Defaults to async." },
+            { "name": "fetchpriority", "description": "Native fetch priority hint forwarded to the inner img, for above-the-fold images." },
             { "name": "border", "description": "Adds a 1px image frame border." }
           ],
           "members": [
@@ -409,14 +425,18 @@
           "customElement": true,
           "description": "Basket icon button with count badge.",
           "attributes": [
-            { "name": "label", "description": "Accessible basket label." }
+            { "name": "label", "description": "Accessible basket label." },
+            { "name": "href", "description": "Optional checkout/cart URL. When set, the icon renders as a link instead of an open-basket button." },
+            { "name": "placement", "description": "Use mobile-fixed for a package-owned fixed mobile cart/checkout button." },
+            { "name": "hide-when-empty", "description": "Hide the icon while the assigned BasketController count is zero." }
           ],
           "members": [
             { "kind": "field", "name": "basketController", "type": { "text": "BasketController" } }
           ],
           "events": [
             { "name": "orderly-basket-open", "type": { "text": "CustomEvent<DraftOrder>" } },
-            { "name": "orderly-basket-change", "type": { "text": "CustomEvent<DraftOrder>" } }
+            { "name": "orderly-basket-change", "type": { "text": "CustomEvent<DraftOrder>" } },
+            { "name": "orderly-basket-checkout", "type": { "text": "CustomEvent<{ draft: DraftOrder; count: number; href: string }>" } }
           ]
         },
         {
@@ -443,7 +463,8 @@
           ],
           "events": [
             { "name": "orderly-basket-change", "type": { "text": "CustomEvent<DraftOrder>" } },
-            { "name": "orderly-basket-verified", "type": { "text": "CustomEvent<DraftOrder>" } }
+            { "name": "orderly-basket-verified", "type": { "text": "CustomEvent<DraftOrder>" } },
+            { "name": "orderly-basket-checkout", "type": { "text": "CustomEvent<{ draft: DraftOrder; count: number; href: string }>" } }
           ]
         },
         {
@@ -483,7 +504,9 @@
             { "name": "layout", "description": "Navigation layout. Use vertical for a side menu, horizontal for a tiered desktop menu with a scrolling top row, full-width second row, and third-level dropdowns, or burgermenu for an icon trigger that opens a nested disclosure menu inside a floating panel." },
             { "name": "layout-desktop", "description": "Desktop layout override. Use layout-desktop=\"horizontal\" with layout-mobile=\"burgermenu\" for the standard storefront desktop nav plus mobile header burger pattern." },
             { "name": "layout-mobile", "description": "Mobile layout override. Use burgermenu for a compact icon button inside a mobile header." },
-            { "name": "sticky", "description": "Set to false to opt out of sticky positioning." }
+            { "name": "sticky", "description": "Set to false to opt out of sticky positioning." },
+            { "name": "persist-state", "description": "Persist expanded category ids in localStorage so vertical menus can remember open branches across navigation." },
+            { "name": "state-key", "description": "Storage key suffix used with persist-state when a shop has multiple independent menus." }
           ],
           "members": [
             { "kind": "field", "name": "items", "type": { "text": "NavigationItem[]" } },
@@ -497,8 +520,10 @@
             { "name": "orderly-navigation-select", "type": { "text": "CustomEvent<NavigationSelectionDetail>" } }
           ],
           "slots": [
+            { "name": "menu-before", "description": "Menu-level content rendered before navigation items, for example store links or service promos." },
             { "name": "before-items", "description": "Inline content rendered before the navigation items, for example logos." },
-            { "name": "after-items", "description": "Inline content rendered after the navigation items, for example promotional blocks." }
+            { "name": "after-items", "description": "Inline content rendered after the navigation items, for example promotional blocks." },
+            { "name": "menu-after", "description": "Menu-level content rendered after navigation items, for example help, store finder, or volunteer links." }
           ]
         },
         {