Shopify Flow is an ecommerce automation platform that enables you to automate tasks and processes within your store and across your apps.
I was using <ResourcePicker resourceType={prodPickType} initialSelectionIds={collectionProdPickerIds} allowMultiple={allowMultipleItems} open={recPicker} onSelection={(resources) => handleProdSelection(resources)} onCancel={() => setrecPicker(false)} /> into my react app but it is not working after upgrade app-bridge-react package from 3.5 to 4.0.0
Use the new ResourcePicker in @Shopify/app-bridge/actions: You can use the ResourcePicker action from the App Bridge directly, like this:
import {ResourcePicker} from '@shopify/app-bridge/actions';
import {useAppBridge} from '@shopify/app-bridge-react';
const MyComponent = () => {
const app = useAppBridge();
const resourcePicker = ResourcePicker.create(app, {
resourceType: 'Product', // or 'Collection'
options: {
initialSelectionIds: collectionProdPickerIds,
selectMultiple: allowMultipleItems,
},
});
resourcePicker.subscribe('selection', (selection) => {
handleProdSelection(selection);
});
const openPicker = () => {
resourcePicker.dispatch(ResourcePicker.Action.OPEN);
};
return <button onClick={openPicker}>Select Products/Collections</button>;
};
I tried the above code and now see the below error:
TypeError: this.app.subscribe is not a function
I used the latest version of app-bridge and app-bridge-react packages which version are below:
In the latest versions of app-bridge-react, the ResourcePicker from @Shopify/app-bridge/actions is typically integrated differently, and need to use useAppBridge to get the app object. you can try this.
this one is working for me. and my platform is
import {
Page,
Layout,
AlphaCard,
Text,
VerticalStack,
Button,
} from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge/actions";
import { useAppBridge } from "@shopify/app-bridge-react";
import { useEffect, useState } from "react";
export default function DashBoard() {
const app = useAppBridge(); // Get app bridge instance
const [picker, setPicker] = useState(null);
useEffect(() => {
if (app) {
const resourcePicker = ResourcePicker.create(app, {
resourceType: ResourcePicker.ResourceType.Product,
});
resourcePicker.subscribe(ResourcePicker.Action.CANCEL, () => {
// Picker was cancelled
});
resourcePicker.subscribe(
ResourcePicker.Action.SELECT,
(selectPayload) => {
const selection = selectPayload.selection;
console.log(selection);
// Do something with `selection`
}
);
setPicker(resourcePicker); // Store picker instance in state
}
}, [app]);
const openPicker = () => {
if (picker) {
picker.dispatch(ResourcePicker.Action.OPEN);
}
};
return (
<Page fullWidth>
<Layout>
<Layout.Section>
<AlphaCard>
<VerticalStack gap="5">
<Text as="h2" variant="bodyMd">
<Button onClick={openPicker}>
Select Products/Collections
</Button>
</Text>
</VerticalStack>
</AlphaCard>
</Layout.Section>
</Layout>
</Page>
);
}
I tried also the shared code but still see the same error (see the attached screenshot)
How you call the resourcePicker ? provide the code
Here is my component where i use ResourcePicker:
After upgrading the app-bridge-react package from version 3.5 to 4.0.0, you may encounter issues with the ResourcePicker component. This could be due to breaking changes or updates in the API. Start by reviewing the changelog for any relevant updates that might affect your implementation. Ensure that all related packages, such as @Shopify/app-bridge, are also updated to compatible versions. Additionally, double-check the props you're passing to ResourcePicker, as they might have changed or been deprecated. It's crucial to confirm that the App Bridge is initialized correctly in your application, as improper setup can lead to component malfunctions. Lastly, inspect the console for any error messages or warnings that could provide insight into the problem.
Please try below
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024