In this tutorial, Today I will explain to how to get products with custom options using GraphQL in Magento 2. After Magento 2.3.x, GraphQL is best feature added in Magento 2. Now, Some functionality by default provided in Magento 2 GraphQL. Now, If you want to fetch Custom options with Products then, you need to execute this below query. For this, CustomizableProductInterface contains informations about custom options.
You may also like this :
- How to Get Configuration Value using GraphQL in Magento 2
- How to Get Products by Category using GraphQL in Magento 2
Firstly, Open ChromiQL to check response. After that, you need to pass product sku inside query. Now, You need to execute this below query in your ChromiQL to check result :
Request :
{
products(filter: {sku: {eq: "Test Simple product 1"}}) {
items {
id
name
sku
__typename
... on CustomizableProductInterface {
options {
title
required
sort_order
option_id
... on CustomizableFieldOption {
product_sku
field_option: value {
sku
price
price_type
max_characters
}
}
... on CustomizableAreaOption {
product_sku
area_option: value {
sku
price
price_type
max_characters
}
}
... on CustomizableDateOption {
product_sku
date_option: value {
sku
price
price_type
}
}
... on CustomizableDropDownOption {
drop_down_option: value {
option_type_id
sku
price
price_type
title
sort_order
}
}
... on CustomizableRadioOption {
radio_option: value {
option_type_id
sku
price
price_type
title
sort_order
}
}
... on CustomizableCheckboxOption {
checkbox_option: value {
option_type_id
sku
price
price_type
title
sort_order
}
}
... on CustomizableMultipleOption {
multiple_option: value {
option_type_id
sku
price
price_type
title
sort_order
}
}
... on CustomizableFileOption {
product_sku
file_option: value {
sku
price
price_type
file_extension
image_size_x
image_size_y
}
}
}
}
}
}
}
Response :
{
"data": {
"products": {
"items": [
{
"id": 210,
"name": "Test Simple product 1",
"sku": "Test Simple product 1",
"__typename": "SimpleProduct",
"options": [
{
"title": "Radio Custom Options",
"required": true,
"sort_order": 1,
"option_id": 1485,
"radio_option": [
{
"option_type_id": 5030,
"sku": null,
"price": 10,
"price_type": "FIXED",
"title": "A",
"sort_order": 1
},
{
"option_type_id": 5031,
"sku": null,
"price": 20,
"price_type": "FIXED",
"title": "B",
"sort_order": 2
}
]
},
{
"title": "Checkbox Custom Options",
"required": true,
"sort_order": 2,
"option_id": 1486,
"checkbox_option": [
{
"option_type_id": 5032,
"sku": null,
"price": 30,
"price_type": "FIXED",
"title": "S",
"sort_order": 1
},
{
"option_type_id": 5033,
"sku": null,
"price": 40,
"price_type": "FIXED",
"title": "L",
"sort_order": 2
}
]
},
{
"title": "Dropdown Custom Option",
"required": false,
"sort_order": 3,
"option_id": 1487,
"drop_down_option": [
{
"option_type_id": 5034,
"sku": null,
"price": 50,
"price_type": "FIXED",
"title": "A",
"sort_order": 1
},
{
"option_type_id": 5035,
"sku": null,
"price": 60,
"price_type": "FIXED",
"title": "B",
"sort_order": 2
}
]
},
{
"title": "Multi Select Custom Option",
"required": false,
"sort_order": 4,
"option_id": 1488,
"multiple_option": [
{
"option_type_id": 5036,
"sku": null,
"price": 70,
"price_type": "FIXED",
"title": "C",
"sort_order": 1
},
{
"option_type_id": 5037,
"sku": null,
"price": 80,
"price_type": "FIXED",
"title": "D",
"sort_order": 2
}
]
},
{
"title": "Field type custom option ",
"required": false,
"sort_order": 5,
"option_id": 1489,
"product_sku": "Test Simple product 1",
"field_option": {
"sku": null,
"price": 80,
"price_type": "FIXED",
"max_characters": 0
}
},
{
"title": "Area type Custom option ",
"required": false,
"sort_order": 6,
"option_id": 1490,
"product_sku": "Test Simple product 1",
"area_option": {
"sku": null,
"price": 90,
"price_type": "FIXED",
"max_characters": 0
}
},
{
"title": "Date type Custom Option",
"required": false,
"sort_order": 7,
"option_id": 1491,
"product_sku": "Test Simple product 1",
"date_option": {
"sku": null,
"price": 100,
"price_type": "FIXED"
}
}
]
}
]
}
}
}
Here, You can see that
- CustomizableFieldOption (For Field type custom options)
- CustomizableAreaOption (For Area type custom options)
- CustomizableDateOption (For Date type custom options)
- CustomizableDropDownOption (For Drop Down type custom options)
- CustomizableRadioOption (For Radio type custom options)
- CustomizableCheckboxOption (For Checkbox type custom options)
- CustomizableMultipleOption (For Multi Select type custom options)
- CustomizableFileOption (For File type custom options)
Above all, are useful for different type of custom options. So, You can use from there which you want to get in response. Rest of fields you can remove which is non used.
That’s it !!!
Execute URL : http://m243.com/graphql
Where Base URL : http://m243.com/ and End Point : graphql
I hope this blog is easy to understand about how to get products with custom options using GraphQL in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.
Stay Safe and Stay Connected !!
