Embeded App back to Shopify Admin with <Page> Breadcrumb

Retired Boards Appdev Tools
1

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!

1 Like
2

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

3

hey, i’m fairly new with shopify app development, I read the Redirect docs you linked but not sure where I am supposed to actually define my “redirect” variable?

specifically what file does this go in ? :

import createApp from '@shopify/app-bridge';
import {Redirect} from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

const redirect = Redirect.create(app);