Being able to add line-item customizations is something that's critical for several of my clients with Shopify stores (the typical example is custom embroidery or adding text to a tshirt, etc)-- their entire business model depends on it. However, for some (rather complicated but valid) reasons one large client is moving away from using Shopify on the frontend, and just keeping it for backend fulfillment and checkout, meaning all product pages and adding to the cart must be done from a website that is external to Shopify...
format. However, when this client-side cart is transferred to Shopify all the lineitem properties/customizations that have been set on the client-side are NOT transferred over. This was suprising to me because looking at the SDK source code, it has lots of logic dedicated to dealing with properties (eg, adding a variant to a cart with different properties will not simply increment the existing variant, but add it as a new item). Searching through the forums, it seems this feature is available for iOS, Android and others, just not the web one. It seems like everything is in place for this to work, and yet it does not. I've played around with URLs trying to figure it out but got nowhere.
So, Question Number 1:
Is there any way to add LineItem Properties using the web Buy SDK?
It seems like an oversight not to include this given it's baked into the other SDKs, and even well-supported by the JS SDK on the client-side.
[Report Only] Refused to display 'http://XYZ.myshopify.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors XYZ.myshopify.com".
The [Report Only] means it doesn't actually block the content loading, so it should work, but it made me nervous because it actually does send a report of the activity to a url along with a tracking UUID:
I don't want to spend another ton of time implementing another solution to have this feature one day disappear and have the client's business grind to a sudden panicked halt because of Shopify decided to turn off the "Report Only" flag, thereby instructing browsers that support it to block the request entirely. That would be Very Bad.
So: Question Number 2:
Although I know this is unsupported, does Shopify have any plans to prevent people from including shops/pages within iframes going forward? Is the reporting that is done research and security-oriented, or is it used to crack down on shop owners doing unsupported things with iframes?
I already have private Apps set up for website<->shopify communication but as far as I know there's nothing that can be done with that to create a cart for a client, but if anyone knows of any other ways to accomplish this I'm all ears.
Thanks for any input!
The solution found was to create a custom checkout URL and send additional data as cart attributes.
Look into permalinks https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart. You can get the checkout link from the SDK cart object and add to the link parameters that contain your additional data: &attributes[monogram]=Something
Hope it helps
Hi Simon, I did end up figuring this out by using the Shopify JS Buy SDK. Basically I created a custom checkout button handler for the cart button which generates a payload of line items and custom line item properties which gets loaded into a GET request that is sent to the Shopify-hosted store. Then a handler on the store page searches for that payload and if found uses the regular JS API to populate the cart with the items and the forwards the browser to the checkout page.
See details and code here:
Also note the bugfix in the first comment of that thread which will have to be made to get things working properly.