As requested in [IMPORTANT] Stop creating issues here, use the Shopify Community forum instead · Issue #2521 · Shopify/ui-extensions · GitHub, I am re-raising this issue.
Please find below the details of Feature Request: Access to name of checkout extension's dynamic target via useExtension() or useApi() · Issue #1911 · Shopify/ui-extensions · GitHub
Please list the related package(s)
This feature request is specific to the @shopify/ui-extensions-react/checkout
& @shopify/ui-extensions
packages.
If this related to specific APIs or components, please list them here
This feature request is specific to the ‘target’ property of the Extension<Target extends ExtensionTarget = ExtensionTarget>
type object, which we can access via either
import { useExtension} from '@shopify/ui-extensions-react/checkout'
const { target } = useExtension()
or
import { useApi } from '@shopify/ui-extensions-react/checkout'
const { extension } = useApi<'purchase.checkout.block.render'>()
const target = extension.target
Is your feature request related to a problem? Please describe.
- Our extension allows our merchant partners to customize placement of our extension across the various dynamic target locations available to checkout extensions by using
'purchase.checkout.block.render'
as our extension target. - As far as we know, there is no way of branching logic within react components based on whether the extension has been placed by the merchant in the information, shipping, payment, or order summary section of the checkout. In other words, there is no way to programmatically access the dynamic target’s name. It is critical to our app functionality that we be able to do this.
- We unfortunately can not use the
rendered.current
value (which we can access viaconst { rendered } = useExtension()
) to branch our logic because this may returntrue
even if the extension is not visible in the end user’s browser. For example, it returnstrue
while the user is on the “Information” step of the buyer journey, even when the merchant has placed our extension somewhere on the “Shipping” page/step. It is made clear in the documentation of therendered
object that this is correct - sometimes the extension is considered rendered, even when it is not visible.
Describe the changes you are looking for
- It would be extremely useful to us to be able to programmatically access the active dynamic target’s name within our extension. Pseudocode:
// ui-extensions/pagkages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts
// proposed new type
type DynamicTarget = 'WALLETS1' | 'INFORMATION1' | 'INFORMATION2' | 'INFORMATION3' | 'DELIVERY1' | 'DELIVERY2' | 'PAYMENT1' | 'PAYMENT2' | 'PAYMENT3' | 'PAYMENT4' | 'ORDER_SUMMARY1' | 'ORDER_SUMMARY2' | 'ORDER_SUMMARY3' | 'ORDER_SUMMARY4' | 'ORDER_STATUS1' | 'ORDER_STATUS2' | 'ORDER_STATUS3'
/**
* Meta information about an extension target.
*/
export interface Extension<Target extends ExtensionTarget = ExtensionTarget{
// ...existing properties here...
/**
* New proposed property which gives access to the name of the extension's currently active dynamic target, when applicable.
*/
dynamicTarget?: DynamicTarget
}
Describe alternatives you’ve considered
- The closest thing to an alternative would be to use multiple static targets instead of
'purchase.checkout.block.render'
. That would be a significant modification on our end and it may impact many of our merchant partners. We would like to avoid such a change. - I’ve combed through the docs and the packages - I don’t think there’s a feasible alternative to achieve the functionality we need. If you know of a workaround that we can use, please let us know.
Additional context
We hypothesise that different placement will have different performance characteristics, and it would be beneficial for us to be able to determine at the point of rendering what experience the user is seeing.