orionplace-nuxt 0.6.0 → 0.6.2

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/catalog/StorefrontCatalog.vue

@@ -157,7 +157,7 @@
           :disabled="isPending"
           @click="openBranch(item.id)"
         >
-          {{ labels.categories }} →
+          {{ labels.categories }} <span aria-hidden="true">→</span>
         </button>
         <NuxtLink
           class="op-feature-link op-feature-button op-feature-primary px-3!"
@@ -166,7 +166,7 @@
             query: { locale: selectionStore.localeCode },
           }"
         >
-          {{ labels.products }} →
+          {{ labels.products }} <span aria-hidden="true">→</span>
         </NuxtLink>
       </li>
     </ul>

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();