Sorting products by vendor string in Sanity.io desk
10 replies
Last updated: Mar 10, 2022
P
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
P
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
P
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
P
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
P
so these strings only live on the product
Mar 10, 2022, 9:31 PM
P
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
vendorfield in my
productdocuments, 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
P
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.