【Shopify Edition Winter ’25】Shopify UI拡張機能の追加 ( picker )

2024年12月11日に Shopify Edition Winter ’25 が開催されました。
150以上のアップデートが公開され、Shopifyはより進化したECプラットフォームとなりました。

あまりに多すぎるアップデートに、

・アップデートが多すぎてついていけない
・誰か分かりやすく解説してほしい

と思っている方も多いのではないのでしょうか？
そこで本記事では、Eiditonで発表された以下について、分かりやすく解説します。

Shopify UI拡張機能の追加について

Shopifyが提供するUI拡張用のパッケージから、picker APIが利用可能となります。
これによりチェックアウト画面など、ShopifyのUI拡張機能を利用して導入していたアプリなどで、picker機能を実装できるようになります。

今回追加となるAPIは大きく以下2点です。

・Picker
・Resource Picker

※2024年12月時点ではリリースされていません

Picker

任意のアイテムリストで picker を実装することができます。
実装にあたり指定するオプションは以下4点です

・heading: pickerのタイトル
・items: pickerにより選択可能なアイテムリスト
・headers: pickerテーブルのヘッダー
・multiple: 複数のアイテムを選択可能にするかのフラグ

Resource Picker

Shopifyに登録している商品リストで picker を実装することができます。
実装にあたり指定するオプションは以下6点です

・type: 表示する商品タイプ (商品・バリエーション・コレクション)
・action: ボタンのラベル ( 追加・選択 )
・filters: フィルター設定
・multiple: 複数のアイテムを選択可能にするかのフラグ
・query: 表示する商品条件を予め指定するクエリ
・selectionIds: picker表示時に選択状態にある商品ID

まとめ

picker APIが利用可能となることで、Shopify UI拡張によって実装されたアプリで提供できる機能の幅が増えることになりそうです。
特に商品リストの他に任意のアイテムでpickerを実装できる点は、非常に良い機能だと感じました。

Shopify Edition Winter ’25の関連記事

その他の「Shopify Edition Winter ’25」の記事は、以下よりご覧ください。