Issue with full page extension with order context

Extensions
1

Hey Shopify Dev Community,

I’ve been trying to setup a full page extension which supports the order context. For some reason when I try to access the page from the menu-actions. The page does not render and I get an error that says there’s a problem loading the page. (Attaching a screenshot of the error I see)

Screenshot 2024-11-01 at 1.05.30 AM
Screenshot 2024-11-01 at 1.05.30 AM2868×978 79.7 KB

The full page extension works if I access it from the dropdown that shows the list of pages. But trying to access the page from either Buttons / Links from an order-action button does not work.

The toml for my full page extension looks like this.

api_version = "2024-10"

[[extensions]]
name = "Order Page"
handle = "order-page"
type = "ui_extension"

[[extensions.targeting]]
module = "./src/FullPageOrderExtension.jsx"
target = "customer-account.order.page.render"

[extensions.capabilities]
api_access = true
network_access = true

This is the React Component that is rendered inside of order-action block. This is rendered inside of the target ‘customer-account.order.action.menu-item.render’

  <Button kind="primary" to={`extension:order-page/`} >Order Page</Button>

I wonder what I am missing that’s causing this error to happen?

2

Hey there :wave:

The reason this doesn’t work is because you’re not using the right value in the Button’s to prop. We have docs here about extension protocols, it should look llike this:

  <Button kind="primary" to={`extension:${extension.handle}/customer-account.order.page.render/${orderId}/${optionalPath}`}>Order Page</Button>
3 Likes
3

Thanks a ton! This works well :blush::pray:

1 Like