Collection Hooks

useCollection()

When you are on a /collections template, any section, component, and or its children will have access to the page's data using the useCollection() hook. That way, you do not have to drill this data down the props from the template.

useCollectionByHandle()

Returns any collection object from any route

Any .jsx file

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

const CartEmptyRecommendations = () => {
  const microCollection = useCollectionByHandle({ handle: 'micro' });
  
  return (
    <div className='CartEmptyRecommendations'>
      {microCollection.products.map ... }
    </div>
  )
}

useCollectionHandles()

Returns an array of all collection handles in your Storefront.

Any component on any route

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

const AllCollections = () => {
  const { collectionHandles, ...handlesStatus } = useCollectionHandles();
  
  return (
    <div className='AllCollections'>
      {collectionHandles.map(handle => (
        <Collection key={handle} handle={handlle} />
      )}
    </div>
  )
}