Shopify wishlist implementation #724

chemmanouilidis · 2022-03-31T16:28:41Z

Wishlist implementation for the Shopify provider. You can Add, Remove products to your customer wishlist as well as their variants. Also Added the possibility to add a specific product variant to your wishlist if its not available for sale (due to no stock etc)...

changed shopify fetch and graphQL fetch types and also the fetcher functions to include useAdminApiFlag in order to seperate graphql storefront API operations from Admin API ones,
generated shopify admin api schema(documentation for code generation is outdated and not working as per readme instructions - yarn generate:shopify script not present),
changed RemoveItemHook of commerce/types/wishlist,
created shopify wishlist api routes (addItem, removeItem, getWishlist),
added shopify api operation getCustomerWishlist,
updated index files of api/operations, utils and api/wishlist,
created shopify wishlist types ,
created getCustomerId function as a util in shopify ,
added customerUpdate mutation (Admin API operation), customer query (Admin API operation),
added getCustomerId query,
modified commerce wishlist endpoint to extract item variable from req/body,
added useAdminApi flag to commerce fetcherOptions,
updated wishlist api constants,
modified shopify fetcher,
added wishlist handlers to shopify provider ,
Polished frontend UI so that you can now correctly add product to wishlist if variant is not available for sale
modified .env.template files to correctly refer that you also need shopify admin access token

…flag, generated shopify admin api schema, changed RemoveItemHook of commerce/types/wishlist, created shopify wishlist api routes (addItem, removeItem, getWishlist), added shopify api operation getCustomerWishlist, updated index files of api/operations, utils and api/wishlist, created shopify wishlist types created getCustomerId function as a util in shopify added customerUpdate mutation, added customer query with admin api, added getCustomerId query

…/body, added useAdminApi flag to commerce fetcherOptions, updated wishlist api constants, modified shopify fetcher, added wishlist handlers to shopify provider Polished frontend UI so that you can now correctly add product to wishlist if variant is not available for sale

vercel · 2022-03-31T16:28:45Z

@chemmanouilidis is attempting to deploy a commit to the Vercel Solutions Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2022-03-31T16:28:46Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

commerce-local – ./site

🔍 Inspect: https://vercel.com/vercel-solutions-vtest314/commerce-local/4tMM9t6GzHEvFbqwnFRiJJELBWAH
✅ Preview: Failed

[Deployment for e81c0fb failed]

commerce-bigcommerce – ./site

🔍 Inspect: https://vercel.com/vercel-solutions-vtest314/commerce-bigcommerce/J7v1CDEWHcfBgAZGGqm1msGfWepN
✅ Preview: Failed

[Deployment for 594b3ef failed]

commerce-ordercloud – ./site

🔍 Inspect: https://vercel.com/vercel-solutions-vtest314/commerce-ordercloud/2pPXTFgZt6ZQe6FFwmdsXv83TePB
✅ Preview: Failed

…e shopify admin access token to use shopify Admin API

dominiksipowicz

Thank you for your contribution. It looks awesome and is a lot of work. Please see my comments and requests for changes.

Additional notes:

we use yarn for this project, please remove package-lock.json
the main "local" build is failing

site/commerce.config.json

packages/shopify/.env.template

packages/commerce/src/types/wishlist.ts

packages/commerce/src/api/endpoints/wishlist.ts

site/.env.template

site/components/wishlist/WishlistCard/WishlistCard.tsx

site/components/product/ProductCard/ProductCard.tsx

vercel · 2022-04-20T07:31:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
commerce-kibocommerce	❌ Failed (Inspect)		Apr 21, 2022 at 8:43AM (UTC)
commerce-local	✅ Ready (Inspect)	Visit Preview	Apr 21, 2022 at 8:43AM (UTC)

chemmanouilidis · 2022-04-20T08:05:39Z

Corrections Commit includes the following changes:

### Commerce API

reverted commerce/api/endpoints/wishlist & commerce/types/wishlist to source implementation to avoid problems with other providers and major breaking changes

### Shopify provider

Modified shopify/api/endpoints/wishlist/add-item property destructuring to be compatible with the types used,
remove-item also has the same destructuring method plus new filtering method that correctly filters the wishlist by productId AND variantID
Modified shopify/types/wishlist. RemoveItemHook type now correctly extends the core type from commerce/types/wishlist by adding an optional property itemVariantId, modified WishlistSchema type to be compatible with the new functions used in wishlist/endpoints (add-item, remove-item etc) by adding variables type property for the body.
minor changes to use-add-item specifically in the way properties are being handed to the fetcher.
use-remove-item hook now complies with the new types declared passing through itemId and itemVariantId
modified env.template and const files to "hide" admin access token variable.

Site Components

Modified WishlistButton removeItem function to be compatible across all providers
Modified WishlistCard removeItem function (same as above) and also added variant options labels for each product in your wishlist. This all summarizes my goal from the begining being a user should be able to add more variants of the same product in his wishlist and not just the main product. One, can desire both the blue and the red version of that T-Shirt that is currently out of stock in those colors.
Wishlist page midifications are mainly reverts to previous changes I have made. Now wishlist page should be the same as origin.

chemmanouilidis · 2022-04-21T07:32:26Z

Thank you for your contribution. It looks awesome and is a lot of work. Please see my comments and requests for changes.

Additional notes:

we use yarn for this project, please remove package-lock.json

the main "local" build is failing

package lock removed.
local build was failing to me because it could not resolve the wishlist hooks from the "local" framework. wishlist folder of local package didn't have an index file with default exports. Should I add it and commit? adding the file to me, solves the problem.

…kage, reverted tsconfig changes I made for develop testing.

…rd components as the default option for provider compatibility

chemmanouilidis · 2022-04-21T08:47:28Z

now the main "local" build succeeds.

robinglen · 2022-08-12T10:40:19Z

@chemmanouilidis thanks for this PR. Is there any progress here, did you ever use this in production?

chemmanouilidis · 2022-09-27T08:23:57Z

@chemmanouilidis thanks for this PR. Is there any progress here, did you ever use this in production?

I don't think any further progress is required. I currently use it in production and it seems stable.

curiouscrusher · 2022-10-04T18:31:52Z

packages/shopify/src/api/endpoints/wishlist/add-item.ts

+      })!
+      metafieldInput = { id: wishlist?.id! }
+    } else {
+      metafieldInput = { namespace: 'my_fields', key: 'wishlist' }


@chemmanouilidis just a heads up, I believe you need a type: 'json' on this metafieldInput, otherwise the initial metafield API call will quietly fail and the Wishlist is never created.

Nope. It has been tested "as is" and works as intended. I use this implementation live without any problems so far.

The reason why you don't need this is because you don't actually create the Metafield. The metafield is created inside the settings section of your shopify store. By going to Settings > Metafields and choosing customers you define a Metafield for the customers field which is of json type. So every customer created already has the Wishlist metafield by default and it is of type JSON.

In the code block you mention, in order to add an item to the wishlist, I must first check if this customer's wishlist is already populated or not. There is a slight difference in the mutation if the list is already populated.

leerob · 2023-04-18T02:31:59Z

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

chemmanouilidis added 3 commits March 30, 2022 23:50

first commit - env setup

7fb6734

vercel bot had a problem deploying to Preview – commerce-local March 31, 2022 16:28 Failure

modified .env.template files to correctly refer that you also need th…

e81c0fb

…e shopify admin access token to use shopify Admin API

vercel bot had a problem deploying to Preview – commerce-local April 1, 2022 18:02 Failure

dominiksipowicz added the checking label Apr 13, 2022

vercel bot had a problem deploying to Preview – commerce-bigcommerce April 13, 2022 13:29 Failure

vercel bot had a problem deploying to Preview – commerce-ordercloud April 13, 2022 13:30 Failure

dominiksipowicz requested changes Apr 13, 2022

View reviewed changes

dominiksipowicz reviewed Apr 13, 2022

View reviewed changes

site/components/product/ProductCard/ProductCard.tsx Show resolved Hide resolved

dominiksipowicz added provider-shopify and removed checking labels Apr 19, 2022

corrections

a0ab4c8

vercel bot had a problem deploying to Preview – commerce-local April 20, 2022 07:33 Failure

chemmanouilidis requested a review from dominiksipowicz April 20, 2022 07:33

dominiksipowicz added the checking label Apr 20, 2022

vercel bot had a problem deploying to Preview – commerce-kibocommerce April 20, 2022 11:47 Failure

package-lock.json removed

432dcea

vercel bot had a problem deploying to Preview – commerce-local April 21, 2022 07:23 Failure

added index file with default exports for wishlist hooks on local pac…

9892600

…kage, reverted tsconfig changes I made for develop testing.

vercel bot had a problem deploying to Preview – commerce-local April 21, 2022 07:36 Failure

commented out itemVariantId property on wishlistButton and wishlistCa…

c6200c5

…rd components as the default option for provider compatibility

vercel bot deployed to Preview – commerce-local April 21, 2022 08:43 View deployment

curiouscrusher reviewed Oct 4, 2022

View reviewed changes

chemmanouilidis mentioned this pull request Oct 6, 2022

Shopify Customer Orders Page #817

Closed

leerob closed this Apr 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shopify wishlist implementation #724

Shopify wishlist implementation #724

chemmanouilidis commented Mar 31, 2022 •

edited

Loading

vercel bot commented Mar 31, 2022

vercel bot commented Mar 31, 2022 •

edited

Loading

dominiksipowicz left a comment

vercel bot commented Apr 20, 2022 •

edited

Loading

chemmanouilidis commented Apr 20, 2022

chemmanouilidis commented Apr 21, 2022

chemmanouilidis commented Apr 21, 2022

robinglen commented Aug 12, 2022

chemmanouilidis commented Sep 27, 2022

curiouscrusher Oct 4, 2022

chemmanouilidis Oct 6, 2022 •

edited

Loading

leerob commented Apr 18, 2023

Shopify wishlist implementation #724

Shopify wishlist implementation #724

Conversation

chemmanouilidis commented Mar 31, 2022 • edited Loading

vercel bot commented Mar 31, 2022

vercel bot commented Mar 31, 2022 • edited Loading

commerce-local – ./site

commerce-bigcommerce – ./site

commerce-ordercloud – ./site

dominiksipowicz left a comment

Choose a reason for hiding this comment

vercel bot commented Apr 20, 2022 • edited Loading

chemmanouilidis commented Apr 20, 2022

Site Components

chemmanouilidis commented Apr 21, 2022

chemmanouilidis commented Apr 21, 2022

robinglen commented Aug 12, 2022

chemmanouilidis commented Sep 27, 2022

curiouscrusher Oct 4, 2022

Choose a reason for hiding this comment

chemmanouilidis Oct 6, 2022 • edited Loading

Choose a reason for hiding this comment

leerob commented Apr 18, 2023

chemmanouilidis commented Mar 31, 2022 •

edited

Loading

vercel bot commented Mar 31, 2022 •

edited

Loading

vercel bot commented Apr 20, 2022 •

edited

Loading

chemmanouilidis Oct 6, 2022 •

edited

Loading