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).

    import { usePDP } from "@faststore/core"
   
    const context = usePDP()
• usePLP(): Use this hook when integrating your section with a Product Listing Page (PLP).

  import { usePLP } from "@faststore/core"
   
  const context = usePLP()
• useSearchPage(): Use this hook when integrating your section on the Search Page.

  import { useSearchPage } from "@faststore/core"
   
  const context = useSearchPage()
• usePage(): Use this hook when you have a single section that is used in more than one type of page.

  import { usePage } from "@faststore/core"
   
  const 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.

  import { usePage } from "@faststore/core"
   
  const 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

import { isPDP, isPLP, isSearchPage } from "@faststore/core";
 
const context = usePage()
 
isPDP(context)
isPLP(context)
isSearchPage(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:

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

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).

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