1. JSのSDKとUI Componentsの仕事

コンテンツウィジェットの設定オーバーライド

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

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

通常、コンテンツパーソナライズウィジェットのコンテンツや外観設定はSitecore Searchで設定します。バナーやHTMLブロックウィジェットには、URL、テキスト、HTMLが含まれます。

rfkIdSitecore Searchバナーウィジェットの構成を上書きするにはbanner_2:

  1. Sitecore Searchでは、WidgetsセクションのWidgetsタブでバナーウィジェットを見つけて、そのrfkIdに記録してください。

  2. Reactプロジェクトのwidget_componentsフォルダに「 temporaryBanner.js」というファイルを作成し、次のコードブロックを貼り付けます。

    import { useContentBlock, useWidgetVisibility, widget, WidgetDataType, } from "@sitecore-search/react"; import { createElement, useLayoutEffect, useRef } from "react";

    function addStyle(rfkId, node, css) { let styleNode = document.querySelector(`data-rfk-id-style=${rfkId}`); if (!styleNode) { styleNode = document.createElement("style"); styleNode.setAttribute("type", "text/css"); styleNode.dataset.rfkIdStyle = rfkId; node.parentNode?.appendChild(styleNode); } styleNode.innerHTML = css; }

    const ContentBlockWidget = () => { const { rfkId, queryResult: { data: { appearance: { css_names: cssNames = , templates: { html: { devices: { pc: { content: htmlContent = null } = {} } = {}, } = {}, css: { devices: { pc: { content: cssContent = null } = {} } = {}, } = {}, } = {}, } = {}, } = {}, }, } = useContentBlock(); const { ref } = useWidgetVisibility(); const contentRef = useRef(null);

    // sets widget styles useLayoutEffect(() => { if (contentRef.current && cssContent) { addStyle(rfkId, contentRef.current, cssContent); } }, rfkId, cssContent);

    // sets widget content useLayoutEffect(() => { if (contentRef.current && htmlContent) { contentRef.current.innerHTML = htmlContent; } }, htmlContent); return createElement( "div", { ref, "data-rfkid": rfkId, className: cssNames.join(" ") }, createElement("div", { ref: contentRef }) ); };

    export default widget(ContentBlockWidget, WidgetDataType.CONTENT_BLOCK);

  3. ウィジェットコンポーネントをインポートしてアプリケーションやページコンポーネントに追加してください。

  4. コンポーネント名とインポートを更新してください。

  5. バナーが表示されているページをテストしてください。

この記事を改善するための提案がある場合は、 お知らせください!