KH-WEBLOG TOP > 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

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

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

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

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

コーディング・WordPress化作業を代行します

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事