Hi!
I’m working on a single-page-application with fully client-side rendered frontend (React) and Shopware acting as a headless CMS in the background. So all product-data will be pulled from the API and checkout will also use the API to send the data.
I ran into a problem, that I would need some help with.
When trying to render the product list page, I call the articles endpoint which return the basic info of all my products. The problem is that I would also need to render the main image associated with each product and this list does not expose any data from the media attached to the product.
I can get the media item(s) for a product using the Media endpoint, problem is that this one expects a MediaId which I cannot get from the listed representations of the articles.
So right now the only way I see to get the images is first making a call that gets all the products, then loop through them and get each product’s details, calling the article endpoint again with each product ID, then when I have the media IDs I loop through those and get the images for each product using the media endpoint, because that’s the only one that exposes the actual image path in the response. This seems way too complicated and slow.
Is there a smarter way to do this? Can I get ShopWare to output the 1st image’s path in the Article list response, that’s associated with the current product?
Also I saw that the paths to the images look like this:
/media/image/f5/fb/95/03_200x200.jpg
The first part up to /media/image/ is fixed, that’s straight forward, and I get the image’s filename and extension in the article detail’s response in the media object and even the file extension, which looks like this
https://image.prntscr.com/image/PC61WfqbR_OG-cXnI3_EVg.png
The problem is that I don’t know what’s the f5/fb/95/ stands for. If I could get this info from the details I could assemble the URL for the image programmatically and then I wouldn’t need the call to the media endpoint.
Any help is greatly appreciated. Thanks in advanced! 