ViewsブロックのAJAXページャーとブラウザのバックボタン

Events happening in the community are now at Drupal community events on www.drupal.org.
hiro.t's picture

どうにも暗礁に乗り上げつつありますので、アドバイスをお願いいたします。

【前提】
https://thinkit.co.jp/article/10078?page=0%2C1
のように、Viewsのブロックで、製品紹介の一覧を表示します。
AJAXを利用を、はいにします。
ページャーをクリックすると、製品紹介の一覧がページ遷移なしで切り替わります。

環境 Durpal 8.2.5 PHP 7.0.2 です。

【行いたいこと】
■1
今、1ページ目を表示しています。
次に、2ページ目をクリックして表示します。
次に、ブラウザのバックボタンを押します。
この時、その前に表示していたページ(1ページ)を表示したいのです。
あるいは、
■2
nページ目を表示しています。その中の製品をクリックして製品の詳細ページを表示します。ブラウザのバックボタンを押します。この時、nページ目を表示したいのです。

これをどのように実現すれば良いでしょうか?
Windows10のChrome、Edge、アンドロイドのChromeでは、こうした動作になりません。iOSのSafari,FireFox,ChromeはOKです。Windows10のFireFoxもOKです。

・ブロックではなく、ページで作成し、AJAXを利用しないのなら、ページが遷移するのでOKのようです。しかし、今回はブロックを利用することが前提なのです。
・また、ブロックでAJAXを利用するのは、Exposed formを利用するために必要です。

デザイナーに作成して頂いた、jQuery(document).ready(function () を実行した時に、pushStateを利用する方法では、一部解決しましたが、ページが1ページのみ表示されている時には、機能しませんでした。アクティブになっているページャーに設定されたURLを読み取る処理ですが、1ページのみ表示されている時は、ページャー自体が表示されずそのURLが無いため、機能しないためのようです。

Bプランとしては、iOSは問題ないので、PCの場合に対応していないブラウザは、詳細ページを別ウインドウで表示することも考えています。ただし、アンドロイドのブラウザで、別ウインドウを表示するのは操作性が悪いと思います。ブラウザのバックボタンで、ユーザーの意図したとおりの画面を表示できるようになればと思っています。

上手な解決方法を、ご教授お願いいたします。

Comments

shumpei's picture

こんにちは。
以前に似たようなことをやったことがあります。

1ページのみ表示されている時は、ページャー自体が表示されずそのURLが無いため、機能しないためのようです

上記が解決すれば正常に動作する状況でしょうか?そうであれば、アクティブになっているページャーに設定されたURLを読み取る処理の前に、ページャーがあるかをチェックする処理を入れれば大丈夫だと思います。他にも問題あるようでしたら、コメントお願いします。

また、蛇足ですが、DrupalでJSを書く場合はjQuery(document).readyの代わりに

Drupal.behaviors.myBehavior = {
  attach: function(){}
}

としたほうが、キレイに書けますし、色々便利です(https://www.drupal.org/node/2269515)。

ありがとうございます

hiro.t's picture

早速の助言ありがとうございます。JSを書いてもらい、試してみます。
こうした処理はニーズがあると思うのですが、参考になりそうな情報になかなかたどり着けなくて厳しい状態でした。これで解決するなら良いのですが、うまく機能しない部分が出たら、またご助言頂けますと助かります。
JSのより良い書き方の情報もありがとうございました。

日本 コミュニティ: Drupal Japan User Group

Group organizers

Group categories

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: