Product Hooks

useProduct()

The productdata 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-alfa

Any /products/:handle route

import { useProduct } from '@backpackjs/storefront';

const ProductTile = () => {
  const product = useProduct();
  
  return <h3>{product.title}</h3> // The Alpha
}

useProductByHandle()

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/contact

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

Arguments

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.

useProductItemByHandle()

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

Arguments

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.

useProductRecommendations()

Helper hook to ease fetching of Shopify product recommendations .

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)

Or passing a custom product handle

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

useProductInventoryByHandle()

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 route

Any 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

useProductHandles()

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