add PDP content

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

lib/shopify/fragments/product.ts

@@ -9,6 +9,7 @@ const productFragment = /* GraphQL */ `
     title
     description
     descriptionHtml
+    productType
     options {
       id
       name

lib/shopify/types.ts

@@ -522,6 +522,7 @@ export type ShopifyProduct = {
   title: string;
   description: string;
   descriptionHtml: string;
+  productType: string;
   options: ProductOption[];
   priceRange: {
     maxVariantPrice: Money;

lib/styles.ts

@@ -18,6 +18,9 @@ export const carPartPlanetColor = {
     200: '#666C89',
     500: '#2D3A7B',
     600: '#111C55'
+  },
+  black: {
+    700: '#1A1A25'
   }
 };
 
@@ -41,6 +44,9 @@ export const remanTransmissionColor = {
     200: '#666C89',
     500: '#2D3A7B',
     600: '#111C55'
+  },
+  black: {
+    700: '#1A1A25'
   }
 };
 
@@ -64,5 +70,8 @@ export const transmissionLocatorColor = {
     200: '#666C89',
     500: '#2D3A7B',
     600: '#111C55'
+  },
+  black: {
+    700: '#1A1A25'
   }
 };

lib/utils.ts

@@ -1,7 +1,7 @@
 import clsx, { ClassValue } from 'clsx';
 import { ReadonlyURLSearchParams } from 'next/navigation';
 import { twMerge } from 'tailwind-merge';
-import { Menu } from './shopify/types';
+import { Menu, Product, ProductVariant } from './shopify/types';
 
 export function cx(...args: ClassValue[]) {
   return twMerge(clsx(...args));
@@ -149,3 +149,19 @@ export const getCollectionUrl = (handle: string, includeSlashPrefix = true) => {
 
   return includeSlashPrefix ? `/${rewriteUrl}` : rewriteUrl;
 };
+
+export const getSelectedProductVariant = ({
+  product,
+  searchParams
+}: {
+  product: Product;
+  searchParams?: { [key: string]: string | string[] | undefined };
+}) => {
+  const variant = product.variants.find((variant: ProductVariant) =>
+    variant.selectedOptions.every(
+      (option) => option.value === searchParams?.[option.name.toLowerCase()]
+    )
+  );
+
+  return variant || product.variants[0];
+};