Documentation
Feedback
Guides
Storefront Development

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

_10
import { usePDP } from "@faststore/core"
_10
_10
const context = usePDP()

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

_10
import { usePLP } from "@faststore/core"
_10
_10
const context = usePLP()

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

_10
import { useSearchPage } from "@faststore/core"
_10
_10
const context = useSearchPage()

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

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

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

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

_18
import { usePLP } from "@faststore/core";
_18
_18
export interface CallToActionProps {
_18
title: string
_18
link: {
_18
text: string
_18
url: string
_18
}
_18
}
_18
_18
export 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

_17
import { Button as UIButton } from '@faststore/ui'
_17
import { usePDP } from "@faststore/core"
_17
_17
export 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
}

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page