Support for Configurable Option Selections in Storefront app

[magento-engcom-team]

As a Magento Developer, 

I want to optimize the GraphQL product data retrieval for configurable products with a large number of variants

So that merchants can provide consistent user experience to their customers irrespective of the size and complexity of their catalog. 

Acceptance Criteria

GraphQL calls for configurable products scales as well as the calls for non-configurable products.
Clients are not required to pre-fetch variant data for a configurable product to render the page. 

Approved GraphQL Schema

<https://github.com/magento/architecture/blob/master/design-documents/graph-ql/coverage/catalog/configurable-options-selection.graphqls]
[https://github.com/magento/architecture/blob/master/design-documents/graph-ql/coverage/catalog/configurable-options-selection.md]

 

Example

Product configuration

Size
S ID 1
M ID 2

Color
Red ID 3
Green ID 4
Blue ID 5

Variations
S-Red 1-3
S-Green 1-4
M-Red 2-3
M-Green 2-4
M-Blue 2-5 {code}
<ins>**All options**</ins>


{code}
{
  products(filter: {sku: {eq: "configurable-sku"}}) {
    items {
      ... on ConfigurableProduct {
        configurable*options_selection*metadata {
          options*available_for*selection {
            attribute_code
            available*value*ids
          }
        }
      }
    }
  }
}

{
  "products": {
  	"items": {
  		"configurable*options_selection*metadata": {
  			"options*available_for*selection": [
				{
  					"attribute_code": "size",
  					"available*value*ids": [1, 2] // S, M
				},
				{
  					"attribute_code": "color",
  					"available*value*ids": [3, 4, 5] //R, G, B
				}
			]
		}
	}
}
{code}
 

<ins>**Options filtered by selected size**</ins>


{code}
{
  products(filter: {sku: {eq: "configurable-sku"}}) {
    items {
      ... on ConfigurableProduct {
        configurable*options_selection*metadata {
          options*available_for*selection(selectedConfigurableOptionValues: [1]) { // S
            attribute_code
            available*value*ids
          }
        }
      }
    }
  }
}

{
  "products": {
  	"items": {
  		"configurable*options_selection*metadata": {
  			"options*available_for*selection": [
				{
  					"attribute_code": "size",
  					"available*value*ids": [1, 2] // S, M
				},
				{
  					"attribute_code": "color",
  					"available*value*ids": [3, 4] // R,G  // Green available only in M
				}
			]
		}
	}
}
{code}

<ins>**Options filtered by selected color**</ins>


{code}
{
  products(filter: {sku: {eq: "configurable-sku"}}) {
    items {
      ... on ConfigurableProduct {
        configurable*options_selection*metadata {
          options*available_for*selection(selectedConfigurableOptionValues: [5]) { // B
            attribute_code
            available*value*ids
          }
        }
      }
    }
  }
}

{
  "products": {
  	"items": {
  		"configurable*options_selection*metadata": {
  			"options*available_for*selection": [
				{
  					"attribute_code": "size",
  					"available*value*ids": [2]
				},
				{
  					"attribute_code": "color",
  					"available*value*ids": [3, 4, 5] // Green available only in M
				}
			]
		}
	}
}
{code}

<ins>**Options filtered by selected color and size**</ins>


{code}
 {
  products(filter: {sku: {eq: "configurable-sku"}}) {
    items {
      ... on ConfigurableProduct {
        configurable*options_selection*metadata {
          options*available_for*selection(selectedConfigurableOptionValues: [2, 5]) {
            attribute_code
            available*value*ids
          }
        }
      }
    }
  }
}

{
  "products": {
  	"items": {
  		"configurable*options_selection*metadata": {
  			"options*available_for*selection": [
				{
  					"attribute_code": "size",
  					"available*value*ids": [2]
				},
				{
  					"attribute_code": "color",
  					"available*value*ids": [3, 4, 5] // Green available only in M
				}
			]
		}
	}
}
{code}


{code}
 {
  products(filter: {sku: {eq: "configurable-sku"}}) {
    items {
      ... on ConfigurableProduct {
        configurable*options_selection*metadata {
          options*available_for*selection(selectedConfigurableOptionValues: [2, 4]) {
            attribute_code
            available*value*ids
          }
        }
      }
    }
  }
}

{
  "products": {
  	"items": {
  		"configurable*options_selection*metadata": {
  			"options*available_for*selection": [
				{
  					"attribute_code": "size",
  					"available*value*ids": [1, 2]
				},
				{
  					"attribute_code": "color",
  					"available*value*ids": [3, 4, 5] // Green available only in M
				}
			>
		}
	}
}

[magento-engcom-team]

The issue was exported from the internal JIRA. The link to the original JIRA issue: https://jira.corp.magento.com/browse/SFAPP-64

[m2-assistant]

Hi @magento-engcom-team. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[mslabko]

@bricht , could you please verify and confirm, that PR #442 will cover the mentioned cases for "Options filtered by..." ?

Ideally cover this with SF API test, which will do request to SF API similar GQL request, provided in ticket

[bricht]

In the example above, the GraphQL request returns all the visible/rendered option_values for each request, not values which correspond to the available variants. This also does not match current implementation of GraphQl. Current configurable_options_selection_metadata request returns matching option_values like the example Ive added below.

In our implementation of CatalogStorefront VariantsMatch service we also retrieve the available variants, and each variant contains its corresponding option_values within it. So if the following example is what we would want to retrieve, then CatalogStorefront API should satisfy those needs.

{code}
{
  products(filter: {sku: {eq: "configurable-sku"}}) {
    items {
      ... on ConfigurableProduct {
        configurable*options_selection*metadata {
          options*available_for*selection(selectedConfigurableOptionValues: [1]) { // S
            attribute_code
            available*value*ids
          }
        }
      }
    }
  }
}

{
  "products": {
  	"items": {
  		"configurable*options_selection*metadata": {
  			"options*available_for*selection": [
				{
  					"attribute_code": "size",
  					"available*value*ids": [1] // S, M
				},
				{
  					"attribute_code": "color",
  					"available*value*ids": [3, 4] // R,G  // Green available only in M
				}
			]
		}
	}
}
{code}

{code}
 {
  products(filter: {sku: {eq: "configurable-sku"}}) {
    items {
      ... on ConfigurableProduct {
        configurable*options_selection*metadata {
          options*available_for*selection(selectedConfigurableOptionValues: [2, 4]) {
            attribute_code
            available*value*ids
          }
        }
      }
    }
  }
}

{
  "products": {
  	"items": {
  		"configurable*options_selection*metadata": {
  			"options*available_for*selection": [
				{
  					"attribute_code": "size",
  					"available*value*ids": [2]
				},
				{
  					"attribute_code": "color",
  					"available*value*ids": [4] // Green available only in M
				}
			>
		}
	}
}