Embeded App back to Shopify Admin with <Page> Breadcrumb

Solved
Highlighted
Tourist
4 2 0

Hello!
I'm close to finish up the mvp of my shopify app but hitting a roadblock. At the moment I have an admin link within `product details` that points to my embeded app. Once on my embeded app, I've set up a breadcrumb so when the user presses on it, the expected behaviour will bring them back to shopify admin `product detail` page. My code is currently like

<Page
breadcrumbs={[
{
content: title,
target: "ADMIN_PATH",
url: `/products/${productId}`,
},
]}

productId and title is defined

The behaviour at the moment redirects me to the embeded app and I get a 404. I do see https://{ID}.ngrok.io/products/{PRODUCTID}, not sure how I can link back to shopify admin. Currently working in dev with a test store.

Thanks!

0 Likes
Highlighted
Tourist
4 2 0

This is an accepted solution.

I've found a way to solve this by using Shopify's Redirect API and the onaction property for breadcrumb.

An example:

breadcrumbs={[
          {
            content: "title of product",
            onAction: () =>
              redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
                name: Redirect.ResourceType.Product,
                resource: {
                  id: productId,
                },
              }),
          },
        ]}

Docs: https://shopify.dev/tools/app-bridge/actions/navigation/redirect

0 Likes