orionplace-nuxt 0.6.1 → 0.7.0

package/README.md

@@ -466,7 +466,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-nuxt",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Nuxt 4 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.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

@@ -577,6 +577,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/components/orionplace/blog/BlogArticle.README.md

@@ -8,7 +8,7 @@ The supplied storefront uses this component at `/journal`.
 
 ## Contract and dependencies
 
-The supplied `app/pages/journal/[id].vue` loads the article during the server render with `blog_posts_get` and `filters.id = postId`, using the visitor's cookies, and passes it in `initialPost`; the browser shows it without another request. Without `initialPost` (after client-side navigation) the component sends the same request itself. Full text appears only when both `is_full` and `has_full_access` are true; otherwise the preview and the access panel remain. Article HTML is sanitized with DOMPurify in `app/utils/orionplace/blogArticleHtml.ts` and keeps what the marketplace blog editor writes: headings, paragraphs and line breaks, bold, italic, underline, strikethrough, subscript and superscript, links, bullet, numbered and task lists, quotes, dividers, inline code and code blocks, tables with merged cells, images and galleries, video and audio with controls, collapsible sections, alignment, text color, highlight, font and size. External links open in a new tab with `rel="noopener noreferrer"`; editor links to other articles open `/journal/<id>`. Formulas are shown as their LaTeX source. Wide tables and code blocks scroll inside the article, and floated images stack on narrow screens. Product placements from the editor are not shown inside the text. Frames, scripts, forms, event attributes and other styles are removed. The server render shows the text as plain paragraphs, which search engines can read; the formatted HTML replaces them in the browser.
+The supplied `app/pages/journal/[id].vue` loads the article during the server render with `blog_posts_get` and `filters.id = postId`, using the visitor's cookies, and passes it in `initialPost`; the browser shows it without another request. Without `initialPost` (after client-side navigation) the component sends the same request itself. Full text appears only when both `is_full` and `has_full_access` are true; otherwise the preview and the access panel remain. Article HTML is sanitized with DOMPurify in `app/utils/orionplace/blogArticleHtml.ts` and keeps what the marketplace blog editor writes: headings, paragraphs and line breaks, bold, italic, underline, strikethrough, subscript and superscript, links, bullet, numbered and task lists, quotes, dividers, inline code and code blocks, tables with merged cells, images and galleries, video and audio with controls, collapsible sections, alignment, text color, highlight, font and size. External links open in a new tab with `rel="noopener noreferrer"`; editor links to other articles open `/journal/<id>`. Formulas are shown as their LaTeX source. Wide tables and code blocks scroll inside the article, and floated images stack on narrow screens. Products the author places in the text appear at those positions: an empty block with `data-product-id="12"` shows one product card, `data-product-ids="12,15,9"` a row of up to 24 cards. The block keeps the editor's float or centred style, and `data-product-hidden-badges` (`new`, `popular`, `good-deal`) turns card badges off. Products missing from `related_products` are loaded with `products_search` and `filters.id_in`, up to 35 IDs per request, and stored with `store.setProduct()`; 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 `app/utils/orionplace/blogProductPlacements.ts`. Frames, scripts, forms, event attributes and other styles are removed. The server render shows the text as plain paragraphs, which search engines can read; the formatted HTML replaces them in the browser.
 
 Reading accounting for an accessible paid article starts after interaction with its visible text. `blog_reading_start` starts a session; `blog_reading_heartbeat` follows the returned interval. Leaving, losing focus, hiding the text or 60 seconds without interaction stops requests. Resuming and delayed timers start a fresh baseline. Confirmed loss of access removes full text and offers a refresh.
 
@@ -41,4 +41,4 @@ pages supplied by the full starter.
 - `blog_posts_get`
 - `blog_reading_start`
 - `blog_reading_heartbeat`
-- `products_search` (variant targets, through the host's variant controller)
+- `products_search` (products placed in the text by `filters.id_in`; variant targets, through the host's variant controller)

package/templates/app/components/orionplace/blog/BlogArticle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { computed, nextTick, onMounted, ref, watch } from 'vue';
+  import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue';
   import { useRuntimeConfig } from '#imports';
   import { useOrionplaceStore } from '@/stores/orionplace';
   import { useOrionplaceProductsStore } from '@/stores/orionplaceProducts';
@@ -25,6 +25,13 @@
     nativeAppOrigin,
   } from '@/utils/orionplace/nativeApp';
   import { requestBlogPost } from '@/utils/orionplace/blogLayout';
+  import {
+    blogPlacementProductIds,
+    blogPlacementRequests,
+    blogProductPlacements,
+  } from '@/utils/orionplace/blogProductPlacements';
+  import type { IBlogProductPlacement } from '@/utils/orionplace/blogProductPlacements';
+  import type { IProductSearchSeller } from '@/interfaces/orionplace/products/IProduct';
   import {
     blogViewerImage,
     blogViewerImages,
@@ -46,6 +53,7 @@
   import { NuxtLink } from '#components';
   import BlogComments from '@/components/orionplace/blog/BlogComments.vue';
   import ProductGroup from '@/components/orionplace/products/ProductGroup.vue';
+  import ProductCard from '@/components/orionplace/products/ProductCard.vue';
   import '@/components/orionplace/shared/features.css';
   import OrionplaceEmptyState from '@/components/orionplace/shared/OrionplaceEmptyState.vue';
 
@@ -95,6 +103,8 @@
     useRuntimeConfig().public.orionplaceAppOrigin,
   );
   const productIds     = ref<number[]>([]);
+  // Product cards the author placed in the text (see blogProductPlacements).
+  const placements     = shallowRef<IBlogProductPlacement[]>([]);
   const wasShown       = ref(false);
   const settled        = ref(false);
   const labels         = computed(() => blogLabels(selectionStore.localeCode));
@@ -244,6 +254,48 @@
     wasShown.value = true;
     showProducts(props.initialPost.related_products);
   }
+  function placementShown(placement: IBlogProductPlacement) {
+    return placement.productIds.some((id) => productStore.getProduct(id, 'products'));
+  }
+
+  // Placed products that no list loaded yet come with one request per 35.
+  async function loadPlacementProducts(ids: number[]) {
+    const missing = ids.filter((id) => !productStore.getProduct(id, 'products'));
+
+    for (const chunk of blogPlacementRequests(missing)) {
+      try {
+        const data = await api.request<{
+          products?: { data?: IProduct[] };
+          selects?: { sellers?: IProductSearchSeller[] };
+        }>('products_search', {
+          filters: { id_in: chunk.join(',') },
+          paginate: { page: 1, pp_items: chunk.length },
+        });
+
+        for (const product of data?.products?.data ?? []) {
+          productStore.setProduct(product, 'products', data?.selects?.sellers ?? []);
+        }
+      } catch {
+        // A placement without its products stays empty and hidden.
+      }
+    }
+  }
+
+  // New text replaces the placement blocks: the cards leave them first.
+  watch(html, () => {
+    placements.value = [];
+  }, { flush: 'pre' });
+  watch(
+    [html, mounted, () => post.value?.id],
+    () => {
+      void nextTick(() => {
+        placements.value = mounted.value ? blogProductPlacements(article.value) : [];
+        void loadPlacementProducts(blogPlacementProductIds(placements.value));
+      });
+    },
+    { flush: 'post' },
+  );
+
   function openableImages() {
     return blogViewerImages([coverImage.value, article.value]);
   }
@@ -388,6 +440,52 @@
           {{ paragraph }}
         </p>
       </div>
+      <template
+        v-for="(placement, index) in placements"
+        :key="index"
+      >
+        <Teleport
+          v-if="placementShown(placement)"
+          :to="placement.element"
+        >
+          <ProductCard
+            v-if="placement.layout === 'single'"
+            :product-id="placement.productIds[0]!"
+            :hidden-badges="placement.hiddenBadges"
+            :disabled="props.productActionsDisabled"
+            data-blog-placement="single"
+            @select="emit('selectProduct', $event)"
+            @select-seller="emit('selectSeller', $event)"
+            @select-variant="emit('selectVariant', $event)"
+            @request-secondary-variants="emit('requestSecondaryVariants', $event)"
+            @select-secondary-variant="emit('selectSecondaryVariant', $event)"
+            @toggle-favorite="emit('toggleFavorite', $event)"
+            @add="emit('add', $event)"
+            @remove="emit('remove', $event)"
+            @subscribe="emit('subscribe', $event)"
+            @unsubscribe="emit('unsubscribe', $event)"
+            @preorder="emit('preorder', $event)"
+          />
+          <ProductGroup
+            v-else
+            :product-ids="placement.productIds"
+            :hidden-badges="placement.hiddenBadges"
+            :disabled="props.productActionsDisabled"
+            data-blog-placement="list"
+            @select="emit('selectProduct', $event)"
+            @select-seller="emit('selectSeller', $event)"
+            @select-variant="emit('selectVariant', $event)"
+            @request-secondary-variants="emit('requestSecondaryVariants', $event)"
+            @select-secondary-variant="emit('selectSecondaryVariant', $event)"
+            @toggle-favorite="emit('toggleFavorite', $event)"
+            @add="emit('add', $event)"
+            @remove="emit('remove', $event)"
+            @subscribe="emit('subscribe', $event)"
+            @unsubscribe="emit('unsubscribe', $event)"
+            @preorder="emit('preorder', $event)"
+          />
+        </Teleport>
+      </template>
       <div
         v-if="!full"
         class="op-feature-panel op-feature-stack"
@@ -555,143 +653,144 @@
     clear: both;
   }
 
-  .op-feature-prose :deep(:where(p, ul, ol, blockquote, pre, figure)) {
+  /* Product cards placed in the text keep their own look: the text rules skip placement blocks. */
+  .op-feature-prose :deep(:where(p, ul, ol, blockquote, pre, figure):where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 1rem 0;
   }
 
   /* A new section or wide block starts below a floated image. */
-  .op-feature-prose :deep(:where(h1, h2, h3, h4, h5, h6, figure, table, pre)) {
+  .op-feature-prose :deep(:where(h1, h2, h3, h4, h5, h6, figure, table, pre):where(:not([data-product-id] *, [data-product-ids] *))) {
     clear: both;
   }
 
-  .op-feature-prose :deep(:where(h1, h2, h3, h4, h5, h6)) {
+  .op-feature-prose :deep(: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;
   }
 
-  .op-feature-prose :deep(h1) {
+  .op-feature-prose :deep(h1:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1.875rem;
   }
 
-  .op-feature-prose :deep(h2) {
+  .op-feature-prose :deep(h2:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1.5rem;
   }
 
-  .op-feature-prose :deep(h3) {
+  .op-feature-prose :deep(h3:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1.25rem;
   }
 
-  .op-feature-prose :deep(h4) {
+  .op-feature-prose :deep(h4:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1.125rem;
   }
 
-  .op-feature-prose :deep(h5) {
+  .op-feature-prose :deep(h5:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1rem;
   }
 
-  .op-feature-prose :deep(h6) {
+  .op-feature-prose :deep(h6:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }
 
-  .op-feature-prose :deep(:where(strong, b)) {
+  .op-feature-prose :deep(:where(strong, b):where(:not([data-product-id] *, [data-product-ids] *))) {
     font-weight: 500;
   }
 
-  .op-feature-prose :deep(:where(sub, sup)) {
+  .op-feature-prose :deep(:where(sub, sup):where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 0.75em;
     line-height: 0;
   }
 
-  .op-feature-prose :deep(mark) {
+  .op-feature-prose :deep(mark:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: inherit;
     background: var(--orionplace-attention-surface);
   }
 
-  .op-feature-prose :deep(a) {
+  .op-feature-prose :deep(a:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: var(--orionplace-text);
     text-decoration: none;
     border-bottom: 1px solid currentColor;
   }
 
-  .op-feature-prose :deep(a:not([href])) {
+  .op-feature-prose :deep(a:not([href]):where(:not([data-product-id] *, [data-product-ids] *))) {
     border-bottom: 0;
   }
 
-  .op-feature-prose :deep(a:focus-visible) {
+  .op-feature-prose :deep(a:focus-visible:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: var(--orionplace-accent);
     outline: none;
   }
 
   @media (hover: hover) {
-    .op-feature-prose :deep(a:hover) {
+    .op-feature-prose :deep(a:hover:where(:not([data-product-id] *, [data-product-ids] *))) {
       color: var(--orionplace-accent);
       outline: none;
     }
   }
 
-  .op-feature-prose :deep(:where(ul, ol)) {
+  .op-feature-prose :deep(:where(ul, ol):where(:not([data-product-id] *, [data-product-ids] *))) {
     padding-left: 1.5rem;
   }
 
-  .op-feature-prose :deep(ul) {
+  .op-feature-prose :deep(ul:where(:not([data-product-id] *, [data-product-ids] *))) {
     list-style: disc;
   }
 
-  .op-feature-prose :deep(ol) {
+  .op-feature-prose :deep(ol:where(:not([data-product-id] *, [data-product-ids] *))) {
     list-style: decimal;
   }
 
-  .op-feature-prose :deep(li > :where(ul, ol)) {
+  .op-feature-prose :deep(li > :where(ul, ol):where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 0.25rem 0;
   }
 
-  .op-feature-prose :deep(li > p) {
+  .op-feature-prose :deep(li > p:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 0;
   }
 
-  .op-feature-prose :deep(ul[data-type='taskList']) {
+  .op-feature-prose :deep(ul[data-type='taskList']:where(:not([data-product-id] *, [data-product-ids] *))) {
     list-style: none;
     padding-left: 0;
   }
 
-  .op-feature-prose :deep(li[data-type='taskItem']) {
+  .op-feature-prose :deep(li[data-type='taskItem']:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: flex;
     align-items: flex-start;
     gap: 0.5rem;
   }
 
-  .op-feature-prose :deep(li[data-type='taskItem'] > label) {
+  .op-feature-prose :deep(li[data-type='taskItem'] > label:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: flex;
     align-items: center;
     min-height: 1.85em;
   }
 
-  .op-feature-prose :deep(li[data-type='taskItem'] > div > p) {
+  .op-feature-prose :deep(li[data-type='taskItem'] > div > p:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 0;
   }
 
-  .op-feature-prose :deep(blockquote) {
+  .op-feature-prose :deep(blockquote:where(:not([data-product-id] *, [data-product-ids] *))) {
     border-left: 2px solid var(--orionplace-border);
     padding-left: 1rem;
     color: var(--orionplace-muted);
   }
 
-  .op-feature-prose :deep(hr) {
+  .op-feature-prose :deep(hr:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 2rem 0;
     border: 0;
     border-top: 1px solid var(--orionplace-border);
   }
 
-  .op-feature-prose :deep(code) {
+  .op-feature-prose :deep(code:where(:not([data-product-id] *, [data-product-ids] *))) {
     padding: 0.1em 0.3em;
     font-size: 0.875em;
     background: var(--orionplace-muted-surface);
   }
 
-  .op-feature-prose :deep(pre) {
+  .op-feature-prose :deep(pre:where(:not([data-product-id] *, [data-product-ids] *))) {
     overflow-x: auto;
     padding: 1rem;
     line-height: 1.6;
@@ -699,13 +798,13 @@
     background: var(--orionplace-muted-surface);
   }
 
-  .op-feature-prose :deep(pre code) {
+  .op-feature-prose :deep(pre code:where(:not([data-product-id] *, [data-product-ids] *))) {
     padding: 0;
     background: transparent;
   }
 
   /* A wide table scrolls inside the article instead of widening the page. */
-  .op-feature-prose :deep(table) {
+  .op-feature-prose :deep(table:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: block;
     max-width: 100%;
     overflow-x: auto;
@@ -713,7 +812,7 @@
     border-collapse: collapse;
   }
 
-  .op-feature-prose :deep(:where(th, td)) {
+  .op-feature-prose :deep(:where(th, td):where(:not([data-product-id] *, [data-product-ids] *))) {
     min-width: 6rem;
     padding: 0.5rem 0.75rem;
     vertical-align: top;
@@ -721,46 +820,46 @@
     border: 1px solid var(--orionplace-border);
   }
 
-  .op-feature-prose :deep(th) {
+  .op-feature-prose :deep(th:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-weight: 500;
     background: var(--orionplace-muted-surface);
   }
 
-  .op-feature-prose :deep(caption) {
+  .op-feature-prose :deep(caption:where(:not([data-product-id] *, [data-product-ids] *))) {
     padding: 0.5rem 0;
     color: var(--orionplace-muted);
     text-align: left;
   }
 
-  .op-feature-prose :deep([data-text-align='center']) {
+  .op-feature-prose :deep([data-text-align='center']:where(:not([data-product-id] *, [data-product-ids] *))) {
     text-align: center;
   }
 
-  .op-feature-prose :deep([data-text-align='right']) {
+  .op-feature-prose :deep([data-text-align='right']:where(:not([data-product-id] *, [data-product-ids] *))) {
     text-align: right;
   }
 
-  .op-feature-prose :deep([data-vertical-align='middle']) {
+  .op-feature-prose :deep([data-vertical-align='middle']:where(:not([data-product-id] *, [data-product-ids] *))) {
     vertical-align: middle;
   }
 
-  .op-feature-prose :deep([data-vertical-align='bottom']) {
+  .op-feature-prose :deep([data-vertical-align='bottom']:where(:not([data-product-id] *, [data-product-ids] *))) {
     vertical-align: bottom;
   }
 
   /* Images that open in the viewer. */
   [data-blog-article-cover][data-blog-image-viewer],
-  .op-feature-prose :deep(img[data-blog-image-viewer]) {
+  .op-feature-prose :deep(img[data-blog-image-viewer]:where(:not([data-product-id] *, [data-product-ids] *))) {
     cursor: zoom-in;
   }
 
   [data-blog-article-cover][data-blog-image-viewer]:focus-visible,
-  .op-feature-prose :deep(img[data-blog-image-viewer]:focus-visible) {
+  .op-feature-prose :deep(img[data-blog-image-viewer]:focus-visible:where(:not([data-product-id] *, [data-product-ids] *))) {
     outline: 2px solid var(--orionplace-accent);
     outline-offset: 3px;
   }
 
-  .op-feature-prose :deep(:where(img, video)) {
+  .op-feature-prose :deep(:where(img, video):where(:not([data-product-id] *, [data-product-ids] *))) {
     display: block;
     max-width: 100%;
     height: auto;
@@ -770,31 +869,31 @@
   /* 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) {
-    .op-feature-prose :deep(:where(img, video)[style*='float']) {
+    .op-feature-prose :deep(:where(img, video)[style*='float']:where(:not([data-product-id] *, [data-product-ids] *))) {
       float: none !important;
       margin: 1rem auto !important;
     }
   }
 
-  .op-feature-prose :deep(audio) {
+  .op-feature-prose :deep(audio:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: block;
     width: 100%;
   }
 
-  .op-feature-prose :deep(figcaption) {
+  .op-feature-prose :deep(figcaption:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin-top: 0.5rem;
     font-size: 0.875rem;
     color: var(--orionplace-muted);
   }
 
-  .op-feature-prose :deep(.blog-image-gallery__track) {
+  .op-feature-prose :deep(.blog-image-gallery__track:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: flex;
     gap: 0.5rem;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
   }
 
-  .op-feature-prose :deep(.blog-image-gallery__track img) {
+  .op-feature-prose :deep(.blog-image-gallery__track img:where(:not([data-product-id] *, [data-product-ids] *))) {
     flex: 0 0 auto;
     width: auto;
     max-width: min(80%, 32rem);
@@ -803,104 +902,122 @@
     scroll-snap-align: start;
   }
 
-  .op-feature-prose :deep(details) {
+  .op-feature-prose :deep(details:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 1rem 0;
     padding: 0.75rem 1rem;
     border: 1px solid var(--orionplace-border);
   }
 
-  .op-feature-prose :deep(summary) {
+  .op-feature-prose :deep(summary:where(:not([data-product-id] *, [data-product-ids] *))) {
     cursor: pointer;
   }
 
-  .op-feature-prose :deep([data-type='math-inline']),
-  .op-feature-prose :deep([data-type='math-block']) {
+  .op-feature-prose :deep([data-type='math-inline']:where(:not([data-product-id] *, [data-product-ids] *))),
+  .op-feature-prose :deep([data-type='math-block']:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-family: ui-monospace, monospace;
     font-size: 0.9em;
   }
 
-  .op-feature-prose :deep([data-type='math-block']) {
+  .op-feature-prose :deep([data-type='math-block']:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: block;
     margin: 1rem 0;
     overflow-x: auto;
     text-align: center;
   }
 
-  /* Product placements from the editor have no content in the text. */
+  /* Product placements: cards fill them; one without its products stays hidden. */
   .op-feature-prose :deep(:where([data-product-id], [data-product-ids]):empty) {
     display: none;
   }
 
+  .op-feature-prose :deep([data-product-ids]) {
+    clear: both;
+    margin: 1.5rem 0;
+  }
+
+  .op-feature-prose :deep([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) {
+    .op-feature-prose :deep([data-product-id]:not([data-product-ids])) {
+      float: none !important;
+      margin-inline: auto !important;
+    }
+  }
+
   /* The editor's named colors, mixed with the theme text for contrast. */
-  .op-feature-prose :deep([data-text-color='gray']) {
+  .op-feature-prose :deep([data-text-color='gray']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, gray 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='gray']) {
+  .op-feature-prose :deep([data-bg-color='gray']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, gray 18%, transparent);
   }
 
-  .op-feature-prose :deep([data-text-color='brown']) {
+  .op-feature-prose :deep([data-text-color='brown']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, brown 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='brown']) {
+  .op-feature-prose :deep([data-bg-color='brown']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, brown 18%, transparent);
   }
 
-  .op-feature-prose :deep([data-text-color='orange']) {
+  .op-feature-prose :deep([data-text-color='orange']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, orange 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='orange']) {
+  .op-feature-prose :deep([data-bg-color='orange']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, orange 18%, transparent);
   }
 
-  .op-feature-prose :deep([data-text-color='yellow']) {
+  .op-feature-prose :deep([data-text-color='yellow']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, yellow 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='yellow']) {
+  .op-feature-prose :deep([data-bg-color='yellow']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, yellow 18%, transparent);
   }
 
-  .op-feature-prose :deep([data-text-color='green']) {
+  .op-feature-prose :deep([data-text-color='green']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, green 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='green']) {
+  .op-feature-prose :deep([data-bg-color='green']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, green 18%, transparent);
   }
 
-  .op-feature-prose :deep([data-text-color='blue']) {
+  .op-feature-prose :deep([data-text-color='blue']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, blue 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='blue']) {
+  .op-feature-prose :deep([data-bg-color='blue']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, blue 18%, transparent);
   }
 
-  .op-feature-prose :deep([data-text-color='purple']) {
+  .op-feature-prose :deep([data-text-color='purple']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, purple 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='purple']) {
+  .op-feature-prose :deep([data-bg-color='purple']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, purple 18%, transparent);
   }
 
-  .op-feature-prose :deep([data-text-color='pink']) {
+  .op-feature-prose :deep([data-text-color='pink']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, pink 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='pink']) {
+  .op-feature-prose :deep([data-bg-color='pink']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, pink 18%, transparent);
   }
 
-  .op-feature-prose :deep([data-text-color='red']) {
+  .op-feature-prose :deep([data-text-color='red']:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: color-mix(in srgb, red 70%, var(--orionplace-text));
   }
 
-  .op-feature-prose :deep([data-bg-color='red']) {
+  .op-feature-prose :deep([data-bg-color='red']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, red 18%, transparent);
   }
 </style>

package/templates/app/components/orionplace/products/ProductCard.vue

@@ -118,6 +118,9 @@
         :product-id="displayedProductId"
         :collection="collection"
         low-stock-label=""
+        :new-label="hiddenBadgeLabel('new')"
+        :popular-label="hiddenBadgeLabel('popular')"
+        :deal-label="hiddenBadgeLabel('deal')"
         class="pointer-events-none absolute"
       />
       <ProductCardActions
@@ -208,6 +211,9 @@
       :product-id="displayedProductId"
       :collection="collection"
       low-stock-label=""
+      :new-label="hiddenBadgeLabel('new')"
+      :popular-label="hiddenBadgeLabel('popular')"
+      :deal-label="hiddenBadgeLabel('deal')"
     />
     <ProductCardPrice
       data-product-part="ProductCardPrice"
@@ -359,6 +365,7 @@
   const card               = ref<HTMLElement>();
   const { minHeight }      = useOrionplaceStableHeight(card);
 
+  // hiddenBadges: badge keys not to show on this card (new / popular / deal).
   const props              = withDefaults(
     defineProps<{
       productId: number;
@@ -369,6 +376,7 @@
       actionsDisabled?: boolean;
       purchaseActions?: boolean;
       variantProductIds?: number[];
+      hiddenBadges?: string[];
     }>(),
     {
       collection: 'products',
@@ -377,9 +385,15 @@
       disabled: false,
       actionsDisabled: false,
       purchaseActions: true,
+      hiddenBadges: () => [],
     },
   );
 
+  // An empty label hides the badge; undefined keeps the locale's label.
+  function hiddenBadgeLabel(key: string) {
+    return props.hiddenBadges.includes(key) ? '' : undefined;
+  }
+
   const store          = useOrionplaceStore();
   const productStore   = useOrionplaceProductsStore();
   const selectionStore = useOrionplaceSelectionsStore();

package/templates/app/components/orionplace/products/ProductGroup.vue

@@ -20,6 +20,7 @@
         :product-id="product.id"
         :collection="collection"
         :disabled="disabled"
+        :hidden-badges="hiddenBadges"
         @select="emit('select', $event)"
         @select-seller="emit('selectSeller', $event)"
         @select-variant="emit('selectVariant', $event)"
@@ -120,8 +121,9 @@
       limit?: number;
       productIds?: number[];
       layout?: 'responsive' | 'grid';
+      hiddenBadges?: string[];
     }>(),
-    { collection: 'products', disabled: false, limit: 0, layout: 'responsive' },
+    { collection: 'products', disabled: false, limit: 0, layout: 'responsive', hiddenBadges: () => [] },
   );
 
   const store          = useOrionplaceStore();

package/templates/app/composables/useOrionplacePageSeo.ts

@@ -8,6 +8,7 @@ import {
   storefrontPublicOrigin,
 } from '@/utils/orionplace/pageSeo';
 import type { StorefrontSeoPage } from '@/utils/orionplace/pageSeo';
+import { structuredDataJson } from '@/utils/orionplace/productStructuredData';
 
 export function useOrionplacePageSeo(
   page: MaybeRefOrGetter<StorefrontSeoPage>,
@@ -18,6 +19,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;
   } = {},
 ) {
   const route     = useRoute();
@@ -57,11 +64,26 @@ 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
         ? [{ key: 'canonical', rel: 'canonical', href: canonical.value }]
         : [],
+    script: () =>
+      structured.value
+        ? [
+            {
+              key: 'orionplace-structured-data',
+              type: 'application/ld+json',
+              innerHTML: structured.value,
+            },
+          ]
+        : [],
   });
 }

package/templates/app/pages/product/[id].vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
   import { useOrionplaceStore } from '@/stores/orionplace';
   import { computed, ref, watch } from 'vue';
-  import { navigateTo, useRoute } from '#imports';
+  import { navigateTo, useRoute, useState } from '#imports';
   import { useOrionplacePageSeo } from '@/composables/useOrionplacePageSeo';
   import { useOrionplaceMissingPage } from '@/composables/useOrionplaceMissingPage';
   import { useOrionplaceServerData } from '@/composables/useOrionplaceServerData';
   import { requestProductPage } from '@/utils/orionplace/productPage';
+  import { storefrontAbsoluteUrl } from '@/utils/orionplace/pageSeo';
+  import {
+    shippingCountryCodes,
+    storefrontProductStructuredData,
+  } from '@/utils/orionplace/productStructuredData';
   import {
     getAvailableNestedValueFromObject,
     plainText,
@@ -66,29 +71,52 @@
     return images?.full?.[0] ?? images?.small?.[0];
   });
 
-  useOrionplacePageSeo('product', () => store.localeCode, {
-    title: () =>
+  // ORIONPLACE_SHIPPING_COUNTRIES from the server's .env, for the return
+  // terms in the page's schema.org data; the browser reuses the value.
+  const shippingCountries = useState('orionplace:shipping-countries', () =>
+    shippingCountryCodes(
+      import.meta.server ? process.env.ORIONPLACE_SHIPPING_COUNTRIES : '',
+    ),
+  );
+  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,
+        shippingCountries: shippingCountries.value,
+        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,

package/templates/app/utils/orionplace/blogArticleHtml.ts

@@ -45,7 +45,7 @@ const attributes                    = [
   'data-text-align', 'data-vertical-align', 'data-colwidth',
   'data-code-scheme', 'data-gallery-width', 'data-list-offset',
   'data-float', 'data-blog-video', 'data-details-content',
-  'data-product-id', 'data-product-ids',
+  'data-product-id', 'data-product-ids', 'data-product-hidden-badges',
 ];
 
 const marginLength                  = '(-?\\d+(\\.\\d+)?(px|em|rem|%)?|auto)';

package/templates/app/utils/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/app/utils/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');
+}