JavaScriptでCookieの保存と読み込み

回答によっては最高4000ポイントを謝礼致します。

このJavaScriptを使って
http://designm.ag/tutorials/jquery-display-switch/

自社のECサイトで以下のサイトの[一覧で並べる][詳細で並べる]の表示切替のような動作を実現したいと思っています。

https://www.ec-saja.jp/mars/shopping_list.cfm?uk=0

ただこのScriptは表示方法を記憶しない為、1ページ目から2ページ目に移動すると、表示が元に戻ってしまいます。
いろいろ考えた結果、Cookieに表示方法を保存して読み込むのが一番良いのではと思いました。
以下の記述が表示を切替えている箇所だと思われるのですが、以下のScriptにどう追記すればイベントが発生した際にCookieに書込み、次のページに推移した時もCookieから設定を読み込んで表示方法を維持させることが出来るでしょうか?

$("a.switch_thumb").toggle(
function(){
$(this).addClass("swap");
$("ul.display").fadeOut(150, function() {
$(this).fadeIn(150).addClass("display");
});
}, ~~~~文字数制限の関係で以降はカットさせていただきます…

具体的なScriptの記述をお願い致します。

回答の条件
  • 1人5回まで
  • 登録:2009/11/04 12:52:49
  • 終了:2009/11/04 20:31:57

ベストアンサー

id:HALSPECIAL No.4

HALSPECIAL回答回数407ベストアンサー獲得回数862009/11/04 20:10:51

ポイント4000pt

再回答ですみません。

次のコードでいかがでしょうか?

<script type="text/javascript" src="./test/jquery-latest.js"></script>
<script type="text/javascript" src="./test/jquery.cookie.js"></script> <!-- ★ここを追加(パスは適宜変更する) -->


<!-- ★ここから -->
<script type="text/javascript">
var defVt = $.cookie('defaultViewType');
if(defVt==null){
	$.cookie('defaultViewType', '1');
	defVt = '1';
}

$(document).ready(function(){
	$("a.switch_thumb").toggle(function(){
		if(defVt=='1'){
			$.cookie('defaultViewType', '2');
			$(this).removeClass("swap");
			$("ul.display").fadeOut("fast", function() {
				$(this).fadeIn("fast").removeClass("thumb_view");
			});
		}else{
			$.cookie('defaultViewType', '1');
			$(this).addClass("swap"); 
			$("ul.display").fadeOut("fast", function() {
				$(this).fadeIn("fast").addClass("thumb_view"); 
			});
		}
	}, function () {
		if(defVt=='1'){
			$.cookie('defaultViewType', '1');
			$(this).addClass("swap"); 
			$("ul.display").fadeOut("fast", function() {
				$(this).fadeIn("fast").addClass("thumb_view"); 
			});
		}else{
			$.cookie('defaultViewType', '2');
			$(this).removeClass("swap");
			$("ul.display").fadeOut("fast", function() {
				$(this).fadeIn("fast").removeClass("thumb_view");
			});
		}
	}); 
});
</script>
<!-- ★ここまでを書き変えてください -->




<!-- ★ここのタグをコメントにして、
<a href="#" class="switch_thumb swap">Switch Thumb</a> 

<ul style="display: block;" class="display thumb_view">
-->

<!-- ★ここから -->
<script type="text/javascript">
	if(defVt=='1'){
		document.write('<a href="#" class="switch_thumb swap">Switch Thumb</a>');
		document.write('<ul style="display: block;" class="display thumb_view">');
	}else{
		document.write('<a href="#" class="switch_thumb">Switch Thumb</a>');
		document.write('<ul style="display: block;" class="display">');
	}
</script>
<!-- ★ここまでのスクリプトで置き換えてください。 -->

※トグルボタンの初期値設定ができなかったので、あまりキレイでなくなってしまいました。

id:touya-akane

HALSPECIAL様

再度ご回答いただきありがとうございます!

完璧です!まったく問題ありません!

私が思い描いた通りに動作しております。

とても助かりました。本当にありがとうございます。

お約束の謝礼4000ポイントをお支払いさせていただきます。

2009/11/04 20:29:48

その他の回答(3件)

id:y-kawaz No.1

y-kawaz回答回数1421ベストアンサー獲得回数2262009/11/04 13:11:50

ポイント20pt

表示切り替えのリンクの部分を以下のようにして、

[
<a href="#" onclick="document.toform.page_type.value=0;document.toform.submit();document.cookie='page_type=0';" class="this-paging">一覧で並べる</a> 
|
<a href="#" onclick="document.toform.page_type.value=1;document.toform.submit();document.cookie='page_type=1';" >詳細で並べる</a> 
]

ページの下の方に以下のようなscriptを埋めておくのはどうでしょう?

<script type="text/javascript">
if(document.cookie && document.cookie.match(/page_type=0/)) {
  document.toform.page_type.value=0;
} else {
  document.toform.page_type.value=1;
}
</script>

このサイトの場合はサーバ側でCookieの処理をした方が良さそうではありますが、Javascriptだけでやる場合はこんな感じでいけるかと。

ただし、テストはしてないので動かないかもしれません(^^;;;

id:touya-akane

回答ありがとうございます。

早速試させていただきましたが、うまく動作しませんでした。

私はJavaScriptについて初心者ですので的外れなことを言うかも知れませんが、ご了承ください。

このスクリプトですが、class="switch_thumb"を元にCSSを書き換えていると思うのです。

記載いただきましたスクリプトにclass="switch_thumb"を追記してみましたが、うまく動作せず、ページ下部に記載するIFの箇所にCSSを書き換えるScriptを記載してみましたが、うまく切り替わらないようです。

2009/11/04 15:30:34
id:mattn No.2

mattn回答回数104ベストアンサー獲得回数232009/11/04 15:19:18

ポイント20pt

商品の一覧等の場合は、特に別のお客さんへのクチコミが重要になります。お客さんはこのURLをもって他の人に知らせる事になるのでソート条件がクッキーに保存されている様なページを他の人に知らせてしまうと、教えたい人に期待通りに伝わらない事になります。可能ならばクエリパラメータにソート条件も渡してあげるのが良いかと思いますがいかがでしょうか。

id:touya-akane

回答ありがとうございます。

ご質問に対し、的外れな回答かも知れませんがお許しください。

ECサイト自体はPHPで構築しております。ソートに関してはCookieなどで処理せずURLにパラメータを含めてソートしておりますので、問題ございません。

表示のレイアウトのみJavaScript側で担当させたいのです。

本来PHP側でレイアウトを切替えれば良いのですが(PHP側で処理してのレイアウト切り替えと維持は問題なく出来ます)、いろいろなことを勘案・思案した中でどうしてもJavaScript側での切替えも実現させたいのです。

どうぞよろしくお願いします。

2009/11/04 15:38:33
id:HALSPECIAL No.3

HALSPECIAL回答回数407ベストアンサー獲得回数862009/11/04 15:23:36

ポイント22pt

まず、

jquery.cookie.js をダウンロードします。

jquery.cookie.js | jQuery Plugins

次のようにスクリプトを変更してみてください。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.cookie.js"></script> <!-- ★ここを追加(パスは適宜変更する) -->
<script type="text/javascript">
$(document).ready(function(){
 
	$("a.switch_thumb").toggle(function(){
		$(this).addClass("swap"); 
		$("ul.display").fadeOut("fast", function() {
			$(this).fadeIn("fast").addClass("thumb_view"); 
		});
		$.cookie('viewType', '0'); //★ここを追加
	}, function () {
		$(this).removeClass("swap");
		$("ul.display").fadeOut("fast", function() {
			$(this).fadeIn("fast").removeClass("thumb_view");
		});
		$.cookie('viewType', '1'); //★ここを追加
	}); 

});
</script>

<!-- ここから -->
<script type="text/javascript">
window.onload = function ini(){
	var vt = $.cookie('viewType');
	if(vt==null){
		$.cookie('viewType', '0'); //★cookieをセット
		vt = 0;
	}
	if(vt=='0'){
		  $(this).addClass("swap"); 
		  $("ul.display").fadeOut("fast", function() {
		  	$(this).fadeIn("fast").addClass("thumb_view"); 
			 });
	}else{
	      $(this).removeClass("swap");
		  $("ul.display").fadeOut("fast", function() {
		  	$(this).fadeIn("fast").removeClass("thumb_view");
			});
	}
}
</script>
<!-- ここまでを追加してください -->

id:touya-akane

ありがとうございます!

私が理想としていた動作で完璧です!

ただ一点問題が新たに発生してしまいました…

これは私が浅はかだった為におこったことになりますが、ご提案いただいた記述ですと詳細表示の状態で2ページ目に切替える分には問題ないのですが、一覧表示に切替えてから2ページを開きますと一瞬詳細表示(説明文付)が表示され、その後すぐに一覧表示に切り替わると言った動作が行われてしまいます。

また詳細表示から一覧表示に切替えて2ページ目に推移、2ページ目で表示方法を詳細表示に戻そうとしても、1度目のクリックでは再度一覧表示が読み込まれ、もう一度クリックすると詳細表示に切り替わります。

ページを推移する度にこの動作がおこっては見栄え的にも良くないので、この問題も改善出来るととてもとても助かるのですが…

何か方法がございましたらご回答をお願い出来ませんでしょうか。

ちなみに実際の動作をご確認いただければと思い、設置いたしました。

http://www.sanvitalia.net/1.htm

こちらのページよりご確認いただければ幸いです。

2009/11/04 16:28:13
id:HALSPECIAL No.4

HALSPECIAL回答回数407ベストアンサー獲得回数862009/11/04 20:10:51ここでベストアンサー

ポイント4000pt

再回答ですみません。

次のコードでいかがでしょうか?

<script type="text/javascript" src="./test/jquery-latest.js"></script>
<script type="text/javascript" src="./test/jquery.cookie.js"></script> <!-- ★ここを追加(パスは適宜変更する) -->


<!-- ★ここから -->
<script type="text/javascript">
var defVt = $.cookie('defaultViewType');
if(defVt==null){
	$.cookie('defaultViewType', '1');
	defVt = '1';
}

$(document).ready(function(){
	$("a.switch_thumb").toggle(function(){
		if(defVt=='1'){
			$.cookie('defaultViewType', '2');
			$(this).removeClass("swap");
			$("ul.display").fadeOut("fast", function() {
				$(this).fadeIn("fast").removeClass("thumb_view");
			});
		}else{
			$.cookie('defaultViewType', '1');
			$(this).addClass("swap"); 
			$("ul.display").fadeOut("fast", function() {
				$(this).fadeIn("fast").addClass("thumb_view"); 
			});
		}
	}, function () {
		if(defVt=='1'){
			$.cookie('defaultViewType', '1');
			$(this).addClass("swap"); 
			$("ul.display").fadeOut("fast", function() {
				$(this).fadeIn("fast").addClass("thumb_view"); 
			});
		}else{
			$.cookie('defaultViewType', '2');
			$(this).removeClass("swap");
			$("ul.display").fadeOut("fast", function() {
				$(this).fadeIn("fast").removeClass("thumb_view");
			});
		}
	}); 
});
</script>
<!-- ★ここまでを書き変えてください -->




<!-- ★ここのタグをコメントにして、
<a href="#" class="switch_thumb swap">Switch Thumb</a> 

<ul style="display: block;" class="display thumb_view">
-->

<!-- ★ここから -->
<script type="text/javascript">
	if(defVt=='1'){
		document.write('<a href="#" class="switch_thumb swap">Switch Thumb</a>');
		document.write('<ul style="display: block;" class="display thumb_view">');
	}else{
		document.write('<a href="#" class="switch_thumb">Switch Thumb</a>');
		document.write('<ul style="display: block;" class="display">');
	}
</script>
<!-- ★ここまでのスクリプトで置き換えてください。 -->

※トグルボタンの初期値設定ができなかったので、あまりキレイでなくなってしまいました。

id:touya-akane

HALSPECIAL様

再度ご回答いただきありがとうございます!

完璧です!まったく問題ありません!

私が思い描いた通りに動作しております。

とても助かりました。本当にありがとうございます。

お約束の謝礼4000ポイントをお支払いさせていただきます。

2009/11/04 20:29:48
  • id:HALSPECIAL
    HALSPECIAL 2009/11/04 20:46:21
    たくさんのポイントありがとうございました。
    lastToggleというプロパティでトグルの値を取得できるらしいのですが、初期設定としてセットできませんでした。
    初期設定ができる方法がわかればもっとスマートになると思います。
  • id:touya-akane
    こちらこそありがとうございました。
    HALSPECIALさんに割いていただいた時間と技術を思えば安いものです。

    lastToggleについて調べて見ましたが、確かにこちらが動作すればもっとスマートになりそうですね。
    ですが今回の内容で十分満足しています。

    cgiやphp、Javaのプログラマなら周りにいるのですが、jqueryなどを扱えるJavaScriptのプログラマが周りにいないもので、本当に困っておりましたので、本当に助かりました。

    いつもJavaScriptがらみになると、正直困ってしまって…
    外注先を探すのも意外に一苦労ですし…

    HALSPECIALさんの連絡先を教えて欲しいぐらいです(笑)

    この度は本当にありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません