Skip to main content

List Bundle Components

Learn how to fetch bundle component data and display options effectively using the Shopper SDK.

SDK Functions for Bundles​

getByContextProduct​

Fetches a bundle product with its component products:

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

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

The response includes:

  • Bundle product with meta.product_types[0] === 'bundle'
  • Component products in included.component_products
  • Both fixed and dynamic bundles have attributes.components
  • Dynamic bundles include min/max requirements, fixed bundles do not

getByContextComponentProductIds​

Fetches the component product IDs and their configuration:

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

const response = await getByContextComponentProductIds({
  path: { 
    product_id: 'BUNDLE_ID' 
  }
});

Returns component structure with options and requirements for each component.

Example: Fetch Bundle with Components​

async function loadBundleWithComponents(bundleId: string) {
  // Fetch bundle with component products
  const bundleResponse = await getByContextProduct({
    path: { product_id: bundleId },
    query: { 
      include: ['component_products', 'main_image', 'files'] 
    }
  });

  const bundle = bundleResponse.data?.data;
  const componentProducts = bundleResponse.included?.component_products || [];
  const mainImage = bundleResponse.included?.main_images?.[0];
  const allImages = bundleResponse.included?.files || [];

  // Get component configuration details
  const componentConfig = await getByContextComponentProductIds({
    path: { product_id: bundleId }
  });

  return {
    bundle,
    componentProducts,
    componentConfig: componentConfig.data,
    images: {
      main: mainImage,
      all: allImages
    }
  };
}

Displaying Components​

Display components with their selection requirements:

function BundleComponentDisplay({ bundle, componentProducts }) {
  const components = bundle.attributes?.components || {};
  
  return (
    <div>
      {Object.entries(components).map(([key, component]) => {
        const isDynamic = component.min != null || component.max != null;
        const componentOptions = componentProducts.filter(
          product => component.options.some(opt => opt.id === product.id)
        );
        
        return (
          <div key={key}>
            <h3>{component.name}</h3>
            {isDynamic && (
              <p>Select {component.min || 0} to {component.max || 'any'}</p>
            )}
            <ul>
              {componentOptions.map(product => (
                <li key={product.id}>{product.attributes.name}</li>
              ))}
            </ul>
          </div>
        );
      })}
    </div>
  );
}

Next Steps​

With component data loaded:

References​