APP bridge Modal iframe contents communicate with the parent page

diioiiu
New Member
1 0 0

Hi,

 

https://shopify.dev/tools/app-bridge/actions/modal
the DATA action to iframe modal from parent app is working.

from a modal, dispatch a Modal.ActionType.DATA action to app, subscribe to Modal.ActionType.DATA is working.
but, to send data from the app to the modal is not working.
I trying as documentry. but not working.

Any way to figure out where the conflict, if that is the issue, is occurring?

Thanks.

 

import { Provider } from "@shopify/app-bridge-react/components";
import { useAppBridge } from "@shopify/app-bridge-react";
import * as React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const MyModal = () => {
  const app = useAppBridge();

  app.subscribe(Modal.ActionType.DATA, (action) => {
    console.log("Received message from app:", action);
  });

  return <div>myModal</div>;
};

const MyApp = () => {
  const app = useAppBridge();

  const modalOptions = {
    title: "My Modal",
    path: "/modal",
  };

  const myModal = Modal.create(app, modalOptions);
  myModal.dispatch(Modal.Action.OPEN);
  // NOT WORK DISPATCH TO MODAL
  app.dispatch(Modal.data({ message: "hello, my modal" }));

  return <div>myApp</div>;
};

export const App = () => {
  return (
      <Provider config={config}>
        <Router>
          <Switch>
            <Route exact path="/">
              <MyApp />
            </Route>
            <Route exact path="/modal">
              <MyModal />
            </Route>
          </Switch>
        </Router>
      </Provider>
  );
};

  

 

0 Likes