Shopify Customer Orders Page

[jenniferhail]

Describe the feature you'd like to request

A page accessible only to logged in customers that displays all current and previous orders

Describe the solution you'd like

A new useOrders hook existing in packages/commerce and packages/shopify that queries all orders for the current logged in customer. Some of the graphQL data would include:

• date
• fulfillment status
• line items
• addresses
• payment method
• subtotal
• taxes
• order total
• link to track the order
• etc.

Describe alternatives you've considered

I've tried to add on to the current getCustomerQuery in packages/shopify/src/customer/use-customer.tsx but it only returns the order id and name. Anything else I add inside the node breaks the query and returns a field not found error. I think this might be because it's setup to query the Storefront API and not the Admin API.

I've also tried to duplicate the useCustomer hook to use as a starting point, but haven’t had any luck yet unraveling the code.

Any help I can get to solve this or with finding the right direction would be greatly appreciated. If I can't figure this out, I think I'll have to switch to liquid and abort this headless solution.

[DennisKraaijeveld]

You could have a look at this: https://shopify.dev/api/admin-graphql because as far as I know, order information etc comes from the Admin API

[osseonews]

Based on experience, stick with Liquid and do not even attempt headless, unless you want to spend a year debugging, custom coding etc. While this repo is an amazing achievement, it is at best a "skeleton" and requires extensive custom coding to actually get it to production. Never mind trying to unravel the code; it is a beast and overly complex. At the same time, none of the supposed providers actually support this repo at all, so nothing really gets updated, and you are on your own.

That said, if you are glutton for punishment, like myself, there is no harm really, as you can learn a ton working with this repo. However, if you going to use Shopify, I'd recommend Shopify Hydrogen instead, because at least then you will get support from Shopify and their repo is much more active. But, Shopify Hydrogen probably will take another year or so until it is actually somewhat stable; they are already re-working their entire cart after just releasing it.

[jenniferhail]

@osseonews oh yikes. leave it to me to undertake something entirely new for a client site. :| i was also slowing hooking it up to sanity for easy page & blog post building. hahaha wow.

do you have any recommendations for a starting liquid theme?

[osseonews]

Sorry, I don't use liquid anymore, I'm so deep into headless with NextJs, I'm just sticking with it now.

Sanity is a good choice for a headless CMS. If you go down that route, I'd check out CommerceLayer.io - they have a good Sanity Starter and a bunch of good React repos that are far easier to implement than nextjs commerce. It really depends on what your client is willing to pay. Headless is just a ton of work and way more to maintain than liquid. But, over time headless will get easier as better frontends are released.

[DennisKraaijeveld]

Sorry, I don't use liquid anymore, I'm so deep into headless with NextJs, I'm just sticking with it now.

Sanity is a good choice for a headless CMS. If you go down that route, I'd check out CommerceLayer.io - they have a good Sanity Starter and a bunch of good React repos that are far easier to implement than nextjs commerce. It really depends on what your client is willing to pay. Headless is just a ton of work and way more to maintain than liquid. But, over time headless will get easier as better frontends are released.

Well, its not as bad as you say it is haha. I started 2 years ago and made my first Headless Shopify store with Gatsby. Yes, there is custom code involved like getting the account and order pages to work, custom filtering, CMS and forms, but other then that it's fine and reasonable.

I made the mistake to get into Gatsby for these kind of things. It's working, but getting it multilingual is really a pain. For this reason I am now moving towards Nextjs and basically port my existing store. But I have no clue what is the actually reason behind this repo. Is it a proof of concept? Is it actually actively maintained? I do love the concept of those hooks, but it's really complex to get into and built your own hooks. Seems much easier to start from scratch and just query the data you need for each page.

Maybe look into Hydrogen, which is a more native solution.

[jenniferhail]

If it weren't so difficult to create new data hooks and customize the commerce packages, this wouldn't be a bad repo. Hydrogen does seem exciting and I'll definitely try it out eventually. I found this neat marketing page all about their latest updates: https://www.shopify.com/editions/summer2022/dev.

For my client's site, I decided to switch to customizing the Dawn Shopify theme and it's been going really well so far. The updates to the theme customizer are great (it has been about five years since I last used it) and the shopify cli is easy to use. Plus they have a ton of documentation, so I won't have to worry about getting stuck.

I did figure out how to add on to the customer query and get basic order data from the storefront api, so I had a simple order page up and running. But not knowing what other hurdles I might face in the future made it an easy decision to drop vercel commerce.

Thanks for your recommendations and comments, @DennisKraaijeveld and @osseonews.

[osseonews]

Hey, I think you made a good choice with the Shopify theme. This repo still is a great reference for any headless project you might want to pursue. The code structure while complex is well though out. You can learn alot by just reviewing the code and trying to modify it for your needs.

In case you are interested in headless, I think the best way, based on my painful experience, is to go is in stages. First get all your products (ideally stored in a database but you can also use a JSON file) and display them in NextJs frontend. This is relatively easy and this repo greatly complicates that basic 1st step, but you can copy their product slug file to set it up correctly. I would then recommend just using Stripe and store a purchase link in the database, and on the product page just have the customer go to Stripe for checkout. Stripe's checkout pretty much has every feature any customer would want. Use stripe's webhooks to store orders back in the database. Over time you can add on more features for logged in users, like viewing orders etc. But, initially, just keep it simple by displaying products and relying on Stripe. Headless has been made extraordinarly complex for no particular reason, and the prices of the headless platforms are obscene relative to what you can get out of the box from Shopify and/or Stripe checkout.

[Vinna152]

@osseonews Did you by chance use this with Shopify Plus?

I loved the entire experience and everything I learned from making a fully functioning commerce site with Shopify using this template. It's truly on its way to greatness.

The only thing that I feel Shopify fell short on is linking the checkout to the user.
How did you work around the requirement for the multipass authentication call to link the shopify checkout to the customer?

[osseonews]

@Vinna152 No. I used another e-commerce backend, which I'm not happy with, so I won't recommend it. If I were to use Shopify, though, I'd build on their Hydrogen platform, as it's actively developed and supported by Shopify. So long-term Hydrogen seems like a better choice for Shopify users. Personally, I think Shopify made some terrible choices with Hydrogen, so I have no interest really in developing on it right now.

As I stated above, this repo is amazing, and you can learn a ton from it. The problem is that none of the providers (except maybe BigCommerce) actually support it, so you are left on your own for alot of functionality, which means that long-term maintaining any store build on this platform will prove very difficult (based on my experience). The mistake NextJs made here is precisely trying to be able to have a platform for every provider, as the basic structure of the platform would never be appealing to any provider due to competitive reasons. By trying to build a platform like this, they have made it needlessly complex. I mean useSwr is incredibly simple hook from Vercel, but this repo makes it into quite literally the most complicated data fetch library I have ever seen. That being said, I think this is an awesome repo to get started and I think you can borrow what is good from it to build a store and then just discard the unnecessary pieces. That's at least what I am going to do, going forward.

[chemmanouilidis]

You can easilly implement the feature you want by adding the Admin API to your implementation. This is what I did in order to implement a wishlist feature to the shopify provider. You can check my PR here: #724 and you can ask me anything you need help with. It's totally doable though and it integrates to the current repo perfectly well without causing any problems. Everything in my implementation is strictly typed too and compatible with existing types.

The architecture modifications I did were the following:

I created a new metafield for customers with namespace and key of type JSON. (I used the shopify admin store page).
In order to mutate the metafield I had to use the shopify Admin API so I also extracted the admin schema using codegen
I created 3 new wishlist API endpoints based on req.method of the handler: addItem, removeItem, getWishlist
I created simple handlers for useAddItem, useRemoveItem, getWishlist based on BigCommerce handlers and shopify Cart handlers. Those handlers hit the wishlist API.
Modified shopify constants to include admin API url and Shopify Admin Access Token (you can find them in your shopify admin page)
I modified fetcher and fetcherOptions types to include useAdminApi flag, then modified the fetcher function to also use both admin and storefront api depending on the call and the method used.
Under shopify/operations I created a get-customer-wishlist operation. The operation fetches the metafield value, it parses the JSON value and creates an array of objects with each object consisting of productId, variantId pair. I then extract all products using getAllproducts operation and then filter those products by the productIds i previously extracted from the Json metafield value. I then construct the wishlist object consisting of id (you get that automatically when you add value to the metafield) and items which is an array of objects {productId, variantId, product}.
Concerning the handlers (useAddItem, useRemoveItem, getWishlist) instead of executing a query or mutation directly they just hit the api endpoint (/api/wishlist) and depending the method (get, post or delete) the corresponding function is called (get-customer-wishlist, add-item, remove-item). This was made in order to overcome the shopify admin api which restricts and admin api operations from running through the frontend.

[osseonews]

As a follow up on this issue, Shopify acquired Remix today, and basically admitted that RSC (React Server Components) doesn't work. At the same time, Vercel is making a big bet on RSC with NextJs 13, which would undermine useSwr which is the basis of this entire repo. Obviously, they will have to refactor this entire repo to use RSC. This would of course make the codebase much simpler, as the reason for what I see as the code bloat in this repo is due to useSwr (see the Remix version of this Commerce). However, once they refactor it they will face the same problems that Shopify had with RSC, and I don't see how they will fare any better. So overall, I don't see how NextJsCommerce will evolve and I feel that it remains risky to build on, in my opinion. It is unfortunate, as this is an amazing project which I learned a ton from, but Vercel seems to have not been focused on it (more like a side project for them) and is making some strange long-term decisions now with regards to RSC that I don't think will work with Commerce type websites.

[jenniferhail]

Here's a link to the announcement article if anyone's curious.

I'll definitely be following along to see how Hydrogen shapes up.

[leerob]

Hey there! Thank you for your contribution. We have decided to take Next.js Commerce in a new direction and will be closing out current PRs and issues due to this change. Please see this PR for more details: #966