Shopify Question posted in
The Shopify help center can be found here.

How to open and close Shopify Polaris Modal using App-Bridge

I’m using Shopify Polaris @3.4.0 and App-Bridge @1.0.3. Also used shopify-node-app as a starting.

I initialize app-bridge by passing apiKey and shopOrigin values like so:

<AppProvider apiKey={apiKey} shopOrigin={shopOrigin} 
  <Switch>
      <Route exact path='/admin' component={Dashboard} />
  </Switch>
</AppProvider>

In my Dashboard component I have a Modal component:

<Modal
   src='https://somewhere/',
   title='title',
   open={modalActive}
/>

I open the modal by setting the state to true for modalActive like so:

 this.setState({modalActive: true});

Shopify Polaris Modal uses an iframe when src is used and in that view I have a submit form. I would like to close the Modal when the form is submitted. I have tried dispatching an action to close the modal using app-bridge, but honestly I’m confused and these are all recent releases so any help is appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Long story short pass a function to the Modal primaryAction prop. The core of this is child to parent component state changes. So more of a ReactJS question.


  2. 0

    Alright, had a similar issue and it’s a little embarrassing to admit this but hey if it saves you a half and hour then great.

    Shopify’s Modal docs use active to keep the state of the externally triggered modal. But don’t forget to use open as the actual prop to the <Modal> component:

    <Modal
  open={active}
  ...rest of props
/>
    ...content
</Modal>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search