orionplace-react 0.7.3 → 0.7.4

package/README.md

@@ -515,6 +515,8 @@ client navigation and language selection. Home-page event clicks open enrollment
 for the returned event, preserving its return path through sign-in.
 Pages with a canonical address also link the same page in the other storefront languages (`hreflang`) and set `og:type` and `og:locale`; a journal article adds its publication date (`article:published_time`) and schema.org `BlogPosting` data. The store icon (`logos.ico`) is the page's `<link rel="icon">`. An unknown `?locale` opens the default language.
 
+List pages (journal, categories, stores) link their previous and next pages as real links (`?page=2`). Each later page has its own canonical address and a title with its page number; a journal page past the last one answers 404.
+
 `StorefrontShell` mounts the header, route content and footer after Application
 Load succeeds. If initialization fails, it shows `StorefrontErrorPage`; Retry
 runs an explicit refresh and remains disabled while that request is pending.

package/package.json

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

package/templates/app/_storefront/AppRoutes.tsx

@@ -32,6 +32,7 @@ import {
 } from '@/lib/orionplace/navigation';
 import { requestProductPage } from '@/lib/orionplace/productPage';
 import {
+  requestJournalPage,
   requestPromoProducts,
   requestPublication,
   requestTariffs,
@@ -121,6 +122,7 @@ export function AppRoutes() {
       publication: (id) => requestPublication(api, id),
       tariffs: (id) => requestTariffs(api, id),
       promoProducts: (id, page) => requestPromoProducts(api, id, page),
+      journalPage: (page, pageSize) => requestJournalPage(api, page, pageSize),
     }).then((route) => {
       if (!current) {
         return;

package/templates/app/_storefront/StorefrontPageMetadata.tsx

@@ -69,6 +69,49 @@ export function StorefrontPageMetadata(records: StorefrontPageRecords) {
         element.content = '';
       }
     }
+    // Canonical and hreflang links follow the address too (a later list
+    // page has its own). The server's links belong to Next.js, so they are
+    // updated in place; only links added here are ever removed.
+    const wanted   = new Map(
+      head.links.map((link) => [
+        'hreflang' in link ? `alternate:${link.hreflang}` : 'canonical',
+        link.href,
+      ]),
+    );
+    // Next.js's own links first, so they take the address and a copy
+    // added here earlier is the one removed.
+    const links    = [
+      ...document.head.querySelectorAll<HTMLLinkElement>(
+        'link[rel="canonical"], link[rel="alternate"][hreflang]',
+      ),
+    ].sort(
+      (left, right) =>
+        Number(Boolean(left.dataset.orionplaceLink)) -
+        Number(Boolean(right.dataset.orionplaceLink)),
+    );
+    for (const element of links) {
+      const key  = element.rel === 'canonical'
+        ? 'canonical'
+        : `alternate:${element.hreflang}`;
+      const href = wanted.get(key);
+      if (href) {
+        element.href = href;
+        wanted.delete(key);
+      } else if (element.dataset.orionplaceLink) {
+        element.remove();
+      }
+    }
+    for (const [key, href] of wanted) {
+      const element                  = document.createElement('link');
+      const [rel, hreflang]          = key.split(':');
+      element.rel                    = rel;
+      element.href                   = href;
+      element.dataset.orionplaceLink = key;
+      if (hreflang) {
+        element.hreflang = hreflang;
+      }
+      document.head.append(element);
+    }
   }, [pathname, query, locale, init, product, post, tariff, promo, search, errorKind]);
   return null;
 }

package/templates/app/_storefront/storefrontRoutes.tsx

@@ -49,6 +49,7 @@ import type { IUserAddressListResponse } from '@/interfaces/orionplace/address/I
 import type { StorefrontCartData } from '@/lib/orionplace/cartController';
 import type { requestProductPage } from '@/lib/orionplace/productPage';
 import type {
+  requestJournalPage,
   requestPromoProducts,
   requestPublication,
   requestTariffs,
@@ -57,8 +58,7 @@ import type { TicketSubjectContext } from '@/lib/orionplace/ticketRequests';
 import {
   blogPageNumber,
   blogPageSize,
-  blogPostsRequest,
-  type BlogPostsPage,
+  journalPagePastEnd,
 } from '@/lib/orionplace/blogJournal';
 import { blogViewType } from '@/lib/orionplace/blogPresentation';
 import { catalogBranchIds, findCatalogCategory } from '@/lib/orionplace/catalog';
@@ -113,6 +113,8 @@ export interface StorefrontRouteContext {
   tariffs: (id: number) => ReturnType<typeof requestTariffs>;
   /** The promotion page's products; the server shares it with the page title. */
   promoProducts: (id: number, page: number) => ReturnType<typeof requestPromoProducts>;
+  /** One journal list page; the server shares it with the page metadata. */
+  journalPage: (page: number, pageSize: number) => ReturnType<typeof requestJournalPage>;
 }
 
 export type StorefrontRouteResult =
@@ -314,14 +316,16 @@ const routes: Record<string, Loader> = {
     );
     let initial;
     try {
-      const data = await (await context.api()).request<BlogPostsPage>(
-        'blog_posts_get',
-        blogPostsRequest({}, page, pageSize),
-      );
+      const data = await context.journalPage(page, pageSize);
       initial    = { page, pageSize, data };
     } catch {
       initial = undefined;
     }
+    // A page number past the last page has no articles: 404, so search
+    // engines drop it instead of indexing an empty list.
+    if (journalPagePastEnd(page, initial)) {
+      return { notFound: true };
+    }
     return {
       page: (
         <JournalPage

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

@@ -350,6 +350,7 @@ export function StorefrontJournal({
             pagination={pagination}
             pending={pending}
             scrollTarget={results.current}
+            linked
             onChange={changePage}
           />
         </div>

package/templates/components/orionplace/search/ProductSearchResults.module.css

@@ -276,9 +276,12 @@
   border-top: 1px solid var(--orionplace-border);
 }
 
-/* Page buttons have a light frame that darkens on hover or focus, as in Nuxt. */
+/* Page buttons have a light frame that darkens on hover or focus, as in Nuxt.
+   Previous and next are links while that page exists. */
 .pagination .button {
   border-color: var(--orionplace-border);
+  font-family: inherit;
+  text-decoration: none;
 }
 
 .pagination .button:focus-visible {

package/templates/components/orionplace/search/ProductSearchResults.tsx

@@ -4,7 +4,9 @@ import {
   useEffect,
   useRef,
   useState,
+  type MouseEvent,
 } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
 import {
   useOrionplaceBrowse,
   useOrionplaceSelections,
@@ -15,6 +17,7 @@ import type {
   ProductFacetSelection,
 } from '@/interfaces/orionplace/products/IProductSearchFacets';
 import { hasSearchFilters } from '@/lib/orionplace/searchFilters';
+import { storefrontPageHref } from '@/lib/orionplace/pageSeo';
 import { browseLabels } from '@/lib/orionplace/browseLabels';
 import { useOrionplaceStableHeight } from '@/hooks/useOrionplaceStableHeight';
 import {
@@ -81,6 +84,32 @@ export function ProductSearchResults({
   const storedFilters = useOrionplaceBrowse((state) => state.searchFilters);
   const locale = useOrionplaceSelections((state) => state.localeCode);
   const labels = browseLabels(locale);
+  // Every list of this component keeps its page in the address (`?page=`),
+  // so previous and next are links search engines follow; a click changes
+  // the page in place.
+  const pathname     = usePathname() ?? '/';
+  const search       = useSearchParams()?.toString() ?? '';
+  const previousHref = !pending && page > 1
+    ? storefrontPageHref(pathname, search, page - 1)
+    : undefined;
+  const nextHref     = !pending && !failed && hasNext
+    ? storefrontPageHref(pathname, search, page + 1)
+    : undefined;
+
+  // A link opened in a new tab or window keeps its default.
+  function followPage(event: MouseEvent<HTMLAnchorElement>, value: number) {
+    if (
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    ) {
+      return;
+    }
+    event.preventDefault();
+    onChangePage?.(value);
+  }
   const facets = suppliedFacets === undefined ? storedFacets : suppliedFacets;
   const filters = suppliedFilters ?? storedFilters;
   const ids = productIds.length
@@ -278,26 +307,48 @@ export function ProductSearchResults({
                 className={styles.pagination}
                 data-search-pagination
               >
-                <button
-                  type="button"
-                  className={styles.button}
-                  disabled={pending || page === 1}
-                  onClick={() => onChangePage?.(page - 1)}
-                >
-                  <span><span aria-hidden="true">←</span> {labels.previous}</span>
-                </button>
+                {previousHref ? (
+                  <a
+                    className={styles.button}
+                    href={previousHref}
+                    rel="prev"
+                    onClick={(event) => followPage(event, page - 1)}
+                  >
+                    <span><span aria-hidden="true">←</span> {labels.previous}</span>
+                  </a>
+                ) : (
+                  <button
+                    type="button"
+                    className={styles.button}
+                    disabled={pending || page === 1}
+                    onClick={() => onChangePage?.(page - 1)}
+                  >
+                    <span><span aria-hidden="true">←</span> {labels.previous}</span>
+                  </button>
+                )}
                 <span>
                   {labels.page} {page}
                   {pages ? ` ${labels.of} ${pages}` : ''}
                 </span>
-                <button
-                  type="button"
-                  className={styles.button}
-                  disabled={pending || failed || !hasNext}
-                  onClick={() => onChangePage?.(page + 1)}
-                >
-                  <span>{labels.next} <span aria-hidden="true">→</span></span>
-                </button>
+                {nextHref ? (
+                  <a
+                    className={styles.button}
+                    href={nextHref}
+                    rel="next"
+                    onClick={(event) => followPage(event, page + 1)}
+                  >
+                    <span>{labels.next} <span aria-hidden="true">→</span></span>
+                  </a>
+                ) : (
+                  <button
+                    type="button"
+                    className={styles.button}
+                    disabled={pending || failed || !hasNext}
+                    onClick={() => onChangePage?.(page + 1)}
+                  >
+                    <span>{labels.next} <span aria-hidden="true">→</span></span>
+                  </button>
+                )}
               </nav>
             ) : null}
           </div>

package/templates/components/orionplace/shared/StorefrontPagination.README.md

@@ -7,7 +7,9 @@ an available page calls `onChange(page)` and moves the list into view.
 `scrollTarget` identifies the list by element or CSS selector; `null` keeps
 the current scroll position. Without a target, the nearest section, article
 or main container is used. `pending` disables both actions. `compact` shows
-arrow buttons with accessible names.
+arrow buttons with accessible names. With `linked`, Previous and Next are
+links to the list's `?page=` addresses, so search engines reach every page;
+a click still changes the page in place.
 
 ### Props
 
@@ -18,6 +20,7 @@ arrow buttons with accessible names.
 | `pending?: boolean`                     | Shows the loading state and blocks duplicate actions.                                    |
 | `scrollTarget?: PaginationScrollTarget` | Element or selector used as the pagination scroll destination.                           |
 | `compact?: boolean`                     | Uses the compact component presentation.                                                 |
+| `linked?: boolean`                      | Previous and Next become links to the list's `?page=` addresses (lists that keep their page in the address). |
 
 ## Русский
 
@@ -26,7 +29,9 @@ arrow buttons with accessible names.
 к списку. `scrollTarget` задаёт элемент списка или CSS-селектор; `null`
 оставляет прокрутку на месте. Без этого параметра используется ближайший
 контейнер section, article или main. `pending` блокирует кнопки. `compact`
-показывает стрелки с доступными названиями.
+показывает стрелки с доступными названиями. С `linked` «Назад» и «Далее» —
+ссылки на адреса списка с `?page=`, поэтому поисковые системы доходят до
+каждой страницы; по клику страница по-прежнему меняется на месте.
 
 ### Свойства
 
@@ -37,3 +42,4 @@ arrow buttons with accessible names.
 | `pending?: boolean`                     | Показывает загрузку и блокирует повторные действия.                                              |
 | `scrollTarget?: PaginationScrollTarget` | Элемент или селектор для прокрутки после смены страницы.                                         |
 | `compact?: boolean`                     | Включает компактное представление компонента.                                                    |
+| `linked?: boolean`                      | «Назад» и «Далее» становятся ссылками на адреса списка с `?page=` (для списков, хранящих страницу в адресе). |

package/templates/components/orionplace/shared/StorefrontPagination.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useRef } from 'react';
+import { useRef, type MouseEvent, type ReactNode } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
 import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
 import { scrollToPaginatedList } from '@/lib/orionplace/paginationScroll';
+import { storefrontPageHref } from '@/lib/orionplace/pageSeo';
 import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
 import type { PaginationScrollTarget } from '@/lib/orionplace/paginationScroll';
 import styles from './StorefrontPagination.module.css';
@@ -13,6 +15,12 @@ export interface StorefrontPaginationProps {
   pending?: boolean;
   scrollTarget?: PaginationScrollTarget;
   compact?: boolean;
+  /**
+   * The list keeps its page number in the address (`?page=`): previous and
+   * next are links to those addresses, so search engines reach every page.
+   * A click still changes the page in place.
+   */
+  linked?: boolean;
 }
 
 export function StorefrontPagination({
@@ -21,7 +29,10 @@ export function StorefrontPagination({
   pending = false,
   scrollTarget,
   compact = false,
+  linked = false,
 }: StorefrontPaginationProps) {
+  const pathname   = usePathname() ?? '/';
+  const search     = useSearchParams()?.toString() ?? '';
   const localeCode = useOrionplaceSelections((state) => state.localeCode);
   const labels = localeCode.toLowerCase().startsWith('ru')
     ? { page: 'Страница', previous: 'Назад', next: 'Далее' }
@@ -38,6 +49,61 @@ export function StorefrontPagination({
     scrollToPaginatedList(nav.current, scrollTarget);
   }
 
+  const previousPage = pagination.previous_page_number || page - 1;
+  const nextPage     = typeof pagination.next_page_number === 'number'
+    ? pagination.next_page_number
+    : page + 1;
+
+  // A link while that page exists (linked lists), else a button.
+  function control(
+    target: number,
+    available: boolean,
+    rel: 'prev' | 'next',
+    label: string,
+    content: ReactNode,
+  ) {
+    const common = {
+      className: styles.button,
+      'aria-label': compact ? label : undefined,
+      title: compact ? label : undefined,
+    };
+    if (linked && available && !pending) {
+      return (
+        <a
+          {...common}
+          href={storefrontPageHref(pathname, search, target)}
+          rel={rel}
+          onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+            // A link opened in a new tab or window keeps its default.
+            if (
+              event.button !== 0 ||
+              event.metaKey ||
+              event.ctrlKey ||
+              event.shiftKey ||
+              event.altKey
+            ) {
+              return;
+            }
+            event.preventDefault();
+            change(target);
+          }}
+        >
+          {content}
+        </a>
+      );
+    }
+    return (
+      <button
+        {...common}
+        type="button"
+        disabled={pending || !available}
+        onClick={() => change(target)}
+      >
+        {content}
+      </button>
+    );
+  }
+
   return (
     <nav
       ref={nav}
@@ -45,15 +111,12 @@ export function StorefrontPagination({
       className={`${styles.root} ${compact ? styles.compact : ''}`.trim()}
       data-feature-part="StorefrontPagination"
     >
-      <button
-        className={styles.button}
-        type="button"
-        aria-label={compact ? labels.previous : undefined}
-        title={compact ? labels.previous : undefined}
-        disabled={pending || !pagination.has_previous}
-        onClick={() => change(pagination.previous_page_number || page - 1)}
-      >
-        {compact ? (
+      {control(
+        previousPage,
+        Boolean(pagination.has_previous),
+        'prev',
+        labels.previous,
+        compact ? (
           <svg
             viewBox="0 0 24 24"
             fill="none"
@@ -65,25 +128,18 @@ export function StorefrontPagination({
           >
             <path d="m15 5-7 7 7 7" />
           </svg>
-        ) : labels.previous}
-      </button>
+        ) : labels.previous,
+      )}
       <span className={styles.count}>
         {labels.page} {page}
         {pagination.pages ? ` / ${pagination.pages}` : ''}
       </span>
-      <button
-        className={styles.button}
-        type="button"
-        aria-label={compact ? labels.next : undefined}
-        title={compact ? labels.next : undefined}
-        disabled={pending || !pagination.has_next}
-        onClick={() => change(
-          typeof pagination.next_page_number === 'number'
-            ? pagination.next_page_number
-            : page + 1,
-        )}
-      >
-        {compact ? (
+      {control(
+        nextPage,
+        Boolean(pagination.has_next),
+        'next',
+        labels.next,
+        compact ? (
           <svg
             viewBox="0 0 24 24"
             fill="none"
@@ -95,8 +151,8 @@ export function StorefrontPagination({
           >
             <path d="m9 5 7 7-7 7" />
           </svg>
-        ) : labels.next}
-      </button>
+        ) : labels.next,
+      )}
     </nav>
   );
 }

package/templates/components/orionplace/stores/StorefrontStores.tsx

@@ -389,6 +389,7 @@ export function StorefrontStores({
       <StorefrontPagination
         pagination={pagination}
         pending={pending || disabled}
+        linked={!storeId}
         onChange={changePage}
       />
     </section>

package/templates/lib/orionplace/blogJournal.ts

@@ -113,3 +113,16 @@ export function mergeBlogPagination(
     ),
   };
 }
+
+/**
+ * Whether a journal page number lies past the last page: the server render
+ * loaded that page (no filters) and it has no articles. Page 1 of an empty
+ * journal is a page of its own.
+ */
+export function journalPagePastEnd(
+  page: number,
+  loaded: BlogJournalPage | null | undefined,
+): boolean {
+  const posts = loaded?.data?.posts?.data;
+  return page > 1 && loaded?.page === page && Array.isArray(posts) && !posts.length;
+}

package/templates/lib/orionplace/pageMetadata.ts

@@ -22,6 +22,7 @@ import {
   storefrontOpenGraphLocale,
   storefrontOpenGraphType,
   storefrontPageMetadata,
+  storefrontPagedText,
   type StorefrontSeoPage,
 } from '@/lib/orionplace/pageSeo';
 import { structuredDataJson } from '@/lib/orionplace/productStructuredData';
@@ -228,7 +229,7 @@ export function storefrontMetadata(
     // The offer's name, as the other packages title this page.
     values.title       = promoName(records.promo, locale);
   }
-  const content                = storefrontPageMetadata(page, locale, values);
+  const listContent            = storefrontPageMetadata(page, locale, values);
   // Link previews load only complete image addresses; the canonical address
   // is the sitemap's one for this page.
   image                        = storefrontAbsoluteUrl(image, origin);
@@ -239,6 +240,12 @@ export function storefrontMetadata(
     locale,
     robots,
   );
+  // A later list page (`?page=2`) names its page number.
+  const content                = {
+    ...listContent,
+    title: storefrontPagedText(listContent.title, canonical, locale) ?? listContent.title,
+    description: storefrontPagedText(listContent.description, canonical, locale) ?? listContent.description,
+  };
   // The home page may carry the admin's own og:type (tags, rendered as is).
   const ogType                 = tags.some(
     (tag) => 'property' in tag && tag.property === 'og:type',
@@ -334,6 +341,21 @@ export function storefrontMetadata(
     metadata,
     tags,
     jsonLd,
-    head: { title: content.title, meta: [...headTags.values()] },
+    head: {
+      title: content.title,
+      meta: [...headTags.values()],
+      // The canonical address and its other languages, for the browser's
+      // head after an in-page change (a list page, a language).
+      links: canonical
+        ? [
+            { rel: 'canonical', href: canonical },
+            ...Object.entries(languages).map(([hreflang, href]) => ({
+              rel: 'alternate',
+              hreflang,
+              href,
+            })),
+          ]
+        : [],
+    },
   };
 }

package/templates/lib/orionplace/pageSeo.ts

@@ -460,11 +460,15 @@ export function storefrontAbsoluteUrl(
 // The pages the sitemap lists (runtime/marketplace.mjs), plus plan pages.
 const indexedPage = /^\/(?:|catalog|journal|tariffs|manufacturers|sellers|stores|contact|privacy|(?:category|product|journal)\/\d+|tariffs\/[^/]+\/\d+)$/;
 
+// Listed pages that are lists with page numbers (`?page=2`).
+const pagedList   = /^\/(?:journal|stores|category\/\d+)$/;
+
 /**
  * The canonical address of a page: the sitemap's address for it, the page in
- * the language it shows (`?locale=`). Pages that are not listed, pages with
- * other query parameters (filters, page numbers, private keys) and noindex
- * pages get none.
+ * the language it shows (`?locale=`). A later page of a list is a page of its
+ * own (`?locale=en&page=2`, Google's pagination guide), linked from the
+ * list's page links. Pages that are not listed, pages with other query
+ * parameters (filters, private keys) and noindex pages get none.
  */
 export function storefrontCanonicalUrl(
   origin: string,
@@ -473,9 +477,13 @@ export function storefrontCanonicalUrl(
   locale: string,
   robots?: string,
 ): string | undefined {
-  const path  = pathname.replace(/\/+$/, '') || '/';
-  const query = new URLSearchParams(search);
+  const path       = pathname.replace(/\/+$/, '') || '/';
+  const query      = new URLSearchParams(search);
+  const pageNumber = query.get('page');
   query.delete('locale');
+  if (pageNumber !== null && pagedList.test(path) && /^[1-9]\d{0,5}$/.test(pageNumber)) {
+    query.delete('page');
+  }
   if (
     !origin ||
     /noindex/i.test(robots ?? '') ||
@@ -484,13 +492,56 @@ export function storefrontCanonicalUrl(
   ) {
     return undefined;
   }
-  const url   = new URL(path, `${origin}/`);
+  const url        = new URL(path, `${origin}/`);
   if (locale) {
     url.searchParams.set('locale', locale);
   }
+  if (pageNumber && Number(pageNumber) > 1 && pagedList.test(path)) {
+    url.searchParams.set('page', pageNumber);
+  }
   return url.toString();
 }
 
+/**
+ * A later page of a list repeats the list's title and description; the page
+ * number keeps them distinct (search engines report repeated titles as
+ * duplicates). The number comes from the canonical address, so only the
+ * indexed list pages get it.
+ */
+export function storefrontPagedText(
+  text: string | undefined,
+  canonical: string | undefined,
+  locale: string,
+): string | undefined {
+  const page = canonical ? Number(new URL(canonical).searchParams.get('page')) : 0;
+  if (!text || !(page > 1)) {
+    return text;
+  }
+  const words: Record<string, string> = { ru: 'страница', es: 'página' };
+  const word                          = words[storefrontCopyLanguage(locale)] ?? 'page';
+  return `${text} · ${word} ${page}`;
+}
+
+/**
+ * The address of another page of the list on screen: the current address
+ * with `page=` set (left out for page 1), every other parameter kept. Page
+ * links are real links, so search engines reach every page of a list.
+ */
+export function storefrontPageHref(
+  pathname: string,
+  search: string,
+  page: number,
+): string {
+  const query = new URLSearchParams(search);
+  if (page > 1) {
+    query.set('page', String(page));
+  } else {
+    query.delete('page');
+  }
+  const text  = query.toString();
+  return `${pathname}${text ? `?${text}` : ''}`;
+}
+
 /** og:type of a page: a product and a journal article have their own kinds. */
 export function storefrontOpenGraphType(
   page: StorefrontSeoPage,
@@ -605,7 +656,7 @@ export function storefrontArticleData(input: {
  */
 export function storefrontIconLinks(
   icon: string | null | undefined,
-): { key: string; rel: string; href: string }[] {
+): { key: string; rel: 'icon'; href: string }[] {
   const href = storefrontAbsoluteUrl(icon, '');
   return href ? [{ key: 'icon', rel: 'icon', href }] : [];
 }

package/templates/lib/orionplace/serverRecords.ts

@@ -2,6 +2,7 @@ import { cache } from 'react';
 import { getOrionplaceServerApi } from '@/lib/orionplace/serverApi';
 import { requestProductPage } from '@/lib/orionplace/productPage';
 import {
+  requestJournalPage,
   requestPromoProducts,
   requestPublication,
   requestTariffs,
@@ -16,6 +17,11 @@ export const getStorefrontPublication   = cache(async (id: number) =>
   requestPublication(await getOrionplaceServerApi(), id),
 );
 
+// One journal list page (no filters), shared by the page and its metadata.
+export const getStorefrontJournalPage  = cache(async (page: number, pageSize: number) =>
+  requestJournalPage(await getOrionplaceServerApi(), page, pageSize),
+);
+
 export const getStorefrontTariffs       = cache(async (id: number) =>
   requestTariffs(await getOrionplaceServerApi(), id),
 );

package/templates/lib/orionplace/serverRoute.tsx

@@ -8,6 +8,7 @@ import {
   getStorefrontRequestUrl,
 } from '@/lib/orionplace/serverLocale';
 import {
+  getStorefrontJournalPage,
   getStorefrontProduct,
   getStorefrontPromoProducts,
   getStorefrontPublication,
@@ -46,6 +47,7 @@ export async function renderStorefrontRoute(
     publication: getStorefrontPublication,
     tariffs: getStorefrontTariffs,
     promoProducts: getStorefrontPromoProducts,
+    journalPage: getStorefrontJournalPage,
   });
   if ('redirect' in result) {
     redirect(result.redirect);

package/templates/lib/orionplace/storefrontRecords.ts

@@ -1,8 +1,21 @@
 import type { OrionplaceApi } from '@/lib/orionplace/api';
+import { blogPostsRequest, type BlogPostsPage } from '@/lib/orionplace/blogJournal';
 import type { IBlogPostsResponse } from '@/interfaces/orionplace/blog/IBlogApi';
 import type { ISubscriptionTariffsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
 import type { IProductSearchResponse } from '@/interfaces/orionplace/products/IProductSearchApi';
 
+/** One page of the journal list, without filters. */
+export function requestJournalPage(
+  api: OrionplaceApi,
+  page: number,
+  pageSize: number,
+) {
+  return api.request<BlogPostsPage>(
+    'blog_posts_get',
+    blogPostsRequest({}, page, pageSize),
+  );
+}
+
 /** One journal publication, or undefined when the storefront has none with this id. */
 export async function requestPublication(api: OrionplaceApi, id: number) {
   const data = await api.request<NonNullable<IBlogPostsResponse['page_data']>>(