Custom storefront wishlist using Admin API

Custom storefront wishlist using Admin API

Famous_Fella
Visitor
3 0 0

Hello,

 

I am new to the shopify world and I recently started experimenting on how to use shopify as a headless CMS to build an ecommerce platform. 

The technology stack I picked was Next.JS with typescript so I started off using the vercel starter template which uses the shopify platform together with the storefront API to build a custom ecommerce platform deployed to Vercel. Now I am trying to figure out how I could implement a wishlist.

 

My original plan was to create a customer metafield in JSON format that could be used to store productIds.

Digging around (as I stated I am a fresher to shopify development) and as I understand it up to this point, and please correct me if I am wrong, I can use the storefront API to retrieve the metafield (aka wishlist) but in order to send the actual customerUpdate mutation I would need to use the Admin API but using the admin API from the frontend is not allowed to prevent security issues. 

 

I read the documentation about the node.js api library as well as some other libraries created by developpers (next-shopify-toolbox) but this only added more confusion as to how I can go on to implementing the feature, mostly because the libraries give examples for private apps and not custom storefronts. 

 

Can I for example, use the api routes that nextjs 10 provides, to authenticate and send the customerUpdate mutation?
Do I need ngrok ? why? 

What kind of authentication must/should use? 0Auth? basic-http? session-tokens?
Will I need to authenticate everytime the customer clicks "Add-to-Wishlist" button? 

Will this strategy fail if lots of users hit "Add-to-Wishlist" button as I will eventually cap the request limit?

Replies 4 (4)

Jannik_Hansen
Tourist
8 0 1

Hi there, 

 

Not really too difficult... To get from frontend to backend you need to use app-proxy: https://shopify.dev/apps/online-store/app-proxies

 

Takes 30 sec to set up - and then you can access the admin api accordingly. 

Best regards
Jannik Hansen

Want to talk? Hansen.jannik90@gmail.com
Famous_Fella
Visitor
3 0 0

Hello Janik, 

 

thank you for your time to help me. Could you care to ellaborate more on the app proxy? How should I go about implementing the feature in my next.js project?

Jannik_Hansen
Tourist
8 0 1

I've never used Next.JS.... 


But for an example... I make a PHP file in the private app... 

Call it through the app proxy.. 

 

And now I can load it in the theme without being blocked by CORS. 

 

Do some googling - or otherwise maybe hire a specialist for a few hours to teach you this. 

Best regards
Jannik Hansen

Want to talk? Hansen.jannik90@gmail.com
Famous_Fella
Visitor
3 0 0

I am not building a private app. I guess this was the main reason of confusion. I am building a custom storefront using next.JS. Shopify exists on my project only as a headless CMS. I am not using any shopify themes for the project. I basically only make use of the cart, customer, inventory and products functionalities of shopify.