ハイブリッド実装ガイダンス

ハイブリッドストアフロントでは、Salesforce Commerce Cloud 上に構築された従来のストアフロントと、分離されたヘッドレスのコンポーザブルストアフロントサイトを組み合わせることができます。B2C Commerce はハイブリッドストアフロントの実装をサポートしているため、コストを抑え、市場投入までの時間を短縮しながらヘッドレス戦略を推進できます。

B2C Commerce のハイブリッド実装では、Storefront Reference Architecture (SFRA) およびスクリプト API を、コンポーザブルストアフロントおよび SCAPI と組み合わせて使用できます。たとえば、SFRA でチェックアウト機能を提供しながら、商品詳細ページ (PDP) と商品一覧ページ (PLP) に PWA Kit を実装できます。Sitegenesis とコンポーザブルストアフロントを組み合わせた実装はサポートされていますが、プラグイン SLAS を使用した Sitegenesis 実装はサポートされていません。

このページ内のリンクには、既存のお客様のみがアクセスできるものがあります。Commerce Cloud リポジトリにアクセスする方法については Salesforce Commerce Cloud GitHub リポジトリとアクセスを参照してください。

Tip

このハイブリッドアプローチには、次の利点があります。

  • 柔軟性とカスタマイズ: 特定のビジネスニーズと顧客の期待に合わせたストアフロントを作成できます。
  • スケーラビリティ: コンポーザブルストアフロントのモジュール型の性質により、変化する要件に合わせて容易に拡張および適応できます。
  • シームレスな統合: SCAPI は B2C Commerce Cloud とのシームレスな統合を保証し、幅広いコマース機能へのアクセスを提供します。
  • ユーザーエクスペリエンスの向上: SCAPI のパワーとコンポーザブルストアフロントの柔軟性を組み合わせることで、企業はパーソナライズされた魅力的なショッピング体験を提供できます。

この情報は、純粋な SFRA/SiteGenesis (SG) (コントローラーベース) ストアフロント、または純粋な PWA Kit (SCAPI/OCAPI を使用した REST ベース) ストアフロントがある場合は 適用されません。

Note

ハイブリッド認証 

B2C Commerce バージョン 25.3 以降では、プラグイン SLAS はハイブリッド認証に置き換えられます。ハイブリッド認証は、SFRA/SiteGenesis の認可と Shopper Login and API Access Service (SLAS) の認可の両方を必要とする実装向けのスタンドアロンソリューションです。つまり、dwsid (SFRA/SiteGenesis) と JSON Web トークン (SLAS) の両方が必要であり、これらのトークンを同期させる必要があります。ハイブリッド認証はプラグイン SLAS アプローチを改良したもので、この機能を B2C Commerce プラットフォームに直接組み込むことで、ハイブリッドストアフロントのパフォーマンスと安定性を向上させます。

プラグイン SLAS を使用していて Sitegenesis ではないハイブリッドストアフロントは引き続き動作しますが、ハイブリッド認証を採用することを強くお勧めします。

実装の詳細については、ハイブリッド認証およびハイブリッド実装でのコンポーザブルストアフロントの使用を参照してください。

ハイブリッドストアフロントに関する考慮事項 

維持コスト 

ハイブリッド (段階的なヘッドレス) ロールアウトの目標、範囲、タイムラインを決定します。サイトをハイブリッドモードで運用する期間が長くなるほど、それに伴う運用の複雑さに費やす時間も増えることに注意してください。100% コンポーザブルサイトへの移行期限を設定します。

パフォーマンスの最適化 

PWA Kit のようなシングルページアプリケーション (SPA) の主な利点は、アプリバンドルがクライアントに送信され、多くの場合、サーバーリクエストなしで後続のページリクエストを処理できることです。このため、パフォーマンスと買い物客向け UX の効率を高めるには、PWA Kit でホームページだけでなく複数のページを構成することを強くお勧めします。たとえば、ホームページのみを移行するのではなく、ホームページと、その次によく使われる 1〜2 個の主要なジャーニーステップ (ホームページと検索ページ、ホームページとブランドページなど) も移行します。利用可能な分析ツールを使用して、サイト内で顧客がたどる一般的なカスタマージャーニーを可視化します

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

次の各セクションでは、特に買い物カゴ管理と技術的な実装の詳細に重点を置いて、ハイブリッドストアフロント実装のベストプラクティスを示します。

空の買い物カゴを避ける 

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

買い物カゴの作成または取得 

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

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

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

  • Script API コントローラーから SCAPI を呼び出さないでください。代わりに、対応する Script API 関数を呼び出してください。SCAPI エンドポイントは PWA Kit から呼び出す必要があります。
  • カスタム API では getCurrentOrNewBasket() を使用しないでください。代わりに、createBasket に POST リクエストを送信します。

Important
テクノロジースタックと推奨事項SFRA/SG (コントローラー/パイプレットのみ)ヘッドレス (SCAPI/OCAPI のみ)ハイブリッド
買い物カゴの作成getCurrentOrNewBasket()POST basketsPWA Kit では POST baskets を使用します。

SFRA および SG では、getCurrentOrNewBasket() の呼び出しを避けてください。
買い物カゴの取得getCurrentBasket()GET baskets/{}
GET customers/{}/baskets		PWA Kit では、以下を使用します。
SFRA および SG では、getCurrentBasket() の呼び出しを避けてください。

非同期関数 

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

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

フック 
  • フックで getCurrentOrNewBasket() を使用して買い物カゴを作成しないでください。
  • フックでは getCurrentBasket() を使用することは避けてください。代わりに、渡された買い物カゴを使用してください。例: dw.ocapi.shop.basket.afterPATCH
1afterPATCH (basket : dw.order.Basket, basketInput : Basket) : dw.system.Status
  • 一般に、フック内での外部呼び出しは、他のシステムへの接続と遅延に関する潜在的な問題があるため、避ける必要があります。代わりに、これらの呼び出しは、サーバーランタイム、BFF (Backend For Frontend)、クライアントブラウザーなどのクライアントシステムによって開始する必要があります。特に、OCAPI と SCAPI への呼び出しは、内部呼び出しによってリソースがバインドされ、パフォーマンスとスケーラビリティに影響を与える可能性があるため、避けてください。さらに、同じオブジェクトがフック内と外部呼び出しの両方で変更されると、競合状態が発生し、予期しない動作が発生する可能性があります。推奨されるアプローチは、フックから対応する Script API 関数を呼び出すか、クライアント側からフック外で対応する SCAPI リソースを呼び出すことです。

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

次のステップ 

入門ガイド
クイックスタート
開発
全般的なガイダンス
ハイブリッド実装ガイダンス
ハイブリッド認証
ハイブリッド実装向け CDN API
ハイブリッド実装向け Einstein アクティビティ
MuleSoft での SCAPI の使用
Admin API の使用
Shopper API の使用
拡張
サイトの保護
パフォーマンスの最適化
トラブルシューティング
Ask the Community