FROM CACHE - en_header

Embedded app Redirect not working

Solved
Peter_P
Excursionist
18 3 3

Hello, I tried to use redirect 

But it does not work, neither Action.APP nor remote
my package json

"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@shopify/app-bridge": "^1.6.8",
"@shopify/app-bridge-react": "^1.6.8",
"@shopify/polaris": "^4.2.1",
"@shopify/react-shopify-app-route-propagator": "^3.0.2",
"@zeit/next-css": "^1.0.1",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"fetch": "^1.1.0",
"immutability-helper": "^3.0.1",
"next": "^9.0.6",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-addons-update": "^15.6.2",
"react-dom": "^16.10.2",
"react-router-dom": "^5.0.1"
}

 

Here are a few examples that I have tried already:

I dont see any errors, and console.log('Redirect') is working, so dispatch method does not work 

 

class IndexPage extends React.Component
{

render() {

const primaryAction = {content: 'save', url: '/save'};

const handleRedirect = () => {
console.log('redirect')
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, '/tasks');
};


return (
<Provider config={config} >
<TitleBar title={"MyApp"} primaryAction={primaryAction} />

<AppProvider i18n={{}}>
<div>
<Button onClick={handleRedirect}>Redirect me please</Button>

</div>
</AppProvider>
</Provider>
);
}


}
ReactDOM.render(<IndexPage router={AppRouter}/>, document.getElementById('my-site'));

const app = createApp({
apiKey: 'key',
shopOrigin: 'myshop.myshopify.com',
});
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, '/tasks');

This does not work


 

Accepted Solution (1)

Accepted Solutions
Peter_P
Excursionist
18 3 3

This is an accepted solution.

Sorry, just tried again and it's working, sorry 
this is strange 😕

View solution in original post

Replies 24 (24)
Trish_Ta
Shopify Staff
Shopify Staff
58 13 26

Hi Neok,

 

Can you show the code where you're importing `Redirect`? Also, can you try out the development build of App Bridge and see if there are any errors?

 

It might also be useful to set up Redux DevTools to see if the action is successfully dispatched.

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Peter_P
Excursionist
18 3 3

`

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

and i tried development build and no errors 

Peter_P
Excursionist
18 3 3

Full code of my index.jsx file

import React from 'react';
import ReactDOM from 'react-dom';
import '@shopify/polaris/styles.css';
import {Provider, TitleBar} from '@shopify/app-bridge-react';
import createApp from '@shopify/app-bridge/development';
import {Redirect} from '@shopify/app-bridge/actions';
import {AppProvider, Button} from '@shopify/polaris';

const config = {
apiKey: "SECRET",
shopOrigin: ORIGIN
};
const app = createApp(config);


class IndexPage extends React.Component
{

render() {

const primaryAction = {content: 'save', url: '/save'};
const redirectToProduct = () => {
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, '/tasks');
};


return (
<Provider config={config} >
<TitleBar title={"App"} primaryAction={primaryAction} />
<AppProvider i18n={{}}>
<Button onClick={redirectToProduct}>Redirect me please</Button>

</AppProvider>
</Provider>
);
}


}
ReactDOM.render(<IndexPage />, document.getElementById('my-site'));

 

And I create a navigation routes in my embedded app so I have `/tasks` route 

Peter_P
Excursionist
18 3 3

This is an accepted solution.

Sorry, just tried again and it's working, sorry 
this is strange 😕

Trish_Ta
Shopify Staff
Shopify Staff
58 13 26

Hi Neok,

 

I'm glad it's working for you now! Just a note that when you're using app-bridge-react, you should try to use the same app instance from the `<Provider>` instead of calling `createApp` to create another instance of the app.  Creating 2 instances of the app might result in strange behaviours.

 

You should be able to modify your code as follows:

 

 

import React from 'react';
import ReactDOM from 'react-dom';
import '@shopify/polaris/styles.css';
import {Context, Provider, TitleBar} from '@shopify/app-bridge-react';
import {Redirect} from '@shopify/app-bridge/actions';
import {AppProvider, Button} from '@shopify/polaris';

const config = {
    apiKey: "SECRET",
    shopOrigin: ORIGIN
};
class IndexPage extends React.Component { static contextType = Context; render() {
// Access the same app instance from <Provider/> const app = this.context; const primaryAction = {content: 'save', url: '/save'}; const redirectToProduct = () => { const redirect = Redirect.create(app); redirect.dispatch(Redirect.Action.APP, '/tasks'); }; return ( <AppProvider i18n={{}}> <TitleBar title={"App"} primaryAction={primaryAction} /> <Button onClick={redirectToProduct}>Redirect me please</Button> </AppProvider> ); } } function MyApp() { return ( <Provider config={config}> <IndexPage /> </Provider> ); } ReactDOM.render(<MyApp />, document.getElementById('my-site'));

 

Cheers,

 

Trish

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

JoesIdeas
Shopify Expert
1691 146 435

Hi @Trish_Ta, could you please help me out on getting redirects working?

I followed the documentation here: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/navigation/redirect

 

But the redirect isn't working for me.

 

Here's what I have:

 

import React from "react";
import createApp from "@shopify/app-bridge"; import { Redirect } from "@shopify/app-bridge/actions"; const app = createApp({ apiKey: "api_key", shopOrigin: "myshopify_url", forceRedirect: true // not sure if needed but I tried with and without }); const redirect = Redirect.create(app); class Page extends React.Component { handleButtonClick = () => { redirect.dispatch(Redirect.Action.APP, "/help"); console.log(app); console.log(redirect); console.log(Redirect); } render() { ... } }
export default Page;

 

 

The 3 console.log statements all produce objects with data in them, but the redirect doesn't work.

 

This component is in a parent like this:

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { AppProvider } from "@shopify/polaris";

class App extends React.Component {
  render() {
    return (
      <AppProvider>
        <Router>
            <Route path="/page" component={Page} />
            ...

 

I'm using <Router> from react-router-dom, I'm wondering if that is causing interference of some sort?

 

Navigation works fine otherwise, I just can't get a Redirect to happen.

 

I can change views in my app, but the URL doesn't change and the wrong navigation link is highlighted, so I'm trying to change the URL.

 

I've also setup Redux Dev Tools and read this: https://help.shopify.com/en/api/embedded-apps/app-bridge/debugging.

 

No action is taken when the dispatch statement is being called. It seems like it's just not executing.

 

Any advice on what's wrong or how I can further debug to find why that redirect is not dispatching?

Thanks

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Trish_Ta
Shopify Staff
Shopify Staff
58 13 26

Hi Joe,

 

Your code looks correct to me but there might be something else going on. Could you try using the development version of App Bridge and see if there are any errors? You can import it like this:

 

import createApp from '@shopify/app-bridge/development'; 

 

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

JoesIdeas
Shopify Expert
1691 146 435

Thanks Trish, I tried this but got the same results. No errors, and all 3 console.log statements are populating.

I'm just not sure what I should be looking for to try and debug this. I followed Shopify documentation exactly, but it's not working and not reporting an error.

 

I did some more experimentation and can't see why it's not firing the navigation change. There are no other errors in the app, navigation works fine I just can't get the url / nav highlight to change.

 

 

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Trish_Ta
Shopify Staff
Shopify Staff
58 13 26

Joe, can you clarify this comment?

 

There are no other errors in the app, navigation works fine I just can't get the url / nav highlight to change.

Does this mean that your app navigates to the requested url but the browser url is not updating?  Also, can you confirm that you're testing the app by opening it in a development Shopify store?

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

JoesIdeas
Shopify Expert
1691 146 435

If I use the Polaris <Link> element, it navigates to the correct location, but the nav highlight and url don't change, so it looks weird. This is how I found about the Redirect feature, from what I understand it's necessary to change the top level nav / url.

 

Yes I've been testing in a development store. I've built a few embedded Shopify apps, launched public, etc and using the same process. The app is error free ready to submit to the store, otherwise working except the Redirect isn't firing (or the dispatch action, I'm not sure).

 

It's the final piece 🙂

 

I was saying there aren't any other errors, just so we can rule out that conflicting javascript error could be causing it. I just can't find any information that will help me debug this... I followed the docs exactly but it's just not working, not giving error message, and not giving any information to help debug.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
chrisandrewca
Shopify Partner
9 0 15

Joe, I noticed you're calling createApp in your page component. Have you tried passing the apiKey/shopUrl/redirect config to AppProvider or Provider (app-bridge-react)? You might be creating two instances of the app or redirect may not be working since its not associated with one of those providers. Once you initialize the app via a Provider you'll need to import Context from app-bridge/actions and use it via React useContext to access the app. Then you can call Redirect.create(app). Apologies if I missed something.

 

      <Provider
        config={getAppConfig(props)}>
        <AppProvider>
          <Component {...props} />
        </AppProvider>
      </Provider>
import { ContextualSaveBar } from '@shopify/app-bridge/actions'
const app = useContext(ShopifyContext);
// Redirect.create(app).dispatch(...)

 

Cheers,

Chris

JoesIdeas
Shopify Expert
1691 146 435

Thanks for the try Chris but I got the same results.

 

I used <Provider> inside <AppProvider> according to https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components.

 

Then I imported context according to https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/provider#accessing-the-app...

 

Logging to the console shows I'm getting the app instance in my component successfully.

Same deal though, it just will not fire the dispatch / redirect action.

 

When I create the redirect and try to dispatch:

 

const app = this.context;
const redirect = Redirect.create(app); console.log(redirect);
redirect.dispatch(Redirect.Action.APP, "/help");

 

 

react.dispatch doesn't do anything. Here's what logs to the console (the redirect😞

 

logging redirect to console.jpg

 

I haven't seen what a successful redirect object looks like so I don't know what to look for here, any ideas?

 

Crazy how much time I'm having to burn just trying to navigate to another page... haha this is insane  😂

 

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Trish_Ta
Shopify Staff
Shopify Staff
58 13 26

Hi Joe,

 

This is frustrating for sure. I'm trying to think of what else could be preventing it from working. Two ideas come to mind:

 

1. Are you subscribing to the Redirect action? If you subscribe to app redirects Shopify assumes that your app will handle the redirect and will not change the iframe url: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/navigation#using-client-side-routin....

 

2. Can you try dispatching a History push action instead? Since you were able to navigate inside your app using the <Link> component from Polaris, the only thing that was missing is updating the top level url, which could be achieved through the History action.  See the docs for more info: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/navigation/history#push-a-new-histo...

 

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

JoesIdeas
Shopify Expert
1691 146 435

@Trish_Ta  I appreciate your ideas here... they didn't work but ideas usually get us closer to a solution.

 

To answer your questions:

1) I've never used subscriptions before so I don't believe I'm subscribing to any existing Redirects.

 

2) I tried that and have same result: The object populates (console log below), but nothing happens. It's like the dispatch action isn't firing for some reason... or getting blocked somehow.

Screen Shot 2020-02-04 at 7.42.35 PM.jpg

 

Yes, in-app navigation works fine it's just I can't get the top level URL and nav link underline to sync up with the view.

 

I just wish I could get some logs / info to help debug, that would really help debug and take out some guesswork.

 

 

P.S. Sorry for hijacking this thread, I couldn't find any good examples or documentation from searching so hopefully this could help the next person pulling their hair out trying to redirect.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
cyberabis
Shopify Partner
7 0 0

@JoesIdeas , did you get to solve this? I have been spending all day today with the same issue. Despite following same steps as in the React Node tutorial, can't get the Redirect to work.

cyberabis
Shopify Partner
7 0 0

Finally found the issue, it was pretty trivial in my case. I had accidentally given a http URL in Shopify Partners > App Setup > App URL. Changed to https and the redirect is working now.

 

@JoesIdeas - not sure if it's a similar issue in your case, but do give it a check!

JoesIdeas
Shopify Expert
1691 146 435

@cyberabis  that's a different scenario, my app is already live but the Redirect component is not working even though I've followed Shopify docs exactly. In this case it seems to be a Shopify bug or incorrect documentation but I can't get any help so I just am not using the component.

 

Good luck on your app dev journey. 👍

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
hannachen
Shopify Staff
Shopify Staff
54 8 17

👋Hi @JoesIdeas, Hanna here following up with @Trish_Ta's suggestions. I have an idea that's a bit of a shot in the dark. I've heard of cases where the redirect action might need to be chained after creation, like so:

Redirect.create(app).dispatch(Redirect.Action.APP, "/help");

Have you already tried something similar?

Hanna | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

benei55
New Member
1 0 1

Hi @Trish_Ta & @hannachen 

 

I'm having the exact same problem and I think I have a theory as to why it is not working in my case.

 

The front-end of my app (Single page application) is hosted under a different domain than my backend.

In the Shopify Partner Dashboard, I entered the backend url for my app e.g myshopifyappbackend.com.

After user auth, in the backend, i redirect user to my front-end app myshopifyappfrontend.com where I have App-Bridge instantiated.

 

On the front-end app, none of the App-Bridge actions work and I believe it is because it is using a different domain.

I see in the console a bunch of postMessage going to shopify but it looks like Shopify ignores them because they come from a different domain.

 

Is that theory accurate?

Can App-bridge be used in an app with a different domain than the one defined in Partner dashboard?

 

My goal is to have the following flow:

-User install the app and is redirected to a pricing page with different plans (in my front end app)

-When user picks a plan, user is redirected to the Shopify Charges page with the right subscription options.

 

Do you have any recommendations/best practices to architect this flow with having 2 domains as I do?

 

Thanks a lot.