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

[tommydev]

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.:

<ResourcePicker
                    resourceType={"Product"}
                    ...
                    initialSelectionIds={[{id: "gid://shopify/Product/12312321"}]}
                    ...
/>

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 .

[tommydev]

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:

                <ResourcePicker
                    ...
                    resourceType={"Product"}
                    showVariants={true}
                    initialSelectionIds={[{id: "gid://shopify/ProductVariant/1234123412"}]}
                    onSelection={(e) => this.resourcePickerSelection(e.selection)}
                    ...
                />

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.

[Trish_Ta · Accepted solution]

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',
  }],
}];

[leilei9011]

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.

[iain-campbell]

The docs have been updated 🙂

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

[tommydev]

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 🙂

Greetings, Tommy

[nxd]

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.