Skip to main content

We have Cart Integration, but we can only see one dropdown with combined variations

Why Are Variations Combined in One Dropdown?​

If you’re using Cart Integration and notice that product variations (e.g., color and size) are displayed as a single dropdown, this is likely due to the way your product data is structured. The Bambuser product hydration process relies on a specific hierarchical format to distinguish between different variation types, such as colors and sizes. If the required structure is not met, the variations will be combined into a single dropdown.

Cart Integration Structure Requirements​

Current Flat Structure​

Your product variants might currently follow a flat structure, which is common for Shopify or other e-commerce platforms. For example:

  • Black / 35
  • Black / 36
  • Cream / 36
  • Cream / 37

While this structure works for a single dropdown, it does not support displaying variations in separate sections (e.g., one for colors and one for sizes).

Required Hierarchical Structure​

To display variations as separate dropdowns, your product data needs to follow a hierarchical structure, like this:

  • Black
    • 35
    • 36
  • Cream
    • 36
    • 37

This format groups sizes under their corresponding colors, enabling the Bambuser player to present them as two distinct dropdowns.

How Factories Work in the PROVIDE_PRODUCT_DATA Event​

Bambuser uses a nested factory structure to handle product variations. Here's how it works:

  1. Variation Factory (variationFactory):
    This factory handles the primary variation, such as color. It creates a structured representation of all available colors for the product.

  2. Size Factory (sizeFactory):
    Nested within the Variation Factory, this factory manages size options for each color. It ensures that the correct sizes are displayed under their corresponding colors.

note

Because of this dependency, a hierarchical product structure is essential for displaying variations in separate sections.

Proposed Solution​

To enable color and size variations to be displayed in two dropdowns, your development team will need to:

  1. Transform the Flat Structure into a Hierarchical Format:
    Update the product data structure to group sizes under their corresponding colors, as shown in the hierarchical example above.

  2. Map the Hierarchical Data:
    Ensure the transformed data is correctly mapped in the PROVIDE_PRODUCT_DATA event during the hydration process.

For detailed instructions, refer to the Providing More Data to Player Products section in our documentation.

Next Steps​

  1. Discuss the necessary product structure changes with your development team.
  2. Transform the current flat structure into the required hierarchical format.
  3. Verify that the updated structure is properly integrated and functioning within the player.

If you have any questions or need further assistance, don’t hesitate to reach out to us.