chore: Adds product SEO to override default ProductJsonLd

cms/faststore/sections.json

@@ -232,5 +232,21 @@
         }
       }
     }
+  },
+  {
+    "name": "CustomProductSEOSection",
+    "schema": {
+      "title": "Custom Product SEO",
+      "description": "Add SEO metadata to product pages",
+      "type": "object",
+      "required": ["skipLazyLoadingSection"],
+      "properties": {
+        "skipLazyLoadingSection": {
+          "title": "Skip lazy loading",
+          "type": "boolean",
+          "default": true
+        }
+      }
+    }
   }
 ]

src/components/index.tsx

@@ -1,15 +1,17 @@
-import CustomIconsAlert from "./sections/CustomIconsAlert/CustomIconsAlert";
+import ContactForm from "./ContactForm/ContactForm";
 import AlertWithImage from "./sections/AlertWithImage/AlertWithImage";
-import CustomProductDetails from "./sections/CustomProductDetails/CustomProductDetails";
+import CustomIconsAlert from "./sections/CustomIconsAlert/CustomIconsAlert";
 import CustomNewsletter from "./sections/CustomNewsletter/CustomNewsletter";
-import ContactForm from "./ContactForm/ContactForm";
+import CustomProductDetails from "./sections/CustomProductDetails/CustomProductDetails";
+import CustomProductSEOSection from "./sections/CustomProductSEO/CustomProductSEO";
 
 const sections = {
   CustomIconsAlert,
   AlertWithImage,
   ProductDetails: CustomProductDetails,
   ContactForm,
   CustomNewsletter,
+  CustomProductSEOSection,
 };
 
 export default sections;

src/components/sections/CustomProductSEO/CustomProductSEO.tsx

@@ -0,0 +1,25 @@
+import { usePDP } from "@faststore/core";
+import { ProductJsonLd } from "next-seo";
+
+export function CustomProductSEOSection() {
+  // FastStore exposes the data that comes from FastStore API along with FastStore API Extensions inside a provider. Use the usePDP hook to access data from a Product Detail Page (PDP). Refer to: https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions
+  const context = usePDP();
+  const product = context?.data?.product;
+  const meta = product?.seo;
+
+  return (
+    <ProductJsonLd
+      productName={meta.title}
+      description={meta.description}
+      brand={product.brand.name}
+      sku="TESTSKU"
+      gtin={product.gtin}
+      images={product.image.map(
+        (img: { url: string; alternateName: string }) => img.url
+      )}
+      releaseDate={product.releaseDate}
+    />
+  );
+}
+
+export default CustomProductSEOSection;