カラーミーショップ 商品一覧ページ 独自タグを使ってカテゴリリストを表示する
こんばんは♪
アウトドア・スポーツ・ファッション を中心にネットショップを運営してます。
DYNT COYOTE ディントコヨーテです！
いよいよ平成も明日一日で終わりとなります。
令和ブームには乗り遅れてしまいました！
Tシャツでも作っておけばよかったなと・・・
当店はカラーミーさんを使ってショップを運営しておりますが、
いろいろとカスタマイズしてますので、その過程で悩んだことなどを
記録していこうと思います！
カラーミーさんでは有料テンプレートを買ってしまえば簡単に
おしゃれなショップが作れるのですが、これが中々いいお値段なので
中々手が出せませんでしたｗ
ということでもったいから自分で勉強がてらカスタマイズしようと思い、
試行錯誤で頑張っております・・
これから始める方や同じように独自でカスタマイズしてる方などの参考になればと思います。
今回はタイトルの通り
「カラーミーショップ 商品一覧ページ 独自タグを使ってカテゴリリストを表示する」
ということをやってみました。
こちらは作成イメージ↓↓↓
左の写真のようにカラーミーで作成した「カテゴリリスト」や「グループリスト」を独自タグを使って、リストの数分だけループして取得、表示してます。
これだとカテゴリやグループが増える毎に一々修正する必要がありません。
当店ではグループにブランドを登録してます。
カラーミーにカテゴリを追加すれば自動でリストとして表示されます。
グループリストも同じような処理をしています。
ちなみに「商品詳細ページ」や「検索ページ」なんかでも使えるはずです！ぜひお試しください。
「カラーミーショップ の独自タグ」
カラーミーショップでは写真の↓独自タグを使うことによってデータを表示することが可能です。今回は大カテゴリーのリストとグループのリストを使いました。
独自タグのページはこちら↓
独自タグ一覧（PC、スマートフォン） | カラーミーショップ マニュアル
「実例サンプルコード」
カラーミーでは下記のようなコードでループ処理を使うことができます。
<{section name=num loop=$productlist}> ・ ・ （ここがループ） ・ <{/section}>
それでは実際に使っているコードです。
※カテゴリ一覧をループ処理で取得しています。赤字の箇所が
カテゴリのリンク（<{$category[num].link_url}>）とカテゴリ名<{$category[num].name}>を取得しています。
<{$category[num].img_url}>はカテゴリ登録の際に登録した画像を取得しています。
作成イメージのカテゴリ名の左側に出ているサムネイルみたいな画像です。
画像が不要な場合は<img width="10%" src="<{$category[num].img_url}>">を削除してお使いください。
■■■■■■■■■■■■■■■■■■ カテゴリリスト取得 ■■■■■■■■■■■■■■■■■■■■■■
<ul>
<{section name=num loop=$category}>
<li><a href="<{$category[num].link_url}>"><img width="10%" src="<{$category[num].img_url}>"><{$category[num].name}></a></li>
<{/section}>
</ul>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
※グループ一覧をループ処理で取得しています。赤字の箇所が
グループのリンク（<{$group[num].link_url}>）とグループ名<{$group[num].name}>を取得しています。
見ていただくと分かると思いますが、「category」が「group」に変わっているだけです。
■■■■■■■■■■■■■■■■■■ グループリスト取得 ■■■■■■■■■■■■■■■■■■■■■■
<ul>
<{section name=num loop=$group}>
<li><a href="<{$group[num].link_url}>"><{$group[num].name}></a></li>
<{/section}>
</ul>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
以上で、表示できると思います。
結構簡単にできちゃいますのでぜひお試しください。
ご質問等もお受けしますのでお気軽に質問してください。
また制作のご依頼も承ります。
詳細は特に決めてませんがこんなページが作りたいなどのご依頼もお待ちしてます！
出来る範囲でですが。
次回のカラーミーTIPSの更新は未定ですが、これは使えると思ったものをご紹介致します。今はカラーミー用にリアルタイム受注表示などを作ってみたいです出来るかわかりませんがｗ
それでは良い平成の夜をお過ごしください♪
