ndimatteo / HULL

💀 Headless Shopify Starter – powered by Next.js + Sanity.io
https://hull.dev
MIT License
1.36k stars 167 forks source link

Bundles created with the Shopify App (Summer 2023) can't be added to cart #125

Closed jpvalery closed 8 months ago

jpvalery commented 1 year ago

Hey,

I've installed Shopify newest app for bundles (https://apps.shopify.com/shopify-bundles) and found that the quantities are not coming over properly.

For instance, I have a bundle with 8 units available, yet it shows as "Out of stock" with Hull.

I'm happy to open a PR and work on a fix but I could use some support in identifying the root cause of this.

At the moment, I'm guessing the course of action would be

jpvalery commented 1 year ago

Update: Tried instead to GET the URL from /api/shopify/product-inventory (aka https://${process.env.NEXT_PUBLIC_SHOPIFY_STORE_ID}.myshopify.com/admin/api/2022-10/products/${id}.json) to see if there was any difference between a bundle and a single product.

I couldn't spot any. 🤨

It seems that it's now showing the right quantity and inStock.

ndimatteo commented 12 months ago

hey there @jpvalery, the new Shopify bundles feature hasn't been tested with this setup yet. I imagine there's a lot more going on under-the-hood with it that's net new for HULL.

Also, considering the current version of HULL still uses the Shopify Buy SDK and a custom Sanity sync setup, there are likely some incompatibilities with the new Shopify bundles release.

I have plans to update HULL in the coming months to use a more modern flow (using Shopify's hydrogen-react and the sanity-connect plugin) which will likely have better support for the new Shopify Bundles.

Until then, feel free to continue looking into a fix and issue a PR if you find a solution! 🤘

jpvalery commented 9 months ago

Updating this as I'm seeing now that they can't be added to cart. I couldn't spot any difference when I logged newCheckout to the console. Trying to figure this out and will update the issue with my findings

jpvalery commented 9 months ago

After some trial-and-erroring, I found that the checkoutCreate doesn't work with the variantId returned by the bundle:

CleanShot 2023-10-29 at 23 57 33

Continuing from there, I found that the productId doesn't return any data when used in a query:

CleanShot 2023-10-30 at 00 07 16

I'm fairly confident that the root cause of the issue is here. Because we can't get the product data, we can't add it to the cart (with the storefont API—the admin API does return the proper data).

Continuing further, I tried listing all products (hoping that I'd see something in the product object for the bundle that would put on the solution's path) and realized that they're not showing up there: CleanShot 2023-10-30 at 00 19 07

Opened a ticket with Shopify to see if they have any idea—once I know how to properly find and add the bundles to the cart, the PR should be fairly easy.

jpvalery commented 9 months ago

Continuing my investigation, I found that adding the scope unauthenticated_read_bundles to the Storefront API permissions for the custom app made them appear in the query ✅

Still not able to add them to the cart (like this unanswered thread in their forum https://community.shopify.com/c/hydrogen-headless-and-storefront/how-to-add-product-in-cart-using-node-and-graphql-apis/m-p/2021952).

I have updated my ticket and opened a forum post to try and find what's missing here 🤔

jpvalery commented 9 months ago

Seems that another person facing the same issue got us a potential solution.

doing checkout.addLineItems doesn't work; but creating a cart does:

mutation {
  cartCreate(input: { 
    lines: [
      {
        merchandiseId: "variantId",
        quantity: 1
      }
    ]
  }) {
    cart {
      id
      checkoutUrl
    }
    userErrors {
      field
      message
    }
  }
}

@ndimatteo would you happen to know if this is doable with the shopify-buy package? Their doc isn't exactly clear and I'm checking in the off chance you would know.

Otherwise seems there's this option:

CleanShot 2023-10-31 at 00 06 16@2x

Lines to update: https://github.com/ndimatteo/HULL/blob/699c570a008440d9ff500ad80fce2c62aaf587ac/lib/context.js#L303-L307

jpvalery commented 9 months ago

Apparently Cart can't be handled by the JS SDK https://github.com/Shopify/js-buy-sdk/issues/907#issuecomment-1265074972

And the Shopify support team on the ticket told me they wouldn't help with this.

So GraphQL queries seem the only option...

I'm thinking that adding a cart object to initialContext and then leveraging graphQL queries for add/remove/update might be the best way to go.

Unsure if that should be a PR seen the massive change that would represent?

If it should, I'm more than happy to partner on that migration—I have a good grasp on the queries/mutations needed to create cart, add/remove items; I could benefit from some guidance on how to integrate that with the current context/setup.

ndimatteo commented 9 months ago

Hey there @jpvalery! Appreciate you digging into this to see what the options are for a solve.

As suspected, it sounds like the buy SDK is just not up-to-par with some of the newer features of Shopify.

Happy to review a PR, but I think a lot of this will be addressed with the next release planned (hydrogen-react, sanity-connect, etc).

jpvalery commented 9 months ago

Of course @ndimatteo! Least I could do!

I'm going to try and get this migrated over GraphQL queries with the following caveats:

  1. I might need some of your wisdom/experience with the whole context.js
  2. It might not be as elegant or efficient as the rest of your code
jpvalery commented 8 months ago

Fixed in #129 by https://github.com/jpvalery/HULL/commit/1425889d24b653a75d0bacfc91dc5cb887fb6537

Hahlh commented 8 months ago

Just wanted to say thank you @jpvalery for outlining your journey so thoroughly here. We are currently looking into creating bundle features for clients as well and found this issue very useful.