Query and search support in resource picker

I’m using the resourcePicker to select products within my action extension. I’m launching it with a filter query like to limit to products within a specific collection. This works, however the search query does not work when I specify this query? I confirmed that search does work if I don’t also provide a filter query. Seems like they were not designed to work together?

    async function selectProduct() {
        const numericId = collectionId.split('/').pop(); // Convert global to numeric id
        const newProducts = await resourcePicker({
            type: 'product',
            action: 'select',
            multiple: true,
            filter: {
                variants: false,
                // Fetch products that belong to the collection
                query: `collection_id:${numericId}`,
            },
        });
        newProducts?.forEach((p) => onSelect(p));
    }

This is a snippet of the query generated under the hood with the search term “dad”.

Just wanted to follow up on this. It seems like search only doesn’t work if I include collection_id in the query. Other fields are ok to use. Maybe there is some internal logic that happens when collection_id is specified.

Also, the multiple option just does not get recognized by the resourcePicker, but it does for the normal picker. Tried with and without the filter.query parameter.

My solution to the problems above was to fetch all the products for the collection and construct a query that includes their ids (ie. id:... OR id:..). This allowed me to also omit ids that were already selected in my extension. Also, this fixed the problem with search not working when coupled with a collection_id in the filter.query parameter. I could not solve the multiple option not working with the resourcePicker so users can only select one at a time.

Glad you figured this out Nathan, and thanks for coming back here to post your solution!

1 Like