Tailwind Logo

Sitecore Search - HTML ブロックの確認

Search

公開日: 2023-08-25

ウィジットとして HTML ブロックを Starter Kit でいくつか利用していますが、今回はこの項目の編集、また動作に関して確認をしていきます。

Home Hero の設定を確認

ウィジットの追加の際に、Home Hero の項目を追加しています。作成をしたばかりでは以下のような画面となっています。

searchwidgethome01.png

この定義はどこに設定されているのでしょうか？Widget Settings を見に行くと以下の設定項目があります。

searchwidgethome02.png

Appearance Settings の項目を参照しに行くと、以前に HTML Block を作成する時に設定している値が表示されています。

searchwidgethome03.png

HTML のコードを参考までに記載すると以下のようになっています。

この値が上記の HTML の画像、文字として利用されている形となります。この HTML の構造を変更することは可能でしょうか？この部分は Widget Settings の Appearance Definition の項目で変更することが可能です。項目をクリックすると左側に HTML、CSS などの項目が表示されています。まずは HTML を開くと以下のような画面になります。

searchwidgethome04.png

ここに記載されている HTML のコードをここに貼り付けてみます。

HTML 
<div class="cta-vertical-container">
    <img src="{{$cta_image_url,}}" alt="{{$cta_image_alt,}}" class="cta-image lg-align-{{$cta_image_align}} sm-align-{{$cta_image_align_mobile}}" />
    <div class="cta-content-container">
        <h2 class="cta-title lg-align-{{$cta_title_align}} sm-align-{{$cta_title_align_mobile}}">{{$cta_title,}}</h2>
        <div class="cta-content lg-align-{{$cta_content_align}} sm-align-{{$cta_content_align_mobile}}">{{$cta_content}}</div>
    </div>
    <div class="cta-button-container lg-align-{{$cta_button_align}} sm-align-{{$cta_button_align_mobile}}">
        <a href="{{$cta_button_href}}" title="{{$cta_button_label}}" class="cta-button">{{$cta_button_label}}</a>
    </div>
</div>

このコードは見覚えがありますね。上のページで貼り付けていた出力された HTML になります。ここに対して、{{$cta_image_url,}} と HTML に埋め込まれているコードの部分で、Appearance Settings で定義されている画像が読み込まれて表示している形となります。

CSS を参照しに行くと以下のような画面になります。

searchwidgethome05.png

Web や Tablet などデバイスにあわせた CSS の設定ができるようになっています。このように、ウィジットの HTML やスタイルシートの管理が可能となっています。

新しいデザインに変更する

今回は Sitecore.com のトップのバナーのような形に書き換えてみたいと思います。まず HTML のコードは以下のように変更します。

HTML 
<section class="html_block" >
  <div class="hero-background">
  </div>
  <div class="hero-content">
    <div class="hero-main-content">
      <h1>{{$cta_title}}</h1>
    <div>{{$cta_content}}</div>
    </div>
  </div>
</section>

また CSS も以下のように書き換えます（コードは Web のみここには掲載）。

CSS 
.html_block {
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
.hero-background {
  background-image: url({{$cta_image_url}});
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.hero-content {
  display: flex;
  justify-content: flex-start;
  padding-left: 10%;
}
.hero-main-content {
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%), inset 0 0 200px rgb(255 255 255 / 30%);
  border-radius: 5px;
  position: relative;
  z-index: 1;
  background: #f6f6f629;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: #ffffff;
  width: 400px;
  padding: 2em 3em;
}
h1 {
  font-size: 2.5rem;
}

コードを書き換えたあと、Publish をクリックしてウィジットを更新します。すると以下のように画面が切り替わりました。

searchwidgethome06.png

結果、パラメータから画像や文字などを取得して、以下のようなコードを出力することになります。

まとめ

HTML ブロックを Sitecore Search 側でウィジットとして用意をして、ページの中に埋め込むことが可能になっています。今回は少し長くなってしまったので、次回はこの Widget のルールの設定を利用して、表示に関して制御したいと思います。

関連タグ