🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Sorting products by vendor string in Sanity.io desk

10 replies
Last updated: Mar 10, 2022
for example: i have a document called product, and I store a vendor name as a string as product.vendor – I want to sort by this in the desk so i can group all products by their vendors
Mar 3, 2022, 9:02 PM
i have something like this where i need to add the ability to sort by the string value
  .child(product =>
    S.documentList()
      .title('Products')
      .menuItems(S.documentTypeList('product').getMenuItems())
      .filter('_type == $type')
      .params({type: 'product'}),
Mar 3, 2022, 9:03 PM
i want to group them by vendor – vendor is a string field on the product document (synced from Shopify)
Mar 10, 2022, 9:22 PM
Got it! It'll be really similar to how posts are grouped by author in this example , but since vendor isn't a type itself we'll have to tweak it a bit. Do you have an array that contains all of the possible vendors or would that be something we have to handle inside of the list as well?
Mar 10, 2022, 9:26 PM
I don’t – I have a list of vendor documents elsewhere but they are not necessarily bound to the vendor strings that are returned from Shopify
Mar 10, 2022, 9:27 PM
That does make it more complicated, but not impossible. We'll have to do some GROQ/JS magic. Let me mock something up this afternoon and see if I can get the basics worked out!
Mar 10, 2022, 9:30 PM
so these strings only live on the product
Mar 10, 2022, 9:31 PM
understood – glad it wasn’t something obvious i was missing! hugely appreciate the help 🙂
Mar 10, 2022, 9:32 PM
This one was quite fun to work through! I tend to separate things like this into their own files that I can then import into my main desk structure. First, I fetch an array of all of the different possible strings in the
vendor
field in my
product
documents, then remove the duplicates and map over them.
//productsByVendor.js

import S from '@sanity/desk-tool/structure-builder';
import client from "part:@sanity/base/client"

const sanityClient = client.withConfig({apiVersion: '2021-03-25'})

export default S.listItem()
  .title('Products by Vendor')
  .child(async () => {
    const vendors = await sanityClient
      .fetch(`*[_type == 'product' && vendor != null].vendor`)
      .then((allVendors) => [...new Set(allVendors)]);
    return S.list()
      .title('Products by Vendor')
      .items([
        ...vendors.map((vendor) =>
          S.listItem()
            .title(vendor)
            .child(
              S.documentList()
                .title(vendor)
                .filter('_type == "product" && vendor == $vendor')
                .params({ vendor })
            )
        ),
      ]);
  });

Mar 10, 2022, 11:04 PM
this is very impressive, can’t thank you enough
user M
!
Mar 10, 2022, 11:06 PM
You're welcome and sorry we missed your question originally!
Mar 10, 2022, 11:09 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?