トップページでのページャー問題とその解決方法
a-blog cms LIVE Vol.3 の「トップページでのページャー問題とその解決法を初心者に紹介」で紹介した内容をブログに残しておきます。
ウェブサイトのトップページのコンテンツとして、上記のように2つのモジュールに対してページャーを用意するような実装については、a-blog cms では残念ながらできない実装となります。
その理由としては、どちらのモジュールのページャーをクリックしても、 https://domain.com/page/2/ のような URL となり、2つのモジュールが次のページに進んでしまいます。
解決方法の解答は「ポストインクルード」を利用すること
通常は、以下のように検索フォームを作るところを
<form action="" method="post">
<input type="text" name="keyword" value="" size="15" />
<input type="hidden" name="bid" value="%{BID}" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>form タグに class="js-post_include" を追加し、実行後の表示する際に必要な条件と、テンプレートを指定する事でページの遷移無しに表示させることができるようになります。
<form action="" method="post" class="js-post_include" target="#jsChangeContents">
<input type="text" name="keyword" value="" size="15" />
<input type="hidden" name="bid" value="%{BID}" />
<input type="hidden" name="tpl" value="include/entry/body.html" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>上記は、検索フォームのサンプルでページャーではありませんが、ページャーとして実装すると以下のような表示になります。
ページャーをポストインクルードで実装する際には
以下のコードを利用する事で、次に表示させたいページの情報をモジュールに渡すことができます。
<!-- BEGIN forwardLink -->
<input type="hidden" name="page" value="{forwardPage}" />
<!-- END forwardLink -->検索結果の条件をつけたページャーの実装
こんなフォームがあった際のページャーのサンプルを共有しておきます。
ポイントとしては、検索結果を表示させるには Field_Search モジュール を利用すること。チェックボックスの条件については、配列としてマークアップする必要がある。 name="blood" ではなく name="blood[]" と書き、blood:loop ブロックを用意し、複数件データがあれば複数件のタグを生成するように実装すること。
<!-- BEGIN forwardLink -->
<form action="" method="post" class="js-post_include" style="text-align: center" >
<input type="hidden" name="tpl" value="/include/member/summary-custom-post_include-more.html" />
<input type="hidden" name="bid" value="%{BID}" />
<input type="hidden" name="page" value="{forwardPage}" />
<!-- BEGIN_MODULE Field_Search -->
<input type="hidden" name="namae" value="{namae}" />
<input type="hidden" name="field[]" value="namae" />
<input type="hidden" name="namae@operator" value="lk" />
<input type="hidden" name="gender" value="{gender}" />
<input type="hidden" name="field[]" value="gender" />
<input type="hidden" name="pref" value="{pref}" />
<input type="hidden" name="field[]" value="pref" />
<!-- BEGIN blood:loop -->
<input type="hidden" name="blood[]" value="{blood}" />
<!-- END blood:loop -->
<input type="hidden" name="field[]" value="blood" />
<!-- END_MODULE Field_Search -->
<input type="submit" name="ACMS_POST_2GET" value="もっと見る" class="acms-admin-btn acms-admin-btn-large" />
</form>
<!-- END forwardLink -->ポストインクルードの準備
初心者でない人だったとしても、Ver. 2.11.25 以降は、新規にインストールすると tplコンテキスト の設定が無効になるような設定になりました。 「ポストインクルードの準備」が必要になったということだけ覚えておいてください。
動画でみる
詳しくは、実際の動画で説明をご覧ください。 全部で 26分間くらいの内容になっております。
