I have created a private app that allows a customer to enter the client's store and customize a product. I am using the shopify-buy-sdk (js) and node js (koa.js and next.js) for the application infrastructure. I have the app hosted on heroku as a lower environment/dev and I want to now test the app on the client's actual page. I have read briefly on script tags as well as embedded app sdk neither one seems to offer what would seem like simply adding an iframe to the theme. I am new to shopify's ecosystem and I would like some advice on getting this "private app" to work on the client's store front. Any suggestions?
It sounds like this is for a single client? In which case you could skip using the API all together and simply modify the theme (Admin > Online Store > Themes).
Alternatively, to embed an iframe into a theme programatically, you could use the ScriptTag API to build and insert the iframe on the fly, or you could modify the theme using the assets API. Given each theme is different, it's awkward figuring out where to edit the theme/insert the iframe.
Thanks for the info. I already went ahead and embedded the app as an iframe. I have another question now. How can I access the shopify cart from the app? for ex, if the user is on the particular page that has the app in the iframe i want them to be able to click a button on the app and add to the cart of the overall page. I see that there is a cart id associated with the checkout. How can I obtain this from the page the customer is visiting? Is there an api I can use to get this?
Some tools which might come in handy:
- The AJAX API will reveal the cart token: https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart
- You can listen for cart updates using a webhook: https://help.shopify.com/en/api/reference/events/webhook
An iframe adds complexity and raises accessibility issues - is it necessary? There might be another approach, can you elaborate on what you're building?
A customization tool that allows customers to customize a product by combining various mixtures of variants. I currently am able to get the iframe to communicate with the Shopify page using https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage. Posting to using the variant ids sent from the iframe to the page should provide my solution for this use case. I want to leave checkout to the Shopify page itself I only want to add items to the cart using the variant ids.
Are you able to implement the widget without an iframe?
Or, another approach would be to redirect the user to your app (not in an iframe) and use the Storefront API to fill the cart + send them to checkout. However this would prevent them adding additional items to cart.