feat: add more details to product tile

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/product/[handle]/page.tsx

@@ -132,11 +132,7 @@ async function RelatedProducts({ id }: { id: string }) {
           >
             <GridTileImage
               alt={product.title}
-              label={{
-                title: product.title,
-                amount: product.priceRange.maxVariantPrice.amount,
-                currencyCode: product.priceRange.maxVariantPrice.currencyCode
-              }}
+              product={product}
               src={product.featuredImage?.url}
               fill
               sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"

components/grid/three-items.tsx

@@ -23,11 +23,7 @@ function ThreeItemGridItem({
         }
         priority={priority}
         alt={item.title}
-        label={{
-          title: item.title as string,
-          amount: item.priceRange.maxVariantPrice.amount,
-          currencyCode: item.priceRange.maxVariantPrice.currencyCode
-        }}
+        product={item}
         href={`/product/${item.handle}`}
       />
     </div>

components/grid/tile.tsx

@@ -1,25 +1,23 @@
 import { ArrowRightIcon, PhotoIcon } from '@heroicons/react/24/solid';
 import clsx from 'clsx';
 import Price from 'components/price';
+import { Product } from 'lib/shopify/types';
 import Image from 'next/image';
 import Link from 'next/link';
 
 export function GridTileImage({
   active,
-  label,
+  product,
   href,
-  place = 'grid',
   ...props
 }: {
   active?: boolean;
-  label?: {
-    title: string;
-    amount: string;
-    currencyCode: string;
-  };
-  place?: 'grid' | 'gallery';
+  product: Product;
   href: string;
 } & React.ComponentProps<typeof Image>) {
+  const metafieldKeys = ['engineCylinders', 'fuelType'] as Partial<keyof Product>[];
+  const shouldShowDescription = metafieldKeys.some((key) => product[key]);
+
   return (
     <div className="flex h-full flex-col rounded-b border bg-white">
       <div className="grow">
@@ -43,30 +41,57 @@ export function GridTileImage({
             )}
           </div>
         </div>
-        <div className="flex flex-col gap-2 divide-y px-4">
-          {label && (
-            <h3 className="mt-4 text-sm font-semibold leading-6 text-gray-800">{label.title}</h3>
-          )}
-          {label && (
-            <div className="flex w-full justify-end py-2">
-              <Price
-                className="text-lg font-medium text-gray-900"
-                amount={label.amount}
-                currencyCode={label.currencyCode}
-              />
-            </div>
-          )}
+        <h3 className="mt-4 px-4 pb-2 text-sm font-semibold leading-6 text-gray-800">
+          {product.title}
+        </h3>
+      </div>
+      <div className="px-4">
+        {shouldShowDescription && (
+          <div className="flex items-center justify-center gap-x-7 border-t py-3">
+            {product.engineCylinders?.length ? (
+              <div className="flex flex-col items-center gap-2">
+                <Image
+                  src="/icons/cylinder.png"
+                  alt="Cylinder icon"
+                  width={16}
+                  height={16}
+                  className="size-4"
+                  sizes="16px"
+                />
+                <span className="text-xs tracking-wide">{`${product.engineCylinders[0]} Cylinder`}</span>
+              </div>
+            ) : null}
+            {product.fuelType ? (
+              <div className="flex flex-col items-center gap-2">
+                <Image
+                  src="/icons/fuel.png"
+                  alt="Fuel icon"
+                  width={16}
+                  height={16}
+                  className="size-4"
+                  sizes="16px"
+                />
+                <span className="text-xs tracking-wide">{product.fuelType}</span>
+              </div>
+            ) : null}
+          </div>
+        )}
+        <div className="flex justify-end border-t py-2">
+          <Price
+            className="text-lg font-medium text-gray-900"
+            amount={product.priceRange.minVariantPrice.amount}
+            currencyCode={product.priceRange.minVariantPrice.currencyCode}
+          />
         </div>
       </div>
-      {place === 'grid' && (
-        <Link
-          href={href}
-          className="flex items-center justify-center gap-3 rounded-b bg-dark py-3 text-white"
-        >
-          <span className="text-sm font-medium tracking-wide">More details</span>
-          <ArrowRightIcon className="size-4" />
-        </Link>
-      )}
+
+      <Link
+        href={href}
+        className="flex items-center justify-center gap-3 rounded-b bg-dark py-3 text-white"
+      >
+        <span className="text-sm font-medium tracking-wide">More details</span>
+        <ArrowRightIcon className="size-4" />
+      </Link>
     </div>
   );
 }

components/layout/products-list/index.tsx

@@ -70,11 +70,7 @@ const ProductsList = ({
         >
           <GridTileImage
             alt={product.title}
-            label={{
-              title: product.title,
-              amount: product.priceRange.maxVariantPrice.amount,
-              currencyCode: product.priceRange.maxVariantPrice.currencyCode
-            }}
+            product={product}
             src={product.featuredImage?.url}
             fill
             sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"

lib/shopify/fragments/product.ts

@@ -70,6 +70,12 @@ const productFragment = /* GraphQL */ `
     featuredImage {
       ...image
     }
+    engineCylinders: metafield(namespace: "custom", key: "engine_cylinders") {
+      value
+    }
+    fuelType: metafield(namespace: "custom", key: "fuel") {
+      value
+    }
     images(first: 20) {
       edges {
         node {

lib/shopify/index.ts

@@ -294,6 +294,8 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
   const { images, variants, ...rest } = product;
   return {
     ...rest,
+    engineCylinders: parseMetaFieldValue<number[]>(product.engineCylinders),
+    fuelType: product.fuelType?.value || null,
     images: reshapeImages(images, product.title),
     variants: reshapeVariants(removeEdgesAndNodes(variants))
   };
@@ -305,7 +307,6 @@ const reshapeProducts = (products: ShopifyProduct[]) => {
   for (const product of products) {
     if (product) {
       const reshapedProduct = reshapeProduct(product);
-
       if (reshapedProduct) {
         reshapedProducts.push(reshapedProduct);
       }

lib/shopify/types.ts

@@ -100,9 +100,14 @@ export type Metaobject = {
   [key: string]: string;
 };
 
-export type Product = Omit<ShopifyProduct, 'variants' | 'images'> & {
+export type Product = Omit<
+  ShopifyProduct,
+  'variants' | 'images' | 'fuelType' | 'engineCylinders'
+> & {
   variants: ProductVariant[];
   images: Image[];
+  fuelType: string | null;
+  engineCylinders: number[] | null;
 };
 
 export type ProductOption = {
@@ -128,6 +133,8 @@ export type ProductVariant = {
   mileage: number | null;
   estimatedDelivery: string | null;
   condition: string | null;
+  engineCylinders: string | null;
+  fuelType: string | null;
 };
 
 export type ShopifyCartProductVariant = {
@@ -205,6 +212,8 @@ export type ShopifyProduct = {
       handle: string;
     }[];
   };
+  engineCylinders: { value: string } | null;
+  fuelType: { value: string } | null;
 };
 
 export type ShopifyCartOperation = {

lib/utils.ts

@@ -51,7 +51,7 @@ export function normalizeUrl(domain: string, url: string) {
 
 export const parseMetaFieldValue = <T>(field: { value: string } | null): T | null => {
   try {
-    return JSON.parse(field?.value || '{}');
+    return field?.value ? JSON.parse(field.value) : null;
   } catch (error) {
     return null;
   }