はじめに
こんにちは、CMA制作部スタッフ krm0095 です。
MakeShopのクリエイターモードを構築していると、
- トップページだけバナーを出したい
- 特定の商品ページだけレイアウトを変えたい
- カテゴリごとにデザインを変えたい
といった「ページごとの出し分け」が必要になる場面が多くあります。
ただ、実際に実装しようとすると、どの変数を使えばいいのか分かりづらいと感じることも多いです。
この記事では、MakeShopの構築でよく使う「ページごとの条件分岐のやり方」と$page.typeの一覧を実務目線でまとめています。
条件分岐の基本
MakeShopのページ分岐はシンプルで、以下の3つでほぼ対応可能です。
-
$page.type：ページの種類 -
$page.id：個別ページ -
$category.code：カテゴリーコード
$page.type：ページの種類で条件分岐
<{if $page.type == 'top'}>
トップページだけ表示
<{/if}>
<{if $page.type == 'item'}>
商品詳細ページだけ表示
<{/if}>
page.type 一覧まとめ
実際にテンプレート上で出力して確認した一覧です。
基本ページ
| page.type | 内容 |
|---|---|
| top | トップページ |
| category | 商品一覧（カテゴリ） |
| item | 商品詳細ページ |
| search | 商品検索結果 |
| cart | カートページ |
その他
| page.type | 内容 |
|---|---|
| freepage | フリーページ |
| news-list | お知らせ一覧 |
| news-detail | お知らせ詳細 |
| guide | ご利用案内 |
| company | 会社概要 |
| contract | 特定商取引法 |
| policy | プライバシーポリシー |
商品詳細ページやフリーページは、$page.idでピンポイントに出し分ける
$page.typeだけではページ単位の制御が難しいため、特定の商品ページのみ出し分けたい場合は$page.idを使います。
<{if $page.id == "item"}>
全商品詳細ページに表示
<{/if}>
<{if $page.id == "000000000010"}>
特定の商品ページだけ表示
<{/if}>
また、フリーページは$page.type = freepageで条件分岐するとすべてのフリーページに反映されてしまうため、$page.id（ページURL）とセットで使う必要があります。
<{if $page.type == 'freepage' && $page.id == 'shoplist'}>
ショップリストページだけ
<{/if}>
カテゴリーページの条件分岐
カテゴリー単位で出し分ける場合は、$page.typeや$page.idではなく、$category.codeを使用します。
<{if $category.code == 'ct1'}>
ct1カテゴリだけ表示
<{/if}>
MakeShopは「変数」が分かりづらい
MakeShopはページごとに使える変数が分かりづらいのが難点です。そんなときは、出力して確認します。
<div style="display:none;">
ページタイプ：<{$page.type}>
ページID：<{$page.id}>
カテゴリー識別コード：<{$category.code}>
</div>
これをページ内に記述してデベロッパーツールで確認すれば、今どのページか・どの値で条件分岐できるかがすぐに分かります。
まとめ
MakeShopの条件分岐は、以下の3つを使い分けるだけで、ほとんどのケースに対応できます。
$page.type$page.id$category.code
ドキュメントが少なく最初は戸惑いますが、パターンを理解すれば柔軟にカスタマイズできるようになります。
独自デザイン構築の際に、少しでも参考になれば幸いです。