freks blog

about

Shopify Resource Pickerを使ってみる

created: 2024-10-04
おすすめ記事: 出会ってよかったプログラマー本

Shopify appを作っています
Shopify Resource Pickerを使ってみました
商品とかを選ぶ機能を作るに便利です

公式ドキュメントは App Bridge
このあたり

shopify app init で作成したアプリにはApp Bridgeがすでに使えるようになっています

export default function Index() {
  const openResourcePicker = async () => {
    const selected = await shopify.resourcePicker({type: 'product'});
    console.log(selected);
  }
  return (
    <Page>
      <BlockStack gap="500">
        <Layout>
          <Layout.Section>
            <Card>
              <BlockStack gap="500">
                <Button onClick={openResourcePicker}>Open Resource Picker</Button>
              </BlockStack>
            </Card>
          </Layout.Section>
        </Layout>
      </BlockStack>
    </Page>
  );
}

こんな感じでResource Pickerを開くことができます
選ばれた商品が selected に入ってるのでそれを使って何かすることができます

古い ResourcePicker の書き方は

function MyApp() {
  return (
    <Provider config={config}>
      <ResourcePicker resourceType="Product" open />
    </Provider>
  );
}

ですが、これは This is a legacy API. で非推奨なので新しい書き方にしましょう

まとめ

検索すると古いやり方を見かけるので、新しいやり方にしましょう
公式ドキュメントを見るのがいいですね

PR

Amazonのアソシエイトとして、blog.freks.jp は適格販売により収入を得ています。
This site is managed by freks