How to hide previously selected products in [shopify.resourcePicker({type: 'product'})] using saved product IDs

Polaris
1

Hi everyone :waving_hand:

I’m building a Shopify app that uses the Resource Picker API (shopify.resourcePicker) to let merchants select products.

Here’s the behavior I’m trying to achieve:

When the merchant reopens the picker, any products that were previously selected should be hidden, so they can only pick new ones.

2

Hi @SUDHAGAR_G!

Great question! You can use query to filter products from the picker.

For example, use the - to indicate NOT then pass through the product ID you wish to exclude:

const selected = await shopify.resourcePicker({
  type: 'product',
  action: 'select',
  multiple: false,
  filter: {
    query: '-PRODUCT_ID_HERE',
  },
});

If you wish to exclude multiple, you can use AND like this:

const selected = await shopify.resourcePicker({
  type: 'product',
  action: 'select',
  multiple: false,
  filter: {
    query: '-id:PRODUCT_ID_ONE AND -id:PRODUCT_ID_TWO AND -id:PRODUCT_ID_THREE
',
  },
});

Hope that helps! Let me know if you need further clarification on this approach.

3

image
image981×513 17.4 KB

const selected = await window.shopify?.resourcePicker({

      type: "product",

      multiple: true,

      filter: {

        query:

          "-id:gid://shopify/Product/10033058316567 AND -id:gid://shopify/Product/10033058349335 AND -id:gid://shopify/Product/10033057825047",

      },

    });

Thanks for your response! I tried using the suggested query syntax with multiple exclusions, but unfortunately, it doesn’t seem to work.

4

Oh, just realized I should have clarified since we’re so used to using the full global ID. For our search syntax, you only need to use the numerical value.

So in your case, it would be:

const selected = await window.shopify?.resourcePicker({
      type: "product",
      multiple: true,
      filter: {
        query:
          "-id:10033058316567 AND -id:10033058349335 AND -id:10033057825047",
      },
    });