Enhancement: Add Shopify Bundle Logic

[mcschirl]

I was building a shop and wanted to use the Shopify Bundles App; unfortunately, there was no support, unlike in Hydrogen. So I went ahead and added some GraphQL logic to make working with bundles possible. Would this be something you'd like to add in the future? I could make a pull request if you'd like to.

[rylanharper]

Hey @cptprice1139!

Oh wow, this is super interesting.. I actually haven't worked with the Shopify Bundles App before (most of my clients are retail/fashion type ecom). It would be really cool to have this feature, but I'd like some additional info on it from your end - do you have this working locally or in production using this template?

[mcschirl]

I currently have just a “quick and dirty” version of it because it was a last minute adjustment. But basically I use Shopify GraphQL viewer to see what the Bundles App does. It adds a components field on the ProductVariant, which is basically just an array of product references (the bundle items). Another thing is adding the bundle to the cart, this also needs some extra logic. But apart from that it’s rather simple. I could make a fork and implement it with some small documentation if you’d like.

[rylanharper]

Got it! I'm guessing some additional product-form and cart components also need to be implemented as well? I'd be interested in seeing a PR if this is not too much of an overhaul to any part of the codebase. Don't get me wrong, this is definitely very cool, but I am trying to keep this template somewhat minimal in scope haha. If its not too intrusive, thats great!

On another note, I did initially have sellingPlan GraphQL fields in this project for subscriptions, but I took it out because I didn't want things getting overly complex. I could look into adding those back in again..

[mcschirl]

Yes, I totally get it. That's also a reason why I love your template so much; it's clean and minimal, and you can build anything off it. I can document the basic logic so that others can replicate it if needed. There may be a way to componentize certain addons similar to Hydrogen.

[bdahlinger]

super interested in the outcome of this, bundles are important for my client's store!

[rylanharper]

Sorry for the late reply!

@cptprice1139 I'd be interested in seeing a PR if you have the time (no rush at all). I'm totally open to ideas to compartmentalize addon components in a way that makes sense, but for right now lets keep the code simple. I am thinking we can add the bundle GraphQL logic and possibly add from component in the product /form folder like form-bundle-options.vue. That way its somewhat similar to the other form components in name convention. Note that I am not sure what components need to be added to get bundles working, so please let me know what you think. If its pretty substantial we can discuss adding a new folder, etc. (although I hope this is somewhat minimal).

Give me time this week to push a PR that relocates the template's data sources into the /modules folder (#29) and updates the codegen configs. know I can resolve merge conflicts, but it will be a lot easier to add a PR on your end once the new data structure is set in place. I should have this done within the next day or so!

[mcschirl]

No worries — I’m a bit short on time myself.
What I can do for now is put together a quick doc with all the GraphQL queries needed for working with bundles, so people can already start using them without waiting for a PR. After that, I’ll draft some simple code. I’ve mostly been working with the older Nuxt 3 setup recently, which is already quite similar, but I’ll need to take a look at the new structure first.

[mcschirl]

The following is my personal GraphQL Query for Bundles. It includes all important information, that may be needed.

query Product {
  product {
    variants {
      edges {
        node {
          components {
            edges {
              node {
                quantity
                productVariant {
                  availableForSale
                  barcode
                  compareAtPrice {
                    amount
                    currencyCode
                  }
                  compareAtPriceV2 {
                    amount
                    currencyCode
                  }
                  components {
                    edges
                    nodes {
                      productVariant {
                        availableForSale
                        barcode
                        currentlyNotInStock
                        id
                        sku
                        title
                        weight
                        weightUnit
                      }
                      quantity
                    }
                  }
                  currentlyNotInStock
                  id
                  image {
                    altText
                    id
                    src
                    url
                  }
                  price {
                    amount
                    currencyCode
                  }
                  priceV2 {
                    amount
                    currencyCode
                  }
                  quantityAvailable
                  requiresComponents
                  requiresShipping
                  sku
                  title
                  weight
                  weightUnit
                  unitPrice {
                    amount
                    currencyCode
                  }
                  unitPriceMeasurement {
                    measuredType
                    quantityUnit
                    quantityValue
                    referenceUnit
                    referenceValue
                  }
                  taxable
                }
              }
            }
          }
        }
      }
    }
  }
}

Second step is editing the cart, in order to push Bundle Products into the Shopify Cart you will need following query:

query Cart {
  cart {
    lines {
      edges {
        node {
          ... on ComponentizableCartLine {
            id
            merchandise {
              ... on ProductVariant {
                id
              }
            }
            quantity
            attribute(key: "") {
              key
              value
            }
            attributes {
              key
              value
            }
            cost {
              subtotalAmount {
                amount
                currencyCode
              }
              totalAmount {
                amount
                currencyCode
              }
            }
            discountAllocations {
              discountedAmount {
                amount
                currencyCode
              }
            }
            lineComponents {
              merchandise {
                ... on ProductVariant {
                  id
                }
              }
              quantity
              id
            }
          }
        }
      }
    }
  }
}

Generally, you just push products into the cart normally, something like this:

await cartStore.addToCart([
    {
        merchandiseId: props.currentVariant.id,
        quantity: quantityValue.value,
    }
]);

But unless you added the ComponentizableCartLine it wont properly work and the Shopify will add an empty object to your Cart.

I think the Graphql structure of Bundles is pretty easy to integrate into your Product. Here are some simple examples:

flattenConnection(currentVariant?.components).map((x: any) => `${x?.quantity}x ${x?.productVariant?.product?.title}`).join(', ')

With this you could list the Bundles Products

const isBundle = computed(() => {
  return productVariants.value.some(v => v.components && v.components?.edges && v.components.edges?.length > 0);
});

Easy check to see if a product is a Bundle

Important Note: For anyone wondering, you can install the Shopify Bundles App and use the Shopify GraphQL Explorer to get more fields, if needed.

[rylanharper]

Hey @cptprice1139, thank you for this write up!

Help me understand some things on this, because I haven’t used ComponentizableCartLine yet (despite using just about every other query/mutation over the years lol). When including ... on ComponentizableCartLine in the cart query, does it still support adding regular products to the cart as usual, or is it specifically for bundle products only?

If it works for both, I’m thinking we could just add the ... on ComponentizableCartLine to the existing cart line query, and then split out the bundle-specific fields into their own fragments (component stuff), keeping it consistent with how the other fragment objects are structured in the project.

One more thing I want to clarify: Can the bundle logic be layered on top of the current addToCart flow? In other words, if a product has bundle components, handle it a certain way (likely with a conditional), but if not, keep the existing add-to-cart behavior. That way we wouldn’t need two completely separate flows or a new form component. Just thinking more along the lines of how to add all this bundle to the current template without overhauling anything.

PS - I update the project with the new the new data structure! The Shopify and Klaviyo data to into their respective /modules folders, under /resources.

[mcschirl]

Hi, I just wrote this down without almost any details, sorry for that 😅

Regarding the ComponentizableCartLine: Yes, as far as I understand from my code (which I haven't worked on for a while), I didn't change or add any extra logic. As far as I remember, it works fine if you just add this ComponentizableCartLine to the cart query, nothing else required. I looked it up in my working project, and I've been using the normal cartStore everywhere. Normal products also still work with this query; however, Bundle Products will end up as empty objects in the Storefront API if they are not used.

I mean, generally you could just add it on the current cart mutation, shouldn't cause any issues, what I didn't test, though, is if the Bundles App is not installed. That would be worth giving a try, because many people might not need it, and if it caused problems, it would be counterproductive.

[rylanharper]

Hey @cptprice1139,

Sorry for the somewhat late replies on this thread, I'm launch a big ecom store at the beginning of next week and my workload is immense.. Okay let me give this a try when I have time, likely towards the end of the week. I'll try it first without the bundle app installed and then with it installed. If it works, I'll get back to you and we can discuss a PR or how to move forward with additional code/components that need to be implemented.