CartTransform ImageInput.url improvements

Functions
1

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 :slight_smile:

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.

2 Likes
2

@michael I have been testing a cart transform update operation using a file uploaded via the the Cart Ajax API, but I haven’t been able to get it to work at all. The following error is surfaced:

    "errorMessage": [
      "operations[0] (update): [{code: image_not_found, message: Image not found for the shop.}]"
    ],

Do you know if this still works?

One thing to note: in order to expedite prototyping this system, the image is being added to a separate line item (the line item that the transform runs on has a unique process for adding to cart and getting the file uploaded is more involved than just dropping in a file input to Dawn). The image is still on the CDN I would think it should work, but since it’s not, I’m wondering if it has to be on the same line item…?

3

@Nic_Oliver i’m afraid haven’t tested this in a while - but in the past all links that had cdn.shopify.com were displayed in the checkout (no Shopify function error).

Based on the error you are seeing, it looks like there was a new check added - a search for the image on the shop itself (most likely the Files section).

4

@michael Thanks for the reply, definitely seems like a Cart API uploaded file is not supported. It would be a great addition to the cart transform system.