Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
82 stars 9 forks source link

Ability to select variants for a specific product via the Resource Picker #249

Closed ryanrphillips closed 5 months ago

ryanrphillips commented 7 months ago

Describe the feature you’d like

The resource picker currently allows for product, variant and collection selection. The variant selection is a list of all variants in the store. We'd like to be able to open a resource picker and have it only show variants for a specific product ID. This functionality can be found on the create/edit discount screen (see attachment) in Shopify.

Describe alternatives you've considered

This is somewhat possible using the query filter (query: "product_id:'idgoeshere'"), however the query field is still in the UI and the user can remove the filter. An option to hide this part of the UI could also be a viable option.

Additional context

In our case, it's most common for users to only select the top level product and no variants. For this reason, we use a product resource picker with variants turned off. We then have an optional second step for the user to toggle specific variants on for the product they selected.

uMSE0iaAQqaNSAGoB7xwLg

ryanrphillips commented 5 months ago

This feature has now been added to the CDN version of App Bridge.

https://shopify.dev/docs/api/app-bridge-library/reference/resource-picker

// This is the old usage which shows the `Sweater` query in the UI
const selected = await shopify.resourcePicker({
  type: 'product',
  query: 'Sweater',
});

// This is the new usage with does NOT show the `Sweater` query in the UI
const selected = await shopify.resourcePicker({
  type: 'product',
  filter: {
    query: 'Sweater',
  },
});

Thank you app bridge team!