FROM CACHE - en_header

Question about simple app

hieptran
Tourist
10 0 5

Hi, I'm new to shopify app and it's very confusing where to start.

I'm decided to make a demo.

My demo app: When user add to cart, show a custom modal in the store, if user clicks yes, I will increase quantity of that product to 1.

Can anyone provide me keyword for each job, then I can do the research:

1. Detect when user add to cart.

2. Show custom modal layout in the store.

3. Modify the cart.

 

Thank you so much!!

Replies 4 (4)
hieptran
Tourist
10 0 5

Hi anyone?

SBD_
Shopify Staff
Shopify Staff
1098 146 224

Hey @hieptran,

 

Building this for a single store would be reasonably straight forward but building it for multiple stores, as an app, would be a little awkward.

 

Single store:

- Make theme changes to listen for a submit on the add to cart form, display modal.

- Modify the cart using the AJAX API

 

As an app:

- JavaScript can be injected through a ScriptTag

- Detecting an add to cart is tricky since you can't predict the merchant's theme code. One approach would be to listen for a `[action=/cart/add]` submit, or listen for AJAX requests to `/cart/add.js` - but there would be a bunch of edge cases to consider.

- To modify the cart, use the AJAX API

Scott | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

hieptran
Tourist
10 0 5

Thank so much, this helps me a lot as a newbie.

I have 2 more questions:

1. I can use ScriptTag to add javascript, but how can I add a HTML modal?

2. Is it easier if I detect if user go to cart page?

SBD_
Shopify Staff
Shopify Staff
1098 146 224

No worries!

 

I can use ScriptTag to add javascript, but how can I add a HTML modal?

Use JavaScript to build out the modal.

 

Is it easier if I detect if user go to cart page?

Not sure on your end goal, but maybe. You can detect the cart page by seeing if the URL ends with /cart. Keep in mind some themes use a cart drawer, which has a button to checkout, so their users might not ever hit the cart page.

Scott | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog