Product listing page

Commerce Layer API Reference Blog Sign up free
Search…
Getting started
Guides
How to display prices for a list of products
Problem
You've created a product listing page (i.e. category or collection page) with your favorite CMS and now you want to display the price for each of the products. You have the SKU codes of the products you want to list. 
A sample product listing page
Solution
To retrieve the price for each of the SKUs on the page, send a GET request to the /api/skusendpoint, filter it by code, and include the associated prices.
Example
Request
Response
The following request retrieves the prices of the SKUs identified by a list of specific codes:
1
curl -X GET \
2
  https://yourdomain.commercelayer.io/api/skus?filter[q][code_in]=TSHIRTG5B5B5BST,TSHIRTWF5F5F5MN,TSHIRTB0A0A0ACL,TSHIRTB212F3FSM&include=prices \
3
  -H 'Accept: application/vnd.api+json' \
4
  -H 'Authorization: Bearer your-access-token'
Copied!
On success, the API responds with a 200 OK status code, returning the four SKU objects with the prices included:
1
{
2
  "data": [
3
    {
4
      "id": "WLgbSXqyoZ",
5
      "type": "skus",
6
      "links": {
7
        "self": "https://yourdomain.commercelayer.io/api/skus/WLgbSXqyoZ"
8
      },
9
      "attributes": {
10
        "code": "TSHIRTG5B5B5BST",
11
        "name": "Gray T-Shirt Star",
12
        "description": "Gray cotton t-shirt. Short sleeves and a round neckline. Unique high quality design.",
13
        "image_url": "https://img.yourdomain.com/skus/TSHIRTG5B5B5BST.png",
14
        "tag_names": "",
15
        "pieces_per_pack": null,
16
        "weight": null,
17
        "unit_of_weight": null,
18
        "hs_tariff_number": null,
19
        "do_not_ship": false,
20
        "do_not_track": false,
21
        "created_at": "2018-01-01T12:00:00.000Z",
22
        "updated_at": "2018-01-01T12:00:00.000Z",
23
        "reference": "TSHIRTG5B5B5B",
24
        "metadata": {}
25
      },
26
      "relationships": {
27
        "shipping_category": {
28
          "links": {...}
29
        },
30
        "prices": {
31
          "links": {...},
32
          "data": [
33
            {
34
              "type": "prices",
35
              "id": "ajKQUMdKQp"
36
            }
37
            ]
38
          },
39
          "stock_items": {
40
            "links": {...}
41
          },
42
          "delivery_lead_times": {
43
            "links": {...}
44
          },
45
          "sku_options": {
46
            "links": {...}
47
          }
48
      },
49
      "meta": {
50
        "mode": "test"
51
      }
52
    },
53
    {
54
        "id": "ZjwqSNOQKW",
55
        "type": "skus",
56
        "links": {
57
            "self": "https://yourdomain.commercelayer.io/api/skus/ZjwqSNOQKW"
58
        },
59
        "attributes": {
60
            "code": "TSHIRTWF5F5F5MN",
61
            "name": "White T-Shirt Moon",
62
            "description": "White cotton t-shirt. Short sleeves and a round neckline. Unique high quality design.",
63
            "image_url": "https://img.yourdomain.com/skus/TSHIRTWF5F5F5MN.png",
64
            "tag_names": "",
65
            "pieces_per_pack": null,
66
            "weight": null,
67
            "unit_of_weight": null,
68
            "hs_tariff_number": null,
69
            "do_not_ship": false,
70
            "do_not_track": false,
71
            "created_at": "2018-01-01T12:00:00.000Z",
72
            "updated_at": "2018-01-01T12:00:00.000Z",
73
            "reference": "TSHIRTWF5F5F5",
74
            "metadata": {}
75
        },
76
        "relationships": {
77
            "shipping_category": {
78
                "links": {...}
79
            },
80
            "prices": {
81
                "links": {...},
82
                "data": [
83
                    {
84
                        "type": "prices",
85
                        "id": "pYwMUWJRzg"
86
                    }
87
                ]
88
            },
89
            "stock_items": {
90
                "links": {...}
91
            },
92
            "delivery_lead_times": {
93
                "links": {...}
94
            },
95
            "sku_options": {
96
                "links": {...}
97
            }
98
        },
99
        "meta": {
100
            "mode": "test"
101
        }
102
    },
103
    {
104
        "id": "WvAJSyDMqZ",
105
        "type": "skus",
106
        "links": {
107
            "self": "https://yourdomain.commercelayer.io/api/skus/WvAJSyDMqZ"
108
        },
109
        "attributes": {
110
            "code": "TSHIRTB0A0A0ACL",
111
            "name": "Black T-Shirt Cloud",
112
            "description": "Black cotton t-shirt. Short sleeves and a round neckline. Unique high quality design.",
113
            "image_url": "https://img.yourdomain.com/skus/TSHIRTB0A0A0ACL.png",
114
            "tag_names": "",
115
            "pieces_per_pack": null,
116
            "weight": null,
117
            "unit_of_weight": null,
118
            "hs_tariff_number": null,
119
            "do_not_ship": false,
120
            "do_not_track": false,
121
            "created_at": "2018-01-01T12:00:00.000Z",
122
            "updated_at": "2018-01-01T12:00:00.000Z",
123
            "reference": "TSHIRTB0A0A0A",
124
            "metadata": {}
125
        },
126
        "relationships": {
127
            "shipping_category": {
128
                "links": {...}
129
            },
130
            "prices": {
131
                "links": {...},
132
                "data": [
133
                    {
134
                        "type": "prices",
135
                        "id": "gQVmUKewQa"
136
                    }
137
                ]
138
            },
139
            "stock_items": {
140
                "links": {...}
141
            },
142
            "delivery_lead_times": {
143
                "links": {...}
144
            },
145
            "sku_options": {
146
                "links": {...}
147
            }
148
        },
149
        "meta": {
150
            "mode": "test"
151
        }
152
    },
153
    {
154
        "id": "BbpjSNePDZ",
155
        "type": "skus",
156
        "links": {
157
            "self": "https://yourdomain.commercelayer.io/api/skus/BbpjSNePDZ"
158
        },
159
        "attributes": {
160
            "code": "TSHIRTB212F3FSM",
161
            "name": "Blue T-Shirt Smile",
162
            "description": "Blue cotton t-shirt. Short sleeves and a round neckline. Unique high quality design.",
163
            "image_url": "https://img.yourdomain.com/skus/TSHIRTB212F3FSM.png",
164
            "tag_names": "",
165
            "pieces_per_pack": null,
166
            "weight": null,
167
            "unit_of_weight": null,
168
            "hs_tariff_number": null,
169
            "do_not_ship": false,
170
            "do_not_track": false,
171
            "created_at": "2018-01-01T12:00:00.000Z",
172
            "updated_at": "2018-01-01T12:00:00.000Z",
173
            "reference": "TSHIRTB212F3F",
174
            "metadata": {}
175
        },
176
        "relationships": {
177
            "shipping_category": {
178
                "links": {...}
179
            },
180
            "prices": {
181
                "links": {...},
182
                "data": [
183
                    {
184
                        "type": "prices",
185
                        "id": "aDPrUElXla"
186
                    }
187
                ]
188
            },
189
            "stock_items": {
190
                "links": {...}
191
            },
192
            "delivery_lead_times": {
193
                "links": {...}
194
            },
195
            "sku_options": {
196
                "links": {...}
197
            }
198
        },
199
        "meta": {
200
            "mode": "test"
201
        }
202
    }
203
  ],
204
  "included": [
205
    {
206
      "id": "ajKQUMdKQp",
207
      "type": "prices",
208
      "links": {
209
        "self": "https://yourdomain.commercelayer.io/api/prices/ajKQUMdKQp"
210
      },
211
      "attributes": {
212
        "currency_code": "EUR",
213
        "sku_code": "TSHIRTG5B5B5BST",
214
        "amount_cents": 12900,
215
        "amount_float": 129.0,
216
        "formatted_amount": "€129,00",
217
        "compare_at_amount_cents": 15000,
218
        "compare_at_amount_float": 150.0,
219
        "formatted_compare_at_amount": "€150,00",
220
        "created_at": "2018-01-01T12:00:00.000Z",
221
        "updated_at": "2018-01-01T12:00:00.000Z",
222
        "reference": null,
223
        "metadata": {}
224
      },
225
      "relationships": {
226
        "price_list": {
227
          "links": {...}
228
        },
229
        "sku": {
230
          "links": {...}
231
        }
232
      },
233
      "meta": {
234
        "mode": "test"
235
      }
236
    },
237
    {
238
      "id": "pYwMUWJRzg",
239
      "type": "prices",
240
      "links": {
241
        "self": "https://yourdomain.commercelayer.io/api/prices/pYwMUWJRzg"
242
      },
243
      "attributes": {
244
        "currency_code": "EUR",
245
        "sku_code": "TSHIRTWF5F5F5MN",
246
        "amount_cents": 11900,
247
        "amount_float": 119.0,
248
        "formatted_amount": "€119,00",
249
        "compare_at_amount_cents": 15000,
250
        "compare_at_amount_float": 150.0,
251
        "formatted_compare_at_amount": "€150,00",
252
        "created_at": "2018-01-01T12:00:00.000Z",
253
        "updated_at": "2018-01-01T12:00:00.000Z",
254
        "reference": null,
255
        "metadata": {}
256
      },
257
      "relationships": {
258
        "price_list": {
259
          "links": {...}
260
        },
261
        "sku": {
262
          "links": {...}
263
        }
264
      },
265
      "meta": {
266
        "mode": "test"
267
      }
268
    },
269
    {
270
      "id": "gQVmUKewQa",
271
      "type": "prices",
272
      "links": {
273
        "self": "https://yourdomain.commercelayer.io/api/prices/gQVmUKewQa"
274
      },
275
      "attributes": {
276
        "currency_code": "EUR",
277
        "sku_code": "TSHIRTB0A0A0ACL",
278
        "amount_cents": 15900,
279
        "amount_float": 159.0,
280
        "formatted_amount": "€159,00",
281
        "compare_at_amount_cents": 19000,
282
        "compare_at_amount_float": 190.0,
283
        "formatted_compare_at_amount": "€190,00",
284
        "created_at": "2018-01-01T12:00:00.000Z",
285
        "updated_at": "2018-01-01T12:00:00.000Z",
286
        "reference": null,
287
        "metadata": {}
288
      },
289
      "relationships": {
290
        "price_list": {
291
          "links": {...}
292
        },
293
        "sku": {
294
          "links": {...}
295
        }
296
      },
297
      "meta": {
298
        "mode": "test"
299
      }
300
    },
301
    {
302
      "id": "aDPrUElXla",
303
      "type": "prices",
304
      "links": {
305
        "self": "https://yourdomain.commercelayer.io/api/prices/aDPrUElXla"
306
      },
307
      "attributes": {
308
        "currency_code": "EUR",
309
        "sku_code": "TSHIRTB212F3FSM",
310
        "amount_cents": 14900,
311
        "amount_float": 149.0,
312
        "formatted_amount": "€149,00",
313
        "compare_at_amount_cents": 17000,
314
        "compare_at_amount_float": 170.0,
315
        "formatted_compare_at_amount": "€170,00",
316
        "created_at": "2018-01-01T12:00:00.000Z",
317
        "updated_at": "2018-01-01T12:00:00.000Z",
318
        "reference": null,
319
        "metadata": {}
320
      },
321
      "relationships": {
322
        "price_list": {
323
          "links": {...}
324
        },
325
        "sku": {
326
          "links": {...}
327
        }
328
      },
329
      "meta": {
330
        "mode": "test"
331
      }
332
    }
333
  ],
334
  "meta": {
335
      "record_count": 4,
336
      "page_count": 1
337
  },
338
  "links": {
339
      "first": "https://yourdomain.commercelayer.io/api/skus?filter[q][code_in]=TSHIRTG5B5B5BST,TSHIRTWF5F5F5MN,TSHIRTB0A0A0ACL,TSHIRTB212F3FSM&include=prices&page[number]=1&page[size]=10",
340
      "last": "https://yourdomain.commercelayer.io/api/skus?filter[q][code_in]=TSHIRTG5B5B5BST,TSHIRTWF5F5F5MN,TSHIRTB0A0A0ACL,TSHIRTB212F3FSM&include=prices&page[number]=1&page[size]=10"
341
  }
342
}
Copied!
This API call doesn't return any detail about the availability of the SKUs because, for performance reasons, the inventory information is only returned when fetching a single SKU.
Mapping
The image below shows the two main dynamic elements of the page (selling price and full price) and how each of these are mapped to a specific field of the price object.
A sample product listing page mapping
Additional notes
Available products and "Add to cart" button
To be sellable in a market, an SKU must have a price in the market's price list and at least one stock item in one of the market's stock locations, regardless of its quantity. This means that out-of-stock items are still considered sellable but they are not available and would return an error when trying to add them to the cart.
If you want to display the available products only and show an "Add to cart" button instead of a "View details" one, we recommend you to refine the above request with an additional filter to make sure that the returned SKUs have an available quantity.
Request
Response
The following request retrieves the prices of all the available SKUs:
1
curl -X GET \
2
  https://yourdomain.commercelayer.io/api/skus?filter[q][code_in]=TSHIRTG5B5B5BST,TSHIRTWF5F5F5MN,TSHIRTB0A0A0ACL,TSHIRTB212F3FSM&filter[q][stock_items_quantity_gt]=0&include=prices \
3
  -H 'Accept: application/vnd.api+json' \
4
  -H 'Authorization: Bearer your-access-token'
Copied!
On success, the API responds with a 200 OK status code, returning the SKU objects with the prices included (please note that the available products are only 3 out of the previous 4):
1
{
2
  "data": [
3
    {
4
      "id": "WLgbSXqyoZ",
5
      "type": "skus",
6
      "links": {
7
        "self": "https://yourdomain.commercelayer.io/api/skus/WLgbSXqyoZ"
8
      },
9
      "attributes": {
10
        "code": "TSHIRTG5B5B5BST",
11
        "name": "Gray T-Shirt Star",
12
        "description": "Gray cotton t-shirt. Short sleeves and a round neckline. Unique high quality design.",
13
        "image_url": "https://img.yourdomain.com/skus/TSHIRTG5B5B5BST.png",
14
        "tag_names": "",
15
        "pieces_per_pack": null,
16
        "weight": null,
17
        "unit_of_weight": null,
18
        "hs_tariff_number": null,
19
        "do_not_ship": false,
20
        "do_not_track": false,
21
        "created_at": "2018-01-01T12:00:00.000Z",
22
        "updated_at": "2018-01-01T12:00:00.000Z",
23
        "reference": "TSHIRTG5B5B5B",
24
        "metadata": {}
25
      },
26
      "relationships": {
27
        "shipping_category": {
28
          "links": {...}
29
        },
30
        "prices": {
31
          "links": {...},
32
          "data": [
33
            {
34
              "type": "prices",
35
              "id": "ajKQUMdKQp"
36
            }
37
            ]
38
          },
39
          "stock_items": {
40
            "links": {...}
41
          },
42
          "delivery_lead_times": {
43
            "links": {...}
44
          },
45
          "sku_options": {
46
            "links": {...}
47
          }
48
      },
49
      "meta": {
50
        "mode": "test"
51
      }
52
    },
53
    {
54
        "id": "ZjwqSNOQKW",
55
        "type": "skus",
56
        "links": {
57
            "self": "https://yourdomain.commercelayer.io/api/skus/ZjwqSNOQKW"
58
        },
59
        "attributes": {
60
            "code": "TSHIRTWF5F5F5MN",
61
            "name": "White T-Shirt Moon",
62
            "description": "White cotton t-shirt. Short sleeves and a round neckline. Unique high quality design.",
63
            "image_url": "https://img.yourdomain.com/skus/TSHIRTWF5F5F5MN.png",
64
            "tag_names": "",
65
            "pieces_per_pack": null,
66
            "weight": null,
67
            "unit_of_weight": null,
68
            "hs_tariff_number": null,
69
            "do_not_ship": false,
70
            "do_not_track": false,
71
            "created_at": "2018-01-01T12:00:00.000Z",
72
            "updated_at": "2018-01-01T12:00:00.000Z",
73
            "reference": "TSHIRTWF5F5F5",
74
            "metadata": {}
75
        },
76
        "relationships": {
77
            "shipping_category": {
78
                "links": {...}
79
            },
80
            "prices": {
81
                "links": {...},
82
                "data": [
83
                    {
84
                        "type": "prices",
85
                        "id": "pYwMUWJRzg"
86
                    }
87
                ]
88
            },
89
            "stock_items": {
90
                "links": {...}
91
            },
92
            "delivery_lead_times": {
93
                "links": {...}
94
            },
95
            "sku_options": {
96
                "links": {...}
97
            }
98
        },
99
        "meta": {
100
            "mode": "test"
101
        }
102
    },
103
    {
104
        "id": "WvAJSyDMqZ",
105
        "type": "skus",
106
        "links": {
107
            "self": "https://yourdomain.commercelayer.io/api/skus/WvAJSyDMqZ"
108
        },
109
        "attributes": {
110
            "code": "TSHIRTB0A0A0ACL",
111
            "name": "Black T-Shirt Cloud",
112
            "description": "Black cotton t-shirt. Short sleeves and a round neckline. Unique high quality design.",
113
            "image_url": "https://img.yourdomain.com/skus/TSHIRTB0A0A0ACL.png",
114
            "tag_names": "",
115
            "pieces_per_pack": null,
116
            "weight": null,
117
            "unit_of_weight": null,
118
            "hs_tariff_number": null,
119
            "do_not_ship": false,
120
            "do_not_track": false,
121
            "created_at": "2018-01-01T12:00:00.000Z",
122
            "updated_at": "2018-01-01T12:00:00.000Z",
123
            "reference": "TSHIRTB0A0A0A",
124
            "metadata": {}
125
        },
126
        "relationships": {
127
            "shipping_category": {
128
                "links": {...}
129
            },
130
            "prices": {
131
                "links": {...},
132
                "data": [
133
                    {
134
                        "type": "prices",
135
                        "id": "gQVmUKewQa"
136
                    }
137
                ]
138
            },
139
            "stock_items": {
140
                "links": {...}
141
            },
142
            "delivery_lead_times": {
143
                "links": {...}
144
            },
145
            "sku_options": {
146
                "links": {...}
147
            }
148
        },
149
        "meta": {
150
            "mode": "test"
151
        }
152
    }
153
  ],
154
  "included": [
155
    {
156
      "id": "ajKQUMdKQp",
157
      "type": "prices",
158
      "links": {
159
        "self": "https://yourdomain.commercelayer.io/api/prices/ajKQUMdKQp"
160
      },
161
      "attributes": {
162
        "currency_code": "EUR",
163
        "sku_code": "TSHIRTG5B5B5BST",
164
        "amount_cents": 12900,
165
        "amount_float": 129.0,
166
        "formatted_amount": "€129,00",
167
        "compare_at_amount_cents": 15000,
168
        "compare_at_amount_float": 150.0,
169
        "formatted_compare_at_amount": "€150,00",
170
        "created_at": "2018-01-01T12:00:00.000Z",
171
        "updated_at": "2018-01-01T12:00:00.000Z",
172
        "reference": null,
173
        "metadata": {}
174
      },
175
      "relationships": {
176
        "price_list": {
177
          "links": {...}
178
        },
179
        "sku": {
180
          "links": {...}
181
        }
182
      },
183
      "meta": {
184
        "mode": "test"
185
      }
186
    },
187
    {
188
      "id": "pYwMUWJRzg",
189
      "type": "prices",
190
      "links": {
191
        "self": "https://yourdomain.commercelayer.io/api/prices/pYwMUWJRzg"
192
      },
193
      "attributes": {
194
        "currency_code": "EUR",
195
        "sku_code": "TSHIRTWF5F5F5MN",
196
        "amount_cents": 11900,
197
        "amount_float": 119.0,
198
        "formatted_amount": "€119,00",
199
        "compare_at_amount_cents": 15000,
200
        "compare_at_amount_float": 150.0,
201
        "formatted_compare_at_amount": "€150,00",
202
        "created_at": "2018-01-01T12:00:00.000Z",
203
        "updated_at": "2018-01-01T12:00:00.000Z",
204
        "reference": null,
205
        "metadata": {}
206
      },
207
      "relationships": {
208
        "price_list": {
209
          "links": {...}
210
        },
211
        "sku": {
212
          "links": {...}
213
        }
214
      },
215
      "meta": {
216
        "mode": "test"
217
      }
218
    },
219
    {
220
      "id": "gQVmUKewQa",
221
      "type": "prices",
222
      "links": {
223
        "self": "https://yourdomain.commercelayer.io/api/prices/gQVmUKewQa"
224
      },
225
      "attributes": {
226
        "currency_code": "EUR",
227
        "sku_code": "TSHIRTB0A0A0ACL",
228
        "amount_cents": 15900,
229
        "amount_float": 159.0,
230
        "formatted_amount": "€159,00",
231
        "compare_at_amount_cents": 19000,
232
        "compare_at_amount_float": 190.0,
233
        "formatted_compare_at_amount": "€190,00",
234
        "created_at": "2018-01-01T12:00:00.000Z",
235
        "updated_at": "2018-01-01T12:00:00.000Z",
236
        "reference": null,
237
        "metadata": {}
238
      },
239
      "relationships": {
240
        "price_list": {
241
          "links": {...}
242
        },
243
        "sku": {
244
          "links": {...}
245
        }
246
      },
247
      "meta": {
248
        "mode": "test"
249
      }
250
    }
251
  ],
252
  "meta": {
253
    "record_count": 3,
254
    "page_count": 1
255
  },
256
  "links": {
257
      "first": "https://spineless.commercelayer.io/api/skus?filter[q][code_in]=TSHIRTG5B5B5BST,TSHIRTWF5F5F5MN,TSHIRTB0A0A0ACL,TSHIRTB212F3FSM&include=prices&page[number]=1&page[size]=10",
258
      "last": "https://spineless.commercelayer.io/api/skus?filter[q][code_in]=TSHIRTG5B5B5BST,TSHIRTWF5F5F5MN,TSHIRTB0A0A0ACL,TSHIRTB212F3FSM&include=prices&page[number]=1&page[size]=10"
259
  }
260
}
Copied!
More to read
See our API reference if you need more information on how to filter data and include associations.
Getting started
Product page
Last modified 4mo ago
Export as PDF
Copy link
Contents