カスタムスタイル設定されたウィジェットコンポーネントの作成

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecore Search UI Componentsパッケージには、UIコンポーネント、プリミティブ、およびスタイルで構築されたウィジェットコンポーネントである、スタイル付きウィジェットコンポーネントのテンプレートが含まれています。これらのコンポーネントのスタイルを編集したり、コンポーネント全体を置き換えたりすることができます。

カスタムスタイルクエリフック付きrecommendationウィジェットコンポーネントを作成するには:

  1. UIコンポーネントのリファレンス サイトのWidget templatesセクションで、Search resultsページを開きます。

  2. Reactプロジェクトのwidget_componentsフォルダーに、searchResultsBasicStoryという名前のフォルダーを作成します。

  3. テンプレートの一覧から、Basic storyページでindex.jsをクリックしてコード ブロックをコピーします。

  4. searchResultsBasicStoryフォルダーにindex.jsというJavaScriptファイルを作成し、コピーしたコード ブロックを貼り付けて保存します。

  5. テンプレートの一覧から、Basic storyページでstyled.jsをクリックしてコード ブロックをコピーします。

  6. searchResultsBasicStoryフォルダーにJavaScriptファイルを作成し、コピーしたコード ブロックを貼り付けstyled.js、保存します。

  7. styled.jsで、スタイル設定されたプリミティブを編集し、保存します。

  8. applicationコンポーネントで、次のコードブロックに示すようにコンポーネントを追加します。

    RequestResponse
    imports ( SearchResultsBasicStory ) from "./widget_components/searchResultsBasicStory";

const MyApp = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
            >
            <SearchResultsBasicStory rfkId="styled_searchResultsBasicStory" /> 
        </WidgetsProvider>
    )
};

  9. コンパイルエラーを回避するには、importsセクションを更新して保存します。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、