orionplace-react 0.6.2 → 0.7.1

package/README.md

@@ -478,7 +478,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-react",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "description": "Next.js 16 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

@@ -411,6 +411,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/app/_storefront/ProductPage.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { StorefrontPageMetadata } from '@/app/_storefront/StorefrontPageMetadata';
+import { StorefrontProductStructuredData } from '@/app/_storefront/StorefrontProductStructuredData';
 import { StorefrontErrorRoute } from '@/app/_storefront/StorefrontErrorRoute';
 import { StorefrontProduct } from '@/components/orionplace/products/StorefrontProduct';
 import type { IProduct } from '@/interfaces/orionplace';
@@ -19,11 +20,14 @@ export function ProductPage({
   previewKey   = '',
   initialProduct,
   initialError = '',
+  origin       = '',
 }: {
   productId: number;
   previewKey?: string;
   initialProduct?: IProduct;
   initialError?: string;
+  /** The visitor's origin from the server render. */
+  origin?: string;
 }) {
   const api                                   = useOrionplaceApi();
   const init                                  = useOrionplace(selectInit);
@@ -53,6 +57,10 @@ export function ProductPage({
       data-storefront-page="product"
     >
       <StorefrontPageMetadata product={metadataProduct} />
+      <StorefrontProductStructuredData
+        product={metadataProduct}
+        origin={origin}
+      />
       <StorefrontProduct
         productId={productId}
         previewKey={previewKey}

package/templates/app/_storefront/StorefrontProductStructuredData.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import type { IProduct } from '@/interfaces/orionplace';
+import type { IProductLocale } from '@/interfaces/orionplace/products/IProduct';
+import {
+  getAvailableNestedValueFromObject,
+  plainText,
+} from '@/lib/orionplace/presentation';
+import {
+  storefrontAbsoluteUrl,
+  storefrontCanonicalUrl,
+} from '@/lib/orionplace/pageSeo';
+import {
+  shippingCountryCodes,
+  storefrontProductStructuredData,
+  structuredDataJson,
+} from '@/lib/orionplace/productStructuredData';
+
+/**
+ * The product page's schema.org data for search engines, rendered with the
+ * page on the server. Nuxt and Svelte put the same data into the page head
+ * through useOrionplacePageSeo.
+ */
+export function StorefrontProductStructuredData({
+  product,
+  origin,
+}: {
+  product?: IProduct;
+  /** The visitor's origin from the server render (storefrontPublicOrigin). */
+  origin: string;
+}) {
+  const pathname   = usePathname();
+  const search     = useSearchParams().toString();
+  const init       = useOrionplace(selectInit);
+  const locale     = useOrionplaceSelections((state) => state.localeCode);
+  const currencyId = useOrionplaceSelections((state) => state.currencyId);
+  const field      = <Key extends keyof IProductLocale>(name: Key) =>
+    getAvailableNestedValueFromObject(product?.locale, locale, name);
+  // A preview or any other page without a canonical address gets no data.
+  const canonical  = storefrontCanonicalUrl(
+    origin,
+    pathname,
+    search ? `?${search}` : '',
+    locale,
+  );
+  const json       = structuredDataJson(
+    canonical
+      ? storefrontProductStructuredData(product, {
+          url: canonical,
+          name: field('product_name'),
+          description: plainText(
+            field('meta_description') || field('short_description'),
+          ).slice(0, 160),
+          currencyId,
+          currencyCode: init?.currencies?.[currencyId]?.currency_code,
+          // The backend's shipping countries, for the return terms.
+          shippingCountries: shippingCountryCodes(init?.shipping_countries),
+          showSeller: !init?.visual_settings?.single_seller_mode,
+          absoluteUrl: (value) => storefrontAbsoluteUrl(value, origin),
+        })
+      : undefined,
+  );
+
+  return json ? (
+    <script
+      type="application/ld+json"
+      // The JSON is escaped by structuredDataJson, so it cannot close the tag.
+      dangerouslySetInnerHTML={{ __html: json }}
+    />
+  ) : null;
+}

package/templates/app/_storefront/storefrontRoutes.tsx

@@ -97,6 +97,8 @@ export interface StorefrontRouteContext {
   query: StorefrontRouteQuery;
   /** The address with its query, which sign-in returns to. */
   address: string;
+  /** The visitor's origin (storefrontPublicOrigin), for complete addresses. */
+  origin?: string;
   appLoad: { result: AppLoadResult | null; failure: AppLoadFailure | null };
   /** The storefront language of this request. */
   locale: () => Promise<string>;
@@ -461,6 +463,7 @@ const routes: Record<string, Loader> = {
           previewKey={previewKey}
           initialProduct={initialProduct}
           initialError={initialError}
+          origin={context.origin ?? ''}
         />
       ),
     };

package/templates/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/lib/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/lib/orionplace/serverRoute.tsx

@@ -1,5 +1,7 @@
+import { headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
 import { getOrionplaceAppLoad } from '@/lib/orionplace/appLoadServer';
+import { storefrontPublicOrigin } from '@/lib/orionplace/pageSeo';
 import { getOrionplaceServerApi, serverErrorText } from '@/lib/orionplace/serverApi';
 import {
   getOrionplaceServerLocale,
@@ -27,11 +29,15 @@ export async function renderStorefrontRoute(
   pattern: StorefrontRoutePattern,
   { params, searchParams }: StorefrontPageProps,
 ) {
-  const url    = await getStorefrontRequestUrl();
-  const result = await loadStorefrontRoute(pattern, {
+  const url      = await getStorefrontRequestUrl();
+  const incoming = await headers();
+  const result   = await loadStorefrontRoute(pattern, {
     params: (await params) ?? {},
     query: (await searchParams) ?? {},
     address: url.pathname + url.search,
+    origin: storefrontPublicOrigin(
+      incoming.get('x-forwarded-host') ?? incoming.get('host'),
+    ),
     appLoad: await getOrionplaceAppLoad(),
     locale: getOrionplaceServerLocale,
     api: getOrionplaceServerApi,

package/templates/proxy.ts

@@ -55,8 +55,9 @@ export async function proxy(request: NextRequest) {
   return response;
 }
 
-// The gateway sets its own headers for /api, robots.txt and the sitemap;
-// static assets keep their caching.
+// The gateway sets its own headers for /api, /ps3 media, robots.txt and the
+// sitemap (public blog images keep the backend's browser cache rule); static
+// assets keep their caching.
 export const config = {
-  matcher: ['/((?!api/|_next/static|_next/image|favicon.ico|robots.txt|sitemap.xml).*)'],
+  matcher: ['/((?!api/|ps3/|_next/static|_next/image|favicon.ico|robots.txt|sitemap.xml).*)'],
 };