Product Detail

This page illustrates composing @hv/commerce/ui components to render an above the fold product detail section.

Components Used

• <ProductMedia />
• <ProductName />
• <ProductPricing />
• <ProductVariationSelection />
• <ProductAddtoCart />

Example

Preview

Fleece Jacket

$55.00

Size

XSSML

Color

WhiteNavy

Code

import React from 'react';
import {
  ProductAddToCart,
  ProductAddToCartError,
  ProductName,
} from '@hv/commerce/ui/product';

import { ProductMedia, ProductVariationSelection } from '@hv/commerce/ui/pdp';
import { ProductPricing } from '@hv/commerce/ui/product-pricing';
import * as Sticky from '@hv/ui/sticky';
import { Heading } from '@hv/ui/typography';
import { ProductStaticProvider } from '@hv/commerce/ui/product-static-provider';

export const ProductDetail = ({ product, variationProducts }) => {
  if (!product) {
    return null;
  }

  return (
    <ProductStaticProvider
      product={product}
      variationProducts={variationProducts}
    >
      <Sticky.Container>
        <Sticky.ScrollContainer>
          <ProductMedia />
        </Sticky.ScrollContainer>
        <Sticky.StickyContainer>
          <Sticky.StickyHeading>
            <Heading size='md'>
              <ProductName />
            </Heading>
          </Sticky.StickyHeading>
          <ProductPricing />
          <ProductVariationSelection
            strings={{
              unavailable: 'Unavailable',
            }}
          />

          <ProductAddToCart
            strings={{
              addToCart: 'Add to Cart',
            }}
          />
        </Sticky.StickyContainer>
        <ProductAddToCartError strings={{}} />
      </Sticky.Container>
    </ProductStaticProvider>
  );
};

export default ProductDetail;