[SHOPIFY] wishlist implementation

[chemmanouilidis]

Hello,

I have modified the shopify implementation to support a fully functional wishlist per customer. The architecture modifications I did were the following:

1. I created a new metafield for customers with namespace and key of type JSON. (I used the shopify admin store page).
2. In order to mutate the metafield I had to use the shopify Admin API so I also extracted the admin schema using codegen 3)I created 3 new wishlist API endpoints based on req.method of thehandler: addItem, removeItem, getWishlist
3. I created simple handlers for useAddItem, useRemoveItem, getWishlist based on BigCommerce handlers and shopify Cart handlers. Those handlers hit the wishlist API.
4. Modified shopify constants to include admin API url and Shopify Admin Access Token (you can find them in your shopify admin page)
5. 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.
6. 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.

I also added the possibility for the customer to add an item to the wishlist if an item.variant is not available for sale

I will have to clean up the code a bit before I upload it to GitHub

EDIT: https://github.com/chemmanouilidis/nextjs-ecommerce-shopify-wishlist

[dominiksipowicz]

Thank you for your message and for raising this issue. As I can see, you have implemented this feature on your GH account as a clean repository. You have described a very interesting approach. It is similar to BigCommerce.

Are you interested in contributing to this repository by adding this feature and implementing it in a new pull request? Currently, it may be difficult to integrate your contribution (your implementation) into the main commerce repository because it is required to be updated with the latest changes and preferably a fork with git history. It would be preferable to create a PR from the forked code repository if you do not mind.

https://github.com/vercel/commerce#contribute

Thank you again for your contribution.

[chemmanouilidis]

Ok I ll try to do so.

[chemmanouilidis]

PR sent ! It's important to say that for the wishlist to work metafield must be created using shopify store admin page. (Settings -> Metafields -> Customers -> Add Definition and create a metafield with namespace: "my_fields" and key: "wishlist" of type JSON

[chemmanouilidis]

I could also automate the procedure even further by modifying the use-signup shopify handler to use the admin api instead of the storefront API in order to unlock the possibility of adding the wishlist metafield creation directly when a new customer is created but I am still debating on this as admin api operations come at a cost.

[leerob]

Hey there! Thank you for opening this issue. 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: https://github.com/vercel/commerce/pull/966