コンテンツウィジェット構成の上書き

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

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

通常、コンテンツの個人用設定ウィジェットのコンテンツと外観の設定は、Customer Engagement Console (CEC) で構成します。バナーウィジェットとHTMLブロックウィジェットの場合、これにはURL、テキスト、HTMLを含めることができます。

rfkIdがbanner_2CECバナーウィジェットの設定を上書きするには:

CECのWidgetsセクションのWidgetsタブで、バナーウィジェットを見つけて、そのrfkIdに注意してください。

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

RequestResponse

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);

ウィジェットコンポーネントをインポートし、アプリケーションまたはページコンポーネントに追加します。
コンポーネント名とインポートを更新します。
バナーが表示されているページをテストします。

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

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