fix: update PDP layout

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

lib/shopify/fragments/product.ts

@@ -76,6 +76,21 @@ const productFragment = /* GraphQL */ `
     fuelType: metafield(namespace: "custom", key: "fuel") {
       value
     }
+    transmissionType: metafield(namespace: "custom", key: "transmission_type") {
+      value
+    }
+    transmissionSpeeds: metafield(namespace: "custom", key: "transmission_speeds") {
+      value
+    }
+    driveType: metafield(namespace: "custom", key: "drive_type") {
+      value
+    }
+    transmissionCode: metafield(namespace: "custom", key: "transmission_code") {
+      value
+    }
+    transmissionTag: metafield(namespace: "custom", key: "transmission_tag") {
+      value
+    }
     images(first: 20) {
       edges {
         node {

lib/shopify/index.ts

@@ -75,7 +75,8 @@ import {
   ShopifyProductsOperation,
   ShopifyRemoveFromCartOperation,
   ShopifySetCartAttributesOperation,
-  ShopifyUpdateCartOperation
+  ShopifyUpdateCartOperation,
+  TransmissionType
 } from './types';
 
 const domain = process.env.SHOPIFY_STORE_DOMAIN
@@ -287,7 +288,10 @@ const reshapeVariants = (variants: ShopifyProductVariant[]): ProductVariant[] =>
   }));
 };
 
-const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
+const reshapeProduct = (
+  product: ShopifyProduct,
+  filterHiddenProducts: boolean = true
+): Product | undefined => {
   if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
     return undefined;
   }
@@ -295,6 +299,13 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
   const { images, variants, ...rest } = product;
   return {
     ...rest,
+    transmissionCode: parseMetaFieldValue<string[]>(product.transmissionCode),
+    transmissionSpeeds: parseMetaFieldValue<number[]>(product.transmissionSpeeds),
+    transmissionTag: parseMetaFieldValue<string[]>(product.transmissionTag),
+    driveType: parseMetaFieldValue<string[]>(product.driveType),
+    transmissionType: product.transmissionType
+      ? (product.transmissionType.value as TransmissionType)
+      : null,
     engineCylinders: parseMetaFieldValue<number[]>(product.engineCylinders),
     fuelType: product.fuelType?.value || null,
     images: reshapeImages(images, product.title),

lib/shopify/types.ts

@@ -101,14 +101,29 @@ export type Metaobject = {
   [key: string]: string;
 };
 
+export type TransmissionType = 'Automatic' | 'Manual';
+
 export type Product = Omit<
   ShopifyProduct,
-  'variants' | 'images' | 'fuelType' | 'engineCylinders'
+  | 'variants'
+  | 'images'
+  | 'fuelType'
+  | 'engineCylinders'
+  | 'driveType'
+  | 'transmissionType'
+  | 'transmissionSpeeds'
+  | 'transmissionCode'
+  | 'transmissionTag'
 > & {
   variants: ProductVariant[];
   images: Image[];
   fuelType: string | null;
   engineCylinders: number[] | null;
+  driveType: string[] | null;
+  transmissionType: TransmissionType | null;
+  transmissionSpeeds: number[] | null;
+  transmissionCode: string[] | null;
+  transmissionTag: string[] | null;
 };
 
 export type ProductOption = {
@@ -216,6 +231,11 @@ export type ShopifyProduct = {
   };
   engineCylinders: { value: string } | null;
   fuelType: { value: string } | null;
+  transmissionType: { value: string } | null;
+  transmissionTag: { value: string } | null;
+  transmissionCode: { value: string } | null;
+  driveType: { value: string } | null;
+  transmissionSpeeds: { value: string } | null;
 };
 
 export type ShopifyCartOperation = {