Skip to main content

List Parent & Child Products

Learn which SDK calls to use for fetching variation data and what options are available.

Authentication Required

You'll need to set up authentication with the Shopper SDK. See the Authentication Quick Start guide.

SDK Functions for Variations​

getByContextProduct​

Fetches a single product (parent, child, or standard).

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

const response = await getByContextProduct({
  path: { 
    product_id: 'PRODUCT_ID' 
  },
  query: {
    include: ['main_image', 'files']
  }
});

Key points:

  • Works for any product type (parent, child, standard)
  • Parent products contain meta.variations and meta.variation_matrix
  • Child products contain attributes.base_product_id pointing to parent
  • Use include to fetch related data in a single request

Available includes:

  • main_image - Primary product image
  • files - All product files/images
  • categories - Product categories
  • brands - Product brand

getByContextChildProducts​

Fetches all child products for a given parent.

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

const response = await getByContextChildProducts({
  path: { 
    product_id: 'PARENT_ID' 
  },
  query: {
    page: {
      limit: 100,  // Max 100 per page
      offset: 0
    },
    filter: {}   // Optional filters
  }
});

Key points:

  • Only works with parent product IDs
  • Returns array of child products
  • Supports pagination for parents with many variants
  • Each child contains full product data (price, inventory, SKU)

Common use cases:

  • Building a variations table showing all options
  • Checking inventory across all variants
  • Displaying price ranges
  • Preloading all variant data for quick switching

Common Patterns​

Pattern 1: Display Parent with All Variants​

// Fetch parent product with variation data
const parentResponse = await getByContextProduct({
  path: { product_id: parentId },
  query: { include: ['main_image'] }
});

// If you need full child data (prices, inventory, etc.)
const childrenResponse = await getByContextChildProducts({
  path: { product_id: parentId }
});

When to use:

  • Product detail pages showing all variations
  • Building variation tables with prices/inventory
  • Displaying all available options

Pattern 2: Landing on a Child Product​

// 1. Fetch the child product
const childResponse = await getByContextProduct({
  path: { product_id: childId },
  query: { include: ['main_image'] }
});

// 2. Get parent ID from child
const parentId = childResponse.data?.data?.attributes?.base_product_id;

// 3. Fetch parent for variation context
const parentResponse = await getByContextProduct({
  path: { product_id: parentId }
});

When to use:

  • Direct links to specific variants
  • Search results landing on child products
  • Pre-selecting current variant options

Pattern 3: Inventory Management​

Inventory is managed separately from product data in Elastic Path. To check stock levels:

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

// Fetch inventory for a specific product
const stockResponse = await getStock({
  path: { product_uuid: productId }
});

// Stock data includes available, allocated, and total
const stock = stockResponse.data?.data?.attributes;

When to use:

  • Checking stock levels before allowing add to cart
  • Displaying availability indicators
  • Filtering out-of-stock variants

Note: For multi-location inventory, see the Inventory API documentation

Response Data Structure​

Parent Product Response​

{
  data: {
    id: "parent-uuid",
    type: "product",
    attributes: {
      name: "T-Shirt",
      sku: "TS-PARENT"
    },
    meta: {
      product_types: ["parent"],
      variations: [
        {
          id: "size-variation-id",
          name: "Size",
          options: [
            { id: "small-id", name: "Small" },
            { id: "medium-id", name: "Medium" }
          ]
        }
      ],
      variation_matrix: {
        "color-option-id": {
          "size-option-id": "child-product-id"
        }
      }
    }
  }
}

Child Products Response​

{
  data: [
    {
      id: "child-uuid",
      type: "product",
      attributes: {
        name: "T-Shirt",
        sku: "TS-S-BL",
        base_product_id: "parent-uuid",
        price: {
          USD: { amount: 2999, includes_tax: false }
        },
        // Note: inventory is managed separately via inventory API
      },
      meta: {
        product_types: ["child"]
      }
    }
    // ... more children
  ]
}

Performance Tips​

  • Use includes wisely - Fetch related data in one request when possible
  • Cache parent data - Variation structure rarely changes
  • Paginate large sets - Use pagination for products with 50+ variants
  • Selective fetching - Only fetch child products when you need their specific data

Next Steps​

With variation data loaded:

References​