orionplace-svelte 0.6.1 → 0.6.2

package/package.json

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

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

@@ -8,6 +8,8 @@ Article videos may come as the backend's own paths (`/ps3/...`). In an Android a
 
 The cover and the images of the text open larger: a click, Enter or Space on one opens `ProductReviewImageViewer` at that image, with the article's other images a step away and each image's caption (its `figcaption`, else its `title`, else its `alt`) under it. The images get `role="button"`, a keyboard stop and an «Open image» name; a zoom-in cursor marks them. Images inside a link, a button or a product placement keep their own action. The helper is `src/lib/utils/orionplace/blogImageViewer.ts`.
 
+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 `src/lib/utils/orionplace/blogProductPlacements.ts`.
+
 Source: `src/lib/components/orionplace/blog/BlogArticle.svelte`.
 
 ## Inputs

package/templates/src/lib/components/orionplace/blog/BlogArticle.svelte

@@ -5,6 +5,7 @@
     nextTick,
     onMounted,
     ref,
+    shallowRef,
     watch,
   } from '@/lib/orionplace/reactivity.svelte';
   import { useOrionplaceStore } from '@/lib/stores/orionplace.svelte';
@@ -28,6 +29,13 @@
   import { htmlTextParagraphs } from '@/lib/utils/orionplace/htmlText';
   import { APP_ORIGIN, appMediaUrl } from '@/lib/utils/orionplace/nativeApp';
   import { requestBlogPost } from '@/lib/utils/orionplace/blogLayout';
+  import {
+    blogPlacementProductIds,
+    blogPlacementRequests,
+    blogProductPlacements,
+  } from '@/lib/utils/orionplace/blogProductPlacements';
+  import type { IBlogProductPlacement } from '@/lib/utils/orionplace/blogProductPlacements';
+  import type { IProductSearchSeller } from '@/lib/interfaces/orionplace/products/IProduct';
   import type { IBlogPost } from '@/lib/interfaces/orionplace/blog/IBlogApi';
   import type { IProductSecondaryVariantRequest } from '@/lib/interfaces/orionplace/products/IProductSecondaryVariantRequest';
   import type {
@@ -38,6 +46,7 @@
   } from '@/lib/interfaces/orionplace/products/IProduct';
   import BlogComments from '@/lib/components/orionplace/blog/BlogComments.svelte';
   import ProductGroup from '@/lib/components/orionplace/products/ProductGroup.svelte';
+  import ProductCard from '@/lib/components/orionplace/products/ProductCard.svelte';
   import '@/lib/components/orionplace/shared/features.css';
   import OrionplaceEmptyState from '@/lib/components/orionplace/shared/OrionplaceEmptyState.svelte';
   import ProductReviewImageViewer from '@/lib/components/orionplace/products/ProductReviewImageViewer.svelte';
@@ -153,6 +162,8 @@
   const accessChanged  = ref(false);
   const coverFailed    = ref(false);
   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));
@@ -300,6 +311,57 @@
     wasShown.value = true;
     showProducts(inputs.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.
+      }
+    }
+  }
+
+  watch(
+    [() => html.value, () => mounted.value, () => post.value?.id],
+    () => {
+      void nextTick(() => {
+        placements.value = mounted.value ? blogProductPlacements(article.value) : [];
+        void loadPlacementProducts(blogPlacementProductIds(placements.value));
+      });
+    },
+    { immediate: true },
+  );
+
+  // Moves the cards into their placement block in the article text.
+  function portal(node: HTMLElement, target: HTMLElement) {
+    target.append(node);
+    return {
+      update(next: HTMLElement) {
+        next.append(node);
+      },
+      destroy() {
+        node.remove();
+      },
+    };
+  }
+
   function openableImages() {
     return blogViewerImages([coverImage.value, article.value]);
   }
@@ -473,6 +535,94 @@
           {/each}
         </div>
       {/if}
+      {#each placements.value as placement, index (index)}
+        {#if placementShown(placement)}
+          <div
+            use:portal={placement.element}
+            data-blog-placement={placement.layout}
+          >
+            {#if placement.layout === 'single'}
+              <ProductCard
+                productId={placement.productIds[0]!}
+                hiddenBadges={placement.hiddenBadges}
+                disabled={inputs.productActionsDisabled}
+                onSelect={($event) => {
+                  emit('selectProduct', $event);
+                }}
+                onSelectSeller={($event) => {
+                  emit('selectSeller', $event);
+                }}
+                onSelectVariant={($event) => {
+                  emit('selectVariant', $event);
+                }}
+                onRequestSecondaryVariants={($event) => {
+                  emit('requestSecondaryVariants', $event);
+                }}
+                onSelectSecondaryVariant={($event) => {
+                  emit('selectSecondaryVariant', $event);
+                }}
+                onToggleFavorite={($event) => {
+                  emit('toggleFavorite', $event);
+                }}
+                onAdd={($event) => {
+                  emit('add', $event);
+                }}
+                onRemove={($event) => {
+                  emit('remove', $event);
+                }}
+                onSubscribe={($event) => {
+                  emit('subscribe', $event);
+                }}
+                onUnsubscribe={($event) => {
+                  emit('unsubscribe', $event);
+                }}
+                onPreorder={($event) => {
+                  emit('preorder', $event);
+                }}
+              />
+            {:else}
+              <ProductGroup
+                productIds={placement.productIds}
+                hiddenBadges={placement.hiddenBadges}
+                disabled={inputs.productActionsDisabled}
+                onSelect={($event) => {
+                  emit('selectProduct', $event);
+                }}
+                onSelectSeller={($event) => {
+                  emit('selectSeller', $event);
+                }}
+                onSelectVariant={($event) => {
+                  emit('selectVariant', $event);
+                }}
+                onRequestSecondaryVariants={($event) => {
+                  emit('requestSecondaryVariants', $event);
+                }}
+                onSelectSecondaryVariant={($event) => {
+                  emit('selectSecondaryVariant', $event);
+                }}
+                onToggleFavorite={($event) => {
+                  emit('toggleFavorite', $event);
+                }}
+                onAdd={($event) => {
+                  emit('add', $event);
+                }}
+                onRemove={($event) => {
+                  emit('remove', $event);
+                }}
+                onSubscribe={($event) => {
+                  emit('subscribe', $event);
+                }}
+                onUnsubscribe={($event) => {
+                  emit('unsubscribe', $event);
+                }}
+                onPreorder={($event) => {
+                  emit('preorder', $event);
+                }}
+              />
+            {/if}
+          </div>
+        {/if}
+      {/each}
 
       {#if !full.value}
         <div
@@ -670,144 +820,145 @@
     clear: both;
   }
 
-  .op-feature-prose :global(: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 :global(: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
-    :global(:where(h1, h2, h3, h4, h5, h6, figure, table, pre)) {
+    :global(:where(h1, h2, h3, h4, h5, h6, figure, table, pre):where(:not([data-product-id] *, [data-product-ids] *))) {
     clear: both;
   }
 
-  .op-feature-prose :global(:where(h1, h2, h3, h4, h5, h6)) {
+  .op-feature-prose :global(: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 :global(h1) {
+  .op-feature-prose :global(h1:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1.875rem;
   }
 
-  .op-feature-prose :global(h2) {
+  .op-feature-prose :global(h2:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1.5rem;
   }
 
-  .op-feature-prose :global(h3) {
+  .op-feature-prose :global(h3:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1.25rem;
   }
 
-  .op-feature-prose :global(h4) {
+  .op-feature-prose :global(h4:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1.125rem;
   }
 
-  .op-feature-prose :global(h5) {
+  .op-feature-prose :global(h5:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 1rem;
   }
 
-  .op-feature-prose :global(h6) {
+  .op-feature-prose :global(h6:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }
 
-  .op-feature-prose :global(:where(strong, b)) {
+  .op-feature-prose :global(:where(strong, b):where(:not([data-product-id] *, [data-product-ids] *))) {
     font-weight: 500;
   }
 
-  .op-feature-prose :global(:where(sub, sup)) {
+  .op-feature-prose :global(:where(sub, sup):where(:not([data-product-id] *, [data-product-ids] *))) {
     font-size: 0.75em;
     line-height: 0;
   }
 
-  .op-feature-prose :global(mark) {
+  .op-feature-prose :global(mark:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: inherit;
     background: var(--orionplace-attention-surface);
   }
 
-  .op-feature-prose :global(a) {
+  .op-feature-prose :global(a:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: var(--orionplace-text);
     text-decoration: none;
     border-bottom: 1px solid currentColor;
   }
 
-  .op-feature-prose :global(a:not([href])) {
+  .op-feature-prose :global(a:not([href]):where(:not([data-product-id] *, [data-product-ids] *))) {
     border-bottom: 0;
   }
 
-  .op-feature-prose :global(a:focus-visible) {
+  .op-feature-prose :global(a:focus-visible:where(:not([data-product-id] *, [data-product-ids] *))) {
     color: var(--orionplace-accent);
     outline: none;
   }
 
   @media (hover: hover) {
-    .op-feature-prose :global(a:hover) {
+    .op-feature-prose :global(a:hover:where(:not([data-product-id] *, [data-product-ids] *))) {
       color: var(--orionplace-accent);
       outline: none;
     }
   }
 
-  .op-feature-prose :global(:where(ul, ol)) {
+  .op-feature-prose :global(:where(ul, ol):where(:not([data-product-id] *, [data-product-ids] *))) {
     padding-left: 1.5rem;
   }
 
-  .op-feature-prose :global(ul) {
+  .op-feature-prose :global(ul:where(:not([data-product-id] *, [data-product-ids] *))) {
     list-style: disc;
   }
 
-  .op-feature-prose :global(ol) {
+  .op-feature-prose :global(ol:where(:not([data-product-id] *, [data-product-ids] *))) {
     list-style: decimal;
   }
 
-  .op-feature-prose :global(li > :where(ul, ol)) {
+  .op-feature-prose :global(li > :where(ul, ol):where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 0.25rem 0;
   }
 
-  .op-feature-prose :global(li > p) {
+  .op-feature-prose :global(li > p:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 0;
   }
 
-  .op-feature-prose :global(ul[data-type='taskList']) {
+  .op-feature-prose :global(ul[data-type='taskList']:where(:not([data-product-id] *, [data-product-ids] *))) {
     list-style: none;
     padding-left: 0;
   }
 
-  .op-feature-prose :global(li[data-type='taskItem']) {
+  .op-feature-prose :global(li[data-type='taskItem']:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: flex;
     align-items: flex-start;
     gap: 0.5rem;
   }
 
-  .op-feature-prose :global(li[data-type='taskItem'] > label) {
+  .op-feature-prose :global(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 :global(li[data-type='taskItem'] > div > p) {
+  .op-feature-prose :global(li[data-type='taskItem'] > div > p:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 0;
   }
 
-  .op-feature-prose :global(blockquote) {
+  .op-feature-prose :global(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 :global(hr) {
+  .op-feature-prose :global(hr:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin: 2rem 0;
     border: 0;
     border-top: 1px solid var(--orionplace-border);
   }
 
-  .op-feature-prose :global(code) {
+  .op-feature-prose :global(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 :global(pre) {
+  .op-feature-prose :global(pre:where(:not([data-product-id] *, [data-product-ids] *))) {
     overflow-x: auto;
     padding: 1rem;
     line-height: 1.6;
@@ -815,13 +966,13 @@
     background: var(--orionplace-muted-surface);
   }
 
-  .op-feature-prose :global(pre code) {
+  .op-feature-prose :global(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 :global(table) {
+  .op-feature-prose :global(table:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: block;
     max-width: 100%;
     overflow-x: auto;
@@ -829,7 +980,7 @@
     border-collapse: collapse;
   }
 
-  .op-feature-prose :global(:where(th, td)) {
+  .op-feature-prose :global(:where(th, td):where(:not([data-product-id] *, [data-product-ids] *))) {
     min-width: 6rem;
     padding: 0.5rem 0.75rem;
     vertical-align: top;
@@ -837,46 +988,46 @@
     border: 1px solid var(--orionplace-border);
   }
 
-  .op-feature-prose :global(th) {
+  .op-feature-prose :global(th:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-weight: 500;
     background: var(--orionplace-muted-surface);
   }
 
-  .op-feature-prose :global(caption) {
+  .op-feature-prose :global(caption:where(:not([data-product-id] *, [data-product-ids] *))) {
     padding: 0.5rem 0;
     color: var(--orionplace-muted);
     text-align: left;
   }
 
-  .op-feature-prose :global([data-text-align='center']) {
+  .op-feature-prose :global([data-text-align='center']:where(:not([data-product-id] *, [data-product-ids] *))) {
     text-align: center;
   }
 
-  .op-feature-prose :global([data-text-align='right']) {
+  .op-feature-prose :global([data-text-align='right']:where(:not([data-product-id] *, [data-product-ids] *))) {
     text-align: right;
   }
 
-  .op-feature-prose :global([data-vertical-align='middle']) {
+  .op-feature-prose :global([data-vertical-align='middle']:where(:not([data-product-id] *, [data-product-ids] *))) {
     vertical-align: middle;
   }
 
-  .op-feature-prose :global([data-vertical-align='bottom']) {
+  .op-feature-prose :global([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 :global(img[data-blog-image-viewer]) {
+  .op-feature-prose :global(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 :global(img[data-blog-image-viewer]:focus-visible) {
+  .op-feature-prose :global(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 :global(:where(img, video)) {
+  .op-feature-prose :global(:where(img, video):where(:not([data-product-id] *, [data-product-ids] *))) {
     display: block;
     max-width: 100%;
     height: auto;
@@ -886,31 +1037,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 :global(:where(img, video)[style*='float']) {
+    .op-feature-prose :global(:where(img, video)[style*='float']:where(:not([data-product-id] *, [data-product-ids] *))) {
       float: none !important;
       margin: 1rem auto !important;
     }
   }
 
-  .op-feature-prose :global(audio) {
+  .op-feature-prose :global(audio:where(:not([data-product-id] *, [data-product-ids] *))) {
     display: block;
     width: 100%;
   }
 
-  .op-feature-prose :global(figcaption) {
+  .op-feature-prose :global(figcaption:where(:not([data-product-id] *, [data-product-ids] *))) {
     margin-top: 0.5rem;
     font-size: 0.875rem;
     color: var(--orionplace-muted);
   }
 
-  .op-feature-prose :global(.blog-image-gallery__track) {
+  .op-feature-prose :global(.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 :global(.blog-image-gallery__track img) {
+  .op-feature-prose :global(.blog-image-gallery__track img:where(:not([data-product-id] *, [data-product-ids] *))) {
     flex: 0 0 auto;
     width: auto;
     max-width: min(80%, 32rem);
@@ -919,105 +1070,123 @@
     scroll-snap-align: start;
   }
 
-  .op-feature-prose :global(details) {
+  .op-feature-prose :global(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 :global(summary) {
+  .op-feature-prose :global(summary:where(:not([data-product-id] *, [data-product-ids] *))) {
     cursor: pointer;
   }
 
-  .op-feature-prose :global([data-type='math-inline']),
-  .op-feature-prose :global([data-type='math-block']) {
+  .op-feature-prose :global([data-type='math-inline']:where(:not([data-product-id] *, [data-product-ids] *))),
+  .op-feature-prose :global([data-type='math-block']:where(:not([data-product-id] *, [data-product-ids] *))) {
     font-family: ui-monospace, monospace;
     font-size: 0.9em;
   }
 
-  .op-feature-prose :global([data-type='math-block']) {
+  .op-feature-prose :global([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
     :global(:where([data-product-id], [data-product-ids]):empty) {
     display: none;
   }
 
+  .op-feature-prose :global([data-product-ids]) {
+    clear: both;
+    margin: 1.5rem 0;
+  }
+
+  .op-feature-prose :global([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 :global([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 :global([data-text-color='gray']) {
+  .op-feature-prose :global([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 :global([data-bg-color='gray']) {
+  .op-feature-prose :global([data-bg-color='gray']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, gray 18%, transparent);
   }
 
-  .op-feature-prose :global([data-text-color='brown']) {
+  .op-feature-prose :global([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 :global([data-bg-color='brown']) {
+  .op-feature-prose :global([data-bg-color='brown']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, brown 18%, transparent);
   }
 
-  .op-feature-prose :global([data-text-color='orange']) {
+  .op-feature-prose :global([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 :global([data-bg-color='orange']) {
+  .op-feature-prose :global([data-bg-color='orange']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, orange 18%, transparent);
   }
 
-  .op-feature-prose :global([data-text-color='yellow']) {
+  .op-feature-prose :global([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 :global([data-bg-color='yellow']) {
+  .op-feature-prose :global([data-bg-color='yellow']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, yellow 18%, transparent);
   }
 
-  .op-feature-prose :global([data-text-color='green']) {
+  .op-feature-prose :global([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 :global([data-bg-color='green']) {
+  .op-feature-prose :global([data-bg-color='green']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, green 18%, transparent);
   }
 
-  .op-feature-prose :global([data-text-color='blue']) {
+  .op-feature-prose :global([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 :global([data-bg-color='blue']) {
+  .op-feature-prose :global([data-bg-color='blue']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, blue 18%, transparent);
   }
 
-  .op-feature-prose :global([data-text-color='purple']) {
+  .op-feature-prose :global([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 :global([data-bg-color='purple']) {
+  .op-feature-prose :global([data-bg-color='purple']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, purple 18%, transparent);
   }
 
-  .op-feature-prose :global([data-text-color='pink']) {
+  .op-feature-prose :global([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 :global([data-bg-color='pink']) {
+  .op-feature-prose :global([data-bg-color='pink']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, pink 18%, transparent);
   }
 
-  .op-feature-prose :global([data-text-color='red']) {
+  .op-feature-prose :global([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 :global([data-bg-color='red']) {
+  .op-feature-prose :global([data-bg-color='red']:where(:not([data-product-id] *, [data-product-ids] *))) {
     background: color-mix(in srgb, red 18%, transparent);
   }
 </style>

package/templates/src/lib/components/orionplace/products/ProductCard.svelte

@@ -52,6 +52,8 @@
     actionsDisabled?: boolean;
     purchaseActions?: boolean;
     variantProductIds?: number[];
+    // Badge keys not to show on this card (new / popular / deal).
+    hiddenBadges?: string[];
     onSelect?: (...args: [product: IProduct]) => unknown;
     onSelectSeller?: (...args: [seller: IProductSeller]) => unknown;
     onToggleFavorite?: (
@@ -88,6 +90,7 @@
     actionsDisabled: input_actionsDisabled = false,
     purchaseActions: input_purchaseActions = true,
     variantProductIds: input_variantProductIds,
+    hiddenBadges: input_hiddenBadges = [],
     onSelect: callback_onSelect,
     onSelectSeller: callback_onSelectSeller,
     onToggleFavorite: callback_onToggleFavorite,
@@ -128,6 +131,9 @@
     get variantProductIds() {
       return input_variantProductIds;
     },
+    get hiddenBadges() {
+      return input_hiddenBadges;
+    },
     get footer() {
       return snippet_footer;
     },
@@ -155,6 +161,11 @@
   const card               = ref<HTMLElement>();
   const { minHeight }      = useOrionplaceStableHeight(card);
 
+  // An empty label hides the badge; undefined keeps the locale's label.
+  function hiddenBadgeLabel(key: string) {
+    return inputs.hiddenBadges.includes(key) ? '' : undefined;
+  }
+
   const store              = useOrionplaceStore();
   const productStore       = useOrionplaceProductsStore();
   const selectionStore     = useOrionplaceSelectionsStore();
@@ -664,6 +675,9 @@
             productId={displayedProductId.value}
             collection={inputs.collection}
             lowStockLabel=""
+            newLabel={hiddenBadgeLabel('new')}
+            popularLabel={hiddenBadgeLabel('popular')}
+            dealLabel={hiddenBadgeLabel('deal')}
             class={['pointer-events-none absolute']}
           />
         {/if}
@@ -789,6 +803,9 @@
         productId={displayedProductId.value}
         collection={inputs.collection}
         lowStockLabel=""
+        newLabel={hiddenBadgeLabel('new')}
+        popularLabel={hiddenBadgeLabel('popular')}
+        dealLabel={hiddenBadgeLabel('deal')}
       />
     {/if}
     <ProductCardPrice

package/templates/src/lib/components/orionplace/products/ProductGroup.svelte

@@ -27,6 +27,7 @@
     limit?: number;
     productIds?: number[];
     layout?: 'responsive' | 'grid';
+    hiddenBadges?: string[];
     onSelect?: (...args: [product: IProduct]) => unknown;
     onSelectSeller?: (...args: [seller: IProductSeller]) => unknown;
     onRequestSecondaryVariants?: (
@@ -59,6 +60,7 @@
     limit: input_limit = 0,
     productIds: input_productIds,
     layout: input_layout = 'responsive',
+    hiddenBadges: input_hiddenBadges = [],
     onSelect: callback_onSelect,
     onSelectSeller: callback_onSelectSeller,
     onRequestSecondaryVariants: callback_onRequestSecondaryVariants,
@@ -89,6 +91,9 @@
     get layout() {
       return input_layout;
     },
+    get hiddenBadges() {
+      return input_hiddenBadges;
+    },
     get footer() {
       return snippet_footer;
     },
@@ -207,6 +212,7 @@
         productId={product.id}
         collection={inputs.collection}
         disabled={inputs.disabled}
+        hiddenBadges={inputs.hiddenBadges}
         onSelect={($event) => {
           emit('select', $event);
         }}

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

@@ -134,6 +134,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/src/lib/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;
+}