JavaScript Endpoints

javascript

#1

I’m looking for get all products with images, get a single product with images, and get cart items with images. Is there endpoints for this? I have checked the docs and in the response all I see is main_image with the id. But, doesn’t have the link to the image to display it on the page.


#2

You have to add main image to the include of the API call.
https://docs.moltin.com/basics/includes
Example

​
const Moltin = MoltinGateway({
  client_id: 'X'
})
​
const id = 'XXXX'
​
Moltin.Products.With('main_image')
  .All()
  .then(products => {
    // Do something
  })

Example Response

"included": {
        "parents": [
            {
                "type": "product",
                "id": "23230da6-5c0e-473e-b4aa-9ff76228df4b",
                "name": "Deck Shoe",
                "slug": "deck-shoe_74",
                "sku": "deck-shoe_74",
                "manage_stock": false,
                "description": "Modern boat shoes were invented in 1935 by American Paul A. Sperry",
                "price": [
                    {
                        "amount": 5891,
                        "currency": "USD",
                        "includes_tax": true
                    }
                ],
                "status": "live",
                "commodity_type": "physical",
                "meta": {
                    "timestamps": {
                        "created_at": "2018-05-08T17:04:57+00:00",
                        "updated_at": "2018-06-25T02:25:48+00:00"
                    },
                    "stock": {
                        "level": 0,
                        "availability": "out-stock"
                    },
                    "variation_matrix": []
                },
                "relationships": {
                    "children": {
                        "data": [
                            {
                                "type": "product",
                                "id": "3cd1326b-7981-4509-ad07-c7dc808af41b"
                            }
                        ]
                    }
                }
            }
        ],
        "main_images": [
            {
                "type": "file",
                "id": "bd4dd5bd-a8cb-4f47-913a-060f2c436127",
                "link": {
                    "href": "https://s3-eu-west-1.amazonaws.com/bkt-svc-files-cmty-api-moltin-com/4453d207-51eb-49d6-a5b9-823cc44246ea/bd4dd5bd-a8cb-4f47-913a-060f2c436127.jpeg"
                },
                "file_name": "dogs.jpeg",
                "mime_type": "",
                "file_size": 9652,
                "public": true,
                "meta": {
                    "dimensions": {},
                    "timestamps": {
                        "created_at": "2018-05-03T19:37:34.955Z"
                    }
                },
                "links": {
                    "self": "https://api.moltin.com/v2/files/bd4dd5bd-a8cb-4f47-913a-060f2c436127"
                }
            }
        ]
    }

The link is under main_image (example: .main_image.link.href). You can find some example apps that show how to do some of those kinds of things. https://github.com/moltin-examples

Example of how products are used with images.

Let me know how it goes

-George


#3

Thanks, I will add this to my bookmarks.


#4

Do you know if in the moltin dashboard I can upload multiple images for one product?


#5

Yes you can for sure do that. Where you would add those images is under files.

hit add new file

Once you have added all the images, you need to included files in your included.
Example
​https://docs.moltin.com/basics/includes (Multiple includes)

Moltin.Products.With(['main_image', 'files'])
  .All()
  .then(products => {
    // Do something
  }) 

Example response when fetching that product with files. As you will see you need to drill down a bit to get the url (link.href).

    "data": {
        "type": "product",
        "id": "5fcdcc0d-ef18-4067-aa3f-0ab4f03b4119",
        "name": "A Product",
        "slug": "a-product",
        "sku": "SP01-{COLOUR}-new",
        "manage_stock": false,
        "description": "Some description",
        "price": [
            {
                "amount": 6999,
                "currency": "GBP",
                "includes_tax": true
            },
            {
                "amount": 7499,
                "currency": "USD",
                "includes_tax": true
            }
        ],
        "status": "live",
        "commodity_type": "physical",
        "meta": {
            "timestamps": {
                "created_at": "2018-05-09T17:46:39+00:00",
                "updated_at": "2018-07-13T17:50:37+00:00"
            },
            "stock": {
                "level": 0,
                "availability": "out-stock"
            },
            "variation_matrix": []
        },
        "relationships": {
            "files": {
                "data": [
                    {
                        "type": "file",
                        "id": "62c37c6f-c4d4-4528-8aa1-afc8d2997c89"
                    },
                    {
                        "type": "file",
                        "id": "cdbbc2a8-99a7-462d-97e2-61fc42b2b85a"
                    }
                ]
            },
            "categories": {
                "data": [
                    {
                        "type": "category",
                        "id": "043fd7ce-47ce-4330-9fd9-fd4a2d38bc0f"
                    }
                ]
            },
            "brands": {
                "data": [
                    {
                        "type": "brand",
                        "id": "0d28e5b6-f615-4e1c-b038-275cfde97927"
                    }
                ]
            }
        },
        "review": null,
        "uuid": null,
        "ticketvendor": "ticketmaster",
        "ratings": "4"
    },
    "included": {
        "files": [
            {
                "type": "file",
                "id": "62c37c6f-c4d4-4528-8aa1-afc8d2997c89",
                "link": {
                    "href": "https://s3-eu-west-1.amazonaws.com/bkt-svc-files-cmty-api-moltin-com/4453d207-51eb-49d6-a5b9-823cc44246ea/62c37c6f-c4d4-4528-8aa1-afc8d2997c89.png"
                },
                "file_name": "Screen Shot 2018-07-12 at 11.19.37 AM.png",
                "mime_type": "image/png",
                "file_size": 330027,
                "public": true,
                "meta": {
                    "dimensions": {
                        "width": 1118,
                        "height": 1962
                    },
                    "timestamps": {
                        "created_at": "2018-07-13T17:50:18.688Z"
                    }
                },
                "links": {
                    "self": "https://api.moltin.com/v2/files/62c37c6f-c4d4-4528-8aa1-afc8d2997c89"
                }
            },
            {
                "type": "file",
                "id": "cdbbc2a8-99a7-462d-97e2-61fc42b2b85a",
                "link": {
                    "href": "https://s3-eu-west-1.amazonaws.com/bkt-svc-files-cmty-api-moltin-com/4453d207-51eb-49d6-a5b9-823cc44246ea/cdbbc2a8-99a7-462d-97e2-61fc42b2b85a.png"
                },
                "file_name": "Screen Shot 2018-07-10 at 11.19.06 AM.png",
                "mime_type": "image/png",
                "file_size": 972206,
                "public": true,
                "meta": {
                    "dimensions": {
                        "width": 2802,
                        "height": 1946
                    },
                    "timestamps": {
                        "created_at": "2018-07-13T17:50:37.674Z"
                    }
                },
                "links": {
                    "self": "https://api.moltin.com/v2/files/cdbbc2a8-99a7-462d-97e2-61fc42b2b85a"
                }
            }
        ]
    }
} 

-George


#6

thanks man, I appreciate your help.


#7

We can’t do something like this to get one product instead of all?

moltin
  .Products
  .With(['main_image', 'files'])
  .Get(id)
  .then( product => {
      
  })

In the response object in the included it’s only showing main_images.


#8

That should work, can you send over there the response.


#9
{
"data": {
	"type": "product",
	"id": "b87e6346-f30b-4d5a-9f92-5884051043df",
	"name": "Slap pak",
	"slug": "2",
	"sku": "2",
	"manage_stock": true,
	"description": "hegr agra grae gre",
	"price": [
		{
			"amount": 3000,
			"currency": "USD",
			"includes_tax": true
		}
	],
	"status": "live",
	"commodity_type": "physical",
	"meta": {
		"timestamps": {
			"created_at": "2018-07-12T21:58:49+00:00",
			"updated_at": "2018-07-12T21:58:59+00:00"
		},
		"display_price": {
			"with_tax": {
				"amount": 3000,
				"currency": "USD",
				"formatted": "$30.00"
			},
			"without_tax": {
				"amount": 3000,
				"currency": "USD",
				"formatted": "$30.00"
			}
		},
		"stock": {
			"level": 3,
			"availability": "in-stock"
		},
		"variation_matrix": []
	},
	"relationships": {
		"main_image": {
			"data": {
				"type": "main_image",
				"id": "f32d390d-ba1b-42b1-ac00-59a03fed30f0"
			}
		}
	}
},
"included": {
	"main_image": [],
	"main_images": [
		{
			"type": "file",
			"id": "f32d390d-ba1b-42b1-ac00-59a03fed30f0",
			"link": {
				"href": "https://s3-eu-west-1.amazonaws.com/bkt-svc-files-cmty-api-moltin-com/973a9dfa-7c20-481e-8dc9-81aeae95eda8/f32d390d-ba1b-42b1-ac00-59a03fed30f0.jpg"
			},
			"file_name": "oil_bottle-200.jpg",
			"mime_type": "image/jpeg",
			"file_size": 9289,
			"public": true,
			"meta": {
				"dimensions": {
					"width": 200,
					"height": 200
				},
				"timestamps": {
					"created_at": "2018-07-12T21:58:59.39Z"
				}
			},
			"links": {
				"self": "https://api.moltin.com/v2/files/f32d390d-ba1b-42b1-ac00-59a03fed30f0"
			}
		}
	]
}

}


#10

Your right sorry about that, seems like only the first one listed comes back when you use id. Im trying to hit the api directly and seeing the same thing. Could just be mis understanding by me. Digging more into the code and asking around. Ill have to get back to you.


#11

Sounds good, thanks.


#12

Can you confirm the product you are pulling has a main image and files. I just realized the product I was looking at did not have an image.


#13

I’m so sorry, you are correct. I have 2 products in the dashboard and they both have the same picture. I clicked the wrong one in the application.


#14

haha no worries I did the same thing.


#15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.