SITECORE MANIA 技術ブログ

2020.07.16 SXA

author

キム・ヒョドン

SXAでサイト構築#05_モジュール作成_Header

環境

  • Sitecore 9.0.2 rev. 180604
  • Sitecore Experience Accelerator 1.7.1 rev. 180604 for 9.0

SXAでサイト構築#05_モジュール作成_Header

目次

ダウンロード

今回に必要な資料なのでダウンロードしてください。

今回はパーシャルデザインHeaderの中にモジュールを作成してみまよう。

デザイン確認

下記のデザインをに参考して、モジュールを作成していきたいと思います。

ページアイテム生成

前回の記事で作成したページアイテムだと、ページが足りないので増やしていきましょう。

ナビゲーションフィルター設定

各ページアイテムにナビゲーションフィルターを設定しましょう。

※ナビゲーションをチェックすると、このアイテムは該当のナビゲーションから非表示になります。

グローバルナビゲーションになるページアイテムは、ユティリティナビゲーションには表示したくないのでチェックします。

ヘッダーユティリティナビゲーションになるページアイテムは上記の画像のようにチェックします。

ContactはLinkモジュールを使います。ナビゲーションには表示しないため、上記の画像のようにチェックします。

画像準備

今回使う画像をmediaに格納しましょう。

画像ダウンロード

CSSとJS準備

CSSとJSを用意しましたので、今回使うCSSとJSをメディアライブラリに格納しましょう。

CSSとJSダウンロード

Style準備

モジュールを作成する時、必要なstyleを事前に設定しましょう。

パーシャルデザイン設計書

パーシャルデザイン セクション モジュール Class名
Header
UtilityNavigation
コンテナー l-globalUtilityNavigation-wrapper
ナビゲーション r-headerUtilityNavigation
GlobalNavigation
コンテナー l-globalNavigation-wrapper
Image r-headerSiteLogo
ナビゲーション r-globalNavigation
link r-headerContactArea

/sitecore/content/SitecoreBlogSXA/TestSite/Presentation/Stylesでスタイルを挿入します。

スタイルを挿入して、アイテム名を入れると自動にバリューのフィールドの入ります。

「許可されたレンダリング」を設定すると、設定したモジュールだけスタイルが表示されます。

「許可されたレンダリング」の「編集」ボタンを押します。レンダリング>機能>エクスペリエンス アクセラレーターで該当のモジュールを選択します。

Rendering Variants準備

Headerのグローバルナビゲーションに使うRendering Variantsを準備しましょう。

Rendering Variants設計

階層 Variants タイプ タグ Class フィールド名 リンク SQL Server
1 megamenu
2 SQL Server query:..
3 Title フィールド Div nav-current-title Title
2 NavigationTitle フィールド Div navigation-title NavigationTitle
3 Title フィールド Div navigation-title Title
3 __Display Name フィールド Div navigation-title __Display Name

Variants設計と画像を参考にしてVariantsを作成してください。

モジュール作成

パーシャルデザインの「Header」を右クリックし、エクスペリエンスエディターを開きます。

ユティリティナビゲーション作成

コンテナーをheaderにドラッグアンドドロップします。

コンテナーのバケッツアイコンをクリックし、下記の画像の通りスタイルを選択します。

ナビゲーションモジュール作成

ナビゲーションを先に挿入したコンテナーの中にドラッグアンドドロップで入れます。

ナビゲーションのバケッツアイコンをクリックし、下記の画像の通り設定します。

メインナビゲーション作成

コンテナーをheaderにドラッグアンドドロップします。(ユティリティナビゲーションのコンテナー下に入る形です)

コンテナーのバケッツアイコンをクリックし、下記の画像の通りスタイルを選択します。

Imageモジュール作成

Imageを先に挿入したコンテナーの中にドラッグアンドドロップで入れます。

Imageのバケッツアイコンをクリックし、下記の画像の通り設定します。

Imageの画像アイコンをクリックし、logoになる画像を選択します。

Imageの画像編集アイコンをクリックし、代替テキストを入れます。

ナビゲーションモジュール作成

ナビゲーションを先挿入したコンテナーの中にドラッグアンドドロップで入れます。

ナビゲーションのバケッツアイコンをクリックし、下記の画像の通り設定します。

linkモジュール作成

linkを先に挿入したコンテナーの中にドラッグアンドドロップで入れます。

コンテンツアイテムを選択するWindowが出てきましたら、「Links(Current site)」の「テンプレート」をクリックします。

「link」をクリックし、コンテンツアイテム名に「Contact」を入力します。

linkのバケッツアイコンをクリックし、下記の画像の通り設定します。

link編集アイコンをクリックし、リンク先とリンクの説明を入力します。

確認

「エクスペリエンスアクセレーター」タブをクリックし、「テーマ」をクリックします。

テーマを「TestSiteTheme」に変更します。

「TestSiteTheme」テーマがあたってる状態です。

プレビューで確認してみましょう。

プレビュー画面


最後に

今回はページデザインとパーシャルデザインについて勉強しました。 次回はパーシャルデザインにモジュールを入れてパーシャルデザインを完成する予定です。

今回も作成フローを動画でもまとめましたので、ぜひご覧ください。

参考動画

お問い合わせ・資料請求

LYZONにご相談下さい

ご依頼ご質問等まずは私達にお気軽にご相談下さい。

お電話でのお問い合わせ

03-5803-0587平日9:00~18:00