Consuming FastStore API extension with custom components

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

FastStore extends its capabilities through API Extensions, which provide additional data for customization. This guide focuses on using different hooks to access and manipulate data based on the page type or section you are working with.

Hooks for consuming API extension data

FastStore exposes the data from both the FastStore API and FastStore API Extensions within a provider. The data is provided as a context within the provider, and specific hooks are available for different scenarios:

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

copy


_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 a single section is used in more than one page type.


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

This hook returns one of the following context types: PDPContext, PLPContext, or SearchPageContext. You can decide how to handle it depending on the page using this hook by passing these types as generics.


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

Also, you can use type assertion functions to leverage 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, let's consider a practical example using the Call To Action section within a PLP. Make sure you have followed the steps described in the Creating a new section guide.

Create a new section as explained in the Creating a new section guide.
Import the usePLP hook in the component file (src/components/CallToAction.tsx) to access data related to PLPs:

src/components/CallToAction.tsx


_10import { usePLP }  from "@faststore/core";

Inside the component, call the usePLP hook to get the context data related to Product Listing Pages. The result is stored in the context variable.


_15export interface CallToActionProps {
_15  title: string
_15  link: {
_15    text: string
_15    url: string
_15  }
_15}
_15
_15export default function CallToAction(props: CallToActionProps) {
_15  const context = usePLP()
_15  return (
_15    <section>
_15      <h2>{`${props.title} ${context?.data?.namedExtraData?.data}`}</h2>
_15    </section>
_15  )

Now, you can use the data from context as needed. In the provided example, the component returns a <section> element containing an <h2> element, which combines the title prop from the component's props with the data extracted from the context. The optional chaining ensures safe navigation through properties that may be undefined or null. Feel free to customize this approach to suit your needs and leverage the retrieved data for your desired functionality.

Consuming API Extensions data from custom components in section overrides

After overriding native components and props, you can extend your customization by using hooks within custom components to consume custom data, similar to custom sections. In the following example, the CustomBuyButton component overrides the native BuyButton component from the ProductDetails section inside the Product Details Page (PDP).

Open the component file and import the usePDP hook from @faststore/core.
Use the usePDP hook to obtain the context specific to the PDP, which contains relevant information about the product displayed on the page.

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}

In this scenario, the CustomBuyButton component leverages the usePDP hook to access the PDP-specific context. It seamlessly integrates with the UIButton component from the FastStore UI library, overriding the default behavior of the native BuyButton within the ProductDetails section. The content displayed within the button, dynamically retrieves and displays custom data associated with the product from the PDP context. The optional chaining ensures safe navigation through properties that may be undefined or null.