My app is receiving a webhook of product orders through a POST workflow. The data in this webhook contains a product id along with some other fields. Because of difficulties with Bubble’s present handling of nested arrays in POST workflows, I am routing the data through Zapier then POSTing to my app and mapping the data fields to a ‘Checkout’ custom data type that I’ve created.
The webhook does not contain an image field for the product order. I am able to receive these from a separate API GET call to the same service that sends the webhook.
From the webhook and separate API GET call, I can find the same product via the product id. The product id in the webhook and the product id in the API GET call reference the same product.
I want to display this Product, specifically it’s product image in a repeating group. The repeating groups’s content is of data type “Checkout”. This is from my database and it has a Product ID. The product image (image src) comes from an external API call called ‘Shopify Time Travel Products’.
How can I display the image in the repeating group? How can I find the product where the product id from the GET API call = the “Checkout” Product ID, and then show that products image src (which comes from the GET API call).
This is how I’ve started. From the expression below, the intersecting product id’s appear in the debugger as a list of product ids, but how do I grab the image src for each product id to display the image?
Is the image shown within a cell of the repeating-group (R-G)?
The R-G has a list of Checkouts, each one has its own product id.
A simplistic approach is to have the source for the image as the API call, and the parameter of the call being the “current cell’s product id”, and the API call returns the url, which is used by the image.
Depending on the API cost, frequency allowed, number of rows to display, number of users triggering it; it’s likely that it would be more efficient or cost effective to do the API call and store the resulting url in the Checkout, when the Checkout record is created by your API workflow endpoint.
@mishav, Thanks for your reply! You got me thinking about it in a new way! However, I’ve run into difficulty implementing your suggesstions.
I created an API GET call to get a single product’s image and tried to save that to the Checkout record that is created in my API workflow endpoint. However, the repsonse comes back as a nested json array which, I believe Bubble cannot handle or save to the database at the moment.
So I moved to make this product image API call the source for the image in the Repeating Group, with the parameter as “Current Cell’s Checkout Product ID” . The image still will not render. The url constructed (as seen inthe debugger) is correct and I can see a response when I test that url endpoint in another browser tab.
Below is the expression I created in the repeating group and the view inthe debugger:
Shopify returns more than one image for a single product. The resulting url needs to be treated as a list of url’s.
Then when you use it in the editor, it should prompt for the product id, where you put in the same dynamic value as in your screenshot. Then where you use the API value returned, you’ll have a list of images, a good starting point is using the :first item.
