Product Tile

This page illustrates composing @hv/commerce/ui components to render a product tile

Components Used

• <ProductImage />
• <ProductName />
• <ProductPricing />
• <ProductVariationSelection />
• <ProductAddtoCart />
• <ProductLowStock />

Example

Preview

VividLux OLED TV$599.99

55 in65 in75 in

Code

import React from 'react';
import {
  ProductAddToCartError,
  ProductImage,
  ProductName,
} from '@hv/commerce/ui/product';
import { ProductAddToCartWithInventory } from './product-add-to-cart-inventory';
import { ProductLowStock } from './product-low-stock';
import { ProductPricing } from '@hv/commerce/ui/product-pricing';
import * as UIProductTile from '@hv/commerce/ui/product-tile';
import { ProductStaticProvider } from '@hv/commerce/ui/product-static-provider';

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

  return (
    <ProductStaticProvider
      product={product}
      variationProducts={variationProducts}
    >
      <UIProductTile.Content>
        <ProductImage isLink zoomOnHover />
        <ProductName isLink />
        <ProductPricing />
        <UIProductTile.VariationSelection
          strings={{
            unavailable: 'Unavailable',
          }}
        />
        <ProductLowStock>{'Low Stock'}</ProductLowStock>
        <ProductAddToCartWithInventory
          const
          strings={{
            outOfStock: 'Out of stock',
            addToCart: 'Add to Bag',
          }}
        ></ProductAddToCartWithInventory>
        <ProductAddToCartError strings={{}} />
      </UIProductTile.Content>
    </ProductStaticProvider>
  );
};

export default ProductTile;