Shopify Customer Orders Page

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.

[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.

[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.