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
