Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Issue in Resource picker "App Bridge + Polaris + React + Rails"

Solved

Issue in Resource picker "App Bridge + Polaris + React + Rails"

s-sana
Shopify Partner
10 1 1

I've created app using rails shopify_app gem + webpacker + polaris

I'm new to Shopify App Bridge. 

I'm getting all the values and no error in console regarding set up but when i click on button value gets true but ResourcePicker doesn't open.

I've reviewed the shopify help center content , unable to figure out whats the issue.

Have a look on below code, Please help me out what i am doing wrong.

 

index.html.erb

<%= javascript_pack_tag 'vpicker' %>
<%= content_tag :div,
    id: "picker",
    data: {
      products: @products,
      shop_session: @shop_session
      api_key: ENV['SHOPIFY_API_KEY']
    }.to_json do %>
  <% end %>

 

vpicker.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import {AppProvider, Button} from '@shopify/polaris';
import {Provider as AppBridgeProvider, ResourcePicker} from '@shopify/app-bridge-react';

class Vpicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      resourcePickerOpen: false,
    }
  }

  togglePicker = () => {
    console.log("resourcePickerOpen", this.state.resourcePickerOpen);
    this.setState(({ resourcePickerOpen }) => {
      return { resourcePickerOpen: !resourcePickerOpen };
    });
  };

  handleSelection = (resources) => {
    this.setState({ resourcePickerOpen: false })
    console.log(resources)
  };

  render() {
    console.log("Props Data", this.props.shop_session.domain);
    const config = { apiKey: this.props.api_key, shopOrigin: this.props.shop_session.domain };
    console.log("Picker value", this.state.resourcePickerOpen);

    return (
        <AppProvider>
          <AppBridgeProvider config={config}>
            <ResourcePicker
              resourceType="Product"
              open={this.state.resourcePickerOpen}
              onSelection={(resources) => this.handleSelection(resources)}
              onCancel={this.togglePicker}
            />
            <Button primary onClick={() => this.setState({ resourcePickerOpen: true })}>Select Product</Button>
          </AppBridgeProvider>
        </AppProvider>
    );
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('picker')
  const data = JSON.parse(node.getAttribute('data'))
  ReactDOM.render(<Vpicker {...data} />, node);
})

Any help is appreciated.

Thank you

 

Accepted Solution (1)
s-sana
Shopify Partner
10 1 1

This is an accepted solution.

Thanks for guiding, its working fine now.

View solution in original post

Replies 7 (7)

hannachen
Shopify Staff
54 8 17

👋Hey Ssana, thanks for using Shopify App Bridge in your project! Unfortunately at this time, `shopify_app` gem is not compatible with Shopify App Bridge out of box, and may require some additional configuration to get it working, which is what I suspect might be happening here. Could you kindly help me confirm this and check if your page's view contains the old EASDK app.js like below?

 

<script src="https://cdn.shopify.com/s/assets/external/app.js?<%= Time.now.strftime('%Y%m%d%H') %>"></script>

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

s-sana
Shopify Partner
10 1 1

Hi @hannachen, Thanks for replying, I wasn't aware about its compatibility but yes, the page view contains the JS in embedded_app.html.erb file

 

<script src="https://cdn.shopify.com/s/assets/external/app.js?<%= Time.now.strftime('%Y%m%d%H') %>"></script>

Please help me out i want to manage the product variant picker in my app and i studied shopify app bridge is the only way to make it work as it is deprecated from the polaris. 

 

Please guide me.

 

Thanks.

hannachen
Shopify Staff
54 8 17

Thanks for checking, this looks to be promising. If this is a new app that doesn't contain any EASDK code, simply remove that line from `embedded_app.html.erb`. If the AppBridgeProvider is set up correctly, your app should behave as described in the Shopify App Bridge tutorials. Could you please give that a try?

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

s-sana
Shopify Partner
10 1 1

This is an accepted solution.

Thanks for guiding, its working fine now.

hannachen
Shopify Staff
54 8 17

Fantastic! It's my pleasure, thanks for confirming.

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

arhumali07
Tourist
9 0 0
Click to expand...
i am facing same issue. can you please tell how did you solve it


shakirjamil9
Visitor
1 0 0

I am facing the same issue with resource picker. but i am following this tutorial: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify 

Please help me resolve this.