CSSのレイアウトを維持したい

質問

現在ネットショップを作成しています。
こちらのサイトの[ 一覧で並べる | 詳細で並べる ] のように、一覧と詳細の切替えが出来るようにカスタマイズしたいのです。
https://www.ec-saja.jp/mars/shopping_list.cfm?uk=0

現在以下のJava Scriptを使って表示方法を切替えようとしています。

Switch Display Options
http://www.sohtanaka.com/web-design/examples/display-switch/

１つのカテゴリに２４アイテムあったとして、1ページ内に１２アイテムを表示させます。
この状態で詳細から一覧に表示を切替えるところまでは出来ました。
ただ、のこりの12アイテムを見る為、ページナビゲーションの２ページ目へ推移すると、一覧に切替えたものが元の詳細に戻ってしまいます。

こちらの一覧・詳細表示のレイアウトを次のページでも維持し続けるにはどうしたらよいのでしょうか？

なんとなくCookieに情報を残し、読み込みに行くようにすればいいのではと思い、Googleで色々検索したのですが、現在のScriptにどう組み込めばそのように動作するのかがわかりません…

方法をご存じの方がおられましたら、アドバイスをお願い出来ないでしょうか(TωT)ウルウル

回答No.1

yyr446

jQueryの.toggle()イベントで一覧・詳細を切り替えている見たいですね。
別ページのjavascriptやCSSを操作する事は出来ないので、おっしゃるように
cookieを使って、前に見たとき詳細だったか一覧だったかを保存し、
次ページが開かれる時、cookieの値によって、切り替えるといったところでしょうか。最初のページで
$(document).ready(function(){
$("a.switch_thumb").toggle(一覧のファンクション,詳細切り替えのファンクション);
});
とやっているので、両方のぺーじとも同じスクリプトとcssを使って、
次ページではcookieの値によって、一覧のファンクション又は詳細切り替えのファンクションを実行する処理を
$(document).ready(function(){
に加えればよいかと思います。
cookieの操作は自分でやってもいいですが、jQuery使っているなら
jquery.ooCookie.js(プラグイン）がお手軽そうです。
http://plugins.jquery.com/project/ooCookie

抜本的な解決策として、そもそも次ページにする必要あるのですか？
jQueryをお使いなら、jQueryを使って1パージで12アイテムづつ表示させる
仕組みを作ればよいような気がします。

お礼

yyr446さん

丁寧にお答えいただきありがとうございます。
やっぱりCookieで対応するのが良さそうですね。。

現在ECサイトはphpで作成していまして、一つのカテゴリに５０～１００ぐらいの商品を登録する予定です。
全部の商品を読み込んでその後にjQueryで制御すれば良いのかもしれませんが、値段ごとにソートしたり、名前でソートしたり、在庫数でソートしたりと表示順を切替えする必要があり、すべてをJavaScriptで制御出来るほど私が詳しくありません…

であれば、Cookieで受け渡す方がシンプルかと思ったのです。
その為、今回の該当部分だと思われる以下の箇所に、
---------------------------------------
$("a.switch_thumb").toggle(
function(){
$(this).addClass("swap");
$("ul.display").fadeOut(150, function() {
$(this).fadeIn(150).addClass("thumb_view");
});
},
function(){
$(this).removeClass("swap");
$("ul.display").fadeOut(150, function() {
$(this).fadeIn(150).removeClass("thumb_view");
});
});
});
---------------------------------------
Googleで検索し、Cookieについていろいろ試して見たのですが、どれもうまくいかず、こちらに質問した次第です。。

$(document).ready(function(){に処理を加えれば良いとのことで、もう少しそのあたりを検索して勉強してみます(´xдx`)