カラーミーでページャーをリストで表示する方法

6066 Views
ECサイトカラーミー
カラーミーでページャーをリストで表示する方法

カラーミーでページングを実装したい!
と思い、カスタム用のテーマ内の記述を探したところ見つからない、、、

正確には「次へ」「前へ」はあるのですが数字でのページ送りがなかったため、Google先生で調べたところやはりありました!

今回はulを使ったリストで実装をしたかったので少しだけコードを編集してあります。

SNSでシェア♪

スポンサーリンク

ページャーを設置したいところに以下のコードを

 

<!-- 1ページに表示する商品数(テンプレートの設定に合わせる) -->
<{assign var='products_per_page' value=12}>

<!-- 必要な変数を設定 -->
<{assign var='current_page' value=1}>
<{if $productlist_prev_page != ''}>
	<{assign var='productlist_page_url' value=$productlist_prev_page|regex_replace:'|page=\d+|':'page='}>
	<{assign var='current_page' value=$productlist_prev_page|regex_replace:'|^.*page=(\d+).*|':'$1'}>
	<{assign var='current_page' value=$current_page+1}>
<{elseif $productlist_next_page != ''}>
	<{assign var='productlist_page_url' value=$productlist_next_page|regex_replace:'|page=\d+|':'page='}>
	<{assign var='current_page' value=$productlist_next_page|regex_replace:'|^.*page=(\d+).*|':'$1'}>
	<{assign var='current_page' value=$current_page-1}>
<{/if}>

<{assign var='page_max' value=0}>
<{assign var='tmp_page_count' value=$productlist_num}>
<{section name=page start=1 loop=$productlist_num}>
	<{if $tmp_page_count > 0}>
		<{assign var='page_max' value=$page_max+1}>
	<{/if}>
	<{assign var='tmp_page_count' value=$tmp_page_count-$products_per_page}>
<{/section}>

<!-- ここから表示 -->
<ul class="pager">
	<{if $productlist_prev_page != ""}>
		<li><a href="<{$productlist_prev_page}>">&lt; 前へ</a></li>
	<{/if}>
	<{section name=page start=1 loop=$page_max+1}>
		<{assign var='tmp_page' value=$smarty.section.page.index}>
		<{if $current_page == $tmp_page}>
			<li class="current"><span><{$tmp_page}></span></li>
		<{else}>
			<li><a href="<{$productlist_page_url}><{$tmp_page}>"><{$tmp_page}></a></li>
		<{/if}>
	<{/section}>
	<{if $productlist_next_page != ""}>
		<li><a href="<{$productlist_next_page}>">次へ &gt;</a></li>
	<{/if}>
</ul>

以上です!

注意点としては2行目で1ページに表示できるアイテムの数を設定する箇所があるところだと思います。

私の設定では1ページに12件までしか表示しない設定にしていたので「12」となっております。

 

参考サイト

商品一覧にページ番号をつける

ありがとうございます!

 

 

以上〜

 

SNSでシェア♪

スポンサーリンク

関連記事