SITECORE MANIA 技術ブログ

2020.10.28 SXA

キム・ヒョドン

キム・ヒョドン

SXAでサイト構築#06_モジュール作成_Footer編

環境

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

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

目次

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

01.デザインと構成

まず、デザインと構成を確認してモジュールを作成しましょう。

img-00

3つのコンテナーGlobalNavigationUtilityNavigationCopyrightがあって、その中にナビゲーション画像Rich-textなどのモジュールがある形です。

上記のデザインをに参考して、作成して行きましょう。

02.Style準備

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

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

パーシャルデザイン セクション モジュール Class名
Footer
GlobalNavigation
コンテナー l-globalFooter-wrapper
スプリッタ― (列)
column-1-6 footerSiteLogo
Rich Text footerCompanyInformation
画像 Header編で作成済み
column-2-6
ナビゲーション r-footerNavigation
column-3-6 footerContactArea
link
UtilityNavigation
コンテナー l-globalFooterUtilityNavigation
ナビゲーション r-footerUtilityNavigation
Copyright
コンテナー l-copyright
Rich-text r-copyright

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

img-01

img-02

Footerのスタイルフォルダーを作成してその中にスタイルアイテムを作成します。

img-03

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

img-04

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

img-05

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

Footerに必要なスタイルを上記の表を見て、すべて作成しましょう。

img-06

03.ページアイテム生成

FooterUtilityNavigationに必要なページアイテムを作成しましょう。

img-07

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

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

img-08

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

05.モジュール作成

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

Footerグローバルナビゲーション作成

img-00-01

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

img-09

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

スプリッター(列)を挿入する

img-10

スプリッター(列)を使って3列にします。

img-11

「+」ボタンをクリックして、columnを増やします。

img-12

※画像に「× ← → +」が重複されてるのはこのバージョンのバグです。

画像とRich-Textモジュール挿入

1番目のカラム(column-1-2)のサイズを3に変更して、スタイルを設定します。

img-13

img-14

カラム(column-1-2)に画像モジュールを挿入します。

img-15

画像モジュールのスタイルを設定します。

img-16

※前回、Header編で設定したスタイルがあります。

ロゴ画像を選択します。

img-17

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

img-18

画像モジュールの下にRich-Textを挿入します。

img-19

Rich-Textモジュールのスタイルを設定します。

img-20

リッチテキストエディターを開き内容を入力します。

img-21

Footerグローバルナビゲーション挿入

ナビゲーションモジュールを2番目のカラム(column-2-2)に挿入します。

img-22

下記の画像のように、ナビゲーションのスタイルを設定します。

img-23

ナビゲーション フィルターを設定します。

img-24

Linkモジュール挿入

3番目のカラム(column-3-2)のスタイルを設定します。

img-25

3番目のカラム(column-3-2)にlinkモジュールを挿入します。

img-26

Data(Current site)のテンプレートをクリックします。

img-27

アイテム名を入力します。

img-28

リンクアイコンをクリックし、リンク先のContactアイテムを選択して、「リンクの説明」に 「CONTANT」と入力します。

img-29

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

img-00-02

「フッター」のプレースホルダーをクリックして、最後の「ここに追加」を選択します。すると、レンダリングを選択するウィンドウが開き、「ページ構成 → コンテナー」を選択します。

img-30

コンテナーのスタイルを設定します。

img-31

ナビゲーションモジュールを挿入します。

img-32

ナビゲーションモジュールのスタイルを設定します。

img-33

ナビゲーションフィルターを設定します。

img-34

Copyrightを作成

img-00-03

「フッター」のプレースホルダーをクリックして、最後の「ここに追加」を選択します。すると、レンダリングを選択するウィンドウが開き、「ページ構成 → コンテナー」を選択します。

img-35

コンテナーのスタイルを設定します。

img-36

Rich-Textモジュールを挿入します。

img-37

Rich-Textモジュールのスタイルを設定します。

img-38

リッチテキストエディターを開き内容を入力します。

img-39

これでFooterのモジュール作成してパーシャルデザインが完成しました。

06.確認

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

プレビュー画面

img-40


最後に

今回はFooterのモジュールを作成して、Footerのパーシャルデザインを作って見ました。
次回はページリストのモジュールを作成する予定です。

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

参考動画

この記事を読んだ人はこちらの記事も読んでます

お問い合わせ・資料請求

LYZONにご相談下さい

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

お電話でのお問い合わせ

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