How to access bundles' products in Storefront API

[marnauortega]

Hi everyone,

I'm able to query product bundles in the Storefront API, I just don't know how or if it is possible to get the products the bundle consists of. Hope someone can point me in the right direction.

Thanks

[johncraigcole]

Hey @marnauortega 👋 . What app are you using to manage bundles?

[marnauortega]

I'm using shopify's first-party newly released product bundles app: https://apps.shopify.com/shopify-bundles
Here they explain how to use it: https://help.shopify.com/en/manual/products/bundles
And here it says bundles can be accessed through the storefront API: https://changelog.shopify.com/posts/storefront-api-support-for-product-bundles
But I'm unable to access bundles' products, and that's necessary to create a custom headless storefront.

[johncraigcole]

Right now, if the products that are components of a bundle, have variants, the components can be inferred on the bundled product by using options.

query getBundleProduct {
	product(id: "gid://shopify/Product/8699191132182") {
		title
		options(first: 3) {
			... on ProductOption {
				name
				values
			}
		}
	}
}

If the components don't have variants defined, meaning there's just the default single variant, this doesn't work and is something that will be improved on over time to hopefully provide component expansion similar to when the bundled product is added to the cart and ComponentizableCartLine provides the context you ideally are looking for on a product query I believe.

query getCart($cartId: ID!) {
	cart(id: $cartId) {
		id
		checkoutUrl

		lines(first: 250) {
			pageInfo {
				hasNextPage
				hasPreviousPage
			}
			nodes {
				id
				... on ComponentizableCartLine {
					lineComponents {
						quantity

						merchandise {
							... on ProductVariant {
								title
								product {
									title
								}
							}
						}
					}
				}
				quantity
			}
		}
	}
}

[marnauortega]

Thanks a lot @johncraigcole . So to be sure I understand, if I have bundles containing products with the single default variant, there's no way for me to query them effectively, right? On the cart, though, it can be done thanks to ComponentizableCartLine.

Bottom line, I'll have to wait to start using product bundles in headless stores until something similar to ComponentizableCartLine is implemented for the product query, I suppose?

Do you have any idea if this might happen any time soon? That would be very useful.

Thanks again : )

[johncraigcole]

Yes your understanding is correct. I'm assuming perhaps you want to link to the individual component products from the Bundle product detail page. If so, in the short term while admittedly it's data duplication, you could create your own metafield to store the component products as a list. With that metafield available to the Storefront API, it's an alternative that could allow you to move forward.

[marnauortega]

Yes, the goal would be to both link to the component products and to display their information. But you are right, for the time being this seems like a feasible workaround, given that my shop is not huge. Thank you, @johncraigcole .

I'm hoping that by the begining of 2024 this might be solved. : )

[joshistoast]

It's 2024 and we have the components field on product variants 🙌

[jedashford]

This was incredibly difficult to find, finally chatgpt o1-preview was able to solve it. See below as an example and good luck in Shopify GraphQL land.

This gives the parent product, along with all of its sub products and quantities.

  product(id: "gid://shopify/Product/[YOUR-PRODUCT-ID-HERE]") {
    id
    title
    variants(first: 10) {
      edges {
        node {
          id
          title
          sku
          priceV2 {
            amount
            currencyCode
          }
          components(first: 10) {
            edges {
              node {
                productVariant {
                  id
                  title
                  sku
                  priceV2 {
                    amount
                    currencyCode
                  }
                  product {
                    id
                    title
                  }
                }
                quantity
              }
            }
          }
        }
      }
    }
  }
}

[GFier]

Hi! Which app are you using for Bundles??

I have tested Fast bundle and it creates a new product without variants and components is returning an empty array. Also tried native one which creates a new product with the variants of the selected products but does not have too many options for bundling.

Thanks.

[RromeroLG]

Hi there, thanks for sharing this! I was able to find a solution, I used the productVariantComponents, I'll pasted here in case someone else need it:

{
  product(id: "gid://shopify/Product/[YOUR-PRODUCT-ID-HERE]") {
    id
    title
    variants(first: 10) {
      edges {
        node {
          id
          title
          sku
          productVariantComponents(first: 10) {
            edges {
              node {
                productVariant {
                  id
                  title
                  sku
                  product {
                    id
                    title
                  }
                }
                quantity
              }
            }
          }
        }
      }
    }
  }
}