CustomizableOptionInterface

Customizable options for a product provide a way to offer customers a selection of options with a variety of text, selection, and date input types. All product types can contain customizable options.

CustomizableOptionInterface is defined in the CatalogGraphQl module, and its attributes can be used in any products query. This interface returns basic information about a customizable option and can be implemented by several types of configurable options:

• Text area
• Checkbox
• Date picker
• Drop-down menu
• Text field
• File picker
• Multiple select box
• Radio buttons

Magento has not implemented all possible customizable product options for GraphQL.

CustomizableOptionInterface can contain the following attributes:

CustomizableAreaOption object

CustomizableAreaOption contains information about a text area that is defined as part of a customizable option.

CustomizableAreaValue object

CustomizableAreaValue defines the attributes of a product whose page contains a customized text area.

CustomizableCheckboxOption object

CustomizableCheckboxOption contains information about a set of checkbox values that are defined as part of a customizable option.

CustomizableCheckboxValue object

CustomizableCheckboxValue defines the attributes of a product whose page contains a customized set of checkbox values.

CustomizableDateOption object

CustomizableDateOption contains information about a date picker that is defined as part of a customizable option.

CustomizableDateValue object

CustomizableDateValue defines the attributes of a product whose page contains a customized date picker.

CustomizableDropDownOption object

CustomizableDropDownOption contains information about a drop down menu that is defined as part of a customizable option.

CustomizableDropDownValue object

CustomizableDropDownValue defines the attributes of a product whose page contains a customized drop down menu.

CustomizableFieldOption object

CustomizableFieldOption contains information about a text field that is defined as part of a customizable option.

CustomizableFieldValue object

CustomizableFieldValue defines the attributes of a product whose page contains a customized text field.

CustomizableFileOption object

The CustomizableFileOption object is currently not supported.

CustomizableFileOption contains information about a file picker that is defined as part of a customizable option.

CustomizableFileValue object

The CustomizableFileValue object is currently not supported.

CustomizableFileValue defines the attributes of a product whose page contains a customized file picker.

CustomizableMultipleOption object

CustomizableMultipleOption contains information about a multiselect that is defined as part of a customizable option.

CustomizableMultipleValue object

CustomizableMultipleValue defines the price and sku of a product whose page contains a customized multiselect

CustomizableRadioOption object

CustomizableRadioOption contains information about a set of radio buttons that are defined as part of a customizable option.

CustomizableRadioValue object

CustomizableRadioValue defines the attributes of a product whose page contains a customized set of radio buttons.

CustomizableRadioOption contains information about a set of radio buttons that are defined as part of a customizable option.

Example usage

The following query returns information about the customizable options configured for the product with a sku of xyz.

Request:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  products(filter: {sku: {eq: "xyz"}}) {
    items {
      uid
      name
      sku
      __typename
      ... on CustomizableProductInterface {
        options {
          title
          required
          sort_order
          uid
        }
      }
    }
  }
}

Response:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "data": {
    "products": {
      "items": [
        {
          "uid": "Mw==",
          "name": "T-shirt",
          "sku": "xyz",
          "__typename": "SimpleProduct",
          "options": [
            {
              "title": "Image",
              "required": false,
              "sort_order": 1,
              "uid": "Mx=="
            }
          ]
        }
      ]
    }
  }
}

The following query returns information about the customizable options configured for the product with a sku of xyz with Custom Option type Text Field.

• Custom option Option Type is text field with required field.
• Option Title is Favorite Color.
• Price is $5, Price Type is Fixed, Option SKU is favoriteColorSku and Max. Characters is 20.

Request:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  products(filter: { sku: { eq: "xyz" } }) {
    items {
      id
      name
      sku
      __typename
      ... on CustomizableProductInterface {
        options {
          title
          required
          sort_order
          option_id
          ... on CustomizableFieldOption {
            value {
              uid
              sku
              price
              price_type
              max_characters
            }
          }
        }
      }
    }
  }
}

Response:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "data": {
    "products": {
      "items": [
        {
          "id": 10,
          "name": "Savvy Shoulder Tote",
          "sku": "24-WB05",
          "__typename": "SimpleProduct",
          "options": [
            {
              "title": "Favorite Color",
              "required": true,
              "sort_order": 2,
              "option_id": 2,
              "value": {
                "uid": "Y3VzdG9tLW9wdGlvbi8y",
                "sku": "favoriteColorSku",
                "price": 5,
                "price_type": "FIXED",
                "max_characters": 20
              }
            }
          ]
        }
      ]
    }
  }
}