diff --git a/cms/faststore/sections.json b/cms/faststore/sections.json index 99a6eef..bad509d 100644 --- a/cms/faststore/sections.json +++ b/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 + } + } + } } ] diff --git a/src/components/index.tsx b/src/components/index.tsx index c7e22bc..9834734 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,8 +1,9 @@ -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, @@ -10,6 +11,7 @@ const sections = { ProductDetails: CustomProductDetails, ContactForm, CustomNewsletter, + CustomProductSEOSection, }; export default sections; diff --git a/src/components/sections/CustomProductSEO/CustomProductSEO.tsx b/src/components/sections/CustomProductSEO/CustomProductSEO.tsx new file mode 100644 index 0000000..70ac86f --- /dev/null +++ b/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 ( + img.url + )} + releaseDate={product.releaseDate} + /> + ); +} + +export default CustomProductSEOSection;