
カラーミーショップでカテゴリやグループの項目をリスト表示する
先日クライアントワークでご相談いただき、初めて触ったということもあり備忘録を残しておこうと思います。タイトルの通り、カラーミーショップを使ったサイトで、カテゴリアーカイブの項目をリストで表示させます。
Smartyとは
SmartyはPHPのテンプレートエンジンで色々なサービスに採用されています。カラーミーショップではこのSmartyが採用されており、サイトに登録されている商品データなどを扱う際に使うことになります。Smartyを使ったカラーミーでは独自タグを記述することで商品情報などを出力できる仕組みになっています。Smartyでコンテンツをループ表示させる
まずは、コンテンツをループ表示させる基本の形を覚えておきます。Smartyのsectionタグを使います。sectionでループを開始し、if文のfirstでセクションのヘッダー部、lastでセクションのフッター部を出力します。このセクションヘッダーとセクションフッターの間にある部分がループ表示されます。 【sample.tpl】※一部抜粋<!-- ループセクション start -->
<{section name=num loop=$group}>
<!-- ループセクションヘッダー start -->
<{if $smarty.section.num.first}>
<ul>
<{/if}>
<!-- ループセクションヘッダー end -->
<!-- ループ開始 -->
<li><{$group[num].name}>
</li>
<!-- ループ終了 -->
<!-- ループセクションフッター start -->
<{if $smarty.section.num.last}>
</ul>
<{/if}>
<!-- ループセクションフッター end -->
<{/section}>
<!-- ループセクション end -->
sectionタグのloop属性にカテゴリーやグループなど表示対象となる値を指定することで、登録されている項目がリスト表示されます。categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)