カスタムスタイルのウィジェットコンポーネントを作成する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore Search UI Componentsパッケージには、UIコンポーネント、プリミティブ、スタイルで構築されたスタイル付きウィジェットコンポーネントのテンプレートが含まれています。これらのコンポーネントのスタイルを編集したり、コンポーネント全体を置き換えたりできます。
カスタムスタイル付きのクエリフックrecommendationウィジェットコンポーネントを作成するには:
-
UIコンポーネントの参考サイトのウィ ジェットテンプレート セクションで、Search結果 ページを開きます。
-
Reactプロジェクトのwidget_componentsフォルダにsearchResultsBasicStoryという名前のフォルダを作成します。
-
テンプレートのリストから、Basic Storyページのindex.jsをクリックしてコードブロックをコピーします。
-
searchResultsBasicStoryフォルダにindex.jsというJavaScriptファイルを作成し、コピーしたコードブロックを貼り付けて保存します。
-
テンプレートのリストから、Basic Storyページのstyled.jsをクリックしてコードブロックをコピーします。
-
searchResultsBasicStoryフォルダにJavaScriptファイルを作成しstyled.js、コピーしたコードブロックを貼り付けて保存します。
-
styled.jsでは、スタイル付きのプリミティブを編集し、セーブします。
-
applicationコンポーネント内で、以下のコードブロックに示されたようにコンポーネントを追加します。
imports ( SearchResultsBasicStory ) from "./widget_components/searchResultsBasicStory";
const MyApp = () => { return ( <WidgetsProvider env='
' customerKey=' ' apiKey=' ' ) }; -
コンパイルエラーを避けるために、インポートセクションを更新して保存してください。
!ヒント実装のためのReactリソース:
Discoverウィジェットの動作例を見るには、Search JS SDKおよびUIコンポーネントパッケージを使って作成された スターターキットのウェブサイト をご覧ください。
GitHubリポジトリをダウンロードまたはフォークできます。
Search Search UIコンポーネント参照は、利用可能なすべてのウィジェットテンプレート、UIコンポーネント、テーマ変数を一覧にしています。
UIコンポーネントCLIを使ってIDEでウィジェットテンプレートを複製してください。