@salla.sa/twilight-theme-engine 1.0.85 → 1.0.87

package/tailwind/routes/product/ProductPage.tsx.txt

@@ -0,0 +1,77 @@
+import { SallaQuickOrder } from '@salla.sa/twilight-components-react/quick-order';
+import { SallaOffer } from '@salla.sa/twilight-components-react/offer';
+import { SallaComments } from '@salla.sa/twilight-components-react/comments';
+import { HookSlot } from '../../hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useProduct } from '../../hooks/useProduct';
+import { useComments } from '../../hooks/useComments';
+import type { ProductPageProps } from './types';
+import { Breadcrumb, RenderWhenVisible } from '../../components/common';
+import { ProductDetails, AddToCartForm, ProductGallery } from '../../components/product';
+import { ProductsSlider, Testimonials } from '../../components/home';
+import { useTwilight } from '../../providers/twilight-context';
+
+export function ProductPage({ product: initialProduct, page }: ProductPageProps) {
+  const { theme, store } = useTwilight();
+  const { t } = useTranslation();
+  const { product } = useProduct(initialProduct);
+  const { commentsKey } = useComments();
+
+  return (
+    <div key={product.id}>
+      <div className="container">
+        {theme?.settings?.product_show_breadcrumbs !== false && <Breadcrumb page={page} />}
+
+        <HookSlot name="product:start" />
+
+        <div className="flex flex-col items-start md:flex-row" id={`product-${product.id}`}>
+          <ProductGallery product={product} />
+
+          <div className="main-content md:sticky md:overflow-hidden top-24 w-full md:w-2/4 md:pb-16">
+            <HookSlot name="product:details.start" />
+            <ProductDetails product={product} showTags={theme.settings.show_tags} />
+            <HookSlot name="product:details.end" />
+
+            <HookSlot name="product:single.form.start" />
+            <AddToCartForm product={product} stickyAddToCart={theme.settings.sticky_add_to_cart} />
+            <HookSlot name="product:single.form.end" />
+            {/* After the form, as in Twig; `.start` and `description` are in ProductDetails */}
+            <HookSlot name="product:single.description.end" context={{ product }} />
+
+            <SallaQuickOrder className="mt-5 md:-mb-2 block" />
+          </div>
+        </div>
+
+        <SallaOffer />
+      </div>
+
+      {store.settings?.rating?.show_on_product && (
+        <RenderWhenVisible>
+          <SallaComments key={commentsKey} itemId={Number(product.id)} type={'product' as any} />
+        </RenderWhenVisible>
+      )}
+
+      <HookSlot name="product:related.start" />
+      <RenderWhenVisible>
+        <div className="container">
+          <ProductsSlider
+            data={{
+              products: { source: 'related', source_value: Number(product.id) },
+              title: t('pages.products.similar_products'),
+              display_all_url: '',
+            }}
+          />
+        </div>
+      </RenderWhenVisible>
+      <HookSlot name="product:related.end" />
+
+      <RenderWhenVisible>
+        <div className="container">
+          <Testimonials data={{}} />
+        </div>
+      </RenderWhenVisible>
+
+      <HookSlot name="product:end" />
+    </div>
+  );
+}

package/tailwind/routes/product/index.tsx.txt

@@ -0,0 +1,157 @@
+import type { HeadDescriptor } from '../../utils/head';
+import { buildHreflangAlternates } from '../../utils/baseHead';
+import type { ProductPageProps } from './types';
+import type { IdParams } from '../types';
+import type { TwilightContext } from '../../twilight/context';
+import { productLoader } from './loader';
+import { RouteId } from '../../router/route-ids';
+import { ProductPage } from './ProductPage';
+import { fastCheckoutScript } from '../../utils/fast-checkout';
+import { getActiveCurrency } from '../../api/client';
+export { productLoader } from './loader';
+export type { ProductPageProps } from './types';
+
+async function loader(
+  ctx: { params: IdParams; locale?: string },
+  extend?: (
+    data: ProductPageProps,
+    ctx: { params: IdParams }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<ProductPageProps> {
+  const data = await productLoader({ params: ctx.params });
+
+  if (extend) {
+    const extra = await extend(data, ctx);
+    return { ...data, ...extra } as ProductPageProps;
+  }
+  return data;
+}
+
+function head(ctx: TwilightContext, data: ProductPageProps): HeadDescriptor {
+  if (!data?.product) {
+    return {
+      title: 'Products',
+      description: 'Browse our products',
+    };
+  }
+  const product = data.product;
+  const storeName = ctx.settings?.store?.name ?? '';
+
+  // Strip HTML and limit description to 160 chars
+  const description = product.description?.replace(/<[^>]*>/g, '').slice(0, 160) ?? '';
+
+  // Price valid until: 1 month from now
+  const priceValidUntil = new Date();
+  priceValidUntil.setMonth(priceValidUntil.getMonth() + 1);
+
+  // Collect all product images
+  const images = product.images?.map((img) => img.url).filter(Boolean) ?? [];
+  if (product.image?.url && !images.includes(product.image.url)) {
+    images.unshift(product.image.url);
+  }
+
+  // Build JSON-LD schema matching SchemaProductWidget.php
+  const jsonLd: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description,
+    sku: product.sku,
+    image: images.length > 0 ? images : undefined,
+    offers: {
+      '@type': 'Offer',
+      url: product.url,
+      availability: product.is_available
+        ? 'https://schema.org/InStock'
+        : 'https://schema.org/OutOfStock',
+      price: product.sale_price,
+      priceCurrency: getActiveCurrency(product.currency),
+      priceValidUntil: priceValidUntil.toISOString().split('T')[0],
+      seller: storeName
+        ? {
+            '@type': 'Organization',
+            name: storeName,
+          }
+        : undefined,
+    },
+  };
+
+  // Add brand if exists
+  if (product.brand) {
+    jsonLd.brand = {
+      '@type': 'Brand',
+      name: product.brand.name,
+      description: product.brand.description,
+      logo: product.brand.logo,
+    };
+  }
+
+  // Add aggregateRating and review if rating exists
+  if (product.rating && product.rating.count > 0) {
+    const ratingValue = product.rating.stars;
+    jsonLd.aggregateRating = {
+      '@type': 'AggregateRating',
+      ratingCount: product.rating.count,
+      ratingValue,
+    };
+    jsonLd.review = {
+      '@type': 'Review',
+      author: storeName
+        ? {
+            '@type': 'Organization',
+            name: storeName,
+          }
+        : undefined,
+      reviewRating: {
+        '@type': 'Rating',
+        bestRating: 5,
+        ratingValue,
+      },
+    };
+  }
+
+  if (product.gtin && product.gtin.length === 8) {
+    jsonLd.gtin8 = product.gtin;
+  }
+
+  if (product.mpn) {
+    jsonLd.mpn = product.mpn;
+  }
+
+  // Twig: "<product> | <store name>", without the store meta title.
+  const title = storeName ? `${product.name} | ${storeName}` : product.name;
+  const base: HeadDescriptor = {
+    title,
+    appendStoreTitle: false,
+    description,
+    canonical: product.url,
+    openGraph: {
+      type: 'product',
+      title,
+      description,
+      images: product.image?.url,
+      url: product.url,
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: product.image?.url,
+    },
+    jsonLd,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+    // Quick-buy widget code, eager only here: the Buy Now button is above the fold on this page.
+    // Other routes load it on idle from the body:end default hook, which also owns the
+    // `#fast-checkout-js` marker `salla-add-product-button` checks for.
+    scripts: ctx.settings?.store?.settings?.buy_now ? [fastCheckoutScript()] : [],
+  };
+
+  return base;
+}
+
+export const Product = {
+  id: RouteId.PRODUCT_SINGLE,
+  loader,
+  head,
+  Component: ProductPage,
+} as const;

package/tailwind/routes/product/loader.ts.txt

@@ -0,0 +1,35 @@
+import type { ProductPageProps } from './types';
+import type { IdParams } from '../types';
+import { product } from '../../api/product';
+import { getTwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+import type { Breadcrumb } from '../../types';
+
+export async function productLoader({ params }: { params: IdParams }): Promise<ProductPageProps> {
+  const data = await product.findOrThrow(params.id);
+  const i18n = getTwilightContext().i18n;
+  const home: Breadcrumb = { name: i18n.t('common.titles.home'), url: '/' };
+
+  const breadcrumbs: Breadcrumb[] = [home];
+  if (data.category) {
+    breadcrumbs.push({ name: data.category.name, url: data.category.url });
+  }
+  breadcrumbs.push({ name: data.name, url: data.url });
+
+  const page = {
+    slug: RouteId.PRODUCT_SINGLE,
+    id: data.id,
+    title: data.name,
+    url: data.url,
+    parent:
+      data.category && data.category.id
+        ? { id: data.category.id, name: data.category.name, url: data.category.url }
+        : null,
+    breadcrumbs,
+  };
+
+  return {
+    page,
+    product: data,
+  };
+}

package/tailwind/routes/product/types.ts.txt

@@ -0,0 +1,6 @@
+import type { Page, Product } from '../../types';
+
+export interface ProductPageProps {
+  page: Page;
+  product: Product;
+}

package/tailwind/routes/product-listing/ProductListPage.tsx.txt

@@ -0,0 +1,321 @@
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { HookSlot, useStore } from '../../hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useNavigate, useLocation } from '../../providers/NavigationProvider';
+import { useTwilight } from '../../providers/TwilightProvider';
+import { sortOptions } from '../../utils/sort-options';
+import { Drawer } from '../../components/drawer';
+import { Breadcrumb } from '../../components/common';
+import { SallaFilters } from '@salla.sa/twilight-components-react/filters';
+import { ItemsList, ReviewItemSkeleton } from '@salla.sa/twilight-components-react';
+import { Testimonials, useReorderButtons } from '../../components/home';
+import { ProductCard } from '../../components/product';
+import { NoContent, ProductCardSkeleton, Image, RenderWhenVisible } from '../../components/common';
+import { product, parseNextPageToken } from '../../api/product';
+import { useAppliedFilters } from './useAppliedFilters';
+import type { ProductListLoaderData } from './types';
+import type { Brand } from '../brands/types';
+import type { Product } from '../../types';
+import { onSallaEvent } from '../../utils/sdk-helpers';
+
+/** 3-col + 288px sidebar from md; 3-col of the full container below md. */
+const FILTERED_PRODUCT_IMAGE_SIZES = '(min-width: 768px) 25vw, 33vw';
+
+/**
+ * Product List Page - Unified component for all product listing pages
+ *
+ * Handles:
+ * - Category pages (with filters, category entity, testimonials)
+ * - Search pages (keyword display, product count)
+ * - Tag pages (tag entity)
+ * - Brand pages (brand entity with banner/logo)
+ * - Static listings (latest, sales, offers)
+ */
+export function ProductListPage({
+  page,
+  source,
+  query,
+  products,
+  pagination,
+  filters,
+}: ProductListLoaderData) {
+  const { t } = useTranslation();
+  const store = useStore();
+  const { theme } = useTwilight();
+  const navigate = useNavigate();
+  // Sort is now SSR-driven, no local state needed
+  const selectedSort = query.sort;
+  const [filtersOpen, setFiltersOpen] = useState(false);
+
+  // Determine filters visibility
+  const showFilters = query.filters && store?.settings?.product?.filters;
+  // const isSearch = source.type === 'search';
+  const isBrand = source.type === 'brands';
+  const brand = isBrand ? (source.entity as Brand | undefined) : null;
+  const isReorder = source.type === 'reorder';
+  useReorderButtons(isReorder);
+
+  // Generate sort options with translations
+  const sortOptionsWithTrans = useMemo(() => sortOptions(selectedSort, t), [selectedSort, t]);
+
+  // Get location from hook for consistent URL handling
+  const location = useLocation();
+
+  // Re-query the list with the selection made in `<salla-filters>`: the component only
+  // rewrites the address bar and emits `salla-filters::changed`, and the route's loader
+  // output was fetched without it.
+  const {
+    filters: appliedFilters,
+    page: filteredPage,
+    lastPage,
+    status: filterStatus,
+    retry: retryFilters,
+  } = useAppliedFilters(source, selectedSort, !!showFilters);
+  // While the new selection loads, the previous page stays up (dimmed, `aria-busy`); if
+  // the request fails nothing stale passes for the new selection. Infinite scroll is only
+  // live for the loader's own page or a fully loaded filtered one.
+  const shownPage = filterStatus === 'ready' ? filteredPage : lastPage;
+  const shownProducts =
+    filterStatus === 'error'
+      ? []
+      : filterStatus === 'idle'
+        ? products
+        : (shownPage?.items ?? products);
+  const shownNext =
+    filterStatus === 'idle'
+      ? pagination?.next
+      : filterStatus === 'ready'
+        ? filteredPage?.next
+        : null;
+  const filteredKey =
+    filterStatus === 'idle'
+      ? ''
+      : `-${filterStatus}${filterStatus === 'ready' ? JSON.stringify(appliedFilters) : ''}`;
+
+  // Listen for filters changed event to close drawer
+  useEffect(() => {
+    const handleFiltersChanged = () => setFiltersOpen(false);
+    return onSallaEvent('salla-filters::changed', handleFiltersChanged);
+  }, []);
+
+  // Handle sort change - use client-side navigation to trigger route loader re-run
+  const handleSortChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const newSort = event.target.value;
+
+      const params = new URLSearchParams(location.searchStr);
+      params.set('sort', newSort);
+      params.delete('page'); // clear any cursor token from URL on sort change
+
+      // Use client-side navigation to trigger route loader re-execution (SSR-like).
+      // Built from the router's location rather than `window.location`: on a host
+      // where the store is the root, the address bar carries the store segment and
+      // `navigate` would add it a second time.
+      navigate(`${location.pathname}?${params.toString()}`);
+    },
+    [navigate, location.pathname, location.searchStr]
+  );
+
+  // Key for remounting products list
+  const listKey = source.value ?? source.type;
+
+  // Track cursor for the next page — initialized from SSR pagination response.
+  // On sort change the key prop remounts ItemsList and this effect resets the cursor.
+  const nextCursorRef = useRef<string | null>(shownNext ?? null);
+  useEffect(() => {
+    nextCursorRef.current = shownNext ?? null;
+  }, [shownNext]);
+
+  const loader = useCallback(async () => {
+    const { cursor, page } = parseNextPageToken(nextCursorRef.current);
+
+    const result = await product.list({
+      source: source.type,
+      sourceValue: source.value,
+      ...(cursor && { cursor }),
+      ...(page !== undefined && { page }),
+      sort: selectedSort,
+      ...(appliedFilters && { filterable: true, filters: appliedFilters }),
+    });
+
+    nextCursorRef.current = result.next;
+
+    return result;
+  }, [source.type, source.value, selectedSort, appliedFilters]);
+
+  return (
+    <div
+      key={listKey}
+      className="container px-2.5 ms:px-5 mb-10"
+      data-source={isReorder ? 'reorder' : undefined}
+    >
+      {theme?.settings?.product_index_show_breadcrumbs !== false && <Breadcrumb page={page} />}
+
+      {isBrand && brand && (
+        <>
+          <Image
+            width={1200}
+            height={300}
+            className="w-full max-h-[300px] object-cover rounded-md bg-gray-100"
+            src={brand.banner || undefined}
+            alt={brand.name}
+            priority
+          />
+          <header className="flex flex-col md:flex-row items-center md:items-start text-center rtl:md:text-right ltr:md:text-left mt-2 mb-8">
+            <Image
+              className="rounded-md w-40 h-24 object-contain shadow-md p-4 bg-white shrink-0"
+              src={brand.logo || undefined}
+              alt={brand.name}
+              aspectRatio="5/3"
+            />
+            <div className="px-5 pt-3 rtl:text-right">
+              <h1 className="text-2xl font-bold mb-1">{brand.name}</h1>
+              {brand.description && (
+                <p
+                  className="text-base text-gray-500 font-medium"
+                  dangerouslySetInnerHTML={{ __html: brand.description }}
+                />
+              )}
+            </div>
+          </header>
+        </>
+      )}
+
+      <HookSlot name="product:list.start" />
+
+      <div className={showFilters ? 'md:grid md:grid-cols-[288px_1fr] gap-8' : ''}>
+        {/* <FiltersSkeleton></FiltersSkeleton> */}
+        {showFilters && (
+          <SallaFilters
+            id="filters-menu"
+            className="hidden md:block lg:sticky lg:top-20"
+            filters={filters as any}
+          />
+        )}
+
+        <div className="min-w-0">
+          <div className="mb-4 sm:mb-6 flex justify-between items-center">
+            <h1 className="font-bold text-xl rtl:pl-3 ltr:pr-3" id="page-main-title">
+              {isBrand ? t('common.titles.products') : page.title}
+            </h1>
+
+            <div className="flex items-center space-x-2 rtl:space-x-reverse">
+              {showFilters && (
+                <button
+                  type="button"
+                  onClick={() => setFiltersOpen(true)}
+                  className="filters-trigger bg-border-color text-primary lg:hidden p-2 rounded"
+                >
+                  <i className="sicon-filter text-gray-text text-2xl" />
+                </button>
+              )}
+
+              {sortOptionsWithTrans.length > 0 && (
+                <div className="flex items-center">
+                  <label
+                    className="hidden sm:block rtl:ml-3 ltr:mr-3 whitespace-nowrap"
+                    htmlFor="product-sort"
+                  >
+                    {t('pages.categories.sorting', 'Sort By')}
+                  </label>
+                  <select
+                    id="product-sort"
+                    className="form-input pt-0 pb-1 rtl:md:pl-10 ltr:md:pr-10"
+                    value={selectedSort}
+                    onChange={handleSortChange}
+                  >
+                    {sortOptionsWithTrans.map((option) => (
+                      <option key={option.id} value={option.id}>
+                        {option.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <HookSlot name="product:list.items.start" />
+
+          <div
+            className={`flex min-h-screen${filterStatus === 'loading' ? ' opacity-60' : ''}`}
+            aria-busy={filterStatus === 'loading'}
+          >
+            {filterStatus === 'error' ? (
+              <div className="flex-1 min-w-0 flex flex-col items-center">
+                <NoContent
+                  icon="sicon-shopping-bag"
+                  message={t('common.errors.error_occurred', 'Something went wrong')}
+                />
+                <button type="button" className="link--primary mt-4" onClick={retryFilters}>
+                  {t('common.elements.try_again', 'Try again')}
+                </button>
+              </div>
+            ) : (
+              <ItemsList<Product>
+                key={`${listKey}-${selectedSort}${filteredKey}`}
+                resetKey={`${listKey}-${selectedSort}${filteredKey}`}
+                items={shownProducts}
+                loader={loader}
+                mode={shownNext ? 'infinite' : 'static'}
+                pageUrl={location.pathname + location.searchStr}
+                className="s-products-list flex-1 min-w-0"
+                itemsClassName={`s-products-list-wrapper s-products-list-vertical-cards${showFilters ? ' s-products-list-with-filters' : ''}`}
+                skeleton={<ProductCardSkeleton />}
+                skeletonType="item"
+                skeletonCount={12}
+                empty={
+                  <NoContent
+                    icon="sicon-shopping-bag"
+                    message={t(
+                      'pages.categories.no_products',
+                      'No products found in this category'
+                    )}
+                  />
+                }
+                t={(key, fallback) => t(key, fallback || key)}
+              >
+                {(items) =>
+                  items.map((prod, idx) => (
+                    <ProductCard
+                      key={prod.id}
+                      product={prod}
+                      index={idx}
+                      sizes={showFilters ? FILTERED_PRODUCT_IMAGE_SIZES : undefined}
+                    />
+                  ))
+                }
+              </ItemsList>
+            )}
+          </div>
+
+          <HookSlot name="product:list.items.end" />
+        </div>
+      </div>
+
+      {showFilters && (
+        <Drawer isOpen={filtersOpen} onClose={() => setFiltersOpen(false)} size="md">
+          <div className="p-4">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="font-bold text-lg">{t('pages.categories.filters', 'Filters')}</h3>
+              <button
+                type="button"
+                onClick={() => setFiltersOpen(false)}
+                className="btn--close-sm sicon-cancel text-gray-500"
+              />
+            </div>
+            <SallaFilters id="filters-menu-mobile" filters={filters as any} />
+          </div>
+        </Drawer>
+      )}
+
+      {source.type === 'categories' && store?.settings?.category?.testimonial_enabled && (
+        <RenderWhenVisible placeholder={<ReviewItemSkeleton />}>
+          <Testimonials data={{}} />
+        </RenderWhenVisible>
+      )}
+
+      <HookSlot name="product:list.end" />
+    </div>
+  );
+}

package/tailwind/routes/product-listing/index.tsx.txt

@@ -0,0 +1,95 @@
+import { PageSkeleton } from '@salla.sa/twilight-components-react/skeletons';
+import type { HeadDescriptor } from '../../utils/head';
+import { buildHreflangAlternates } from '../../utils/baseHead';
+import { productListLoader } from './loader';
+import type { ProductListLoaderData, ProductListTag, Category } from './types';
+import type { TwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+import { registry, COMPONENT_KEYS } from '../../components/ComponentRegistry';
+import { ProductListPage } from './ProductListPage';
+
+const PRODUCTS_SOURCES = new Set(['latest', 'sales', 'offers', 'reorder']);
+
+export function head(ctx: TwilightContext, data: ProductListLoaderData): HeadDescriptor {
+  const entity = data.source.entity;
+  const category = data.source.type === 'categories' ? (entity as Category | undefined) : undefined;
+  const tag = data.source.type === 'tags' ? (entity as ProductListTag | undefined) : undefined;
+  const productsPath = PRODUCTS_SOURCES.has(data.source.type)
+    ? `/products?source=${data.source.type}`
+    : undefined;
+
+  const alternateLanguages = buildHreflangAlternates(
+    ctx.settings,
+    category?.url ?? (tag?.url || productsPath || ctx.location.pathname)
+  );
+  const canonical = category?.url ?? (tag?.url || undefined);
+  const title = category?.name ?? tag?.name ?? data.page.title;
+  const image = category?.image ?? undefined;
+  const storeName = ctx.settings?.store?.name;
+  // Twig: categories read "<category> | <store name>", other listings get the default suffix.
+  const pageTitle = category && storeName ? `${title} | ${storeName}` : title;
+
+  const base: HeadDescriptor = {
+    title: pageTitle,
+    appendStoreTitle: !category,
+    description: `Browse ${title}`,
+    canonical,
+    openGraph: {
+      type: 'website',
+      title: pageTitle,
+      description: `Browse ${title}`,
+      images: image,
+      url: canonical,
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: pageTitle,
+      description: `Browse ${title}`,
+      images: image,
+    },
+    alternateLanguages,
+  };
+
+  return base;
+}
+
+export interface ProductListSkeletonProps {
+  hideFilters?: boolean;
+}
+
+function ProductListingPage(props: ProductListLoaderData) {
+  const Page =
+    registry.resolve<ProductListLoaderData>(COMPONENT_KEYS.PRODUCT_LIST_PAGE) ?? ProductListPage;
+  return <Page {...props} />;
+}
+
+function ProductListingPending({ hideFilters }: ProductListSkeletonProps) {
+  const Skeleton = registry.resolve<ProductListSkeletonProps>(COMPONENT_KEYS.PRODUCT_LIST_SKELETON);
+  return Skeleton ? <Skeleton hideFilters={hideFilters} /> : <PageSkeleton />;
+}
+
+export const ProductListing = {
+  id: RouteId.PRODUCT_INDEX,
+  loader: productListLoader,
+  head,
+  Component: ProductListingPage,
+  Pending: ProductListingPending,
+} as const;
+
+export { ProductListPage };
+export { productListLoader };
+export { useAppliedFilters, parseFiltersFromSearch } from './useAppliedFilters';
+export type { AppliedFiltersStatus } from './useAppliedFilters';
+
+export type {
+  ProductListLoaderData,
+  ProductListLoaderParams,
+  ProductListLoaderContext,
+  ProductListSource,
+  ProductListTag,
+  ProductListEntity,
+  ProductListPageMeta,
+  ProductListSourceConfig,
+  ProductListQuery,
+  CategoryPageProps,
+} from './types';