サポートサイト

テンプレートを都度編集することなく、ページへのバナー画像の変更や、表記の入れ替えができる機能です。
ショップ管理ツールでバナー画像を選択したり、ブロック内に表示するHTMLを編集するだけで簡単にページを編集することができます。

会員ランクや会員タグなどを活用いただくことで、パーソナライズ化したコンテンツの表示ができたり、
キャンペーンやイベントの期間に合わせてコンテンツを自動で入れ替えられるため、業務効率のUP
にもつながります。

この特集では、サンプルソースとともに、導入手順をご紹介します！

こんな人におすすめです

• ページに新しくバナー画像を追加したいけどHTMLを書くのが苦手
• イベント期間に合わせてコンテンツを差し替えたい
• 会員ランクや会員タグごとに表示するコンテンツを出し分けたい

活用事例と使い方

①新しくバナー画像を追加する

対象期間中、特定のユーザーに対してコンテンツを表示する場合の活用事例をご紹介します。

イメージ

今回は3月1日から3月5日の間、ゴールドランクの会員向けにメインビジュアルの下にキャンペーンAのバナー画像を表示するよう設定します。

STEP1．コンテンツを登録する

ショップ管理ツール > コンテンツ管理 > パーツ管理 ＞ パーツ新規登録／一覧 ＞ 新規登録

パーツ登録画面で、表示したいバナー画像を選択し、対象期間と表示対象会員ランクを指定します。

登録内容確認画面へ遷移すると、下記のようなサンプルコードが表示されるので、コピーしておきます。

STEP2．テンプレートに m:id を埋め込む

ショップ管理ツール > コンテンツ管理 > 画像・テンプレート管理

STEP1．のパーツ登録確認画面で表示されたサンプルコードを、画像を表示したいテンプレートの該当箇所に埋め込みます。
今回は、以下のサンプルコードをtop.xhtml内メインビジュアルの下に埋め込みました。

サンプルコード

	<div m:id="common.IF_CONTENT" m:content_cd="CAMPAIGN">
		<div m:id="common.LOOP_CONTENT">
			<div m:id="common.IF_CONTENT_BANNER"><div m:id='common.CONTENT_BANNER_IMAGE_HERE'></div></div>
			<div m:id="common.IF_CONTENT_HTML"><div m:id='common.CONTENT_HTML_TEXT_HERE'></div></div>
		</div>
	</div>
	

表示結果

テンプレートが反映されると、サンプルコードで指定したコンテンツコードに紐づくコンテンツを参照し、表示します。
3月1日から3月5日の間、ゴールドランクの会員がログインした際にキャンペーンAのバナー画像が表示されるようになりました。

②バナー画像を入れ替える

①でバナー画像を表示していた場所に、表示対象や表示期間を変えて、別のバナー画像を表示することができます。

イメージ

キャンペーンAのバナー画像を表示していた場所に、3月10日から3月15日の間、シルバーランクの会員向けにキャンペーンBのバナー画像を
表示するよう設定します。

ショップ管理ツール > コンテンツ管理 > パーツ管理 ＞ パーツ新規登録／一覧 ＞ ①で登録したコンテンツの
「編集」ボタンを押下

パーツ編集画面で、表示したいバナー画像を選択し、対象期間と表示対象会員ランクを指定します。

表示結果

3月10日から3月15日の間、シルバーランクの会員がログインした際にキャンペーンBのバナー画像が表示されるようになりました。

③HTMLを追加・編集する

イメージ

①②のバナー画像と同じ手順で、HTML形式で記述したコンテンツを表示することも可能です。

ショップ管理ツール > コンテンツ管理 > パーツ管理 ＞ パーツ新規登録／一覧 ＞ 新規登録

パーツ登録画面で、表示したいコンテンツの内容をHTML形式で入力し、必要に応じて対象期間と表示対象を指定してください。
バナー画像と同じく、登録確認画面で表示されたサンプルコードを、テンプレートの該当箇所に埋め込んでください。

④特定の条件に合致する商品一覧を追加する

イメージ

初期設定「パーツ管理:商品一覧利用フラグ」が「利用する」の場合、コンテンツ区分「商品一覧」を利用できます。
バナー画像と同じように、コンテンツを登録後にテンプレートファイルにm:idを追加することで、ご希望の商品一覧を表示できます。

ショップ管理ツール > コンテンツ管理 > パーツ管理 ＞ パーツ新規登録／一覧 ＞ 新規登録

パーツ登録画面にて表示したい商品一覧の条件を登録し、PC、SP（スマートフォン）に表示する際の列数を選択してください。
必要に応じて、対象期間、表示対象、ソート条件、表示件数上限を指定してください。
最後に、バナー画像と同じく、登録確認画面で表示されたサンプルコードを、テンプレートの該当箇所に埋め込んでください。

Q&A

同期間中に会員タグや会員ランクによって別のコンテンツを出すことはできますか？

ユーザーごとにコンテンツの出し分けが可能です。
同一のコンテンツコード・表示期間で「表示対象(会員タグ)」や「表示対象(会員ランク)」ごとに表示したいコンテンツを
それぞれ登録してください。

同期間に複数のコンテンツを表示できますか？

同一のコンテンツコードで「表示順」を指定して複数コンテンツを登録することで、
サンプルコードを埋め込んだ場所に「表示順」が上位のコンテンツから順に表示されます。

別のコンテンツコードで複数コンテンツを登録し、それぞれのコンテンツに対応するサンプルコードを埋め込むことで、
異なる場所に各コンテンツを表示することも可能です。

HTMLコンテンツ内でm:idは使えますか？

HTMLコンテンツ内ではm:idは使用できません。表示できるのは静的コンテンツになります。

コンテンツ区分「商品一覧」で指定した条件に合致する商品を追加した場合は、リアルタイムで更新されますか？

更新されません。

条件に合致した商品を追加する、もしくは、条件から外れた商品を取り除く場合は、
コンテンツ区分「商品一覧」のパーツを空更新してください。

商品の情報を更新した場合は、リアルタイムで更新されますか？

更新されます。
「表示項目」に登録した商品情報が更新された場合、リアルタイムで更新された情報が表示されます。