人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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の記述をお願い致します。

●質問者: touya-akane
●カテゴリ:ウェブ制作
✍キーワード:cookie ECサイト JavaScript SCRIPT swap
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● y-kawaz
●20ポイント

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

[
<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だけでやる場合はこんな感じでいけるかと。

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

◎質問者からの返答

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

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

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

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

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


2 ● mattn
●20ポイント

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

◎質問者からの返答

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

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

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

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

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

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


3 ● HALSPECIAL
●22ポイント

まず、

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>
<!-- ここまでを追加してください -->

◎質問者からの返答

ありがとうございます!

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

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

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

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

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

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

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

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

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


4 ● HALSPECIAL
●4000ポイント ベストアンサー

再回答ですみません。

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

<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>
<!-- ★ここまでのスクリプトで置き換えてください。 -->

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

◎質問者からの返答

HALSPECIAL様

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ