Magento 2 How to get Layered Navigation Data in GraphQL

This topic is very important for Layered Navigation in magento 2 using GraphQL. First of all we need to products query after then need to filter product collection with custom attributes and default attributes. We will show you how to get layered navigation data.

Here, in below query we will show you for all attribute code with particular category id. And will get all products attribute data with options label and value.

The following query returns information about filter category_id 14.

Request

saveCopyzoom_out_map
{
  products(filter: { category_id: { eq: "14" } }) {
    total_count
    aggregations{
      attribute_code
      label
      count
      options{
        count
        label
        value
      }
    }
  }
}

Response

saveCopyzoom_out_map
{
  "data": {
    "products": {
      "total_count": 11,
      "aggregations": [
        {
          "attribute_code": "price",
          "label": "Price",
          "count": 5,
          "options": [
            {
              "count": 4,
              "label": "40-50",
              "value": "40_50"
            },
            {
              "count": 2,
              "label": "50-60",
              "value": "50_60"
            },
            {
              "count": 3,
              "label": "60-70",
              "value": "60_70"
            },
            {
              "count": 1,
              "label": "70-80",
              "value": "70_80"
            },
            {
              "count": 1,
              "label": "90-*",
              "value": "90_*"
            }
          ]
        },
        {
          "attribute_code": "category_id",
          "label": "Category",
          "count": 3,
          "options": [
            {
              "count": 11,
              "label": "Tops",
              "value": "12"
            },
            {
              "count": 11,
              "label": "Jackets",
              "value": "14"
            },
            {
              "count": 2,
              "label": "Eco Friendly",
              "value": "36"
            }
          ]
        },
        {
          "attribute_code": "color",
          "label": "Color",
          "count": 9,
          "options": [
            {
              "count": 6,
              "label": "Black",
              "value": "5476"
            },
            {
              "count": 5,
              "label": "Blue",
              "value": "5477"
            },
            {
              "count": 1,
              "label": "Gray",
              "value": "5479"
            },
            {
              "count": 5,
              "label": "Green",
              "value": "5480"
            },
            {
              "count": 4,
              "label": "Orange",
              "value": "5483"
            },
            {
              "count": 2,
              "label": "Purple",
              "value": "5484"
            },
            {
              "count": 6,
              "label": "Red",
              "value": "5485"
            },
            {
              "count": 1,
              "label": "White",
              "value": "5486"
            },
            {
              "count": 3,
              "label": "Yellow",
              "value": "5487"
            }
          ]
        },
        {
          "attribute_code": "material",
          "label": "Material",
          "count": 10,
          "options": [
            {
              "count": 1,
              "label": "Cotton",
              "value": "5460"
            },
            {
              "count": 5,
              "label": "Nylon",
              "value": "5464"
            },
            {
              "count": 9,
              "label": "Polyester",
              "value": "5465"
            },
            {
              "count": 2,
              "label": "Cocona® performance fabric",
              "value": "5569"
            },
            {
              "count": 5,
              "label": "Fleece",
              "value": "5571"
            },
            {
              "count": 1,
              "label": "Hemp",
              "value": "5572"
            },
            {
              "count": 2,
              "label": "LumaTech™",
              "value": "5574"
            },
            {
              "count": 1,
              "label": "Lycra®",
              "value": "5575"
            },
            {
              "count": 1,
              "label": "Spandex",
              "value": "5577"
            },
            {
              "count": 1,
              "label": "Wool",
              "value": "5585"
            }
          ]
        },
        {
          "attribute_code": "size",
          "label": "Size",
          "count": 5,
          "options": [
            {
              "count": 11,
              "label": "XS",
              "value": "5593"
            },
            {
              "count": 11,
              "label": "S",
              "value": "5594"
            },
            {
              "count": 11,
              "label": "M",
              "value": "5595"
            },
            {
              "count": 11,
              "label": "L",
              "value": "5596"
            },
            {
              "count": 11,
              "label": "XL",
              "value": "5597"
            }
          ]
        },
        {
          "attribute_code": "eco_collection",
          "label": "Eco Collection",
          "count": 2,
          "options": [
            {
              "count": 9,
              "label": "0",
              "value": "0"
            },
            {
              "count": 2,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "performance_fabric",
          "label": "Performance Fabric",
          "count": 2,
          "options": [
            {
              "count": 8,
              "label": "0",
              "value": "0"
            },
            {
              "count": 3,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "erin_recommends",
          "label": "Erin Recommends",
          "count": 2,
          "options": [
            {
              "count": 9,
              "label": "0",
              "value": "0"
            },
            {
              "count": 2,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "new",
          "label": "New",
          "count": 2,
          "options": [
            {
              "count": 9,
              "label": "0",
              "value": "0"
            },
            {
              "count": 2,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "sale",
          "label": "Sale",
          "count": 2,
          "options": [
            {
              "count": 9,
              "label": "0",
              "value": "0"
            },
            {
              "count": 2,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "style_general",
          "label": "Style General",
          "count": 12,
          "options": [
            {
              "count": 5,
              "label": "Insulated",
              "value": "5543"
            },
            {
              "count": 1,
              "label": "Jacket",
              "value": "5544"
            },
            {
              "count": 6,
              "label": "Lightweight",
              "value": "5546"
            },
            {
              "count": 3,
              "label": "Hooded",
              "value": "5547"
            },
            {
              "count": 2,
              "label": "Heavy Duty",
              "value": "5548"
            },
            {
              "count": 5,
              "label": "Rain Coat",
              "value": "5549"
            },
            {
              "count": 5,
              "label": "Hard Shell",
              "value": "5550"
            },
            {
              "count": 5,
              "label": "Soft Shell",
              "value": "5551"
            },
            {
              "count": 6,
              "label": "Windbreaker",
              "value": "5552"
            },
            {
              "count": 7,
              "label": "¼ zip",
              "value": "5554"
            },
            {
              "count": 5,
              "label": "Full Zip",
              "value": "5555"
            },
            {
              "count": 1,
              "label": "Reversible",
              "value": "5556"
            }
          ]
        },
        {
          "attribute_code": "pattern",
          "label": "Pattern",
          "count": 1,
          "options": [
            {
              "count": 11,
              "label": "Solid",
              "value": "5623"
            }
          ]
        },
        {
          "attribute_code": "climate",
          "label": "Climate",
          "count": 10,
          "options": [
            {
              "count": 5,
              "label": "All-Weather",
              "value": "5628"
            },
            {
              "count": 2,
              "label": "Cold",
              "value": "5629"
            },
            {
              "count": 9,
              "label": "Cool",
              "value": "5630"
            },
            {
              "count": 2,
              "label": "Indoor",
              "value": "5631"
            },
            {
              "count": 4,
              "label": "Mild",
              "value": "5632"
            },
            {
              "count": 5,
              "label": "Rainy",
              "value": "5633"
            },
            {
              "count": 10,
              "label": "Spring",
              "value": "5634"
            },
            {
              "count": 1,
              "label": "Warm",
              "value": "5635"
            },
            {
              "count": 9,
              "label": "Windy",
              "value": "5636"
            },
            {
              "count": 3,
              "label": "Wintry",
              "value": "5637"
            }
          ]
        }
      ]
    }
  }
}

Now, we will show you in next query how to filter multiple attribute with category id. As per our above discussion first need to products query.

In below products query used category id as a string, color as a string and price as a range (from-to) in filter. You can use array instead of string if you need.

Request

saveCopyzoom_out_map
{
  products(filter: { category_id: { in: "12" }, color: { eq: "5480" }, price: {from: "40" to: "59"} }) {
    total_count
    aggregations {
      count
      attribute_code
      label
      options {
        label
        value
      }
    }
    items {
      id
      sku
      name
    }
  }
}

Response

saveCopyzoom_out_map
{
  "data": {
    "products": {
      "total_count": 5,
      "aggregations": [
        {
          "count": 2,
          "attribute_code": "price",
          "label": "Price",
          "options": [
            {
              "label": "40-50",
              "value": "40_50"
            },
            {
              "label": "50-*",
              "value": "50_*"
            }
          ]
        },
        {
          "count": 4,
          "attribute_code": "category_id",
          "label": "Category",
          "options": [
            {
              "label": "Tops",
              "value": "12"
            },
            {
              "label": "Jackets",
              "value": "14"
            },
            {
              "label": "Hoodies & Sweatshirts",
              "value": "15"
            },
            {
              "label": "Eco Friendly",
              "value": "36"
            }
          ]
        },
        {
          "count": 8,
          "attribute_code": "color",
          "label": "Color",
          "options": [
            {
              "label": "Black",
              "value": "5476"
            },
            {
              "label": "Blue",
              "value": "5477"
            },
            {
              "label": "Gray",
              "value": "5479"
            },
            {
              "label": "Green",
              "value": "5480"
            },
            {
              "label": "Orange",
              "value": "5483"
            },
            {
              "label": "Purple",
              "value": "5484"
            },
            {
              "label": "Red",
              "value": "5485"
            },
            {
              "label": "White",
              "value": "5486"
            }
          ]
        },
        {
          "count": 6,
          "attribute_code": "material",
          "label": "Material",
          "options": [
            {
              "label": "Nylon",
              "value": "5464"
            },
            {
              "label": "Polyester",
              "value": "5465"
            },
            {
              "label": "Fleece",
              "value": "5571"
            },
            {
              "label": "Hemp",
              "value": "5572"
            },
            {
              "label": "LumaTech™",
              "value": "5574"
            },
            {
              "label": "Wool",
              "value": "5585"
            }
          ]
        },
        {
          "count": 5,
          "attribute_code": "size",
          "label": "Size",
          "options": [
            {
              "label": "XS",
              "value": "5593"
            },
            {
              "label": "S",
              "value": "5594"
            },
            {
              "label": "M",
              "value": "5595"
            },
            {
              "label": "L",
              "value": "5596"
            },
            {
              "label": "XL",
              "value": "5597"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "eco_collection",
          "label": "Eco Collection",
          "options": [
            {
              "label": "0",
              "value": "0"
            },
            {
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "performance_fabric",
          "label": "Performance Fabric",
          "options": [
            {
              "label": "0",
              "value": "0"
            },
            {
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "erin_recommends",
          "label": "Erin Recommends",
          "options": [
            {
              "label": "0",
              "value": "0"
            },
            {
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "new",
          "label": "New",
          "options": [
            {
              "label": "0",
              "value": "0"
            },
            {
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "count": 1,
          "attribute_code": "sale",
          "label": "Sale",
          "options": [
            {
              "label": "0",
              "value": "0"
            }
          ]
        },
        {
          "count": 9,
          "attribute_code": "style_general",
          "label": "Style General",
          "options": [
            {
              "label": "Insulated",
              "value": "5543"
            },
            {
              "label": "Lightweight",
              "value": "5546"
            },
            {
              "label": "Hooded",
              "value": "5547"
            },
            {
              "label": "Rain Coat",
              "value": "5549"
            },
            {
              "label": "Hard Shell",
              "value": "5550"
            },
            {
              "label": "Soft Shell",
              "value": "5551"
            },
            {
              "label": "Windbreaker",
              "value": "5552"
            },
            {
              "label": "¼ zip",
              "value": "5554"
            },
            {
              "label": "Full Zip",
              "value": "5555"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "pattern",
          "label": "Pattern",
          "options": [
            {
              "label": "Color-Blocked",
              "value": "5621"
            },
            {
              "label": "Solid",
              "value": "5623"
            }
          ]
        },
        {
          "count": 8,
          "attribute_code": "climate",
          "label": "Climate",
          "options": [
            {
              "label": "All-Weather",
              "value": "5628"
            },
            {
              "label": "Cool",
              "value": "5630"
            },
            {
              "label": "Indoor",
              "value": "5631"
            },
            {
              "label": "Mild",
              "value": "5632"
            },
            {
              "label": "Rainy",
              "value": "5633"
            },
            {
              "label": "Spring",
              "value": "5634"
            },
            {
              "label": "Warm",
              "value": "5635"
            },
            {
              "label": "Windy",
              "value": "5636"
            }
          ]
        }
      ],
      "items": [
        {
          "id": 132,
          "sku": "MH05",
          "name": "Hollister Backyard Sweatshirt"
        },
        {
          "id": 164,
          "sku": "MH07",
          "name": "Hero Hoodie"
        },
        {
          "id": 292,
          "sku": "MJ02",
          "name": "Hyperion Elements Jacket"
        },
        {
          "id": 404,
          "sku": "MJ06",
          "name": "Jupiter All-Weather Trainer "
        },
        {
          "id": 420,
          "sku": "MJ03",
          "name": "Montana Wind Jacket"
        }
      ]
    }
  }
}

That's it!!

If you are looking for more GraphQL solutions then check out our another article which is List of GraphQL Queries and Mutations for Magento 2.

I hope this article helps you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions on that.

P.S. Do share this article with your team.




Search
Recent Articles
Tags
Newsletter
Copyright © 2022 devhooks.in All rights reserved.
Ads OFF toggle_off
wifi_off