Questions and discussions about using the Shopify CLI and Shopify-built libraries.
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 .
Solved! Go to the solution
This is an 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',
}],
}];
Trish | Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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.
This is an 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',
}],
}];
Trish | Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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.
The docs have been updated 🙂
https://shopify.dev/tools/app-bridge/actions/resourcepicker#options
To learn more visit the Shopify Help Center or the Community Blog.
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
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.