【クリエイターモード】カテゴリーページ、検索結果のページャーに「最初」「前」「次」「最後」のリンクを追加することはできますか？ – makeshop よくある質問

カテゴリーページの「ページャー」に関する変数タグを使用して、
ソース（HTML）を作成することでリンクを表示させることができます。

■クリエイターモードタグ

商品カテゴリー / ページャー
https://reference.makeshop.jp/creator-mode/contents/category/index.html#category-pager

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー

「HTML」欄

最初へ（first）

<{if !$category.pager.is_first}>
	<a href="<{$category.pager.first_url}>">最初へ</a>
<{/if}>

最後へ（last）

<{if !$category.pager.is_last}>
	<a href="<{$category.pager.last_url}>">最後へ</a>
<{/if}>

ひとつ前へ（prev）

<{if !$category.pager.is_first}>
	<a href="<{$category.pager.prev_url}>">前へ</a>
<{/if}>

ひとつ次へ（next）

<{if !$category.pager.is_last}>
   <a href="<{$category.pager.next_url}>">次へ</a>
<{/if}>

ページャーのページ数は

<{section name=i loop=$category.pager.list}>
  ～
<{/section}>

というループで記述されています。（ソースはデザインテンプレートによって異なります。）
「最初へ」「前へ」はこのソースの前方に、
「次へ」「最後へ」はこのソースの後方に記述してください。

＜記述例＞
デザインテンプレート【Complete】に適用した例

<{if $category.pager.has_item}>
<ul class="pager">
    <{if !$category.pager.is_first}>
        <li><a href="<{$category.pager.first_url}>"><span class="prev">一番前へ</span></a></li>
	<li><a href="<{$category.pager.prev_url}>"><span class="prev">前へ</span></a></li>
    <{/if}>

    <{section name=i loop=$category.pager.list}>
    <{if $category.pager.list[i].is_current_page}>
        <li><span class="current"><{$category.pager.list[i].number}></span></li>
    <{else}>
        <li><a href="<{$category.pager.list[i].url}>"><span><{$category.pager.list[i].number}></span></a></li>
    <{/if}>
    <{/section}>

    <{if !$category.pager.is_last}>
    	<li><a href="<{$category.pager.next_url}>"><span class="next">次へ</span></a></li>
        <li><a href="<{$category.pager.last_url}>"><span class="next">最後へ</span></a></li>
    <{/if}>
</ul>
<{/if}>

「商品検索結果」ページも同様に、変数タグを使用してHTMLを記述してください。

関連リンク：
上記の $category.pager の箇所を
$search.pager という記述に変更することで
検索結果ページにて同様のページャーの表示が可能です。

■クリエイターモードタグ

商品検索結果 / ページャー
https://reference.makeshop.jp/creator-mode/contents/search/index.html#search-pager

＜記述例＞

<!--ページャー-->
<div class="pager-wrap">
    <p class="total-count">（全<span><{$search.total_count}></span>件）<{$search.display_count}>件表示</p>
    <{if $search.pager.has_item}>
    <ul class="pager">
    <{if !$search.pager.is_first}>
        <li><a href="<{$search.pager.first_url}>"><span class="prev">一番前へ</span></a></li>
    <li><a href="<{$search.pager.prev_url}>"><span class="prev">前へ</span></a></li>
    <{/if}>


    <{section name=i loop=$search.pager.list}>
    <{if $search.pager.list[i].is_current_page}>
        <li><span class="current"><{$search.pager.list[i].number}></span></li>
    <{else}>
        <li><a href="<{$search.pager.list[i].url}>"><span><{$search.pager.list[i].number}></span></a></li>
    <{/if}>
    <{/section}>


    <{if !$search.pager.is_last}>
        <li><a href="<{$search.pager.next_url}>"><span class="next">次へ</span></a></li>
        <li><a href="<{$search.pager.last_url}>"><span class="next">最後へ</span></a></li>
    <{/if}>
    </ul>
    <{/if}>
</div>

<{else}>
    <p class="empty">ご指定の条件に一致する商品が見つかりませんでした</p>
<{/if}>

関連記事