makeshopでループを使用して特定の商品カテゴリーのみを表示させる方法。ソースコードあり！

本記事ではmakeshopのループ内で特定の商品カテゴリーを表示させる方法をご紹介します。

本記事を執筆しようと思った理由ですが、makeshopのよくある質問には下記のように記載されていました。

トップぺージおよびどのページにも、 特定のカテゴリーの商品リストを自動的に表示させることはできません。

Q【クリエイターモード】トップページに特定のカテゴリーの商品リストを表示させることはできますか。

上記の通り、公式では「できない」と書いてあることが「できる」という記事になります！そういった意味で有用な記事といえるので、本記事を執筆するに至りました。ぜひご覧ください。

はじめに

makeshopで特定のカテゴリーを表示させる必要があった経緯

実務経験でサイトマップページの作成をご依頼をいただいたことがきっかけです。

サイトマップについて

今回作成したサイトマップはWebサイトのフッターなどに表示されるHTMLサイトマップのことです。

サイトマップ作成のメリット

ウェブサイトの訪問者（ユーザー）に対して、どのようなページがあるかを伝えることができるので、ユーザーが求める情報に迅速にアクセスできるようになるというメリットがあります。

サイトマップページがどのような仕様であったか？

仕様から考えたこと

とのことでした。ただ全ての商品カテゴリーの一覧をループで表示させることはできるので、if文などを使用して、ループ内で特定の商品カテゴリーの一覧を表示することはできないのか？と考えました。

makeshopで特定の商品カテゴリーを表示させるための基礎知識

カテゴリー識別コードについて

Makeshopのシステムでは、各商品カテゴリーは一意の「カテゴリー識別コード」によって管理されています。このコードは通常、「ct」というプレフィックスに続く数値（例：ct30）で構成されており、ウェブサイト上で特定のカテゴリーを識別するための重要なキーとなります。識別コードは管理画面から確認することができるので表示させたい特定の商品カテゴリーの識別コードを把握しておきましょう。この識別コードを理解し、正しく利用することで、ウェブサイト上で特定のカテゴリーの商品を表示させることが可能になります。

条件分岐によるカテゴリー表示

条件分岐といえばif文ですがmakeshopでは下記のように使用します。

<{if 条件式}>
    <!-- 中身を記述 -->
<{/if}>

makeshopタグリファレンスについて

if文の条件式に当てはめる条件はmakeshopのタグリファレンスから参照します。

商品カテゴリーには「カテゴリー名」「カテゴリー識別コード」「カテゴリー画像URL」「総商品数」「商品表示中」といった、カテゴリー情報が格納されています。

makeshopのタグリファレンスを参照すると「カテゴリー識別コード」は下記になっています。

$category.code

したがって、if文を使用してカテゴリー識別コードが「ct30」という条件を指定する場合は下記のようにすれば良いです。

<{if $category.code == 'ct30'}>
    <!-- 中身を記述 -->
<{/if}>

条件式の否定はJavaScriptやPHPと同じで「!=」を使用すれば良いです。

<{if $category.code != 'ct30'}>
    <!-- 中身を記述 -->
<{/if}>

makeshopのタグリファレンスのURLは下記になります。

makeshopのタグリファレンス

makeshopでループを実装するには

下記はmakeshopのループのテンプレートになります。

<{section name=i loop=ループさせるタグ}>
    <!-- ループの中身を記述 -->
<{/section}>

以上の基礎知識を参考にして実際にソースコード例を書いていきます。

makeshopでループを使用して特定の商品カテゴリーを表示させるソースコード例

以下で、「特定の商品カテゴリー」「特定の商品カテゴリー以外」を表示させるソースコード例をそれぞれ書いていきます。

特定の商品カテゴリーのみを表示させる

カテゴリー識別コードが「ct30」のカテゴリーのみを表示する例です。

PR

<ul>
    <{section name=i loop=$category_menu.list}>
        <{if $category_menu.list[i].code == 'ct30'}>
            <li class="item-list">
                <a href="<{$category_menu.list[i].url}>">
                    <{$category_menu.list[i].name}>
                </a>
            </li>
        <{/if}>
    <{/section}>
</ul>

特定の商品カテゴリー以外の商品カテゴリーを表示させる

カテゴリー識別コードが「ct30」のカテゴリー以外の商品カテゴリーを表示する例です。

PR

<ul>
    <{section name=i loop=$category_menu.list}>
        <{if $category_menu.list[i].code != 'ct30'}>
            <li class="item-list">
                <a href="<{$category_menu.list[i].url}>">
                    <{$category_menu.list[i].name}>
                </a>
            </li>
        <{/if}>
    <{/section}>
</ul>

まとめ

この記事を通じて、Makeshopを使ったウェブサイト開発におけるカスタマイズの可能性が広がると思います！ぜひ参考にしていただければ幸いです。