Product Hooks
The product
data is auto-updated on each build.When you are on a
/products template, any section, component, and or its children will have access to the page's data using the useProduct() hook. That way, you do not have to drill this data down the props from the template.Returns the full
product object from he currently navigated product route e.g /products/the-alfaAny /products/:handle route
import { useProduct } from '@backpackjs/storefront';
const ProductTile = () => {
const product = useProduct();
return <h3>{product.title}</h3> // The Alpha
}
Returns a full
product object for any product from anywhere in the Storefront. In this example, we use the /products/the-alfa inside a contact us page at /pages/contactAny .jsx file
import { useProductByHandle } from '@backpackjs/storefront';
const ContactPage = () => {
const product = useProductByHandle({ handle: 'the-alfa' });
return (
<div className='ContactUs'>
<h1>Contact Us</h1>
...
<h3>{product.title}</h3>
</div>
)
}
This hook takes in an object with these properties
Key | Description |
handle | A valid product handle. |
fetchOnMount | Whether to fetch the requested product on the component mount. Defaults to true. If you need to delay/control the fetch set this prop initially to false and then trigger it. e.g if using useInView you could pass in the inView variable to it so that it fetches the product only when the component is visible. |
Returns a
product object in its "item" form. An "item" is just a slimmed-down version of the full object, which may have more information than needed. This hook can be called from any route in the Storefront.Any .jsx file
import { useProductItemByHandle } from '@backpackjs/storefront';
const ProductPage = () => {
const productItem = useProductItemByHandle({ handle: 'the-gold' });
return (
<div className='ProductPage'>
<h1>{product.title}</h1> // The Gold
</div>
)
}
This hook takes in an object with these properties
Key | Description |
handle | A valid product handle. |
fetchOnMount | Whether to fetch the requested product on the component mount. Defaults to true. If you need to delay/control the fetch set this prop initially to false and then trigger it. e.g if using useInView you could pass in the inView variable to it so that it fetches the product only when the component is visible. |
From any /products/:handle
import { useProductRecommendations } from '@backpackjs/storefront';
const ProductRecommendations = () => {
const { recommendations, ...recommendationsStatus } = useProductRecommendations();
return (
<div className='ProductRecommendations'>
... recommendations
</div>
)
}
options | |
handle | (optional) product handle. If no handle is provided the handle of the current product page will be used. e.g the handle returned by useProduct |
limit | Limits the number of results. 6 (default) |
From any component on any route
import { useProductRecommendations } from '@backpackjs/storefront';
const ProductRecommendations = ({ productHandle, limit }) => {
const { recommendations, ...recommendationsStatus } = useProductRecommendations({
handle: productHandle,
limit
});
return (
<div className='ProductRecommendations'>
... recommendations
</div>
)
}
In cases where live inventory data is critical, this hook helps you to easily fetch
live inventory data for any product route e.g fetching /products/charlie inventory data within the /collections/all routeAny component on any route
import { useProductLiveInventoryByHandle } from '@backpackjs/storefront';
const CollectionItem = ({ productHandle }) => {
const { productLiveInventory } = useProductInventoryByHandle(
{ handle: productHandle }
)
return (
<div className='CollectionItem'>
... productLiveInventory
</div>
)
}
options | |
handle | any valid product handle |
fetchOnMount | wether live inventory should be auto-fetched on component mount true (default) or false |
Returns an array of all product handles in your Storefront.
Any component on any route
import { useProductHandles } from '@backpackjs/storefront';
const Comp = () => {
const { productHandles, ...handlesStatus } = useProductHandles();
return (
<div className='Comp'>
... productHandles
</div>
)
}
Last modified 1yr ago