Search code examples
ruby-on-railsreactjsapispree

Where to find or create product thumbnails for Spree API


I am managing to create a page that calls products API from Spree. I use Spree API for my e-commerce solution, which is built into their framework and is setup automatically. The front end uses ReactJS via react-rails gem.

I can't find the URL for the images in the Spree V2 API products link. It isn't mentioned in the docs and in the API JSON source. I only see the type and ID in the API response.

My repository: https://github.com/salman15/stern_spree_react

I tried to display the type, but this appears empty.

<p>Shop Products</p>
        {this.state.products.map(product =>
          <li key={product.objectID}>
            <p>{product.attributes.price}</p>
              <Card>
                  <CardActionArea>
                    <CardMedia
                      
                      image={product.relationships.images.data.type}
                      title={product.attributes.name}
                    />
                    <CardContent>
                      <Typography gutterBottom variant="h5" component="h2">
                       {product.attributes.name}
                      </Typography>
                      <Typography component="p">
                        Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
                        across all continents except Antarctica
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                  <CardActions>
                    <Button size="small" color="primary">
                      Share
                    </Button>
                    <Button size="small" color="primary">
                      Learn More
                    </Button>
                  </CardActions>
                </Card>
          </li>
        )}

Solution

  • I got an response from the Spree Devs

    you can grab images from the Products API by specifying that you want them to be returned in the response - please take a look at the include parameter https://guides.spreecommerce.org/api/v2/storefront#operation/Show%20Product