Consuming FastStore API extension with custom components

In this guide, learn how to consume new fields from custom sections and overridable components.

FastStore exposes the data that comes from FastStore API along with FastStore API Extensions inside a provider. This data comes as a context in the provider, and you can use the following hooks to access it:

usePDP(): Use this hook when integrating your section with a Product Detail Page (PDP).


_10import { usePDP } from "@faststore/core"
_10
_10const context = usePDP()

usePLP(): Use this hook when integrating your section with a Product Listing Page (PLP).


_10import { usePLP } from "@faststore/core"
_10
_10const context = usePLP()

useSearchPage(): Use this hook when integrating your section on the Search Page.


_10import { useSearchPage } from "@faststore/core"
_10
_10const context = useSearchPage()

usePage(): Use this hook when you have a single section that is used in more than one type of page.


_10import { usePage } from "@faststore/core"
_10
_10const context = usePage()

This hook returns one of the following types as context: PDPContext, PLPContext, or SearchPageContext, and you can decide how to handle it depending on the page that will use this hook by passing the types as generics.


_10import { usePage } from "@faststore/core"
_10
_10const context = usePage<PLPContext | SearchPageContext>()

Also, you can use type assertion functions so that you can leverage the use of typescript and get the correct types


_10import { isPDP, isPLP, isSearchPage } from "@faststore/core";
_10
_10const context = usePage()
_10
_10isPDP(context)
_10isPLP(context)
_10isSearchPage(context)

Consuming API Extensions data from custom sections

To illustrate how to consume API extension data from custom sections, we'll use the Call To Action example from the Creating a new section guide inside a Product Listing Page (PLP). So, ensure to have followed this guide mentioned before to have a new section.

Once you have the CallToAction section, add the following import statement inside src/components/CallToAction.tsx:

src/components/CallToAction.tsx


_18import { usePLP }  from "@faststore/core";
_18
_18export interface CallToActionProps {
_18  title: string
_18  link: {
_18    text: string
_18    url: string
_18  }
_18}
_18
_18export default function CallToAction(props: CallToActionProps) {
_18  const context = usePLP()
_18  return (
_18    <section>
_18      <h2>{`${props.title} ${context?.data?.namedExtraData?.data}`}</h2>
_18    </section>
_18  )
_18}

Consuming API Extensions data from custom components in section overrides

After overriding native components and props, you can also use the hooks inside custom components to consume custom data, just as in custom sections. In the following example, the CustomBuyButton component overrides the native BuyButton component from the ProductDetails section inside the Product Details Page (PDP).

src/components/CustomBuyButton.tsx


_17import { Button as UIButton } from '@faststore/ui'
_17import { usePDP }  from "@faststore/core"
_17
_17export function CustomBuyButton(props) {
_17  const context = usePDP()
_17
_17  return (
_17    <UIButton
_17      variant="primary"
_17      onClick={() => {
_17        alert('Hello User!')
_17      }}
_17    >
_17      {context?.data?.product.customData}
_17    </UIButton>
_17  )
_17}