orionplace-svelte 0.6.2 → 0.7.1

package/README.md

@@ -480,7 +480,9 @@ The corresponding `.cfg` is read on every request. Backend URLs must use HTTPS,
 end in `/api`, and belong to `*.orionplace.app`. API methods, query strings, bodies,
 authorization and cookies are forwarded. Backend statuses are retained and cookie
 Domain attributes are removed to bind cookies to the storefront. Gateway responses
-use `Cache-Control: no-store`. Network failures return `502`.
+use `Cache-Control: no-store`, except public blog images and videos: they keep the
+backend's `private, max-age` rule, so the browser does not download them again on
+every page. Network failures return `502`.
 
 A changing request (POST, PUT, PATCH, DELETE) from another site is rejected with
 `403`. A request from the page's own host or the storefront domain passes, and the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionplace-svelte",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "description": "SvelteKit 2 storefront for your Orionplace marketplace: setup CLI, server API gateway, typed store and ready-made catalog, cart, checkout and account components in English and Russian, plus an Android app build.",
   "type": "module",
   "license": "MIT",

package/runtime/marketplace.d.mts

@@ -37,6 +37,11 @@ export declare function marketplacePublicOrigin(
   tenantDomain?: string,
 ): string;
 
+export declare function marketplaceCacheControl(
+  media: boolean,
+  upstream: Response,
+): string;
+
 export declare function noindexPathPrefixes(value?: string): string[];
 
 export declare function marketplaceNoindexPath(

package/runtime/marketplace.mjs

@@ -41,6 +41,18 @@ const hostnamePattern =
 const blogMediaPattern =
   /^\/ps3\/blog\/posts\/(?:images\/\d+|videos\/\d+(?:\/preview)?)$/;
 
+/**
+ * API answers are never stored. A media file keeps the backend's own browser
+ * cache rule when the backend allows it (a published public blog image:
+ * "private, max-age=…"); "private" keeps it out of shared caches.
+ */
+export function marketplaceCacheControl(media, upstream) {
+  const value = upstream.headers.get('cache-control') ?? '';
+  return media && upstream.ok && /\bprivate\b/i.test(value) && /\bmax-age=\d+/i.test(value) && !/no-store|no-cache/i.test(value)
+    ? value
+    : 'no-store';
+}
+
 /** @param {string} pathname */
 export function isMarketplaceMediaPath(pathname) {
   return blogMediaPattern.test(pathname);
@@ -307,7 +319,7 @@ export async function forwardMarketplace(request, configuration = {}) {
         : destination.href,
     );
   }
-  responseHeaders.set('Cache-Control', 'no-store');
+  responseHeaders.set('Cache-Control', marketplaceCacheControl(media, upstream));
   responseHeaders.set('Vary', 'Host, X-Forwarded-Host, X-Front-Domain');
   // fetch decodes compressed bodies: do not reuse upstream Content-Length/Encoding.
   return new Response(upstream.body, {

package/src/project-readme.mjs

@@ -403,6 +403,13 @@ for example \`ORIONPLACE_NOINDEX_PATHS="/catalog /category /product"\`. Those
 pages answer with \`X-Robots-Tag: noindex, follow\` and the sitemap leaves them
 out; the journal and other pages stay indexable. Leave it empty on a live shop.
 
+Every product page carries schema.org product data for Google and Yandex: the
+price, the crossed-out old price, stock, photos, brand, seller, rating and the
+return terms the page shows. The return terms name the shop's shipping
+countries, which Application Load sends in \`init.shipping_countries\`; without
+a shipping country they are left out. The delivery cost is not included: it
+depends on the buyer's address.
+
 This setup does not add analytics.
 
 ## Android app

package/templates/src/hooks.server.ts

@@ -12,10 +12,12 @@ function escapeAttribute(value: string) {
 
 /**
  * Personalized pages are never shared between visitors or storefront domains.
- * The API gateway, robots.txt and the sitemap set their own headers, so those
- * requests are left alone.
+ * The API gateway (/api, /ps3 media), robots.txt and the sitemap set their own
+ * headers, so those requests are left alone: public blog images keep the
+ * backend's browser cache rule.
  */
 const ownHeaders = ['/robots.txt', '/sitemap.xml'];
+const gatewayPaths = ['/api/', '/ps3/'];
 
 export const handle: Handle = async ({ event, resolve }) => {
   const response = await resolve(event, {
@@ -26,7 +28,7 @@ export const handle: Handle = async ({ event, resolve }) => {
       ),
   });
   if (
-    !event.url.pathname.startsWith('/api/') &&
+    !gatewayPaths.some((path) => event.url.pathname.startsWith(path)) &&
     !ownHeaders.includes(event.url.pathname)
   ) {
     response.headers.set('Cache-Control', 'private, no-store');

package/templates/src/lib/composables/useOrionplacePageSeo.svelte.ts

@@ -10,6 +10,7 @@ import {
   storefrontPublicOrigin,
 } from '@/lib/utils/orionplace/pageSeo';
 import type { StorefrontSeoPage } from '@/lib/utils/orionplace/pageSeo';
+import { structuredDataJson } from '@/lib/utils/orionplace/productStructuredData';
 
 export function useOrionplacePageSeo(
   page: MaybeRefOrGetter<StorefrontSeoPage>,
@@ -20,6 +21,12 @@ export function useOrionplacePageSeo(
     keywords?: MaybeRefOrGetter<string | undefined>;
     robots?: MaybeRefOrGetter<string | undefined>;
     image?: MaybeRefOrGetter<string | undefined>;
+    /**
+     * The page's schema.org data (a record page, e.g. the product), built
+     * from its canonical address and the visitor's origin. A page without a
+     * canonical address (preview, filtered, noindex) gets none.
+     */
+    structuredData?: (canonical: string, origin: string) => unknown;
   } = {},
 ) {
   // The address the visitor used: the proxy's host during the server render.
@@ -56,8 +63,14 @@ export function useOrionplacePageSeo(
     ogImage: () => storefrontAbsoluteUrl(toValue(values.image), origin),
     ogUrl: () => canonical.value,
   };
+  const structured = computed(() =>
+    canonical.value && values.structuredData
+      ? structuredDataJson(values.structuredData(canonical.value, origin))
+      : '',
+  );
   useSeoMeta(seo);
   useHead(() => ({
     link: canonical.value ? [{ rel: 'canonical', href: canonical.value }] : [],
+    jsonLd: structured.value || undefined,
   }));
 }

package/templates/src/lib/interfaces/orionplace/appBase/IAppLoadCommon.ts

@@ -24,6 +24,8 @@ export interface IAppLoadCommon {
   weights: Record<string, IAppLoadCommonUnit>;
   lengths: Record<string, IAppLoadCommonUnit>;
   geo_location_enabled: boolean;
+  /** ISO codes of the shop's shipping countries, sorted. */
+  shipping_countries?: string[];
   is_authenticated: boolean;
   wallet?: Record<string, IAppLoadCommonWalletValue>;
   logos: IAppLoadCommonLogos;

package/templates/src/lib/layouts/StorefrontPageHead.svelte

@@ -2,6 +2,10 @@
   import type { PageHead } from '@/lib/orionplace/navigation.svelte';
 
   let { metadata }: { metadata: PageHead } = $props();
+
+  // The JSON is escaped by structuredDataJson, so it cannot close the tag.
+  const scriptOpen  = '<script type="application/ld+json">';
+  const scriptClose = '</' + 'script>';
 </script>
 
 <svelte:head>
@@ -23,6 +27,10 @@
     {/if}
   {/each}
 
+  {#if metadata.jsonLd}
+    {@html scriptOpen + metadata.jsonLd + scriptClose}
+  {/if}
+
   {#each metadata.link ?? [] as link (link.rel)}
     {#if link.href}
       <link

package/templates/src/lib/orionplace/navigation.svelte.ts

@@ -105,16 +105,20 @@ export interface PageHead {
   meta?: Record<string, any>[];
   // <link> tags, one per `rel` (the canonical address).
   link?: { rel: string; href: string }[];
+  // The page's schema.org data as JSON (structuredDataJson), if it has any.
+  jsonLd?: string;
 }
 type HeadReader = () => PageHead;
 
 function collectHead(readers: HeadReader[]): PageHead {
   let title: string | undefined;
+  let jsonLd: string | undefined;
   const meta = new Map<string, Record<string, any>>();
   const link = new Map<string, { rel: string; href: string }>();
   for (const read of readers) {
     const head = read();
     title      = head.title ?? title;
+    jsonLd     = head.jsonLd || jsonLd;
     for (const tag of head.meta ?? []) {
       const key = tag.property ?? tag.name;
       if (key) {
@@ -125,7 +129,12 @@ function collectHead(readers: HeadReader[]): PageHead {
       link.set(tag.rel, tag);
     }
   }
-  return { title, meta: [...meta.values()], link: [...link.values()] };
+  return {
+    title,
+    meta: [...meta.values()],
+    link: [...link.values()],
+    ...(jsonLd ? { jsonLd } : {}),
+  };
 }
 
 interface HeadRegistry {

package/templates/src/lib/utils/orionplace/productStructuredData.ts

@@ -0,0 +1,221 @@
+// The product page's schema.org data for search engines: Google merchant
+// listings and Yandex product snippets read the same block. Every value
+// repeats what the page shows: the price and the crossed-out old price,
+// stock, return terms, photos, brand, seller and rating. The delivery cost is
+// left out: it depends on the buyer's address.
+// The same file is in the three packages; it has no imports so that it stays
+// identical.
+
+const SCHEMA_ORG       = 'https://schema.org/';
+const MAX_IMAGES       = 10;
+// EProductStatus.PUBLISHED and PUBLISHED_AS_OPTION: the product is on sale.
+const ON_SALE_STATUSES = [2, 1];
+
+interface StructuredPrice {
+  transform_value: number;
+}
+
+/** The product fields the data uses (IProduct has them all). */
+export interface StorefrontStructuredProduct {
+  id: number;
+  is_digital?: boolean;
+  discount: number;
+  base_price_dict: Record<string, StructuredPrice>;
+  product_price_dict: Record<string, StructuredPrice>;
+  images?: { full?: string[] | null; small?: string[] | null } | null;
+  status: { status: number };
+  c_real_left: number;
+  seller?: { name?: string | null } | null;
+  manufacture?: { name?: string | null } | null;
+  refunds?: {
+    customer_max_refund_days: number;
+    max_refund_days_with_defect: number;
+  } | null;
+  feedback_stat?: {
+    c_feedbacks?: number | null;
+    avg_raiting?: number | string | null;
+  } | null;
+}
+
+export interface StorefrontProductDataOptions {
+  /** The page's canonical address; without one the page gets no data. */
+  url: string | undefined;
+  name: string | undefined;
+  description?: string;
+  /** The currency the page shows prices in (its ID and code). */
+  currencyId: string;
+  currencyCode: string | undefined;
+  /** App Load `init.shipping_countries`, parsed by shippingCountryCodes(). */
+  shippingCountries: string[];
+  /** False when the page hides the seller (single-seller storefront). */
+  showSeller: boolean;
+  /** Makes an image address complete (storefrontAbsoluteUrl). */
+  absoluteUrl: (value: string | undefined) => string | undefined;
+}
+
+/**
+ * The countries the shop ships to: App Load `init.shipping_countries` (the
+ * backend's countries marked as shipping countries), as valid ISO 3166-1
+ * alpha-2 codes.
+ */
+export function shippingCountryCodes(value: unknown): string[] {
+  const codes = (Array.isArray(value) ? value.join(' ') : String(value ?? ''))
+    .split(/[\s,;]+/)
+    .map((code) => code.trim().toUpperCase())
+    .filter((code) => /^[A-Z]{2}$/.test(code));
+
+  return [...new Set(codes)];
+}
+
+function wholeDays(value: unknown) {
+  const days = Math.floor(Number(value));
+
+  return Number.isFinite(days) && days > 0 ? days : 0;
+}
+
+/**
+ * The return terms the page shows: the days for a product without a defect
+ * are the return window (sent back by mail at the buyer's cost); a defective
+ * product goes back at the shop's cost. A digital product or one without
+ * days cannot be returned. Without a shipping country there is no policy:
+ * search engines require the country.
+ */
+export function productReturnPolicy(
+  product: Pick<StorefrontStructuredProduct, 'is_digital' | 'refunds'>,
+  countries: string[],
+) {
+  if (!countries.length) {
+    return undefined;
+  }
+
+  const applicableCountry = countries.length === 1 ? countries[0] : countries;
+  const returnDays        = product.is_digital
+    ? 0
+    : wholeDays(product.refunds?.customer_max_refund_days);
+  const defectDays        = product.is_digital
+    ? 0
+    : wholeDays(product.refunds?.max_refund_days_with_defect);
+
+  if (!returnDays) {
+    return {
+      '@type': 'MerchantReturnPolicy',
+      applicableCountry,
+      'returnPolicyCategory': `${SCHEMA_ORG}MerchantReturnNotPermitted`,
+    };
+  }
+
+  return {
+    '@type': 'MerchantReturnPolicy',
+    applicableCountry,
+    'returnPolicyCategory': `${SCHEMA_ORG}MerchantReturnFiniteReturnWindow`,
+    'merchantReturnDays': returnDays,
+    'returnMethod': `${SCHEMA_ORG}ReturnByMail`,
+    'returnFees': `${SCHEMA_ORG}ReturnFeesCustomerResponsibility`,
+    ...(defectDays ? { itemDefectReturnFees: `${SCHEMA_ORG}FreeReturn` } : {}),
+  };
+}
+
+function priceValue(
+  prices: Record<string, StructuredPrice> | undefined,
+  currencyId: string,
+) {
+  const value = Number(prices?.[currencyId]?.transform_value);
+
+  return prices?.[currencyId] && Number.isFinite(value) ? value : undefined;
+}
+
+/** The schema.org Product of the page, or undefined when it cannot be built. */
+export function storefrontProductStructuredData(
+  product: StorefrontStructuredProduct | undefined,
+  options: StorefrontProductDataOptions,
+) {
+  const name         = options.name?.trim();
+  const currencyCode = options.currencyCode?.trim().toUpperCase() ?? '';
+
+  if (!product || !options.url || !name) {
+    return undefined;
+  }
+
+  // The price the page shows, as ProductCardPrice picks it.
+  const currencyId   =
+    options.currencyId ||
+    Object.keys(product.product_price_dict ?? {})[0] ||
+    Object.keys(product.base_price_dict ?? {})[0] ||
+    '';
+  const basePrice    = priceValue(product.base_price_dict, currencyId);
+  const price        =
+    priceValue(product.product_price_dict, currencyId) ?? basePrice;
+  const images       = [
+    ...(product.images?.full ?? []),
+    ...(product.images?.small ?? []),
+  ]
+    .map((image) => options.absoluteUrl(image))
+    .filter((image, index, list): image is string =>
+      Boolean(image) && list.indexOf(image) === index,
+    )
+    .slice(0, MAX_IMAGES);
+  const inStock      =
+    ON_SALE_STATUSES.includes(product.status?.status) &&
+    product.c_real_left > 0;
+  const returns      = productReturnPolicy(product, options.shippingCountries);
+  const brand        = product.manufacture?.name?.trim();
+  const seller       = options.showSeller ? product.seller?.name?.trim() : '';
+  const reviews      = Number(product.feedback_stat?.c_feedbacks ?? 0);
+  const rating       = Number(product.feedback_stat?.avg_raiting ?? 0);
+  const offer        =
+    price !== undefined && /^[A-Z]{3}$/.test(currencyCode)
+      ? {
+          '@type': 'Offer',
+          'url': options.url,
+          price,
+          'priceCurrency': currencyCode,
+          // The crossed-out old price, when the page shows one.
+          ...(basePrice !== undefined && price < basePrice
+            ? {
+                priceSpecification: {
+                  '@type': 'UnitPriceSpecification',
+                  'priceType': `${SCHEMA_ORG}StrikethroughPrice`,
+                  'price': basePrice,
+                  'priceCurrency': currencyCode,
+                },
+              }
+            : {}),
+          'availability': `${SCHEMA_ORG}${inStock ? 'InStock' : 'OutOfStock'}`,
+          'itemCondition': `${SCHEMA_ORG}NewCondition`,
+          ...(returns ? { hasMerchantReturnPolicy: returns } : {}),
+          ...(seller
+            ? { seller: { '@type': 'Organization', 'name': seller } }
+            : {}),
+        }
+      : undefined;
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name,
+    'url': options.url,
+    'sku': String(product.id),
+    ...(options.description?.trim()
+      ? { description: options.description.trim() }
+      : {}),
+    ...(images.length ? { image: images } : {}),
+    ...(brand ? { brand: { '@type': 'Brand', 'name': brand } } : {}),
+    ...(offer ? { offers: offer } : {}),
+    ...(reviews > 0 && Number.isFinite(rating) && rating > 0
+      ? {
+          aggregateRating: {
+            '@type': 'AggregateRating',
+            'ratingValue': Math.round(rating * 10) / 10,
+            'reviewCount': reviews,
+          },
+        }
+      : {}),
+  };
+}
+
+/** The data as the text of a <script type="application/ld+json"> tag. */
+export function structuredDataJson(value: unknown): string {
+  return value === undefined
+    ? ''
+    : JSON.stringify(value).replace(/</g, '\\u003c');
+}

package/templates/src/routes/product/[id]/+page.svelte

@@ -6,6 +6,11 @@
   import { useOrionplaceMissingPage } from '@/lib/composables/useOrionplaceMissingPage.svelte';
   import { useOrionplaceServerData } from '@/lib/composables/useOrionplaceServerData.svelte';
   import { requestProductPage } from '@/lib/utils/orionplace/productPage';
+  import { storefrontAbsoluteUrl } from '@/lib/utils/orionplace/pageSeo';
+  import {
+    shippingCountryCodes,
+    storefrontProductStructuredData,
+  } from '@/lib/utils/orionplace/productStructuredData';
   import {
     getAvailableNestedValueFromObject,
     plainText,
@@ -72,28 +77,47 @@
     return images?.full?.[0] ?? images?.small?.[0];
   });
 
-  useOrionplacePageSeo('product', () => store.localeCode, {
-    title: () =>
+  const productName            = computed(() =>
+    getAvailableNestedValueFromObject(
+      product.value?.locale,
+      store.localeCode,
+      'product_name',
+    ),
+  );
+  const productSummary         = computed(() =>
+    plainText(
       getAvailableNestedValueFromObject(
         product.value?.locale,
         store.localeCode,
-        'product_name',
-      ),
-    description: () =>
-      plainText(
+        'meta_description',
+      ) ||
         getAvailableNestedValueFromObject(
           product.value?.locale,
           store.localeCode,
-          'meta_description',
-        ) ||
-          getAvailableNestedValueFromObject(
-            product.value?.locale,
-            store.localeCode,
-            'short_description',
-          ),
-      ).slice(0, 160),
+          'short_description',
+        ),
+    ).slice(0, 160),
+  );
+
+  useOrionplacePageSeo('product', () => store.localeCode, {
+    title: () => productName.value,
+    description: () => productSummary.value,
     image: () => image.value,
     robots: () => (previewKey.value ? 'noindex, nofollow' : undefined),
+    structuredData: (canonical, origin) =>
+      storefrontProductStructuredData(product.value, {
+        url: canonical,
+        name: productName.value,
+        description: productSummary.value,
+        currencyId: store.currencyId,
+        currencyCode: store.currentCurrency?.currency_code,
+        // The backend's shipping countries, for the return terms.
+        shippingCountries: shippingCountryCodes(
+          store.init?.shipping_countries,
+        ),
+        showSeller: !store.init?.visual_settings?.single_seller_mode,
+        absoluteUrl: (value) => storefrontAbsoluteUrl(value, origin),
+      }),
   });
 
   // An invalid ID, or a product that the selected endpoint does not return,