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 />
• <ProductLowStock />

Examples

Fleece Jacket

Preview

Fleece Jacket

$55.00

Size

XSSML

Color

WhiteNavy

Code

import React from 'react';
import { ProductAddToCartError, ProductName } from '@hv/commerce/ui/product';
import { ProductAddToCartWithInventory } from './product-add-to-cart-inventory';
import { ProductLowStock } from './product-low-stock';
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',
            }}
          />
          <ProductLowStock>{'Low Stock'}</ProductLowStock>
          <ProductAddToCartWithInventory
            const
            strings={{
              outOfStock: 'Out of stock',
              addToCart: 'Add to Bag',
            }}
          ></ProductAddToCartWithInventory>
        </Sticky.StickyContainer>
        <ProductAddToCartError strings={{}} />
      </Sticky.Container>
    </ProductStaticProvider>
  );
};

export default ProductDetail;

Aviator Sunglasses

Preview

Aviator Sunglasses

$149.99

Color

BlueGoldPinkGreen

Code

import React from 'react';
import { ProductAddToCartError, ProductName } from '@hv/commerce/ui/product';
import { ProductAddToCartWithInventory } from './product-add-to-cart-inventory';
import { ProductLowStock } from './product-low-stock';
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',
            }}
          />
          <ProductLowStock>{'Low Stock'}</ProductLowStock>
          <ProductAddToCartWithInventory
            const
            strings={{
              outOfStock: 'Out of stock',
              addToCart: 'Add to Bag',
            }}
          ></ProductAddToCartWithInventory>
        </Sticky.StickyContainer>
        <ProductAddToCartError strings={{}} />
      </Sticky.Container>
    </ProductStaticProvider>
  );
};

export default ProductDetail;