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 ( +
+ +
+ +
+
+
+ +
+ ); +} + +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 = {