【Shopify.dev和訳】App Bridge/React components/ResoucePicker

2021/09/05に公開約7,500字

この記事について

この記事は、App Bridge/React components/ResoucePicker の記事を和訳したものです。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

リソースピッカー

セットアップとオープン

ProviderResourcePickerコンポーネントを@shopify/app-bridge-reactからインポートします。アプリケーションに必要なProviderは 1 つだけです。

プロップス

名前 タイプ 説明 必須
open boolean ピッカーが開いているかどうか Yes
resourceType "Product",
"ProductVariant",
"Collection"
ピッキングしたいリソースのタイプ Yes
initialQuery string ピッカーで利用可能なリソースをフィルタリングするための GraphQL の初期検索クエリ。詳細は検索構文を参照
initialSelectionIds Resource[] ピッカーを開いたときに事前に選択しておくべきリソース。以下の例を参照してください。
showHidden boolean 非表示の商品を表示するかどうかを指定します。
allowMultiple boolean 複数のアイテムの選択を許可するかどうか。非推奨です: 代わりに selectMultiple を使用してください。
selectMultiple boolean あるいは数値 複数のアイテムの選択を許可するかどうか。数字が指定された場合は、その数字のアイテムの最大数まで選択を制限します。バージョン 1.28.0 が必要である。
showVariants boolean 商品のバリアントを表示するかどうか。製品リソースタイプピッカーにのみ適用される。バージョン 1.28.0 が必要です。
showDraft boolean ドラフト商品を表示するか否か。Product リソースタイプピッカーにのみ適用される。バージョン 1.28.0 が必要です。
showArchived boolean アーカイブされた商品を表示するかどうか。Product リソースタイプピッカーにのみ適用される。バージョン 1.28.0 が必要。
showDraftBadge boolean ドラフト商品にドラフトバッジを表示するか否か。showDraft prop が設定されている場合にのみ動作し、Product リソースタイプピッカーにのみ適用される。バージョン 1.28.0 が必要である。
showArchivedBadge boolean アーカイブされた製品にアーカイブされたバッジを表示するかどうか。showArchived prop が設定されている場合のみ動作し、Product リソースタイプピッカーにのみ適用される。バージョン 1.28.0 が必要です。
onSelection (selectPayload: SelectPayload) => void 選択が行われたときのコールバックです。このコールバックは、idselectionを持つオブジェクトである SelectPayload 引数を受け取ります。selectionは、選択されたすべてのリソースの配列です。
onCancel () => void 選択されずにピッカーが閉じられたときのコールバック

初期選択 ID

ピッカーが開かれたときにすでに選択されているリソースを指定するには initialSelectionIds プロップを使います。

const productWithSpecificVariantsSelected = {
  id: "gid://shopify/Product/12345",
  variants: [
    {
      id: "gid://shopify/ProductVariant/1",
    },
  ],
}

const productWithAllVariantsSelected = {
  id: "gid://shopify/Product/67890",
}

function myComponent() {
  return (
    <ResourcePicker
      initialSelectionIds={[productWithVariantsSelected, productWithAllVariantsSelected]}
    />
  )
}

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます