diff --git a/app/[locale]/products/page.tsx b/app/[locale]/products/page.tsx
index 906f31793..cd18759b1 100644
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -1,7 +1,7 @@
-import { ThreeItemGrid } from 'components/grid/three-items';
import Footer from 'components/layout/footer';
import { SupportedLocale } from 'components/layout/navbar/language-control';
+import { ProductGrid } from 'components/grid/product-grid';
import Navbar from 'components/layout/navbar';
import { getCart } from 'lib/shopify';
import { cookies } from 'next/headers';
@@ -36,7 +36,7 @@ export default async function ProductPage({
diff --git a/components/grid/product-grid.tsx b/components/grid/product-grid.tsx
new file mode 100644
index 000000000..767a6eb4e
--- /dev/null
+++ b/components/grid/product-grid.tsx
@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+import { getCollectionProducts } from 'lib/shopify';
+import type { Product } from 'lib/shopify/types';
+import Link from 'next/link';
+import Label from '../label';
+import { GridTileImage } from './tile';
+
+function ProductGridItem({ item, priority }: { item: Product; priority?: boolean }) {
+ const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size');
+
+ return (
+
+
+
+
+
+
+
+
{item?.summary?.value}
+
+
+
+ );
+}
+
+export async function ProductGrid({ lang }: { lang?: SupportedLocale }) {
+ // Collections that start with `hidden-*` are hidden from the search page.
+ const productPageItems = await getCollectionProducts({
+ collection: 'hidden-products-page-items',
+ language: lang?.toUpperCase()
+ });
+ console.debug({ productPageItems });
+
+ if (!productPageItems?.length) return null;
+
+ return (
+
+ {productPageItems.map((item) => (
+
+ ))}
+
+ );
+}
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 0a4ae1fa8..02671f646 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -8,12 +8,14 @@ import { GridTileImage } from './tile';
function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boolean }) {
const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size');
- return (
+ const image = item?.variants?.[0]?.image;
+
+ return !!image ? (
- );
+ ) : null;
}
export async function ThreeItemGrid({ lang }: { lang?: SupportedLocale }) {
diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts
index 4b608c4a4..6deef10ff 100644
--- a/lib/shopify/fragments/product.ts
+++ b/lib/shopify/fragments/product.ts
@@ -40,6 +40,9 @@ const productFragment = /* GraphQL */ `
name
value
}
+ image {
+ ...image
+ }
price {
amount
currencyCode
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index e3fc78902..9441d78af 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -98,6 +98,7 @@ export type ProductVariant = {
value: string;
}[];
price: Money;
+ image: Image;
};
export type SEO = {