こんにちは、コブラです。

今年も残すところ、３か月を切りました。

今日は「カラーミー」というCMSのカスタマイズについて書いていきます。

カラーミーとは、ネットショップ作成サービスです。

ブラウザ上で簡単、手軽にオンラインショップを開店できる便利なサービスです。

詳しくは公式サイトを見て頂ければと思いますので、さっそく本題です。

カラーミーでは、商品数が多いカテゴリは自動的にページング処理が行われます。

デフォルトではこんな感じです。

これを、皆さんなじみのある形にしたいと思います。

まずは、カラーミーで管理画面を開き、

ショップ作成 > デザイン設定 > デザイン編集 > 商品一覧の『HTML CSS編集』ボタンを押下。

ページングの部分をコメントアウトしてしまいます。

（クリックで拡大）

次に、すぐ下に以下のコードを追加してください。

<{$productlist_num}>件見つかりました。<br />
<{$productlist_snum}>件～<{$productlist_enum}>件を表示しています。<br />
<{if $productlist_prev_page != ""}><a href="<{$productlist_prev_page}>">
前のページへ</a>&nbsp;&nbsp;&nbsp;<{/if}>
<{math equation="ceil($productlist_num/12)" assign="cData"}>
<!-- 現在のページを取得　最終ページ対策として切り上げ処理 -->
<{math equation="ceil($productlist_enum/12)" assign="eData"}>
<{if $productlist_num != 0}>
 <{section name=num loop=$cData}>
 |
 <{if $productlist_sort_now == ""}>
 <{if $eData == $smarty.section.num.iteration}>
 <{$smarty.section.num.iteration}>
 <{else}>
 <a href="<{$productlist_sort_def}>&page=<{$smarty.section.num.iteration}>">
 <{$smarty.section.num.iteration}></a>
 <{/if}>
 <{elseif $productlist_sort_now == "p"}>
 <{if $eData == $smarty.section.num.iteration}>
 <{$smarty.section.num.iteration}>
 <{else}>
 <a href="<{$productlist_sort_price}>&page=<{$smarty.section.num.iteration}>">
 <{$smarty.section.num.iteration}></a>
 <{/if}>
 <{elseif $productlist_sort_now == "n"}>
 <{if $eData == $smarty.section.num.iteration}>
 <{$smarty.section.num.iteration}>
 <{else}>
 <a href="<{$productlist_sort_new}>&page=<{$smarty.section.num.iteration}>">
 <{$smarty.section.num.iteration}></a>
 <{/if}>
 <{/if}>
 <{if $smarty.section.num.last == true}>
 |
 <{/if}>
 <{/section}>
<{/if}>
<{if $productlist_next_page != ""}>&nbsp;&nbsp;&nbsp;<a href="<{$productlist_next_page}>">
次のページへ</a><{/if}>
<!-- // 商品数・ページ送り -->

赤文字の「12」の部分が、１ページに表示したい商品数です。

自サイトに合わせて変えてください。

個々の細かい説明は割愛しますが、こんな感じになるはずです。（CSSも適宜使ってください）

こんな感じになりました。

グッと使いやすくなりましたよね？

カラーミーにてネットショップをお持ちの方は、ぜひ導入してみてください。

Tweet

カラーミー, 社員：cobra