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.