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

Retired Boards Appdev Tools
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

2

?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>
1 Like
3

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.

4

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?

1 Like
5

Thanks for guiding, its working fine now.

6

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

1 Like
7
Show More

i am facing same issue. can you please tell how did you solve it

8

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.