1. JS SDKとUI Componentsの操作

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

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

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

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

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

  1. CECの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. バナーが表示されているページをテストします。

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