カテゴリ管理App

カテゴリ管理Appについて

商品をカテゴリ管理できるAppです。 カテゴリは３階層まで設定することができます。

カテゴリ各階層の名称について

３階層あるカテゴリの各階層について、上位階層の方から順に 大カテゴリ > 中カテゴリ > 小カテゴリ という名称を用いています。

また、ある階層における一つ下の階層を子カテゴリと呼びます。大カテゴリの子カテゴリは中カテゴリ、中カテゴリの子カテゴリは小カテゴリとなります。

大カテゴリ
┗ 中カテゴリ （大カテゴリの子カテゴリ）
    ┗ 小カテゴリ （中カテゴリの子カテゴリ）

※カテゴリ管理Appが3階層に対応する以前に作成されたカテゴリは、すべて大カテゴリとして扱われます。

上記を踏まえた上で、以下のテンプレート変数の説明をご覧ください。

タグ一覧

Appのコンテンツを表示するために必要なタグ一覧です。

ブロック

if(条件を満たす場合に表示)

タグ	説明
{block:IndexPageCategory}	トップページのカテゴリである
{block:NoIndexPageCategory}	トップページのカテゴリではない
{block:BreadcrumbTag}	パンくずがある
{block:AppsItemCategory}	カテゴリ管理Appをインストールしている
{block:HasAppsItemCategoryMediumCategories}	中カテゴリがある
{block:HasAppsItemCategoryChildCategories}	子カテゴリがある

ループ(対象が複数ある場合に繰り返す)

カテゴリを表示させるには、カテゴリ管理Appのインストールが必要となります。

タグ	説明
{block:AppsItemCategoryCategories}	大カテゴリのループ
{block:AppsItemCategoryMediumCategories}	大カテゴリのループの中の中カテゴリのループ
{block:AppsItemCategoryChildCategories}	今いるカテゴリの子カテゴリのループ

変数

ページ

タグ	説明
{IndexPageCategory}	トップページのカテゴリ 例) {block:IndexPageCategory}{IndexPageCategory}{/block:IndexPageCategory}
{BreadcrumbTag}	パンくずタグ。カテゴリのページでのみ表示される。 例)Home > メンズファッション > トップス > Tシャツ

コンテンツ表示(カテゴリページ)

カテゴリを表示させるには、カテゴリ管理Appのインストールが必要となります。

タグ	説明
{AppsItemCategoryCategoriesTag}	カテゴリのタグ。大カテゴリと中カテゴリが表示される。
{AppsItemCategoryCategoryName}	カテゴリの名前 例) {block:AppsItemCategoryCategories}{AppsItemCategoryCategoryName}{/block:AppsItemCategoryCategories}
{AppsItemCategoryCategoryPageURL}	カテゴリのページのURL 例) {block:AppsItemCategoryCategories}<a href="{AppsItemCategoryCategoryPageURL}">{AppsItemCategoryCategoryName}</a>{/block:AppsItemCategoryCategories}
{AppsItemCategoryMediumCategoryName}	中カテゴリの名前
{AppsItemCategoryMediumCategoryPageURL}	中カテゴリのページのURL
{AppsItemCategoryChildCategoryName}	子カテゴリの名前
{AppsItemCategoryChildCategoryPageURL}	子カテゴリのページのURL

ローカライズテキスト

カテゴリ管理Appでは、ローカライズテキストはありません

対応が必要な箇所一覧

• グローバルナビゲーションまたはドロワーメニュー
• カテゴリページ

グローバルナビゲーションまたはドロワーメニューでのカテゴリ表示

ナビゲーション内でカテゴリの一覧を表示する場合、最も簡単な方法は {AppsItemCategoryCategoriesTag} を利用する方法です。

BASEでは、ナビゲーション内では第二階層（中カテゴリ）までしか表示させない前提の設計となっております。

例)

`{block:AppsItemCategory}`
	`{AppsItemCategoryCategoriesTag}`
`{/block:AppsItemCategory}`

↓
#以下のようにレンダリングされます。
↓

<ul id="appsItemCategoryTag">
	<li class="appsItemCategoryTag_child">
		<a href="`{大カテゴリページへのリンク}`" class="mainHeaderNavColor">`{大カテゴリ名}`</a>
		<ul class="appsItemCategoryTag_lowerchild">
			<li>
				<a href="`{中カテゴリページへのリンク}`" class="mainHeaderNavColor appsItemCategoryTag_lowerLink">`{中カテゴリ名}`</a>
			</li>
			<li>・・・</li>
			<li>・・・</li>
		</ul>
	</li>
	<li class="appsItemCategoryTag_child">・・・</li>
	<li class="appsItemCategoryTag_child">・・・</li>
</ul>

カテゴリのhtmlを細かく調整したい場合は、{block:AppsItemCategoryCategories} を利用してください。

例)

`{block:AppsItemCategory}`
	<ul class="category">
	`{block:AppsItemCategoryCategories}`
		<!-- 大カテゴリのループ -->
		<li class="category__item"><a href="`{AppsItemCategoryCategoryPageURL}`">`{AppsItemCategoryCategoryName}`</a>
			<ul class="category category--medium">
			`{block:AppsItemCategoryMediumCategories}`
				<!-- 中カテゴリのループ -->
				<li class="category__item"><a href="`{AppsItemCategoryMediumCategoryPageURL}`">`{AppsItemCategoryMediumCategoryName}`</a></li>
			`{/block:AppsItemCategoryMediumCategories}`
			</ul>
		</li>
	`{/block:AppsItemCategoryCategories}`
	</ul>
`{/block:AppsItemCategory}`

カテゴリページ

カテゴリのページでは、現在表示されているカテゴリ名や、子カテゴリの一覧の表示、パンくずの表示ができます。

*例) カテゴリ名と子カテゴリ一覧の表示

`{block:AppsItemCategory}`
`{block:IndexPageCategory}`

	<!-- カテゴリ名をページの見出しとして表示 -->
	<h2 class="categoryTitle01">`{IndexPageCategory}`</h2>

	`{block:HasAppsItemCategoryChildCategories}`
		<!-- 子カテゴリの一覧を表示 -->
		<ul>
			`{block:AppsItemCategoryChildCategories}`
				<li><a href="`{AppsItemCategoryChildCategoryPageURL}`">`{AppsItemCategoryChildCategoryName}`</a></li>
			`{/block:AppsItemCategoryChildCategories}`
		</ul>
	`{/block:HasAppsItemCategoryChildCategories}`

`{/block:IndexPageCategory}`
`{/block:AppsItemCategory}`

パンくずリスト

パンくずリストの表示には、{BreadcrumbTag} を利用します。パンくずリストの先頭は必ず「Home」となります。

*例)

`{block:AppsItemCategory}`
`{block:IndexPageCategory}`

・・・

	`{BreadcrumbTag}`

・・・

`{/block:AppsItemCategory}`
`{/block:IndexPageCategory}`

↓
# 例えば
# トップス（大カテゴリ）
# ┗ Tシャツ（中カテゴリ）
#    ┗ Vネック（小カテゴリ）
# というカテゴリ構造で「Vネック」のページにいる場合、以下のようにレンダリングされます。
↓

<ul class="breadcrumb">
	<li class="breadcrumb__child"><a href="`{Homeへのリンク}`" class="breadcrumb__link">Home</a></li>
	<li class="breadcrumb__child"><a href="`{カテゴリ「トップス」ページへのリンク}`" class="breadcrumb__link">トップス</a></li>
	<li class="breadcrumb__child"><a href="`{カテゴリ「Tシャツ」ページへのリンク}`" class="breadcrumb__link">Tシャツ</a></li>
	<li class="breadcrumb__child"><span class="breadcrumb__notlink">Vネック</span></a></li>
</ul>

デザインマーケットで販売するテーマを作る時の注意点

• カテゴリ管理Appをインストール済み、未インストールのどちらのケースでもデザインが崩れないように実装してください
• カテゴリが多数登録されている場合を想定して実装してください
• 最大文字数(30文字)でも適切に表示されるように実装してください

動作のチェック

動作確認するには下記項目を参考にしてください。

ナビゲーション

• グローバルナビゲーションやドロワーメニューにて、カテゴリの一覧が正しく表示でき、各カテゴリページへのリンクが機能しているか
• グローバルナビゲーションやドロワーメニューにて、登録カテゴリ数がかなり多い場合でも問題なく表示できるか
• 中カテゴリ、小カテゴリのクリック判定条件が厳しいなど、選択しにくくなっていないか

カテゴリページ

• カテゴリページでカテゴリ名、子カテゴリのリストが正しく表示できるか
• カテゴリに登録されている商品の一覧が正常に表示されているか
• パンくずメニューが表示されているか
• カテゴリ内の登録商品が多い場合、追加で商品が正常に読み込まれたデザインが崩れていないか
• 商品が登録されていないカテゴリページの表示は正常か
• ajaxで商品を追加読み込みをした場合、商品をクリック→商品ページ→ブラウザバックでカテゴリページに戻った場合にスクロール位置が保たれているか