ハイブリッドストアフロントの買い物カゴのベストプラクティス

ハイブリッドサイトまたは段階的にローンチするサイトでは、サイトの一部に Storefront Reference Architecture/SiteGenesis (SFRA/SG) を利用し、同じサイトの別の部分に PWA Kit または別のカスタムヘッドレスソリューションも利用します。たとえば、SFRA でチェックアウトを提供しながら、商品詳細ページ (PDP) と商品一覧ページ (PLP) に PWA Kit を実装できます。

以下のセクションでは、ハイブリッドストアフロント実装で買い物カゴを使用する際のベストプラクティスについて説明します。ハイブリッド実装に関するその他のガイダンスについては、段階的なヘッドレスロールアウトを参照してください。

買い物カゴは、最初の商品を追加するときや、住所情報などの顧客情報を保存するときなど、必要な場合にのみ作成してください。これは一般的なベストプラクティスですが、ハイブリッドストアフロントでは特に重要です。

SFRA/SG (コントローラーベース) ストアフロントは Script API getCurrentOrNewBasket() を使用して買い物カゴを作成し、PWA Kit は SCAPI POST baskets を使用して買い物カゴを作成します。

ハイブリッドサイトを実装する場合は、ユースケースに最も適した API を利用します。たとえば、SFRA または SG で PDP を実装する場合は、Script API getCurrentOrNewBasket() を使用します。ハイブリッドサイトで PDP に PWA Kit を使用している場合は、SCAPI POST baskets を使用します。

このベストプラクティスは、空の買い物カゴを避けるために、事前ではなく、商品を追加するときにのみ買い物カゴを作成することに沿っています。

買い物カゴを管理するときは、非同期関数に注意してください。

• PWA Kit などのシングルページアプリケーション (SPA) は、SFRA などの従来のプラットフォーム開発モデルとは異なるリクエスト実行スタイルに従います。SPA はノンブロッキングアーキテクチャに重点を置き、API を非同期方法で使用して遅延読み込み、データのプリロード、またはユーザー操作の処理を行います。
• このリクエストアーキテクチャを慎重に検討し、どのタイプのリクエストがいつ、どこで、どのような順序で実行されるかを理解してください。
• 同じ種類のリクエスト (同じデータの更新) が並列で実行されると、これらのリクエストは互いに上書きされ、最後に完了したリクエストによって最終結果が生成されるため、予期しない動作が発生する可能性があります。たとえば、さまざまなデータの検証や依存関係など、複数のステップで作成された買い物カゴは、正しく実装されていないと競合状態が発生する可能性が高くなります。非同期設計パターン (Promise、async/await、コールバックなど) は、リクエストが互いの完了に依存する依存関係を管理し、潜在的な問題を回避するために必要です。

• getCurrentOrNewBasket() でフックに買い物カゴを作成しないでください。
• フックで getCurrentBasket() を使用することは避けてください。代わりに、渡された買い物カゴを使用します。例: dw.ocapi.shop.basket.afterPATCH

これらは一般的なベストプラクティスですが、ハイブリッドストアフロントでは特に重要です。

セッションブリッジ (POST sessions および POST customers/auth) の使用を最小限に抑えます。新しいセッションは必要な場合にのみ作成し、既存のセッションはできるだけ再利用します。

最適なパフォーマンスを確保するために、SCAPI/OCAPI 呼び出しの JWT 作成にも同じアプローチを適用します。