How can I link products to an embedded app's edit page?

How can I link products to an embedded app's edit page?

FraukeFvdz
Shopify Partner
4 0 0

I'm creating an embedded app. I have a list of products that are linked to my app.

In my app I want to be able to redirect the user to the edit page of the product when they click on it.

 

How can I do this?

Replies 3 (3)

remy727
Shopify Partner
41 2 22

Yes.

You can use Redirect action.

import {useNavigate} from '@shopify/app-bridge-react';

function MyComponent {
  const navigate = useNavigate();

  return (
    <Link onClick={() => {
      navigate({
        name: 'Product',
        resource: {
          id: '123',
        }
      });
    }}>Deluxe collection</Link>
  );
}

 

 

Looking for a Shopify App developer? Please visit: https://github.com/remy727
FraukeFvdz
Shopify Partner
4 0 0

Thanks for your reply.

 

Now I'm stuck adding app bridge to my embedded app.
The Provider needs an app bridge config object.
I'm having a hard time to fill in the host in this object.

In the documentation it states: 

host: new URLSearchParams(location.search).get("host"),

 

But location or window.location is not defined in my embedded app.

Do you know another way to get the host? I searched and searched but I didn't found an answer 😞

remy727
Shopify Partner
41 2 22

Is this code helpful for you?

Looking for a Shopify App developer? Please visit: https://github.com/remy727