orionplace-react 0.6.1 → 0.7.0

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.1",
+  "version": "0.7.0",
   "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,14 @@ 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. To include the return terms, set
+\`ORIONPLACE_SHIPPING_COUNTRIES\` in \`.env\` to the countries you ship to, as
+ISO codes separated by spaces, for example
+\`ORIONPLACE_SHIPPING_COUNTRIES="RU BY"\`; without it the return terms 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/ArticlePage.tsx

@@ -60,6 +60,9 @@ export function ArticlePage({
           }>(action.endpoint, action.request, action.signal);
           return data.posts.data.find((post) => post.id === postId) ?? null;
         }}
+        onLoadPlacements={(action) =>
+          api.request(action.endpoint, action.request, action.signal)
+        }
         onReading={(action) =>
           api.request<IBlogReadingData>(
             action.endpoint,

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';
@@ -16,14 +17,20 @@ import styles from '@/app/storefront.module.css';
 
 export function ProductPage({
   productId,
-  previewKey   = '',
+  previewKey        = '',
   initialProduct,
-  initialError = '',
+  initialError      = '',
+  origin            = '',
+  shippingCountries = '',
 }: {
   productId: number;
   previewKey?: string;
   initialProduct?: IProduct;
   initialError?: string;
+  /** The visitor's origin from the server render. */
+  origin?: string;
+  /** ORIONPLACE_SHIPPING_COUNTRIES from the server's .env. */
+  shippingCountries?: string;
 }) {
   const api                                   = useOrionplaceApi();
   const init                                  = useOrionplace(selectInit);
@@ -53,6 +60,11 @@ export function ProductPage({
       data-storefront-page="product"
     >
       <StorefrontPageMetadata product={metadataProduct} />
+      <StorefrontProductStructuredData
+        product={metadataProduct}
+        origin={origin}
+        shippingCountries={shippingCountries}
+      />
       <StorefrontProduct
         productId={productId}
         previewKey={previewKey}

package/templates/app/_storefront/StorefrontProductStructuredData.tsx

@@ -0,0 +1,79 @@
+'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,
+  shippingCountries,
+}: {
+  product?: IProduct;
+  /** The visitor's origin from the server render (storefrontPublicOrigin). */
+  origin: string;
+  /** ORIONPLACE_SHIPPING_COUNTRIES from the server's .env. */
+  shippingCountries: 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,
+          shippingCountries: shippingCountryCodes(shippingCountries),
+          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,10 @@ 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;
+  /** ORIONPLACE_SHIPPING_COUNTRIES from the server's .env. */
+  shippingCountries?: string;
   appLoad: { result: AppLoadResult | null; failure: AppLoadFailure | null };
   /** The storefront language of this request. */
   locale: () => Promise<string>;
@@ -461,6 +465,8 @@ const routes: Record<string, Loader> = {
           previewKey={previewKey}
           initialProduct={initialProduct}
           initialError={initialError}
+          origin={context.origin ?? ''}
+          shippingCountries={context.shippingCountries ?? ''}
         />
       ),
     };

package/templates/components/orionplace/blog/BlogArticle.README.md

@@ -46,6 +46,17 @@ Hiding the page, moving away, losing focus or becoming inactive pauses the
 requests. A 401, 403 or returned field error removes the full text and shows
 the access-changed notice.
 
+Products the author places in the text appear at those positions. The
+marketplace blog editor writes an empty block with `data-product-id="12"` for
+one card or `data-product-ids="12,15,9"` for a row of up to 24 cards; the
+block keeps its float or centred style, and `data-product-hidden-badges`
+(`new`, `popular`, `good-deal`) turns card badges off. Products missing from
+`related_products` are requested through `onLoadPlacements` with
+`products_search` and `filters.id_in`, up to 35 IDs per request. A block whose
+products are not found stays hidden. Article text styles do not reach the
+cards, and in a narrow article a floated card stands alone in the middle. The
+helper is `lib/orionplace/blogProductPlacements.ts`.
+
 `related_products` supplies complete product objects to `ProductGroup`, so
 their standard cards are present during server rendering. The product callbacks
 forward the same payloads as `ProductGroup`; `productActionsDisabled` blocks
@@ -63,6 +74,7 @@ separate.
 | `initialPost?: IBlogPost`                                                                                               | Server-provided initial post used for the first render and hydration.                                                |
 | `commentsProps?: Omit<BlogCommentsProps, "postId">`                                                                     | Props forwarded to the comments child component.                                                                     |
 | `onLoad?: (action: BlogArticleLoadAction) => Promise<IBlogPost \| null \| undefined> \| IBlogPost \| null \| undefined` | Called when the component needs its primary data. The callback payload is shown in its type.                         |
+| `onLoadPlacements?: (action: BlogPlacementLoadAction) => Promise<BlogPlacementData \| null \| undefined> \| BlogPlacementData \| null \| undefined` | Called when products placed in the article text are missing from `related_products`: `products_search` with `filters.id_in`, up to 35 IDs. Without it only related products fill the placements. |
 | `onReading?: (action: BlogReadingAction) => Promise<IBlogReadingData> \| IBlogReadingData`                              | Called when the article reading session starts, continues or stops. The callback payload is shown in its type.       |
 | `onBack?: () => void`                                                                                                   | Called when the visitor chooses Back. The callback has no payload.                                                   |
 | `onLoaded?: (post: IBlogPost) => void`                                                                                  | Called when the requested data loads successfully. The callback payload is shown in its type.                        |
@@ -125,6 +137,17 @@ ID тарифов, ссылка также передаёт их в `ids`. Дл
 приостанавливают запросы. Ответ 401, 403 или ошибка поля удаляет полный текст
 и показывает сообщение об изменении доступа.
 
+Товары, которые автор разместил в тексте, показываются на своих местах.
+Редактор блога маркетплейса пишет пустой блок с `data-product-id="12"` для
+одной карточки или `data-product-ids="12,15,9"` для ряда до 24 карточек;
+блок сохраняет обтекание или выравнивание по центру, а
+`data-product-hidden-badges` (`new`, `popular`, `good-deal`) отключает значки
+карточки. Товары, которых нет в `related_products`, запрашиваются через
+`onLoadPlacements` — `products_search` с `filters.id_in`, до 35 ID за запрос.
+Блок, товары которого не найдены, скрыт. Стили текста статьи не действуют на
+карточки, а в узкой статье карточка с обтеканием стоит отдельно по центру.
+Вспомогательный модуль — `lib/orionplace/blogProductPlacements.ts`.
+
 `related_products` передаёт полные объекты товаров в `ProductGroup`, поэтому
 обычные карточки есть уже в серверном HTML. Обработчики товаров получают те
 же данные, что и в `ProductGroup`; `productActionsDisabled` блокирует
@@ -142,6 +165,7 @@ ID тарифов, ссылка также передаёт их в `ids`. Дл
 | `initialPost?: IBlogPost`                                                                                               | Начальное значение статьи, полученное на сервере для первого рендера и гидратации.                                     |
 | `commentsProps?: Omit<BlogCommentsProps, "postId">`                                                                     | Свойства, передаваемые дочернему компоненту комментариев.                                                              |
 | `onLoad?: (action: BlogArticleLoadAction) => Promise<IBlogPost \| null \| undefined> \| IBlogPost \| null \| undefined` | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.                             |
+| `onLoadPlacements?: (action: BlogPlacementLoadAction) => Promise<BlogPlacementData \| null \| undefined> \| BlogPlacementData \| null \| undefined` | Вызывается, когда товаров, размещённых в тексте статьи, нет в `related_products`: `products_search` с `filters.id_in`, до 35 ID. Без него размещения заполняют только прикреплённые товары. |
 | `onReading?: (action: BlogReadingAction) => Promise<IBlogReadingData> \| IBlogReadingData`                              | Вызывается, когда сеанс чтения статьи начинается, продолжается или завершается. Данные обработчика указаны в его типе. |
 | `onBack?: () => void`                                                                                                   | Вызывается, когда покупатель выбирает «Назад». Обработчик не получает данные.                                          |
 | `onLoaded?: (post: IBlogPost) => void`                                                                                  | Вызывается, когда запрошенные данные успешно загружены. Данные обработчика указаны в его типе.                         |

package/templates/components/orionplace/blog/BlogArticle.module.css

@@ -75,87 +75,88 @@
   content: '';
 }
 
-.prose :where(p, ul, ol, blockquote, pre, figure) {
+/* Product cards placed in the text keep their own look: the text rules skip placement blocks. */
+.prose :where(p, ul, ol, blockquote, pre, figure):where(:not([data-product-id] *, [data-product-ids] *)) {
   margin: 1rem 0;
 }
 
-.prose :where(h1, h2, h3, h4, h5, h6, figure, table, pre) {
+.prose :where(h1, h2, h3, h4, h5, h6, figure, table, pre):where(:not([data-product-id] *, [data-product-ids] *)) {
   clear: both;
 }
 
-.prose :where(h1, h2, h3, h4, h5, h6) {
+.prose :where(h1, h2, h3, h4, h5, h6):where(:not([data-product-id] *, [data-product-ids] *)) {
   margin: 2rem 0 1rem;
   font-weight: 500;
   line-height: 1.3;
 }
 
-.prose h1 { font-size: 1.875rem; }
-.prose h2 { font-size: 1.5rem; }
-.prose h3 { font-size: 1.25rem; }
-.prose h4 { font-size: 1.125rem; }
-.prose h5 { font-size: 1rem; }
-.prose h6 {
+.prose h1:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1.875rem; }
+.prose h2:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1.5rem; }
+.prose h3:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1.25rem; }
+.prose h4:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1.125rem; }
+.prose h5:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1rem; }
+.prose h6:where(:not([data-product-id] *, [data-product-ids] *)) {
   font-size: 0.875rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
-.prose :where(strong, b) { font-weight: 500; }
-.prose :where(sub, sup) { font-size: 0.75em; line-height: 0; }
-.prose mark { color: inherit; background: var(--orionplace-attention-surface); }
+.prose :where(strong, b):where(:not([data-product-id] *, [data-product-ids] *)) { font-weight: 500; }
+.prose :where(sub, sup):where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 0.75em; line-height: 0; }
+.prose mark:where(:not([data-product-id] *, [data-product-ids] *)) { color: inherit; background: var(--orionplace-attention-surface); }
 
-.prose a {
+.prose a:where(:not([data-product-id] *, [data-product-ids] *)) {
   border-bottom: 1px solid currentColor;
   color: var(--orionplace-text);
   text-decoration: none;
 }
 
-.prose a:not([href]) { border-bottom: 0; }
-.prose a:focus-visible { color: var(--orionplace-accent); outline: none; }
+.prose a:not([href]):where(:not([data-product-id] *, [data-product-ids] *)) { border-bottom: 0; }
+.prose a:focus-visible:where(:not([data-product-id] *, [data-product-ids] *)) { color: var(--orionplace-accent); outline: none; }
 @media (hover: hover) {
-  .prose a:hover {
+  .prose a:hover:where(:not([data-product-id] *, [data-product-ids] *)) {
     color: var(--orionplace-accent);
     outline: none;
   }
 }
-.prose :where(ul, ol) { padding-left: 1.5rem; }
-.prose ul { list-style: disc; }
-.prose ol { list-style: decimal; }
-.prose li > :where(ul, ol) { margin: 0.25rem 0; }
-.prose li > p { margin: 0; }
-.prose ul[data-type='taskList'] { padding-left: 0; list-style: none; }
+.prose :where(ul, ol):where(:not([data-product-id] *, [data-product-ids] *)) { padding-left: 1.5rem; }
+.prose ul:where(:not([data-product-id] *, [data-product-ids] *)) { list-style: disc; }
+.prose ol:where(:not([data-product-id] *, [data-product-ids] *)) { list-style: decimal; }
+.prose li > :where(ul, ol):where(:not([data-product-id] *, [data-product-ids] *)) { margin: 0.25rem 0; }
+.prose li > p:where(:not([data-product-id] *, [data-product-ids] *)) { margin: 0; }
+.prose ul[data-type='taskList']:where(:not([data-product-id] *, [data-product-ids] *)) { padding-left: 0; list-style: none; }
 
-.prose li[data-type='taskItem'] {
+.prose li[data-type='taskItem']:where(:not([data-product-id] *, [data-product-ids] *)) {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
 }
 
-.prose li[data-type='taskItem'] > label {
+.prose li[data-type='taskItem'] > label:where(:not([data-product-id] *, [data-product-ids] *)) {
   display: flex;
   align-items: center;
   min-height: 1.85em;
 }
 
-.prose blockquote {
+.prose blockquote:where(:not([data-product-id] *, [data-product-ids] *)) {
   padding-left: 1rem;
   border-left: 2px solid var(--orionplace-border);
   color: var(--orionplace-muted);
 }
 
-.prose hr {
+.prose hr:where(:not([data-product-id] *, [data-product-ids] *)) {
   margin: 2rem 0;
   border: 0;
   border-top: 1px solid var(--orionplace-border);
 }
 
-.prose code {
+.prose code:where(:not([data-product-id] *, [data-product-ids] *)) {
   padding: 0.1em 0.3em;
   background: var(--orionplace-muted-surface);
   font-size: 0.875em;
 }
 
-.prose pre {
+.prose pre:where(:not([data-product-id] *, [data-product-ids] *)) {
   overflow-x: auto;
   padding: 1rem;
   border: 1px solid var(--orionplace-border);
@@ -163,9 +164,9 @@
   line-height: 1.6;
 }
 
-.prose pre code { padding: 0; background: transparent; }
+.prose pre code:where(:not([data-product-id] *, [data-product-ids] *)) { padding: 0; background: transparent; }
 
-.prose table {
+.prose table:where(:not([data-product-id] *, [data-product-ids] *)) {
   display: block;
   max-width: 100%;
   overflow-x: auto;
@@ -173,40 +174,40 @@
   border-collapse: collapse;
 }
 
-.prose :where(th, td) {
+.prose :where(th, td):where(:not([data-product-id] *, [data-product-ids] *)) {
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--orionplace-border);
   text-align: left;
   vertical-align: top;
 }
 
-.prose :where(img, video, audio) { max-width: 100%; }
-.prose img { height: auto; }
-.prose figure { max-width: 100%; }
-.prose figure > img { display: block; margin-inline: auto; }
-.prose figcaption { margin-top: 0.5rem; color: var(--orionplace-muted); }
+.prose :where(img, video, audio):where(:not([data-product-id] *, [data-product-ids] *)) { max-width: 100%; }
+.prose img:where(:not([data-product-id] *, [data-product-ids] *)) { height: auto; }
+.prose figure:where(:not([data-product-id] *, [data-product-ids] *)) { max-width: 100%; }
+.prose figure > img:where(:not([data-product-id] *, [data-product-ids] *)) { display: block; margin-inline: auto; }
+.prose figcaption:where(:not([data-product-id] *, [data-product-ids] *)) { margin-top: 0.5rem; color: var(--orionplace-muted); }
 
-.prose :where(img, figure)[data-float='left'],
-.prose :where(img, figure)[style*='float: left'] {
+.prose :where(img, figure)[data-float='left']:where(:not([data-product-id] *, [data-product-ids] *)),
+.prose :where(img, figure)[style*='float: left']:where(:not([data-product-id] *, [data-product-ids] *)) {
   float: left;
   max-width: 50%;
   margin: 0.25rem 1.5rem 1rem 0;
 }
 
-.prose :where(img, figure)[data-float='right'],
-.prose :where(img, figure)[style*='float: right'] {
+.prose :where(img, figure)[data-float='right']:where(:not([data-product-id] *, [data-product-ids] *)),
+.prose :where(img, figure)[style*='float: right']:where(:not([data-product-id] *, [data-product-ids] *)) {
   float: right;
   max-width: 50%;
   margin: 0.25rem 0 1rem 1.5rem;
 }
 
-.prose details {
+.prose details:where(:not([data-product-id] *, [data-product-ids] *)) {
   margin: 1rem 0;
   padding: 0.75rem 1rem;
   border: 1px solid var(--orionplace-border);
 }
 
-.prose summary { cursor: pointer; font-weight: 500; }
+.prose summary:where(:not([data-product-id] *, [data-product-ids] *)) { cursor: pointer; font-weight: 500; }
 
 /* `op-feature-panel op-feature-stack` in the other packages. */
 .access {
@@ -283,8 +284,8 @@
 /* A narrow article has no room for text beside a floated image; 592px is
    the article's width in the /journal page on a 640px screen. */
 @container article (max-width: 591px) {
-  .prose :where(img, figure)[data-float],
-  .prose :where(img, figure)[style*='float:'] {
+  .prose :where(img, figure)[data-float]:where(:not([data-product-id] *, [data-product-ids] *)),
+  .prose :where(img, figure)[style*='float:']:where(:not([data-product-id] *, [data-product-ids] *)) {
     float: none !important;
     width: auto !important;
     max-width: 100%;
@@ -304,6 +305,29 @@
 }
 /* Images that open in the viewer. */
 .cover[data-blog-image-viewer],
-.prose img[data-blog-image-viewer] { cursor: zoom-in; }
+.prose img[data-blog-image-viewer]:where(:not([data-product-id] *, [data-product-ids] *)) { cursor: zoom-in; }
 .cover[data-blog-image-viewer]:focus-visible,
-.prose img[data-blog-image-viewer]:focus-visible { outline: 2px solid var(--orionplace-accent); outline-offset: 3px; }
+.prose img[data-blog-image-viewer]:focus-visible:where(:not([data-product-id] *, [data-product-ids] *)) { outline: 2px solid var(--orionplace-accent); outline-offset: 3px; }
+
+/* Product placements: cards fill them; one without its products stays hidden. */
+.prose :where([data-product-id], [data-product-ids]):empty {
+  display: none;
+}
+
+.prose [data-product-ids] {
+  clear: both;
+  margin: 1.5rem 0;
+}
+
+.prose [data-product-id]:not([data-product-ids]) {
+  width: min(100%, 260px);
+  margin-block: 1.5rem;
+}
+
+/* The editor's float has no room beside a card on a narrow page. */
+@container article (max-width: 480px) {
+  .prose [data-product-id]:not([data-product-ids]) {
+    float: none !important;
+    margin-inline: auto !important;
+  }
+}

package/templates/components/orionplace/blog/BlogArticle.tsx

@@ -8,6 +8,7 @@ import {
   useState,
   type SyntheticEvent,
 } from 'react';
+import { createPortal } from 'react-dom';
 import {
   useOrionplace,
   useOrionplaceSelections,
@@ -20,8 +21,10 @@ import {
   blogArticleMediaUrl,
   blogArticlePlansHref,
   blogArticleRequest,
+  blogPlacementRequest,
   lockBlogArticle,
   type BlogArticleLoadAction,
+  type BlogPlacementLoadAction,
 } from '@/lib/orionplace/blogArticle';
 import {
   removeLeadingDuplicateBlogHeading,
@@ -52,6 +55,15 @@ import {
   type IBlogViewerImage,
 } from '@/lib/orionplace/blogImageViewer';
 import { ProductReviewImageViewer } from '@/components/orionplace/products/ProductReviewImageViewer';
+import { ProductCard } from '@/components/orionplace/products/ProductCard';
+import {
+  blogPlacementProductIds,
+  blogPlacementRequests,
+  blogProductPlacements,
+  type IBlogProductPlacement,
+} from '@/lib/orionplace/blogProductPlacements';
+import { productWithSellerPermission } from '@/lib/orionplace/productSeller';
+import type { IProduct, IProductSearchSeller } from '@/interfaces/orionplace/products/IProduct';
 import styles from './BlogArticle.module.css';
 
 export interface BlogArticleProps extends ProductGroupEvents {
@@ -62,6 +74,10 @@ export interface BlogArticleProps extends ProductGroupEvents {
   onLoad?: (
     action: BlogArticleLoadAction,
   ) => Promise<IBlogPost | null | undefined> | IBlogPost | null | undefined;
+  // Loads products placed in the text; without it only related products fill placements.
+  onLoadPlacements?: (
+    action: BlogPlacementLoadAction,
+  ) => Promise<BlogPlacementData | null | undefined> | BlogPlacementData | null | undefined;
   onReading?: (
     action: BlogReadingAction,
   ) => Promise<IBlogReadingData> | IBlogReadingData;
@@ -70,12 +86,18 @@ export interface BlogArticleProps extends ProductGroupEvents {
   onMissing?: () => void;
 }
 
+type BlogPlacementData = {
+  products?: { data?: IProduct[] };
+  selects?: { sellers?: IProductSearchSeller[] };
+};
+
 export function BlogArticle({
   postId,
   productActionsDisabled = false,
   initialPost = null,
   commentsProps,
   onLoad,
+  onLoadPlacements,
   onReading,
   onBack,
   onLoaded,
@@ -129,6 +151,11 @@ export function BlogArticle({
   );
   const cover = blogArticleCover(post);
   const showSkeleton = !post && !settled && !error;
+  // Product cards the author placed in the text (see blogProductPlacements).
+  const [placements, setPlacements] = useState<IBlogProductPlacement[]>([]);
+  const [placed, setPlaced] = useState<Record<number, IProduct>>({});
+  const placedProduct = (id: number) =>
+    placed[id] ?? post?.related_products?.find((product) => product.id === id);
 
   const lockAccess = useCallback(() => {
     setAccessChanged(true);
@@ -199,6 +226,43 @@ export function BlogArticle({
     );
   }, [html, cover, coverFailed, mounted, labels.imageOpen, post?.id]);
 
+  // The text's placement blocks after each render; missing products come
+  // with one request per 35.
+  useEffect(() => {
+    const found = mounted ? blogProductPlacements(articleRef.current) : [];
+    const known = new Set([
+      ...Object.keys(placed).map(Number),
+      ...(post?.related_products ?? []).map((product) => product.id),
+    ]);
+    const missing = blogPlacementProductIds(found).filter((id) => !known.has(id));
+    const controller = new AbortController();
+
+    setPlacements(found);
+    if (onLoadPlacements && missing.length) {
+      void (async () => {
+        for (const chunk of blogPlacementRequests(missing)) {
+          try {
+            const data = await onLoadPlacements(blogPlacementRequest(chunk, controller.signal));
+            if (controller.signal.aborted) {
+              return;
+            }
+            const loaded = data?.products?.data ?? [];
+            setPlaced((current) => ({
+              ...current,
+              ...Object.fromEntries(loaded.map((product) => [
+                product.id,
+                productWithSellerPermission(product, data?.selects?.sellers),
+              ])),
+            }));
+          } catch {
+            // A placement without its products stays empty and hidden.
+          }
+        }
+      })();
+    }
+    return () => controller.abort();
+  }, [html, mounted, post?.id]);
+
   const openViewer = (event: SyntheticEvent) => {
     const images = blogViewerImages([coverRef.current, articleRef.current]);
     const index = blogViewerIndex(event.target, images);
@@ -327,6 +391,57 @@ export function BlogArticle({
             </div>
           )}
 
+          {placements.map((placement, index) => {
+            const products = placement.productIds
+              .map(placedProduct)
+              .filter((product): product is IProduct => Boolean(product));
+
+            if (!products.length || !placement.element.isConnected) {
+              return null;
+            }
+            return createPortal(
+              placement.layout === 'single' ? (
+                <ProductCard
+                  productId={products[0]!.id}
+                  initialProduct={products[0]}
+                  hiddenBadges={placement.hiddenBadges}
+                  disabled={productActionsDisabled}
+                  onSelect={onSelect}
+                  onSelectSeller={onSelectSeller}
+                  onSelectVariant={onSelectVariant}
+                  onRequestSecondaryVariants={onRequestSecondaryVariants}
+                  onSelectSecondaryVariant={onSelectSecondaryVariant}
+                  onToggleFavorite={onToggleFavorite}
+                  onAdd={onAdd}
+                  onRemove={onRemove}
+                  onSubscribe={onSubscribe}
+                  onUnsubscribe={onUnsubscribe}
+                  onPreorder={onPreorder}
+                />
+              ) : (
+                <ProductGroup
+                  products={products}
+                  productIds={products.map((product) => product.id)}
+                  hiddenBadges={placement.hiddenBadges}
+                  disabled={productActionsDisabled}
+                  onSelect={onSelect}
+                  onSelectSeller={onSelectSeller}
+                  onSelectVariant={onSelectVariant}
+                  onRequestSecondaryVariants={onRequestSecondaryVariants}
+                  onSelectSecondaryVariant={onSelectSecondaryVariant}
+                  onToggleFavorite={onToggleFavorite}
+                  onAdd={onAdd}
+                  onRemove={onRemove}
+                  onSubscribe={onSubscribe}
+                  onUnsubscribe={onUnsubscribe}
+                  onPreorder={onPreorder}
+                />
+              ),
+              placement.element,
+              `placement-${index}`,
+            );
+          })}
+
           {!full ? (
             <div className={styles.access} data-blog-article-access>
               <h2>{labels.fullAccess}</h2>

package/templates/components/orionplace/products/ProductCard.README.md

@@ -52,6 +52,7 @@ displayed product and provide the equivalent of the Nuxt named slots.
 | `collection?: OrionplaceProductCollection`                                                                        | Product-store collection used to resolve the supplied product ID.                                                    |
 | `compact?: boolean`                                                                                               | Larger representative layout: the image beside the details once the card itself is at least 22rem (352px) wide, above them in a narrower card; leaves out the description, badges, rating and stock notice. |
 | `details?: boolean`                                                                                               | Purchase-panel mode for a product page: no image, name, seller, rating or description; the chosen main variant above the choices, actions with text labels and `renderAfterPrice` after the price. Overrides `compact`. |
+| `hiddenBadges?: readonly string[]` | Card badges to leave out: `new`, `popular`, `deal`. A blog article passes the badges the author turned off for a placement. |
 | `disabled?: boolean`                                                                                              | Disables the component controls and prevents new actions.                                                            |
 | `actionsDisabled?: boolean`                                                                                       | Disables product actions while the surrounding flow is busy.                                                         |
 | `purchaseActions?: boolean`                                                                                       | Shows or hides the product purchase controls.                                                                        |
@@ -130,6 +131,7 @@ displayed product and provide the equivalent of the Nuxt named slots.
 | `collection?: OrionplaceProductCollection`                                                                        | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                            |
 | `compact?: boolean`                                                                                               | Увеличенная карточка представителя: фотография рядом с данными, когда сама карточка шире 22rem (352px), и над ними в более узкой; без описания, отметок, оценки и сообщения о наличии. |
 | `details?: boolean`                                                                                               | Режим блока покупки для страницы товара: без фотографии, названия, продавца, оценки и описания; выбранный основной вариант над вариантами, действия с подписями и `renderAfterPrice` после цены. Имеет приоритет над `compact`. |
+| `hiddenBadges?: readonly string[]` | Значки карточки, которые не показываются: `new`, `popular`, `deal`. Статья блога передаёт значки, отключённые автором для размещения. |
 | `disabled?: boolean`                                                                                              | Блокирует элементы компонента и новые действия.                                                                    |
 | `actionsDisabled?: boolean`                                                                                       | Блокирует действия с товаром, пока внешний сценарий занят.                                                         |
 | `purchaseActions?: boolean`                                                                                       | Показывает или скрывает действия покупки товара.                                                                   |

package/templates/components/orionplace/products/ProductCard.tsx

@@ -52,6 +52,15 @@ import type { ProductCardVariantsHandle } from './ProductCardVariants';
 import type { ProductActionSelection } from './ProductCardActions';
 import styles from './ProductCard.module.css';
 
+// An empty label hides the badge; an omitted one keeps the locale's label.
+function hiddenBadgeLabels(hidden: readonly string[]) {
+  return {
+    ...(hidden.includes('new') ? { newLabel: '' } : {}),
+    ...(hidden.includes('popular') ? { popularLabel: '' } : {}),
+    ...(hidden.includes('deal') ? { dealLabel: '' } : {}),
+  };
+}
+
 export interface ProductCardProps {
   productId: number;
   initialProduct?: IProduct;
@@ -62,6 +71,8 @@ export interface ProductCardProps {
   actionsDisabled?: boolean;
   purchaseActions?: boolean;
   variantProductIds?: number[];
+  // Badge keys not to show on this card (new / popular / deal).
+  hiddenBadges?: readonly string[];
   productHref?: (id: number) => string;
   onSelect?: (product: IProduct) => void;
   onSelectSeller?: (seller: IProductSeller) => void;
@@ -98,6 +109,7 @@ export function ProductCard({
   actionsDisabled = false,
   purchaseActions = true,
   variantProductIds,
+  hiddenBadges = [],
   productHref,
   onSelect,
   onSelectSeller,
@@ -539,6 +551,7 @@ export function ProductCard({
                   productId={product.id}
                   collection={collection}
                   lowStockLabel=""
+                  {...hiddenBadgeLabels(hiddenBadges)}
                   className={styles.overlaidBadges}
                 />
               )}
@@ -634,6 +647,7 @@ export function ProductCard({
             productId={product.id}
             collection={collection}
             lowStockLabel=""
+            {...hiddenBadgeLabels(hiddenBadges)}
           />
         )}
         <ProductCardPrice

package/templates/components/orionplace/products/ProductGroup.README.md

@@ -28,6 +28,7 @@ image until interacted with.
 | `limit?: number`                                                                                                  | Limits how many supplied entries the component renders.                                                              |
 | `products?: readonly IProduct[]`                                                                                  | Product records supplied for server rendering and hydration.                                                         |
 | `productIds?: number[]`                                                                                           | Product IDs rendered in the supplied order.                                                                          |
+| `hiddenBadges?: readonly string[]` | Card badges to leave out: `new`, `popular`, `deal`. A blog article passes the badges the author turned off for a placement. |
 | `layout?: "responsive" \| "grid"`                                                                                 | Selects the supported component layout.                                                                              |
 | `productHref?: (id: number) => string`                                                                            | Builds the product destination from the callback arguments.                                                          |
 | `renderFooter?: (product: IProduct) => ReactNode`                                                                 | Replaces the default footer region; the renderer inputs are shown in its type.                                       |
@@ -72,6 +73,7 @@ image until interacted with.
 | `limit?: number`                                                                                                  | Ограничивает число показанных переданных записей.                                                                  |
 | `products?: readonly IProduct[]`                                                                                  | Товары для серверного рендера и гидратации.                                                                        |
 | `productIds?: number[]`                                                                                           | ID для товара, используемые в переданном порядке.                                                                  |
+| `hiddenBadges?: readonly string[]` | Значки карточки, которые не показываются: `new`, `popular`, `deal`. Статья блога передаёт значки, отключённые автором для размещения. |
 | `layout?: "responsive" \| "grid"`                                                                                 | Выбирает поддерживаемый вариант компоновки.                                                                        |
 | `productHref?: (id: number) => string`                                                                            | Строит адрес ссылки товара из аргументов обработчика.                                                              |
 | `renderFooter?: (product: IProduct) => ReactNode`                                                                 | Заменяет стандартный блок нижней части; входные данные функции указаны в её типе.                                  |

package/templates/components/orionplace/products/ProductGroup.tsx

@@ -32,6 +32,7 @@ export interface ProductGroupProps extends ProductGroupEvents {
   products?: readonly IProduct[];
   productIds?: number[];
   layout?: 'responsive' | 'grid';
+  hiddenBadges?: ProductCardProps['hiddenBadges'];
   productHref?: ProductCardProps['productHref'];
   renderFooter?: (product: IProduct) => ReactNode;
   className?: string;
@@ -44,6 +45,7 @@ export function ProductGroup({
   products: suppliedProducts,
   productIds,
   layout = 'responsive',
+  hiddenBadges,
   productHref,
   renderFooter,
   className = '',
@@ -140,6 +142,7 @@ export function ProductGroup({
             initialProduct={listedProduct}
             collection={collection}
             disabled={disabled}
+            hiddenBadges={hiddenBadges}
             productHref={productHref}
             renderFooter={renderFooter
               ? () => renderFooter(listedProduct)

package/templates/lib/orionplace/blogArticle.ts

@@ -15,6 +15,31 @@ export interface BlogArticleLoadAction {
   signal: AbortSignal;
 }
 
+// Products placed in the article text that no list loaded yet (see
+// blogProductPlacements); the answer is the products_search page data.
+export interface BlogPlacementLoadAction {
+  endpoint: 'products_search';
+  request: {
+    filters: { id_in: string };
+    paginate: { page: 1; pp_items: number };
+  };
+  signal: AbortSignal;
+}
+
+export function blogPlacementRequest(
+  ids: number[],
+  signal: AbortSignal,
+): BlogPlacementLoadAction {
+  return {
+    endpoint: 'products_search',
+    request: {
+      filters: { id_in: ids.join(',') },
+      paginate: { page: 1, pp_items: ids.length },
+    },
+    signal,
+  };
+}
+
 export function blogArticleRequest(
   postId: number,
   signal: AbortSignal,

package/templates/lib/orionplace/blogArticleHtml.ts

@@ -125,6 +125,7 @@ const attributes = [
   'data-details-content',
   'data-product-id',
   'data-product-ids',
+  'data-product-hidden-badges',
 ];
 
 const marginLength = '(-?\\d+(\\.\\d+)?(px|em|rem|%)?|auto)';

package/templates/lib/orionplace/blogProductPlacements.ts

@@ -0,0 +1,105 @@
+/*
+ * Product placements in article text. The marketplace blog editor writes an
+ * empty block where the author put products:
+ *   <div data-product-id="12"></div>          one product card
+ *   <div data-product-ids="12,15,9"></div>    a row of cards (up to 24)
+ * with optional data-product-hidden-badges="new,popular,good-deal" and a
+ * float or centered style. The article shows product cards in those blocks.
+ */
+
+export const blogPlacementMaxProducts = 24;
+
+// The backend lists at most 35 products per page.
+export const blogPlacementPageSize    = 35;
+
+export const blogPlacementSelector    = '[data-product-id], [data-product-ids]';
+
+// Editor badge names → product card badge keys.
+const placementBadges                 = {
+  'new': 'new',
+  'popular': 'popular',
+  'good-deal': 'deal',
+} as const;
+
+export type TBlogPlacementBadge = (typeof placementBadges)[keyof typeof placementBadges];
+
+export interface IBlogProductPlacement {
+  element: HTMLElement;
+  layout: 'single' | 'list';
+  productIds: number[];
+  hiddenBadges: TBlogPlacementBadge[];
+}
+
+/** Positive whole ids from «12,15,9», without repeats, at most `limit`. */
+export function blogPlacementIds(value: string | null | undefined, limit = blogPlacementMaxProducts): number[] {
+  const ids: number[] = [];
+
+  if (!value || value.length > 512) {
+    return ids;
+  }
+  for (const part of value.split(',')) {
+    const source = part.trim();
+    const id     = /^\d+$/.test(source) ? Number(source) : 0;
+
+    if (Number.isSafeInteger(id) && id > 0 && !ids.includes(id)) {
+      ids.push(id);
+    }
+    if (ids.length >= limit) {
+      break;
+    }
+  }
+  return ids;
+}
+
+/** Card badge keys the author turned off for this placement. */
+export function blogPlacementHiddenBadges(value: string | null | undefined): TBlogPlacementBadge[] {
+  if (!value || value.length > 512) {
+    return [];
+  }
+  const names = value.split(',').map((name) => name.trim().toLowerCase());
+
+  return Object.entries(placementBadges)
+    .filter(([name]) => names.includes(name))
+    .map(([, key]) => key);
+}
+
+/** The placements of a rendered article, in text order. */
+export function blogProductPlacements(root: ParentNode | null | undefined): IBlogProductPlacement[] {
+  if (typeof root?.querySelectorAll !== 'function') {
+    return [];
+  }
+  return Array.from(root.querySelectorAll<HTMLElement>(blogPlacementSelector)).flatMap((element) => {
+    // Product cards inside a filled placement carry data-product-id too.
+    if (element.parentElement?.closest(blogPlacementSelector)) {
+      return [];
+    }
+    const list       = element.hasAttribute('data-product-ids');
+    const productIds = list
+      ? blogPlacementIds(element.getAttribute('data-product-ids'))
+      : blogPlacementIds(element.getAttribute('data-product-id'), 1);
+
+    return productIds.length
+      ? [{
+          element,
+          layout: list ? 'list' : 'single',
+          productIds,
+          hiddenBadges: blogPlacementHiddenBadges(element.getAttribute('data-product-hidden-badges')),
+        }]
+      : [];
+  });
+}
+
+/** Every product id of the placements, once, in text order. */
+export function blogPlacementProductIds(placements: Pick<IBlogProductPlacement, 'productIds'>[]): number[] {
+  return [...new Set(placements.flatMap((placement) => placement.productIds))];
+}
+
+/** Ids split into requests the backend answers in one page each. */
+export function blogPlacementRequests(ids: number[]): number[][] {
+  const requests: number[][] = [];
+
+  for (let start = 0; start < ids.length; start += blogPlacementPageSize) {
+    requests.push(ids.slice(start, start + blogPlacementPageSize));
+  }
+  return requests;
+}

package/templates/lib/orionplace/productStructuredData.ts

@@ -0,0 +1,220 @@
+// 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;
+  /** ORIONPLACE_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, from ORIONPLACE_SHIPPING_COUNTRIES:
+ * ISO 3166-1 alpha-2 codes separated by spaces or commas, e.g. "RU BY".
+ */
+export function shippingCountryCodes(value: unknown): string[] {
+  const codes = 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,16 @@ 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'),
+    ),
+    shippingCountries: process.env.ORIONPLACE_SHIPPING_COUNTRIES ?? '',
     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).*)'],
 };