UI拡張 - 配送方法オプションリストのターゲットが、可能な配送グループの種類（単発購入と定期購入）ごとに複製されます

UI拡張 - 配送方法オプションリストのターゲットが配送グループの種類ごとに複製される (ワンタイム購入と定期購入)

1. 技術的課題の定義と現状分析

Shopify UI拡張の利用者は、新たな変更により、一部のUI拡張がレンダリングされなくなる可能性があります。これは、バージョン2023-10以前のUI拡張で、purchase.checkout.shipping-option-list.render-before または purchase.checkout.shipping-option-list.render-afterを使用している場合、チェックアウトにワンタイム購入と定期購入の両方のアイテムが含まれていると、レンダリングが行われなくなるという問題です。

2. 具体的な技術的ソリューションの提案

2024年1月からは、purchase.checkout.shipping-option-list.render-before および purchase.checkout.shipping-option-list.render-afterが、可能な配送グループ（ワンタイム購入と定期購入）ごとに複製されるようになります。新たに導入されるShippingOptionListApi を利用することで、各配送グループを拡張機能でターゲットにすることが可能となります。

3. 実装手順とコード例

拡張機能がアタッチされている配送グループは、targetとして渡されます。Reactでは、現在の配送グループを取得するためにuseDeliveryGroupTarget()フックも使用できます。ターゲットは、ワンページチェックアウトで購入者が住所を入力していない場合や、この住所での配送が利用できない場合など、グループが利用できない場合にはundefinedになります。

また、新たにDeliveryGroupにidが導入され、各配送グループを識別することができるようになります。

4. パフォーマンス・コスト分析

この変更により、ShopifyのUI拡張は更に柔軟性を持つことができ、特定の配送グループに対して特化した機能を開発することが可能となります。これにより、開発者はより詳細な制御を行うことが可能となり、ユーザーエクスペリエンスの向上に寄与するでしょう。

5. 実装時の注意点・ベストプラクティス

拡張機能がチェックアウト時の購入者の入力をキャプチャし、メタフィールドに情報を保存する場合、ネームスペース付きキーを持つチェックアウト属性を使用して、チェックアウトにレンダリングされた複数の配送グループの情報をキャプチャすることができます。

6. 次のステップ・発展案

これらの変更は、現在unstable アピバージョンを使用してCheckout Extensibility開発者プレビューを通じてテストすることができます。詳細なAPIの変更内容については、shopify.devを参照してください。

参考記事: UI Extensions - Shipping method option list targets will be duplicated for possible types of delivery groups (One Time Purchases and Subscription)