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

Last updated