Menu/Nav Mapped Options Sort Order with Parent Labels

App Building
1

image
image568×726 12.3 KB

[
  {
    "id": 1,
    "collection_id": "11111114",
    "title": "Handles",
    "parent_title": "Fusion",
    "sort_order": "1"
  },
  {
    "id": 2,
    "collection_id": "11111112",
    "title": "Ends",
    "parent_title": "Fusion",
    "sort_order": "2"
  },
  {
    "id": 3,
    "collection_id": "1111111",
    "title": "Hubs & Spokes",
    "parent_title": "Fusion",
    "sort_order": "3"
  },
  {
    "id": 4,
    "collection_id": "111111113",
    "title": "Lumi Led",
    "parent_title": null,
    "sort_order": "4"
  }
]

Trying to get this menu to sort on the parent items. It's sorting the children ok, But the parents, not. Is this possible?
Thanks

1 Like
2

I've also tried adding the parent_title to "Lumi Led" but it doesn't help.

3

Not sure where the order is even set or the logic it follows. It's clearly not alphabetical.

image
image564×2212 149 KB

4

Hi @jason3w - Sounds like you want to sort your menu items' parent labels alphabetically. You can use a sort function in the data source input like this:

{{_.sortBy(your_data_source_query.data, ["parent_title"])}}

Your nav should now have alphabetized parent labels :handshake: Let me know if that resolved the issue for ya!

5

Hi mroknich.
I have no issue sorting the mapped data. But it's not displayed in the same order as the data, as you can see in screenshots. One shows the order of the data and the other the order within the menu.

6

I don't think I follow. Are you trying to ensure the 'sort_order' property is honored?

7

Correct. Even though the data is sorted in the way it should be displayed, and it is in order if the parent isn't set. If I add the parent, the order is not honoured on the parent level.

8

Hi @jason3w - So, the following snippet using the lodash sortBy method should work to solve your issue, but I think we're running into a bug. I'll file it with the team

{{_.sortBy(getData.data, ['parent_title', 'sort_order'])}}
9

Thanks again @mroknich . This is the output from the snippet provided, though it's not changed the data order, as I am sorting it in the query.
And attached is the menu as it is shown on the screen now, with this data.

[
{
"id": 1,
"collection_id": "275056033886",
"title": "Handles",
"parent_title": "Fusion",
"sort_order": "1"
},
{
"id": 2,
"collection_id": "275000328286",
"title": "Ends",
"parent_title": "Fusion",
"sort_order": "2"
},
{
"id": 3,
"collection_id": "405752978",
"title": "Hubs & Spokes",
"parent_title": "Fusion",
"sort_order": "3"
},
{
"id": 10,
"collection_id": "161592606814",
"title": "Juggling Balls Individual",
"parent_title": "Juggling",
"sort_order": "1"
},
{
"id": 9,
"collection_id": "161592541278",
"title": "Juggling Ball Sets",
"parent_title": "Juggling",
"sort_order": "2"
},
{
"id": 11,
"collection_id": "161592672350",
"title": "Juggling Clubs",
"parent_title": "Juggling",
"sort_order": "3"
},
{
"id": 12,
"collection_id": "260604362846",
"title": "Contact Juggling",
"parent_title": "Juggling",
"sort_order": "4"
},
{
"id": 4,
"collection_id": "360906834",
"title": "Lumi Led",
"parent_title": "Lumi Led",
"sort_order": "4"
},
{
"id": 6,
"collection_id": "262209208414",
"title": "Djembe Drums",
"parent_title": "Music",
"sort_order": "10"
},
{
"id": 7,
"collection_id": "137207382110",
"title": "Top Sellers",
"parent_title": null,
"sort_order": "0"
},
{
"id": 5,
"collection_id": null,
"title": "Music",
"parent_title": null,
"sort_order": "10"
},
{
"id": 13,
"collection_id": null,
"title": "Juggling",
"parent_title": null,
"sort_order": "11"
},
{
"id": 8,
"collection_id": "159756025950",
"title": "Hula Hoops",
"parent_title": null,
"sort_order": "12"
}
]

image
image588×1260 38.3 KB

image
image580×1260 59.6 KB

10

All good. I discovered the issue. I didn't have a parent title on the parent items. Adding this seems to have fixed it. Cheers!