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

現在の Live Search のバージョンを確認します。

composer show magento/live-search | grep version

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

bin/magento module:enable Magento_AdvancedSearch

composer.json 4.0 以降を必要とするように Live Search を更新する：

"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 クラスを識別します。
• カスタム JavaScript インタラクションを文書化する。

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

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

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

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

徹底的にテスト:

• すべてのビジュアルのカスタマイズが PLP ウィジェットで機能することを確認します。
• レイアウトの競合を回避します。
• すべてのブレークポイントとデバイスでテストします。

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

• ファセットとして使用される製品属性の確認
• カスタムソースモデルを使用するコンポーネントを特定します。
• 現在のファセット設定をドキュメント化します。

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

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

ファセットの再設定:

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

検証:

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

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

• ​ ストアフロントイベントSDK を使用します。
• 検索および製品インタラクションイベントをキャプチャします。
• イベントを GTM データレイヤーに手動でプッシュします。

次の手順を実行します。

• 現在の GTM トラッキング要件を監査します。
• GTM イベントを Storefront イベントにマッピングします。
• カスタムイベントリスナーの実装
• 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 Workspace でを設定します。
• UX を向上させるには、Sort Type を Count に設定します。

テストと検証:

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

既存のカスタマイズのドキュメント化:

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

組み込み機能がニーズを満たしているかどうかを確認します。

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

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

• PLP ウィジェットリポジトリ ​ のクローンを作成します。
• カスタマイズを実装します。
• 独自の CDN でホストする。
• カスタムウィジェットを使用するように、Commerce設定を更新します。

徹底的にテスト:

• すべてのカスタム機能のテスト。
• Commerceの更新によってカスタマイズが中断されないことを確認します。
• カスタム実装を文書化します。
• 継続的なメンテナンスを計画します。