Skip to main content

Catalog

Product​

Overview​

The Product components in this package contain reusable behaviors and interactivity. These components rely on being wrapped by a ProductContext. Several providers for this context are available. These providers define how child Product components behave.

Providers​

These define the behavior of child product components via React context. This allows reusing product UIs that behave differently depending on their location.

Example: When a product quantity selection component is inside a Product Line Item, changing the quantity updates the quantity of the line item. When the same component is used on the PDP, it mutates a form input which subsequently impacts the Add to Cart behavior.

  • <ProductDetailProvider /> - The product is the primary content on the page. Will update the url when variations are selected
  • <ProductTileProvider /> - The Product may be one of many on the page. Does not update the url when variations are selected
  • <ProductLineItem /> - The product is rendered as a line item. Changes behavior for quantity updates.
  • <ProductStaticProvider /> - For use in static contexts. Unlike other providers, does not rely on browser fetch calls to get updated product data as variation selections are made. Requires that variation products are provided as a prop.

Wrap any other product components you use from this package with one of these providers.

Components​

Since the individual Product components aren't very demonstrable on their own, below is a list of UIs that compose these components for building various product UIs:

  • Product Add to Cart Error - Shows any current errors that occurred when adding to cart
  • Product Image - Main image for the currently selected variant
  • Product Name - Name of the current product selection
  • Product Pricing - Price of current variation or price range for multi-variant products.
  • Product Type - Renders its children only if the current product is a particular type. Useful for hiding certain components for particular product types (e.g, simple, variation, bundle).
  • Quick Add - Quick Add to Cart Accordion
  • Variation Selection - Set of components for variation selection with various user experiences: Dropdown, Button, Swatch, etc.