jQueryについて

Question

$(function () {
  //cookieの値がonじゃなかったら表示させる
  if ($.cookie('bnrRead') != 'on') {
    $('#main').append('次回以降は表示させないように出来る要素次回以降は表示させない');
  }
  //隠すボタンをクリックしたらバナーを隠す
  $('#btn').click(function() {
    $('#bnr').hide();
    $.cookie('bnrRead', 'on', { //cookieにbnrReadという名前でonという値をセット
        expires: 7, //cookieの有効日数
        path:'/' //有効にするパス
      });
    });
  //cookieを削除する
  $('#del').click(function(){
    $.removeCookie('bnrRead' , { //bnrReadを削除
      path:'/' //有効にするパス
    });
  });
});


これを、既存のjsファイルにまとめる事は可能でしょうか？
纏める時にどういう記述になりますか？？

https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/sp_favorite_button.js
↑
ここに入れたいです。

Answer

ECマスターズの中野です。

いただいたこちらのご質問ですが、
明日担当より回答させていただきます。

お時間いただきますがお待ちいただきますよう
よろしくお願いいたします。

Answer

ECマスターズの田中です。

sp_favorite_button.jsの内容を確認したところ、
スマートフォン用の商品ページ共通説明文で使うJSファイルのようですが、
間違いないでしょうか。

その場合、先頭の「jquery-1.11.1.min.js」を読み込ませてしまうと
既存のjQueryを上書きしてしまい、エラーの原因となりますので、
まとめる内容から除外していただきますようお願いします。

次に、３つ目のタグの内容につきましては、
先頭の
$(function () {
を
jQuery(function ($) {
に書き換えていただいた上で、
との間のソースをそのまま
「sp_favorite_button.js」の先頭もしくは末尾に
ご記載いただければ結構です。

２つ目の「jquery.cookie.js」は、
他のscriptを動作させるために必要なscriptなので、
なるべく先頭で読み込ませる必要があります。
ファイルの内容をコピーして、
「sp_favorite_button.js」の先頭に貼り付けていただきますようお願いします。

Answer

田中さん★いつもありがとうございます(◍•ᴗ•◍)

今、変更かけてみたのですが、反映がまだなのか、出来ていないのか、何回もモータル出ちゃうので
(モータルウィンドウを一回クリックしたら表示されなくなるというスクリプトでした)
もう少ししてからまた見て見ようと思うのですが
もしかして

//cookieの値がonじゃなかったら表示させる
↑
アイフォンのプライベートモードじゃ、どうやっても毎回出ちゃいますか？(;・∀・)

あとついでに
「× Close」←が、「～ Close」と表示されるのは、画像入れて対応するしかないとかでしょうか？
似たような記号で
&times;　とか　&#0215;　とか
入れてみたのですが、そのまんまの英語羅列で表示されてしまいました＞＜

Answer

ECマスターズの田中です。

> アイフォンのプライベートモードじゃ、どうやっても毎回出ちゃいますか？(;・∀・)
プライベートモードの場合、タブを閉じずに更新すれば出ないはずですが、
現在は、通常でも毎回表示される状態になっております。

まずは、「sp_favorite_button.js」を正しく修正していただきますようお願いします。

タグはHTMLの文法ですので、
JSファイルの中にはタグは書かず、
タグで囲まれたソースのみを書いていただく必要がございます。

つまり、

はHTMLの文法のため、「jquery.cookie.js」の内容をコピーしていただく必要がございます。

ですが、コピー元になるはずの「jquery.cookie.js」が、GOLDにありませんでしたので、
https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js
を開いて、内容全てを、つまり /*! から })); までを
 と置き換えていただきますようお願いします。

また、後半にある

と

も、削除していただきますようお願いします。

> 「× Close」←が、「～ Close」と表示されるのは、画像入れて対応するしかないとかでしょうか？

「banner.css」を読み込む時に文字化けしていることが原因です。
「banner.css」の一行目として
@charset "shift-jis";
をご記載いただきますようお願いします。

Answer

ありがとうございます☆
修正完了したら、追従のお気に入りボタンとLINEシェアボタンが消えてしまいました＞＜
(原田さん経由で田中さん直伝のLINE＆お気に入りボタン！)

「× Close」は × 表示されましたヽ(´ω｀*)人(*´ω｀)ﾉ
間にutf-8指定してるのですが、問題無いでしょうか？(@charset "shift-jis";を消してもお気に入りボタンは出てきませんでした！)

Answer

あっ！あと、私が入れてるグーグル拡張機能のプログラムも
https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js
の中に入っていそうなのですが
どれを消して良いかわかりませんので、
特定できればお願いします＞＜

Answer

↑何度もすみません、
全選択したら付箋メモの文字内容もコピーしていただけでした(;'∀')ｗ
私が入れてるグーグル拡張機能のプログラムの話はスルーしてください(;^ω^)

Answer

ECマスターズの田中です。

> 修正完了したら、追従のお気に入りボタンとLINEシェアボタンが消えてしまいました＞＜

https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/sp_favorite_button.js
を直接開いていただくとおわかりいただけると思うのですが、
新しい内容が楽天GOLDに反映されていないことが原因です。

反映をお待ちいただくか、
JSファイルを読み込むURLに対して
https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/sp_favorite_button.js?test
のように、?に続けてパラメータを追加していただくことで
解決することができます。

> 間にutf-8指定してるのですが、問題無いでしょうか？

ファイルの先頭の記述のみ認識されるため、問題はありませんが、
今後混乱を招く可能性もございますので、削除していただくことをオススメします。

Answer

ECマスターズの田中です。

すみません、只今
https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/sp_favorite_button.js
の内容を再度確認したところ、
「jquery.cookie.js」の内容が最後まで貼り付けられていないことがわかりました。

このままですと、再びエラーが発生してしまいますので、
再度コピー・貼り付けを行っていただきますようお願いします。
メモ帳で作業されている場合は、編集→すべて選択 より、確実に全選択していただくことができます。

Answer

ありがとうございます☆
LINE＆お気に入りボタン復活しましたヽ(´ω｀*)人(*´ω｀)ﾉ

モータル、私のスマホでやっぱ出ちゃうんですが、
田中さんも出ますか？？？

utf-8消しときます☆

Answer

ECマスターズの田中です。

> モータル、私のスマホでやっぱ出ちゃうんですが、
> 田中さんも出ますか？？？

確かに表示されるのですが、
https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/sp_favorite_button.js?test
が、「jquery.cookie.js」の貼り付けが不完全の状態で読み込まれていることが
原因である可能性が高いので、
https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/sp_favorite_button.js?test2
など、改めてURL末尾のパラメータを別の値にしていただきますようお願いします。

Answer

test2に変更してみたのですが、どうでしょうか？？
私のスマホでは、変わらず出ちゃいます(´;ω;｀)

Answer

ECマスターズの田中です。

お手間を取らせてしまって申し訳ありません。
改めてソースを確認したところ、
JavaScriptのソースとHTMLが紐付いておらず、
表示・非表示の制御ができていないことがわかりました。

つきましては、モーダルウィンドウの制御の部分を、
下記ソースに差し替えていただきますようお願いします。

jQuery(function ($) {
  var k = 'bnrRead';
  if (localStorage.getItem(k) !== 'on') {
    $('#modal').prop('checked',false);
  }
  $('#modal').change(function(){
    console.log('changed');
    if($('#modal').prop('checked')){
      localStorage.setItem(k,'on');
    }
  });
});

なお、差し替え後はjquery.cookie.jsを使わなくなりますので、
先頭に貼り付けていただいた「jquery.cookie.js」の内容は、
削除していただいても構いません。

また、差し替え前は、非表示にしてから７日後に再び表示される設定でしたが、
差し替え後は、履歴削除を行わない限り、表示されなくなります。
別のバナーを表示させたい場合は、
var k = 'bnrRead';
の「bnrRead」を、別の半角英数字による文字列に差し替えていただきますようお願いします。

Answer

いえいえ！こちらこそ！
ありがとうございます☆

変更してみましたが、まだ出ています・・・？？
(.test3に変更もしました！)

Answer

ECマスターズの田中です。

> 変更してみましたが、まだ出ています・・・？？

案内が漏れており申し訳ありません。
商品ページ共通説明文に含まれる

に対して

のように、「 checked」を追記していただきますようお願いします。

Answer

おおおお！！！！
田中さんありがとうございます！！
成功しましたヽ(´ω｀*)人(*´ω｀)ﾉ★

ちなみに↓
別のバナーを表示させたい場合は、
var k = 'bnrRead';
の「bnrRead」を、別の半角英数字による文字列に差し替えていただきますようお願いします。
↑
ここよくわからなかったのですが、
もし違うクーポン等日別で表示させたい場合は「bnrRead」←この中の文字を適当に(例えば「1000」とか)に変えたら良いって事でしょうか？？

Answer

ECマスターズの田中です。

> もし違うクーポン等日別で表示させたい場合は「bnrRead」←この中の文字を適当に(例えば「1000」とか)に変えたら良いって事でしょうか？？

はい、そのように変えていただければ結構です。

もし可能であれば、仕組みの特徴における都合から、
先頭の文字は半角英字にしていただけると幸いです。
例）
var k = 'coupon190213';

Answer

ありがとうございます∩^ω^∩
了解しました♪
それでは、解決済にさせて頂きます☆

田中さん★ありがとうございました∩^ω^∩