Admin UI Extension Not Updating on Product Navigation

Hi,

I’m experiencing an issue with my Admin UI Extension for product configuration. When navigating between different product pages in the Shopify admin interface, the extension does not update to reflect the newly selected product. Instead, it continues to display data from the initial product loaded.

Expected Behavior:
When a user navigates to a different product in the Shopify admin, the extension should update to display information relevant to the new product.

Please see screenshot attached. First product visited is on the left and the second product visited is on the right.

Observed Behavior:
The extension remains static, displaying the original product’s information, and does not react to navigation changes.

Please see screenshot attached. First product visited is on the left and the second product visited is on the right.

Steps to Reproduce:

  1. Install and enable the Admin UI Extension on a development store.
  2. Navigate to the Shopify admin and open a product page where the extension is displayed.
  3. Observe that the extension displays the correct information for the initial product.
  4. Use the Shopify admin interface to navigate to a different product (e.g., using the product list).
  5. Observe that the extension does not update and continues to display information from the initial product.

Actions I’ve tested:

  • The data object from useApi(TARGET) does not update upon navigation to a new product.
  • Neither data.product.id nor extension.resource.id change when selecting a different product.
  • The extension does not re-render or remount when navigating between products.
  • There is no apparent method or API available within the Admin UI Extension environment to detect navigation events or context changes.

This is with:

api_version = "2024-07"
target = "admin.product-details.configuration.render"

I’ve triple checked the targets match in both files.

Based on my observations, it seems that data updating on navigation should be expected behavior since other admin extensions like the draft orders edit do not exhibit this issue. Can anyone confirm if this is the expected behavior for Admin UI Extensions when navigating between products? If so, could you provide guidance on how to ensure that the data object updates correctly upon navigation, or how to detect navigation events or context changes within the Admin UI Extension environment?

Any assistance or insights would be greatly appreciated.

1 Like

Would you be able to test if when you target admin.product-details.block.render does that work for you? Just to check if its a target issue.

I’ve tried your test. I updated ProductDetailsConfigurationExtension.jsx to use admin.product-details.block.render and my shopify.extension.toml to use the same.
This makes the block option appear at the bottom of the page but adding the block just makes the “add block” option disappear and nothing else happens, I’m assuming that its not working because its the wrong extension type.

We need the target to admin.product-details.configuration.render as the product owner of the product to display its components the same way the Shopify bundles app does it.

Hey @Gabrielle_Rea yes sorry, I mean if you add the block and change products, does the extensions product information get updated correctly?
If it does, that confirms there is an issue with only the configuration section, if it doesn’t it might mean there is either a wider issue or with the extensions config. It will help narrow down the cause of the issue :slight_smile:

@Gabrielle_Rea Have you found a solution to this? We noticed exactly the same issue with our Product Configuration Admin UI Extension.

Unfortunately I have not, I would love to know if anyone has gotten a product configuration admin UI extension to work in production.

I get the feeling this extension is broken (and has been since 2023) and we need someone from the Admin extension team to investigate.

This was the original post of the issue in 2023.

1 Like

Hi @Gabrielle_Rea , do you have the update on this issue.
We face the same problem with order page.
By the way, can you share the ui of your bundles app. I see it use the polaris component but the admin ui extension don’t accept polaris anymore.

@Gabrielle_Rea I have been testing the product.configuration admin UI extension as well for my app, and it seems very buggy. It seems your issue has been raised numerous times, even on GitHub, with no progress :frowning:

Based on my testing thus far, it seems the product.configuration is very specific to the Shopify Bundles app, or that a bundle must be defined as documented in the custom bundles tutorial. The only time the product.configuration extension seems to work for me is if I follow the tutorial exactly. Any other implementation of a customized bundle function causes the extension to break.

I agree with your desire to have the bundles card higher up on the product page, as opposed to an admin block near the bottom of the page.

@Shopify_Dev @Kenza_Iraki Can we please get some perspective on these issues with the product.configuration extension?