I’m creating this post based on a previous post that i’ve made almost a year ago on the Github Feedback: Cart Transform API.
I’ve heard the devs at Shopify are actively reading the posts here, so i’m hoping this discussion can be brought to their attention and the suggested improvements have a chance of getting implemented
URL limitations
The ImageInput.url field used to allow external non Shopify hosted URL, but now it’s returning the following error:
[
"operations[0] (update): [{code: invalid_image_url, message: The base image url must be any of the following: https://cdn.shopify.com, https://cdn.shopifycdn.net.}]"
]
The new validation is most likely because the Checkout auto adds the CDN size filters like _128x128
Only allowing Shopify hosted URLs prevents all use cases when a preview image should be generated on the fly.
For example; a Customer can design a t-shirt, when the shirt is added to the cart, a preview with the shirt design is generated and should be shown on the checkout line item image.
One solution would be to use the GraphQL Files API through an app hosted server, but this process is very slow, and it will make a mess in the Files section.
Improvements
Cart API uploaded file support
Theme code can upload a file using the Cart Ajax API
The resulted file link has the following format:
https://cdn.shopify.com/s/files/1/0574/8129/8010/uploads/<id>
Setting this link on the ImageInput.url field works. (As it passes the newly added CDN checks), but then the Checkout adds the CDN image filters which are not supported on this path and a 404 is returned.
External hosted image support
Allowing external images would allow for much more flexibility for app devs.
The Checkout UI code should then check if the image is external, and avoid auto adding the CDN image filters.