search

magento / magento2-pwa

Other
15 stars 13 forks source link

[Feature] Custom attribute list filter by components #13

Closed korovitskyi closed 8 months ago

korovitskyi commented 1 year ago

Overview of the issue

As using custom attributes is deprecated in the ProductInterface object, but on getting the attribute list by custom_attributes, we have the list of all sets of attributes per product. The problem comes when it needs to get several attributes on the PLP, but as a result, all list is returned.

Solution Overview

Add the input components on the custom_attributes field to filter the returned list of attributes by the used_in_components - of strict list CustomAttributesListsEnum enum. The components input is not required to be used on the query.

Syntax

interface ProductInterface {
  custom_attributes(
    components: [CustomAttributesListsEnum]
  ):[CustomAttribute]!
}

Request/Response Samples

1. Query without filter

Request

query {
    products(
        filter: {
            sku: { eq: "24-MB01" }
        }
    ) {
        total_count
        items {
            sku
            uid
            name
            custom_attributes {
                attribute_metadata {
                    label
                    code
                    ... on ProductAttributeMetadata {
                        used_in_components
                    }
                }
            }
        }
    }
}

Response

{
  "data": {
    "products": {
      "total_count": 1,
      "items": [
        {
          "sku": "24-MB01",
          "uid": "MQ==",
          "name": "Joust Duffle Bag",
          "custom_attributes": [
            {
              "attribute_metadata": {
                "label": "Activity",
                "code": "activity",
                "used_in_components": [
                  "PRODUCT_DETAILS_PAGE",
                  "PRODUCTS_COMPARE",
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Climate",
                "code": "climate",
                "used_in_components": [
                  "PRODUCT_DETAILS_PAGE",
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Color",
                "code": "color",
                "used_in_components": [
                  "PRODUCTS_LISTING",
                  "PRODUCT_FILTER",
                  "PRODUCT_SEARCH_RESULTS_FILTER",
                  "ADVANCED_CATALOG_SEARCH"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Eco Collection",
                "code": "eco_collection",
                "used_in_components": [
                  "PRODUCTS_COMPARE",
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Erin Recommends",
                "code": "erin_recommends",
                "used_in_components": [
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "New",
                "code": "new",
                "used_in_components": [
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Performance Fabric",
                "code": "performance_fabric",
                "used_in_components": [
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Sale",
                "code": "sale",
                "used_in_components": [
                  "PRODUCT_FILTER"
                ]
              }
            }
          ]
        }
      ]
    }
  }
}

2. Query with one component

Request

query {
    products(
        filter: {
            sku: { eq: "24-MB01" }
        }
    ) {
        total_count
        items {
            sku
            uid
            name
            custom_attributes(
                components: [PRODUCTS_COMPARE]
            ) {
                attribute_metadata {
                    label
                    code
                    ... on ProductAttributeMetadata {
                        used_in_components
                    }
                }
            }
        }
    }
}

Response

{
  "data": {
    "products": {
      "total_count": 1,
      "items": [
        {
          "sku": "24-MB01",
          "uid": "MQ==",
          "name": "Joust Duffle Bag",
          "custom_attributes": [
            {
              "attribute_metadata": {
                "label": "Activity",
                "code": "activity",
                "used_in_components": [
                  "PRODUCT_DETAILS_PAGE",
                  "PRODUCTS_COMPARE",
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Eco Collection",
                "code": "eco_collection",
                "used_in_components": [
                  "PRODUCTS_COMPARE",
                  "PRODUCT_FILTER"
                ]
              }
            }
          ]
        }
      ]
    }
  }
}

3. Query with two components

Request

query {
    products(
        filter: {
            sku: { eq: "24-MB01" }
        }
    ) {
        total_count
        items {
            sku
            uid
            name
            custom_attributes(
                components: [PRODUCTS_COMPARE, PRODUCT_FILTER]
            ) {
                attribute_metadata {
                    label
                    code
                    ... on ProductAttributeMetadata {
                        used_in_components
                    }
                }
            }
        }
    }
}

Response

{
  "data": {
    "products": {
      "total_count": 1,
      "items": [
        {
          "sku": "24-MB01",
          "uid": "MQ==",
          "name": "Joust Duffle Bag",
          "custom_attributes": [
            {
              "attribute_metadata": {
                "label": "Activity",
                "code": "activity",
                "used_in_components": [
                  "PRODUCT_DETAILS_PAGE",
                  "PRODUCTS_COMPARE",
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Climate",
                "code": "climate",
                "used_in_components": [
                  "PRODUCT_DETAILS_PAGE",
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Color",
                "code": "color",
                "used_in_components": [
                  "PRODUCTS_LISTING",
                  "PRODUCT_FILTER",
                  "PRODUCT_SEARCH_RESULTS_FILTER",
                  "ADVANCED_CATALOG_SEARCH"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Eco Collection",
                "code": "eco_collection",
                "used_in_components": [
                  "PRODUCTS_COMPARE",
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Erin Recommends",
                "code": "erin_recommends",
                "used_in_components": [
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "New",
                "code": "new",
                "used_in_components": [
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Performance Fabric",
                "code": "performance_fabric",
                "used_in_components": [
                  "PRODUCT_FILTER"
                ]
              }
            },
            {
              "attribute_metadata": {
                "label": "Sale",
                "code": "sale",
                "used_in_components": [
                  "PRODUCT_FILTER"
                ]
              }
            }
          ]
        }
      ]
    }
  }
}
korovitskyi commented 8 months ago

Closing this PR as see, that modified attribute is deprecated.