ページ番号付きページナビの実装：カラーミーショップ | コーディング・プログラミング・WEB制作ブログ

ページ番号付きページナビの実装：カラーミーショップ

カラーミーショップの商品一覧ページなどのページナビ部分を

< 1 2 3 4 5 >

等のように表示する方法をメモ。

やり方は、ページナビを表示させたい部分に

<!-- 商品数・ページ送り -->
<div class="pageNav">
<{if $productlist_prev_page != ""}><span class="before"><a href="<{$productlist_prev_page}>">前のページへ</a></span><{/if}>

<!-- ページ内の表示商品数からページ数を取得 -->
<!-- 表示商品数はテンプレートの基本設定にあわせて変更してください -->
<{math equation="ceil($productlist_num/1ページに表示させる商品数)" assign="cData"}>

<!-- 現在のページを取得　最終ページ対策として切り上げ処理 -->
<{math equation="ceil($productlist_enum/1ページに表示させる商品数)" assign="eData"}>

<{if $productlist_num != 0}>

<{section name=num loop=$cData}>


<{if $productlist_sort_now == ""}>

<{if $eData == $smarty.section.num.iteration}>
<span class="carent"><{$smarty.section.num.iteration}></span>
<{else}>
<span><a href="<{$productlist_sort_def}>&page=<{$smarty.section.num.iteration}>">
<{$smarty.section.num.iteration}></a></span>
<{/if}>

<{elseif $productlist_sort_now == "p"}>

<{if $eData == $smarty.section.num.iteration}>
<span class="carent"><{$smarty.section.num.iteration}></span>
<{else}>
<span><a href="<{$productlist_sort_price}>&page=<{$smarty.section.num.iteration}>">
<{$smarty.section.num.iteration}></a></span>
<{/if}>

<{elseif $productlist_sort_now == "n"}>

<{if $eData == $smarty.section.num.iteration}>
<span class="carent"><{$smarty.section.num.iteration}></span>
<{else}>
<span><a href="<{$productlist_sort_new}>&page=<{$smarty.section.num.iteration}>">
<{$smarty.section.num.iteration}></a></span>
<{/if}>

<{/if}>

<{if $smarty.section.num.last == true}>

<{/if}>

<{/section}>

<{/if}>

<{if $productlist_next_page != ""}><span class="next"><a href="<{$productlist_next_page}>">次のページへ</a></span><{/if}>
</div>
<!-- // 商品数・ページ送り -->

と記述すればOK
あとはCSSでデザインをととのえればOK

注意点としては、１ページに表示させる商品数を変更したときに、上記のページナビ部分の

<!-- ページ内の表示商品数からページ数を取得 -->
<!-- 表示商品数はテンプレートの基本設定にあわせて変更してください -->
<{math equation="ceil($productlist_num/1ページに表示させる商品数)" assign="cData"}>

<!-- 現在のページを取得　最終ページ対策として切り上げ処理 -->
<{math equation="ceil($productlist_enum/1ページに表示させる商品数)" assign="eData"}>

の部分の1ページに表示させる商品数を忘れずに変更しないといけません。

案件探しに！絶対登録しておきたいクラウドソーシングサービス3選【評価と経験談】：ビジネス・副業