🧪 Examples for `getProduct()`

Here are practical usage examples to help you understand how to use getProduct() effectively with typed metafields, error handling, and optional rendering logic.

🔹 Basic Usage with Handle

import { getProduct } from "@/lib/NextShopKit/client";

const { data, error } = await getProduct({
  handle: "solar-kit-9kw",
  customMetafields: [
    { field: "custom.brand", type: "single_line_text" },
    { field: "custom.weight", type: "decimal" },
  ],
  options: {
    resolveFiles: true,
    camelizeKeys: true,
    renderRichTextAsHtml: false,
  },
});

if (error || !data) {
  console.error("❌ Failed to load product:", error);
} else {
  console.log("✅ Product:", data.title);
}

⚠️ Error Handling Pattern

Always check for error and data. If either is missing, show a fallback:

if (!data || error) {
  return <p>Product not found or unavailable.</p>;
}

📦 Accessing Parsed Metafields

<p>Brand: {data.metafields.custom.brand}</p>
<p>Weight: {data.metafields.custom.weight} kg</p>

🎨 Rendering Rich Text (HTML)

const { data } = await getProduct({
  handle: "solar-kit-3kw",
  customMetafields: [{ field: "custom.description", type: "rich_text" }],
  options: {
    renderRichTextAsHtml: true,
  },
});

<div
  className="product-description"
  dangerouslySetInnerHTML={{
    __html: data.metafields.custom.description,
  }}
/>

📁 File Metafields

customMetafields: [
  { field: "custom.certificates", type: "File" }
],
options: {
  resolveFiles: true
}

{
  data.metafields.custom.certificates.map((file: any) => (
    <a key={file.id} href={file.url} target="_blank">
      {file.alt || "View File"}
    </a>
  ));
}