Resource Picker set initialSelectionIds for Variants in Resource Picker with type "Product"

Retired Boards Appdev Tools
1

Dear Community,

I’m using the Resource Picker from the Shopify App Bridge. It is set to resource type “Product” with showVariants set true. Is there a way to preselect the variants that are listed under the products in an opened ResourcePicker? I can use the prop “initalSelectionIds” to select a Product, e.g.:


But if I use id: "gid://shopify/ProductVariant/32342323" nothing gets selected.

I could'nt find an answer in the docs: [https://shopify.dev/tools/app-bridge/react-components/resourcepicker](https://shopify.dev/tools/app-bridge/react-components/resourcepicker) .
2

I just found out, that although the variants that I choose in the intialSelectionIds are not ticked in the resource picker in the frontend, they are actually returned in the selection handler.

So if I for example take:


then the resourcePickerSelection Handler will return at least the variant with id 1234123412. Sadly, I can even choose the same variant in the picker again and the selection array contains the id twice. I'm not sure if this is intended behavior, but I will file an issue on github for the developers if I find time for that.
3

Hi Tommy,

Our docs on the help site is out of date unfortunately. If you open a “Product” Resource Picker and wanted to preselect a variant, you need to select the product and then set the selected variant id inside variants. Something like this should work:

[ {
  id: 'gid://Shopify/Product/1',
  variants: [{
    id: 'gid://Shopify/ProductVariant/1234123412',
  }],
}];
2 Likes
4

Hi Trish_Ta,

Since the docs on the help site are out of date, is there any other way we can view all the props for Resource Picker?

Thanks.

1 Like
5

The docs have been updated :slightly_smiling_face:

https://shopify.dev/tools/app-bridge/actions/resourcepicker#options

2 Likes
6

Dear Trish_Ta & iain-campbell,

thank you for your fast and helpful answers and updating the docs! Sorry, that I didn’t answer earlier, a different topic had occupied my mind. But now I can continue working on my original project and since I now have your answer, it surly will get started smoothly :slightly_smiling_face:

Greetings, Tommy

7

hi iain-campbell,

I tried an example from doc https://shopify.dev/tools/app-bridge/actions/resourcepicker#options and didn’t work for me, only when I replaced Shopify with shopify it works well. Maybe someone has the same problem.

Thanks.

1 Like