Handling Product Types

Learn how to detect whether a product is standard, parent, or child, and route to the appropriate handling logic.

Quick Start

Product Type Detection

Every product has a type accessible via meta.product_types[0]:

import { getByContextProduct } from '@epcc-sdk/sdks-shopper';

// Fetch product with necessary includes
const response = await getByContextProduct({
  path: { product_id: productId },
  query: {
    include: ['main_image', 'files']
  }
});

// Detect product type
const productType = response.data?.data?.meta?.product_types?.[0];

Product Type Values

Type	Description	Can Add to Cart	Has Variations
standard	Regular product without variations	✅ Yes	❌ No
parent	Template with variation definitions	❌ No	✅ Yes
child	Specific variant of a parent	✅ Yes	❌ No (inherits from parent)
bundle	Bundle with component products	✅ Yes*	❌ No

*Bundles require configuration - see Bundle Products Guide

Routing Based on Product Type

Here's a complete implementation pattern that handles all product types:

async function ProductPage({ productId }) {
  // Fetch product with all necessary includes
  const response = await getByContextProduct({
    path: { product_id: productId },
    query: { 
      include: ['main_image', 'files', 'component_products'] 
    }
  });

  const productData = response.data?.data;
  if (!productData) return <NotFound />;

  // Route based on product type
  switch (productData.meta?.product_types?.[0]) {
    case 'standard':
      return <DisplayStandardProduct productData={response.data} />;
      
    case 'parent':
      // Parent product already has variation data
      return <DisplayVariationProduct productData={response.data} />;
      
    case 'child':
      // Child variant needs parent for full variation context
      const parentResponse = await getByContextProduct({
        path: { product_id: productData.attributes?.base_product_id! },
        query: { include: ['main_image', 'files'] }
      });
      
      return <DisplayVariationProduct 
        productData={response.data}
        parentProduct={parentResponse.data} 
      />;
      
    case 'bundle':
      return <DisplayBundleProduct productData={response.data} />;
      
    default:
      // Fallback to standard display
      return <DisplayStandardProduct productData={response.data} />;
  }
}

Key Implementation Notes

1. Use the same component for parent and child - They share the same display logic
2. Child products need parent context - Always fetch the parent for variation options
3. Include necessary data upfront - Reduces additional API calls
4. Handle loading and error states - Better user experience

Key Relationships

Child → Parent Relationship

Child products reference their parent:

// Child product structure
{
  id: "child-uuid",
  attributes: {
    base_product_id: "parent-uuid",  // Points to parent
    // ... other attributes
  },
  meta: {
    product_types: ["child"]
  }
}

Parent → Children Relationship

Parent products contain variation data:

// Parent product structure
{
  id: "parent-uuid",
  meta: {
    product_types: ["parent"],
    variations: [...],          // Variation definitions
    variation_matrix: {...}     // Maps options to child IDs
  }
}

When to Fetch Additional Data

For Child Products

When you detect a child product, you typically need the parent for:

• Variation options to display
• Pre-selecting current variant
• Enabling variant switching

if (productType === 'child') {
  const parentId = product.attributes?.base_product_id;
  if (parentId) {
    // Fetch parent - see "List Parent & Child Products" guide
    const parentData = await getByContextProduct({
      path: { product_id: parentId }
    });
  }
}

For Parent Products

Parent products already contain variation data:

• meta.variations - Option definitions
• meta.variation_matrix - Child product mapping

You may want to fetch child products for:

• Displaying all variants in a table
• Showing price ranges
• Getting variant-specific data (SKUs, prices)

Key Points to Remember

• Only child and standard products can be added to cart
• Child products always have base_product_id
• Parent products contain all variation definitions
• Product type determines your UI/UX approach

Next Steps

Now that you can detect product types:

• For parent/child products: Continue to List Parent & Child Products
• For implementation patterns: See Variation Selection Patterns

References

• Product Types Guide
• Get Product API