検索アダプタからPLP ウィジェットへの移行

現在のLive Search バージョンを確認してください：

composer show magento/live-search | grep version

バージョン 3.x以前の場合は、アップグレードする前にAdvancedSearch モジュールを有効にします。

bin/magento module:enable Magento_AdvancedSearch

composer.jsonを更新して、Live Search 4.0以降を必要とします。

"require": {
   "magento/live-search": "^4.0"
}

アップグレードを実行します。

composer update magento/live-search --with-dependencies

セットアップ アップグレードを実行して再コンパイルします。

bin/magento setup:upgrade
bin/magento setup:di:compile

必要に応じて、静的コンテンツをデプロイします。

bin/magento setup:static-content:deploy

監査のカスタマイズ:

• テーマ内のすべてのカスタムレイアウト XML ファイルを文書化します。
• 商品リストページや関連ファイルへのカスタムテンプレートの変更を確認できます。
• スタイル設定に使用するカスタム CSS クラスを特定します。
• Adobe JavaScriptのカスタムインタラクションのドキュメント化。

CSS ベースのカスタマイズへの移行:

• PLP ウィジェットは特定のCSS クラスを使用します（PLP スタイルガイド ​を参照）。
• PLP ウィジェット CSS クラスを使用してビジュアルカスタマイズを再作成します。
• カスタムスタイルが正しく適用されるかどうかをテストします。

競合するカスタマイズを削除:

• 製品リスト構造を変更するレイアウト XMLを削除します。
• 検索アダプタ固有の要素をターゲットとするJavaScriptをクリーンアップします。
• ウィジェットのレンダリングと競合するテンプレートの上書きを更新します。

徹底的にテストする:

• すべてのビジュアルカスタマイズがPLP ウィジェットで機能することを確認します。
• レイアウトの競合がないようにする：
• あらゆるブレイクポイントとデバイスをまたいでテスト。

影響を受ける属性を特定:

• ファセットとして使用される製品属性を確認します。
• カスタムソースモデルを使用するものを特定：
• 現在のファセット設定を文書化します。

アップグレードしてPLP ウィジェットを有効にする:

• 標準の移行手順に従います。
• PLP ウィジェットは、カスタムソースモデル属性をサポートしています。

ファセットの再構成:

• Marketing / SEOと検索/ Live Search​に移動します。
• 影響を受ける属性のファセット設定を確認します。
• カスタムソースモデルでファセットを正しくテストする。

検証:

• カスタムソースモデルファセットを使用したテストフィルタリング。
• すべての属性値が正しく表示されることを確認します。
• パフォーマンスが適切であることを確認する。

カスタムイベントコレクションを実装:

• Storefront Events SDKを使用します。
• 検索イベントや商品インタラクションイベントを収集します。
• GTM データレイヤーにイベントを手動でプッシュします。

次の手順を実行します:

• 現在のGTM トラッキング要件を監査します。
• GTM イベントをストアフロントイベントにマッピングします。
• カスタムイベントリスナーを実装します。
• GTMへのデータフローをテストする。
• 分析レポートの検証：

参照実装を確認:

• PLP ウィジェットのソースコード ​を調べます。
• Live Search GraphQLのAPI ドキュメントを確認してください。
• ​ カタログサービスクエリ ​について説明します。

カスタム UIを実装:

• クエリにLive Search GraphQL APIを使用します。
• カスタム製品リストコンポーネントの構築。
• ファセットのUIを実装します。
• ページ分割と並べ替えを処理します。

イベントコレクションを実装:

• ​ ストアフロントイベントのドキュメント ​を確認します。

• 必要なイベントを実装します。

  • search-request-sent
  • search-response-received
  • search-results-view
  • product-page-view
  • add-to-cart

• Adobe Commerceへのイベントデータフローをテストします。

ファセットの並べ替えを設定:

• ヘッドレス実装の場合、ファセットはカウント別に並べ替えることができます。
• Live Search > Facets ワークスペースで設定します。
• より優れたユーザーエクスペリエンスを実現するために、Sort Type​を​ カウント ​に設定します。

テストと検証:

• 検索結果の正確性を検証：
• ファセット機能のテスト：
• イベントが正しく追跡されていることを確認します。
• パフォーマンス指標の監視：
• インテリジェントなマーチャンダイジング機能の検証。

既存のカスタマイズを文書化:

• 検索アダプタに対して行われたすべてのカスタマイズを一覧表示します。
• 各カスタマイズを促すビジネス要件を特定する。
• カスタマイズがまだ必要かどうかを判断します。

組み込み機能がユーザーのニーズを満たしているかどうかを確認する:

• PLP ウィジェット機能を確認します。
• CSS ベースのカスタマイズで十分かどうかを確認します。
• デフォルトのPLP ウィジェットの動作をテストします。

カスタムコードがまだ必要な場合:

• PLP ウィジェット リポジトリ ​を複製します。
• カスタマイズ機能の実装。
• 自社のCDNでホストする。
• カスタムウィジェットを使用するようにCommerce設定を更新します。

徹底的にテストする:

• あらゆるカスタム機能をテスト。
• Commerceのアップデートでカスタマイズが解除されないようにします。
• カスタム実装のドキュメンテーション。
• 継続的なメンテナンス計画。