カテゴリ管理App

カテゴリ管理Appについて

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

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

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

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

base

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

※カテゴリ管理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」となります。

base

*例)

{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で商品を追加読み込みをした場合、商品をクリック→商品ページ→ブラウザバックでカテゴリページに戻った場合にスクロール位置が保たれているか
← 商品検索AppラベルApp →