🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

Filtering Reference Based on Selected Product

2 replies
Last updated: Jan 10, 2023
Hi!I got an array products and within those products there are an array of variants.

I need to filter reference based on the selected product. Since I need to be able to choose several variants per product I cant seem to find a way to get the selected product.

Anyone know a solution to this?
Jan 6, 2023, 2:36 PM
Here is the product part of the schema.
defineField({

name: 'products',

title: 'Products',

type: 'array',

group: 'content',

of: [

defineArrayMember({

name: 'productWithSelectedVariants',

title: 'Product with selected variants',

type: 'object',

fields: [

defineField({

name: 'product',

title: 'Product',

type: 'reference',

to: [{ type: 'product' }],

weak: true,

}),

defineField({

name: 'variants',

title: 'Variants',

type: 'array',

of: [

defineArrayMember({

name: 'variant',

title: 'Variant',

type: 'reference',

weak: true,

to: [{ type: 'productVariant', }],

options: {

filter: ({ parent, document }) => {

console.log('parent', parent);

console.log('document', document);


return {
`filter:
_type == "productVariant"
,`
params: {

shopifyProductId: null,

},

}

},

}

}),

]

}),

],

}),

],

})
Jan 6, 2023, 2:39 PM
This is tricky because you need to find the product within the document using the parent (which is an array of variants). Something like this should work if you’re using references to indicate the parent product:
defineField({
      name: 'products',
      title: 'Products',
      type: 'array',
      of: [
        defineArrayMember({
          name: 'productWithSelectedVariants',
          title: 'Product with selected variants',
          type: 'object',
          fields: [
            defineField({
              name: 'product',
              title: 'Product',
              type: 'reference',
              to: [{type: 'product'}],
              weak: true,
            }),
            defineField({
              name: 'variants',
              title: 'Variants',
              type: 'array',
              of: [
                defineArrayMember({
                  name: 'variant',
                  title: 'Variant',
                  type: 'reference',
                  weak: true,
                  to: [{type: 'productVariant'}],
                  options: {
                    filter: ({parent, document}) => {
                      const productID = document.products.find(
                        (product) => product.variants == parent
                      ).product._ref

                      return {
                        filter: `_type == "productVariant" && references($productID)`,
                        params: {
                          shopifyProductId: null,
                          productID,
                        },
                      }
                    },
                  },
                }),
              ],
            }),
          ],
        }),
      ],
    }),
Jan 10, 2023, 7:33 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?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
Rendering nested block contentJan 18, 2021
List Arrays - Is it Possible to Fill a List Array Within a Schema Asynchronously?Mar 16, 2021
TypeError: Cannot Read Properties of Null (Reading 'jsonType')Sep 28, 2022
Error in custom validation rule for schema in Slack threadAug 18, 2023
How to populate a list of values in a Sanity schema using a separate fileSep 6, 2021
Handling dynamic meta titles and descriptions in SanityFeb 25, 2021
Deleting a type A document caused an error when trying to remove type B from the schema.May 1, 2020
Error when adding color-input plugin to schemaApr 6, 2020
Hi, I need help with Iframe preview, I have a `route` schema with unique `slug` (`/lb/123`) and also I have `page` schema...Dec 21, 2020
I can't find the edit button to edit the image... can someone help?Dec 31, 2020

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle