feat: add more details to product tile

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

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 = {