feature-product hooks

The components already use these hooks. Reach for them when you build your own UI on the same data. Open a hook for its options and what it returns.

Changing data

useAddOnSelectionThe add-ons the shopper ticked, for ProductDetailAddOns and the add-to-cart button.

import { useAddOnSelection } from "@evolve-storefront/feature-product/hooks";

function useAddOnSelection(
  addOns: readonly ProductAddOn[],
): {
  selected: string[];
  onSelectedChange: (selected: string[]) => void;
  clear: () => void;
}

Returns { selected: string[]; onSelectedChange: (selected: string[]) => void; clear: () => void; }

Other hooks

useBundleSelectionThe bundle the shopper put together, for ProductDetailBundle and the add button.

import { useBundleSelection } from "@evolve-storefront/feature-product/hooks";

function useBundleSelection(
  args: { sku: string | null; items: readonly ProductBundleItem[]; },
): ProductBundleSelection

Option	Type	Description
sku	string | null
items	readonly ProductBundleItem[]

Returns ProductBundleSelection

useFacetNavigationThe facets a listing shows and the changes a shopper makes to them.

import { useFacetNavigation } from "@evolve-storefront/feature-product/hooks";

function useFacetNavigation<Entry>(
  options: FacetNavigationOptions<Entry>,
): { facets: Entry[]; isPending: boolean; change: (next: FacetChange) => void; isSearchable: (facet: Entry) => boolean; }

Option	Type	Description
facets	readonly Entry[]	The facets the listing came back with.
search	URLSearchParams	The URL's current parameters — useSearchParams().
navigate	(params: URLSearchParams) => void	Load the listing for these parameters — router.push(?${params}).
searchable?	readonly string[] | ((facet: Entry) => boolean)	Which facets offer a search box over their options: their keys, or a test. By default as each facet's setting says, else an options or category facet with more than six options to pick.

Returns { facets: Entry[]; isPending: boolean; change: (next: FacetChange) => void; isSearchable: (facet: Entry) => boolean; }

useRecentlyViewedThe shopper's recently viewed products, newest first, and record to add one.

import { useRecentlyViewed } from "@evolve-storefront/feature-product/hooks";

function useRecentlyViewed<Item>(
  options?: RecentlyViewedOptions,
): {
  products: Item[];
  record: (product: Item) => void;
}

Option	Type	Description
storageKey?	string	The localStorage key; two sites on one domain each pass their own.
limit?	number	How many products the history keeps.

Returns { products: Item[]; record: (product: Item) => void; }

useProductListingThe enclosing ProductListingProvider's facets and navigation.

import { useProductListing } from "@evolve-storefront/feature-product/product-listing";

function useProductListing(): ProductListingContextValue

Returns ProductListingContextValue

useProductListingLayoutThe layout choice of the enclosing ProductListingLayout.

import { useProductListingLayout } from "@evolve-storefront/feature-product/product-listing";

function useProductListingLayout(): LayoutContextValue

Returns LayoutContextValue

useProductListingTableQuantityThe quantity of the enclosing table row, for the add button a site renders in it.

import { useProductListingTableQuantity } from "@evolve-storefront/feature-product/product-listing";

function useProductListingTableQuantity(): number

Returns number