Cart ImageInput.url improvements

[michaelhaessig]

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.

[11052523011407]

Certainly, we also urgently need to use external image resources, a requirement shared by a majority of our clients. This is due to the extensive range of design and customized products, numbering in the tens of millions. The final preview image is crucial during the checkout process.

In the past, this was permitted without any issues. However, the alternative now requires the cumbersome process of attempting to upload image resources via the Admin GraphQL File API before adding them to the cart when a customer makes a purchase.

This results in a slow shopping process and a less-than-optimal user experience. Moreover, during peak traffic, this method is prone to failures due to imposed limits.

We earnestly request the provision of support for external image resources. Thank you.

[11052523011407]

Is there an update from anyone at Shopify for this issue ?

[StrongereCommerce]

any updates here?

[michaelhaessig]

We get this request from our customers almost daily.

So far we haven't seen any update from Shopify 😞

[michaelhaessig]

Thanks for sharing this approach. Are you using a cart webhook for the backend or just trigger your backend using JS?
As I understand it, it can then happen that the customer goes to checkout right away, and the image is not yet full uploaded to Shopify files?

[StrongereCommerce]

I'm using js (my cart transform is built on the hidden line item attribute, not meta fields)

[michaelhaessig]

Got it, so the upload of the thumbnail to Shopify files must be async? Or are you waiting for the upload to Shopify to complete before you let the customer checkout?

[StrongereCommerce]

Async, correct.

[dnpg]

@StrongereCommerce @michaelhaessig I noticed that if for any reason the image is not loaded on time to Shopify when the customer reaches to the checkout, then the function won't execute :$.

[dnpg]

To add to this one, if we try to somehow create the image externally and transfer it to Shopify's cdn, this might take some time. With the approach some people have of adding the url to the line attributes and use it in the merge/expand operations sounds like a good approach. However, when the image is not ready, Shopify's returns an error:

SUGGESTION to Shopify: Fallback to the line item product image, or show a no-image thumbnail if the image is not found, but do not break the function, it is important that the main logic of the function executes as is the business logic. And image is just a reference and it doesn't really matter much if is not shown correctly, but displaying the wrong price because the function broke will lead to abandoned carts.

[michaelhaessig]

@dnpg We've seen the same behavior, function breaking on missing Image. My initial suggestion of allowing external images still seems to be the best solution. It's just an tag, it should not have any security implications.

[andrewchen5678]

To make matters even worse, shopify's function is not even accepting their own version of new assets urls, which is blocking from using assets that are hosted on shopify itself!

https://changelog.shopify.com/posts/changes-to-asset-urls